Skip to content
Get packs

Wireframe Sketch

Generates a hand-drawn, low-fidelity wireframe HTML page with sketch-style visuals.

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

What it does

When you ask for a wireframe, sketch, lo-fi mockup or whiteboard-style layout, the agent produces a single web page that looks like a rough pencil or marker drawing on graph paper, not a finished design. It includes tab labels for alternative variants, sticky-note comments, hatched chart placeholders and KPI boxes, so you can discuss layout and structure before committing to polished visuals.

Great for

  • Designers who want quick, low-fidelity layout options to discuss with stakeholders
  • Product teams sketching several screen variants before development
  • Anyone who wants a rough visual concept instead of pixel-perfect UI

Skip it if

  • Producing production-ready UI, since the skill deliberately avoids polish and ignores finished design guidance
  • Situations needing accurate brand fonts or exact styling, because it only loosely honours type tokens

Try asking

  • “Sketch a hand-drawn wireframe v0.1 for a customer portal with four tabbed layout variants”
  • “Make a lo-fi whiteboard-style mockup of a dashboard with sticky-note comments”
  • “Create a hand-drawn wireframe for a settings page with hatched chart placeholders”
Step-by-step guide: how to use Wireframe SketchInstall, 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-sketch.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip wireframe-sketch.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 screen type and number of variants in your request, for example 'three tabbed variants of a checkout flow'.
  • Expect an intentionally imprecise look; ask for specific sections or annotations to be added or removed.
  • Review the generated HTML before sharing, since it may load external Google Fonts.

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.