Napkin Sketch Skill
Create quick wireframes as ASCII art OR capture existing UI from browser to match design systems.
Quick Start
- Tell me what screen or feature you want to sketch
- I'll ask: New design (ASCII wireframe) or Match existing (browser capture)?
- For new designs, I ask about layout, key components, and states
- I generate ASCII wireframes with annotations and state variations
- 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 thoughts/shared/product/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
Mode 1: ASCII Wireframe
Quick sketch of new UI concept using text/symbols
Mode 2: Browser Capture
Screenshot existing product UI to reference for new features
Workflow - Mode 1: ASCII Wireframe
Step 1: Define Layout Structure
Choose layout type:
Single Column (Simple):
┌────────────────────────────────────┐
│ Header │
├────────────────────────────────────┤
│ │
│ Main Content Area │
│ │
├────────────────────────────────────┤
│ Footer │
└────────────────────────────────────┘Two Column (Dashboard):
┌──────────┬─────────────────────────┐
│ │ │
│ Sidebar │ Main Content │
│ │ │
│ │ │
└──────────┴─────────────────────────┘Three Column (Complex):
┌──────┬────────────────────┬────────┐
│ Nav │ │ Aside │
│ │ Main Content │ │
│ │ │ │
└──────┴────────────────────┴────────┘Step 2: Add UI Components
Common component representations:
Buttons:
[ Button Text ] ← Primary button
( Button Text ) ← Secondary button
< Back ← NavigationText Input:
[_______________] ← Input field
[_____________] 🔍 ← Search boxDropdown:
[Select Option ▼]Checkboxes/Radio:
[ ] Checkbox option
[x] Checked option
( ) Radio option
(•) Selected radioToggle:
[ON | OFF ] ← Toggle switchTabs:
┌─────┬─────┬─────┐
│ Tab1│ Tab2│ Tab3│
└─────┴─────┴─────┘Cards:
┌─────────────────────────┐
│ Card Title │
│ ─────────────────────── │
│ Card content goes here │
│ │
│ [ Action ] │
└─────────────────────────┘Lists:
• List item 1
• List item 2
• List item 3Tables:
┌────────┬──────────┬────────┐
│ Col 1 │ Col 2 │ Col 3 │
├────────┼──────────┼────────┤
│ Data 1 │ Data 2 │ Data 3 │
│ Data 4 │ Data 5 │ Data 6 │
└────────┴──────────┴────────┘Icons (use emoji):
⚙️ Settings
👤 Profile
🔔 Notifications
📊 Analytics
✏️ Edit
🗑️ Delete
+ Add
× CloseStep 3: Build Complete Screen
Example: User Profile Page
┌───────────────────────────────────────────────────────────┐
│ Logo Search [___________] 🔍 👤 Profile ▼ │
└───────────────────────────────────────────────────────────┘
┌──────────────┬────────────────────────────────────────────┐
│ │ │
│ Navigation │ ┌──────────────────────────────────────┐ │
│ │ │ Profile Picture │ │
│ > Dashboard │ │ [ Photo ] │ │
│ Profile │ │ │ │
│ Settings │ │ Name: John Doe │ │
│ Billing │ │ Email: john@example.com │ │
│ │ │ Role: Product Manager │ │
│ │ │ │ │
│ │ │ [ Edit Profile ] │ │
│ │ └──────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────────────────────────────┐ │
│ │ │ Recent Activity │ │
│ │ │ ────────────────────────────────── │ │
│ │ │ • Updated PRD: Feature X 2h ago │ │
│ │ │ • Commented on ticket #123 5h ago │ │
│ │ │ • Reviewed design mockups 1d ago │ │
│ │ └──────────────────────────────────────┘ │
│ │ │
└──────────────┴────────────────────────────────────────────┘Step 4: Add Annotations
┌─────────────────────────────────────┐
│ [Search bar] 🔍 [+ New] [Filter]│ ← Actions top-right
├─────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Card 1 │ │ Card 2 │ │ ← Grid of cards
│ │ [...] │ │ [...] │ │
│ └─────────────┘ └─────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Card 3 │ │ Card 4 │ │
│ │ [...] │ │ [...] │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────┘
↑
Pagination: < 1 2 3 4 5 >Step 5: Show States
Document different UI states:
Empty State:
┌─────────────────────────────────┐
│ │
│ No items yet │
│ │
│ [ + Create First Item ] │
│ │
└─────────────────────────────────┘Loading State:
┌─────────────────────────────────┐
│ │
│ Loading... │
│ ⏳ │
│ │
└─────────────────────────────────┘Error State:
┌─────────────────────────────────┐
│ ⚠️ Error │
│ Something went wrong. │
│ [ Try Again ] │
└─────────────────────────────────┘Workflow - Mode 2: Browser Capture
Step 1: Navigate to Reference UI
Use browser automation to capture existing product UI:
1. Open browser to product
2. Navigate to relevant screen
3. Take screenshot of specific component
4. Annotate what to matchStep 2: Capture Component
Target component: [e.g., "Navigation bar"]
Screenshot: [Capture of existing nav]
Annotations:
→ Match this exact color scheme
→ Use same button style
→ Keep icon placement consistentStep 3: Document Design Tokens
Extract design system details:
From screenshot analysis:
Colors:
- Primary: #3B82F6 (blue)
- Secondary: #10B981 (green)
- Background: #F9FAFB (light gray)
Typography:
- Headings: 24px, bold
- Body: 16px, regular
- Labels: 14px, medium
Spacing:
- Padding: 16px
- Gaps: 12px
- Border radius: 8px
Components:
- Button height: 40px
- Input height: 40px
- Card shadow: 0 1px 3px rgba(0,0,0,0.1)Step 4: Create "Match This" Spec
New Feature: [Feature name]
Design Requirement: Match existing [Component]
Reference Screenshot: [Link/embedded image]
What to match:
✅ Color palette (use primary blue #3B82F6)
✅ Button style (rounded, 40px height)
✅ Spacing (16px padding, 12px gaps)
✅ Typography (16px body text)
What can differ:
⚠️ Layout structure (new feature has different content)
⚠️ Icon choices (use similar style from icon library)