Skip to content
Get packs

Annotated Wireframe Designer

Creates flat annotated landing-page wireframes with numbered pins and a spec panel

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent produces a single clean, low-fidelity HTML wireframe of a desktop landing page, drawn as grey placeholder blocks inside a browser frame. Numbered callout pins mark key regions like the nav, hero, logo strip, feature grid and footer, and a side panel explains each pin with a short design or engineering note. It is meant for planning layout and handoff, not for finished visuals.

Great for

  • Designers sketching page structure before committing to visual details
  • Product managers or developers who need a redline-style spec to hand off
  • Teams that want quick thumbnail-style layout reviews

Skip it if

  • Final pixel-perfect UI or production page code, since the output is intentionally greyscale and flat
  • Hand-drawn or sketch-style mockups, which this skill explicitly avoids

Try asking

  • “Draw an annotated redline wireframe for a desktop SaaS landing page with numbered pins and a spec panel”
  • “Create a lo-fi wireframe with spec notes for a product launch page”
  • “Make a redline wireframe of a pricing page with engineering notes per section”
Step-by-step guide: how to use Annotated Wireframe DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    wireframe-annotated.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip wireframe-annotated.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip wireframe-annotated.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the sections you want (nav, hero, logo strip, feature grid, footer) to get the closest match to the example layout
  • Ask for a specific accent colour (coral or blue) if you want to match a brand, though the skill suggests one accent only
  • Open the resulting HTML in a browser to check it reads clearly at thumbnail size

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.