Agent skill · design visual · paperclipai
wireframe
Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.
Why this skill is useful
Provides specific SVG generation instructions and design standards for low-fidelity wireframes that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 75,771 stars on the source repository.
What this skill does
Wireframe Produce low-fidelity, black-and-white UI wireframes as standalone SVG files. The goal is to communicate structure — what goes where, in what order, at roughly what size — without committing to colour, brand, or polish. When to use Trigger on phrases like: "wireframe a [screen / page / flow] for X" "low-fi / lo-fi mockup of X" "draft a layout for X" "rough sketch of the [dashboard / settings / login / ...] page" "show me how X would lay out before I build it" Skip and defer to frontend-design (or similar) when the request mentions: brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables. House style — non-negotiable Wireframes are diagnostic, not decorative. Lock these tokens on every output: Token Value Notes ---------------- ------------------------------------------------- -------------------------------------- Stroke #000 width 1.5 All borders, dividers, outlines Fill (boxes) #fff Default for cards/containers Placeholder fill #e6e6e6 Image/avatar/empty-state regions Text colour #000 for labels, #666 for placeholder text No other colours Accent #d33 (dashed) — annotation layer ONLY Never inside real UI elements Font font-family="-apple-system, system-ui, sans-serif" Single typeface across the whole file Type scale 12 caption · 14 body · 20 heading · 28 title No other sizes Grid 8px snap, 24px gutter All x/y/w/h must be multiples of 8 Default canvas 1280×800 desktop, 375×812 mobile, 768×1024 tablet Pick one and state it in the comment If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself. Workflow 1. Confirm scope. What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one question, then proceed with the most likely default. 2. Pick a canvas from the table above. State the viewport in your reply. 3. Compose from primitives. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills paperclipai/wireframe