agentsclimarketplace

Wireframe annotated

Skill nexu-io/open-design/plugins/_official/examples/wireframe-annotated

🎨 The open-source Claude Design alternative. πŸ–₯️ Local-first desktop app. πŸ–ΌοΈ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video β€” real files, HTML/PDF/PPTX/MP4 export. πŸ€– Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install
npx -y skills add nexu-io/open-design --skill wireframe-annotated

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

An annotated / redline lo-fi wireframe β€” a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (β‘ β‘‘β‘’β‘£β‘€) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style β€” clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线摆图", "标注线摆", or "redline".

SKILL.md

3.8 KB, as published. Nobody here has run it

Wireframe Annotated Skill

Produce a single flat, low-fidelity landing-page wireframe with a redline spec. The whole point is "structure + handoff notes, not pixels" β€” greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note. Keep it clean and flat; never hand-drawn or scribbly.

Workflow

  1. Skip finished UI. This skill explicitly wants a low-fidelity greybox look. Honor type tokens only loosely (one clean sans like Inter / system-ui for labels, one mono like IBM Plex Mono for the spec notes and pin numbers). Use medium-grey fills with defined darker borders so the page reads as a thumbnail β€” avoid near-white-on-white, which renders blank.

  2. Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE accent color (coral or blue) and use it ONLY for the numbered pins and the matching spec numbers β€” everything else stays greyscale.

  3. Lay out the canvas, top to bottom, each block a greybox with a numbered pin absolutely positioned on it:

    • Top nav β€” logo greybox + nav lorem-bars + a primary button block. Pin β‘ .
    • Hero β€” big headline lorem bars + subhead + two CTA button blocks on the left; a large image placeholder (rect with a diagonal X) on the right. Pin β‘‘.
    • Logo strip β€” a row of 5 small greybox partner logos. Pin β‘’.
    • Feature grid β€” 3 cards, each an icon square + title bar + 2 text bars. Pin β‘£.
    • Footer β€” columns of lorem link-bars. Pin β‘€.

  4. Mirror every pin in the spec panel. Each spec row = the circled number in the accent color + a short mono/sans note, e.g. "β‘  Sticky nav, 64px, condenses on scroll", "β‘‘ Hero H1 48/56, CTA pair primary+ghost", "β‘’ 5 partner logos, greyscale", "β‘£ 3-up at β‰₯960px β†’ 1-up mobile", "β‘€ 4-col footer, legal row". Mark the panel and each row with data-od-id.

  5. Self-check:

    • Every numbered pin on the canvas has exactly one matching spec row.
    • The accent color appears ONLY on pins + spec numbers; the rest is greyscale.
    • The page should read clearly at thumbnail size; if blocks vanish into the background, darken the fills/borders.
    • It must NOT look pixel-perfect or hand-drawn β€” flat greyboxes only.

Output contract

Emit between <artifact> tags:

<artifact identifier="wireframe-slug" type="text/html" title="Annotated Wireframe β€” Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.