wireframe-sketch
Best for Early-stage designWorks with GitHubLow risk
⌘source
- author
@nexu-io- language
- TypeScript
★3.7kstars
455forks
Apr 29, 2026
✦overview.md
Key Features
- ·Hand-drawn aesthetic
- ·Graph-paper background
- ·Multiple tabbed variants
- ·Sticky-note annotations
- ·Hatched chart placeholders
- ·Marker/pencil tone styling
Use Cases
- →Explore layout variants early in product design
- →Communicate rough concepts in whiteboard-style mockups
- →Sketch low-fidelity wireframes for stakeholder feedback
Best for
- ✓Early-stage design
- ✓Lo-fi prototyping
- ✓Whiteboard-style mockups
Not ideal for
- !High-fidelity UI
- !Production-ready designs
FAQs
name
wireframe-sketch
description
A hand-drawn wireframe exploration — graph-paper background, marker /
pencil tone, multiple tab labels for variants, sticky-note annotations,
scribbled chart placeholders, hatched fills. Reads like a designer's
whiteboard before any pixels are committed. Use when the brief asks for
"wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard",
"草稿", or "手绘原型".
triggers:["wireframe","sketch wireframe","lo-fi mockup","hand drawn","whiteboard sketch","low fidelity","手绘原型","草图","线框图"]
od:{"mode":"prototype","platform":"desktop","scenario":"design","fidelity":"wireframe","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false,"sections":["color","typography","layout","components"]},"example_prompt":"Sketch a hand-drawn wireframe v0.1 for a portal — four tabbed variants on graph paper, marker headlines, sticky-note annotations, hatched chart placeholders."}
Wireframe Sketch Skill
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
$install
1-click copynpx skills add nexu-io/open-design --skill wireframe-sketchSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.