Wireframe Sketch Skill
SkillDocs & knowledgewireframe-sketch is a skill that guides an AI agent to produce hand-drawn style website wireframes that look like sketches on graph paper. Instead of finished UI, it creates a single low-fidelity page with pencil and marker tones, sticky-note annotations, and hatched chart placeholders, one self-contained HTML file that reads like a designer's whiteboard before any pixels are committed.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent setup that supports loading skills.
Then ask your AI: use the Wireframe Sketch Skill skill
What your AI can do with it
- Produce a single low-fidelity wireframe page as one self-contained HTML file
- Draw a graph-paper grid background with sharpie-style thick rounded borders
- Show 3-4 screen variants as tab labels with one active, highlighter-swiped tab
- Add sticky-note annotations pinned over key regions with marker text
- Render scribbled KPI numbers, hand-drawn line charts, and hatched bar chart placeholders
- Include a sketched browser chrome row with a hand-written-style URL bar
Getting started
- Have an agent setup that supports loading skills.
- Add the wireframe-sketch skill to the agent's available skills.
- Ask for a wireframe, sketch, lo-fi mockup, or whiteboard sketch of the screen you want.
- Receive the result as a single HTML file inside an artifact block and open it to view the sketch.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/wireframe-sketch/SKILL.md and read by ahel’s review.
Produce a single hand-drawn wireframe page. The whole point is "this is a sketch" — looseness is the brand. Lean into pencil/marker tones, hatched fills, dashed borders, slight rotations.
Workflow
- Skip the DESIGN.md if it pushes for finished UI. This skill explicitly wants a low-fidelity look. Only honor type tokens loosely (system serif for headlines, mono for annotations, marker font fallback).
- Pick the screen variants from the brief — typically 3–4 tab labels like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs.
- Layout, in order:
- Page header — bold serif title with a fake "WIREFRAME v0.1" tag pinned next to it (dashed border, slight rotation). Below: one-line subtitle in marker italic + a date / device / fidelity dateline on the right in mono.
- Tab strip — 4–5 labels with marker check-square glyphs. The active one has a highlighter swipe behind it (yellow / orange tint + slight skew).
- Sketch canvas — a graph-paper card (background: 24px × 24px grid
drawn with
linear-gradientlines), with a thick rounded border drawn to look like a sharpie line. - Browser chrome row — three sketched circles + a fake URL bar with a hand-written-style URL.
- Sidebar nav — sketched checkbox + label for each nav item, marker italic. One has a highlighter line through it (active).
- KPI tiles — 3–4 boxes, each with a chunky scribbled number in a marker-style stroke, a tiny accent stamp, and a one-line label.
- Chart placeholder — a card with a hand-drawn axis and a wobbly polyline. Add 3–4 dot markers.
- Bar chart placeholder — a card with hatched-fill rectangles of varying heights.
- Sticky notes — 1–2 yellow / pink notes with marker text, taped with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review".
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- Use the system's available "Caveat", "Patrick Hand", or "Architects Daughter" fonts via Google Fonts; otherwise fall back to italic serif.
- Slight rotations everywhere (
transform: rotate(-0.6deg)) to break the grid and feel hand-drawn. data-od-idon header, tabs, sidebar, KPIs, chart, bar-chart, sticky notes.
- Self-check:
- The page should not look pixel-perfect. If it does, you over-rendered.
- Marker / pencil + graph paper + hatched fills + sticky notes are all present; if any is missing, add it.
- The active tab has the highlighter swipe; the others don't.
Output contract
Emit between <artifact> tags:
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- When should this skill be used?
- When the brief asks for a "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", or low-fidelity mockup, or the Chinese equivalents like 草图 or 手绘原型.
- What does the output look like?
- One self-contained HTML file styled like a designer's whiteboard sketch: graph-paper background, pencil and marker tones, dashed borders, slight rotations, sticky notes, and hatched chart placeholders.
Advanced
- Item type
- skill
- Key
wireframe-sketch-2- Source
- github.com/nexu-io/open-design