napkin-sketchlisted

# Napkin Sketch Skill **Design system:** Before sketching any screen, read your product's design system (typically in `context-library/design-system/` or similar). Annotate wireframes with the correct tokens (e.g. "primary button: [your primary color], [your radius scale]", "card: [your surface bg], [your shadow]"). Spacing annotations should use your spacing grid token names (most teams use an 8pt grid). Create quick wireframes as ASCII art OR capture existing UI from browser to match design systems. ## Quick Start 1. Tell me what screen or feature you want to sketch 2. I'll ask: **New design** (ASCII wireframe) or **Match existing** (browser capture)? 3. For new designs, I ask about layout, key components, and states 4. I generate ASCII wireframes with annotations and state variations 5. Use the wireframe in PRDs, tickets, or as input for `/generate-ai-prototype` **Example:** "Sketch a settings page with tabs for Profile, Security, and Billing" **Output:** Wireframe delivered inline, also saved to `outputs/prototypes/[feature]-napkin-sketch.md` **Time:** 5-10 minutes per screen ## When to Use This Skill **ASCII Wireframes (New Designs):** - Communicating initial UI concepts - Before involving designers - PRD illustrations - Quick stakeholder alignment **Browser Capture (Existing Patterns):** - "Make it look like our existing product" - Referencing design system components - Showing exactly what UI to match - Documenting current state before changes ## Two Modes