open-design-wireframe-sketch - SKILL.md Agent Skill

name: open-design-wireframe-sketch description: >- Generate hand-drawn lo-fi wireframe explorations as standalone HTML files — graph-paper background, marker/pencil tone, multiple tab-label variants, sticky-note annotations, scribbled chart placeholders, and hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the user asks to "wireframe", "sketch wireframe", "hand-drawn mockup", "lo-fi mockup", "whiteboard sketch", "low fidelity", "와이어프레임", "스케치", "로파이 목업", "화이트보드 스케치", or wants a rough visual exploration before committing to high-fidelity design Do NOT use for High-fidelity UI prototypes → use expert-html-designer or anthropic-frontend-design; Interactive React prototypes with state → use anthropic-web-artifacts-builder; Production component code → use fsd-development or implement-screen; Figma-to-code workflow → use figma-dev-pipeline; Design system token management → use...

Open Design: Wireframe Sketch

Generate hand-drawn lo-fi wireframe explorations as standalone HTML files — graph-paper background, marker/pencil tone, multiple tab-label variants, sticky-note annotations, scribbled chart placeholders, and hatched fills. Reads like a designer's whiteboard before any pixels are committed.

Adapted from nexu-io/open-design wireframe-sketch skill.

When to Use

Use when the user asks to "wireframe", "sketch wireframe", "hand-drawn mockup", "lo-fi mockup", "whiteboard sketch", "low fidelity", "와이어프레임", "스케치", "로파이 목업", "화이트보드 스케치", or wants a rough visual exploration before committing to high-fidelity design.

When NOT to Use

High-fidelity UI prototypes → use expert-html-designer or anthropic-frontend-design
Interactive React prototypes with state → use anthropic-web-artifacts-builder
Production component code → use fsd-development or implement-screen
Figma-to-code workflow → use figma-dev-pipeline
Design system token management → use tailwind-design-system

Output Specification

Format: Single self-contained HTML file (inline CSS + SVG)
Style: Graph-paper grid background, hand-drawn marker strokes, pencil annotations
Variants: 3-4 tabbed layout variants on same canvas
Annotations: Sticky-note style callouts for design rationale
Charts/Data: Hatched/scribbled placeholder blocks (no real data)
Resolution: Desktop viewport (1280px default), responsive optional

Workflow

Clarify scope: What screen/flow? How many variants?
Generate wireframe HTML: Create a single .html file with:
- CSS grid or flexbox layout on a graph-paper background
- Hand-drawn aesthetic (rough borders, marker-weight fonts, sketch fills)
- Tab navigation for multiple variants
- Sticky-note annotations explaining design choices
Save to: outputs/wireframes/{date}/{slug}-wireframe.html
Present: Open in browser or provide file path

Design System Integration

This skill does NOT require or enforce any design system. It intentionally produces unstyled, low-fidelity output to encourage broad exploration before locking into design tokens.

Example Prompt

"포탈 대시보드 와이어프레임을 4가지 변형으로 스케치해줘 — 그래프 페이퍼 위에 마커 스타일로, 각 변형에 스티커 노트 주석 포함"

"Sketch a hand-drawn wireframe v0.1 for a portal — four tabbed variants on graph paper, marker headlines, sticky-note annotations, hatched chart placeholders."