Skip to content
Get packs

Wireframe Sketch

Turns a request into a hand-drawn style, lo-fi wireframe HTML page with sticky notes and tabs.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill tells an AI agent to produce a rough, hand-sketched looking wireframe as a single web page. Instead of polished interface mockups, the output has a graph-paper background, marker-style strokes, scribbled chart placeholders with hatched fills, several tabbed variant labels, and yellow sticky-note annotations tilted slightly. It is meant for early exploration, when you want to test layout ideas quickly without looking final.

Great for

  • Designers exploring layout ideas on a whiteboard-style, pre-visual stage
  • Product teams who want to show stakeholders rough concepts without implying a finished design
  • Students or founders sketching a screen idea quickly in a browser

Skip it if

  • Production UI work where pixel-accurate, polished or accessible components are needed, since the skill deliberately avoids neat alignment
  • Situations needing a real design system or brand styling, because the skill only specifies a sketch aesthetic and font choices

Try asking

  • “Make a lo-fi wireframe for a checkout flow with three variant tabs and sticky-note comments”
  • “Sketch a dashboard layout with scribbled chart placeholders for a team review”
  • “Create a hand-drawn style desktop wireframe (about 1440px wide) for a settings page”
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

  • Describe the screens, number of variants, and key annotations you want so the tabs and sticky notes match your intent.
  • Open the generated HTML in a browser to review it; it is a static page, so no setup is needed.
  • The skill references fonts such as Caveat and Architects Daughter; check that they load in your environment or the handwriting look may fall back to defaults.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything 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.