talgacapri 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
- 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 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
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 ← Navigation
Text Input:
[_______________] ← Input field
[_____________] 🔍 ← Search box
Dropdown:
[Select Option ▼]
Checkboxes/Radio:
[ ] Checkbox option
[x] Checked option
( ) Radio option
(•) Selected radio
Toggle:
[ON | OFF ] ← Toggle switch
Tabs:
┌─────┬─────┬─────┐
│ Tab1│ Tab2│ Tab3│
└─────┴─────┴─────┘
Cards:
┌─────────────────────────┐
│ Card Title │
│ ─────────────────────── │
│ Card content goes here │
│ │
│ [ Action ] │
└─────────────────────────┘
Lists:
• List item 1
• List item 2
• List item 3
Tables:
┌────────┬──────────┬────────┐
│ 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
× Close
Step 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 match
Step 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 consistent
Step 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)
Example Wireframes
Example 1: Login Screen
┌─────────────────────────────────────┐
│ │
│ [ App Logo ] │
│ │
│ Welcome Back! │
│ Sign in to continue │
│ │
│ Email │
│ [_____________________] │
│ │
│ Password │
│ [_____________________] 👁️ │
│ │
│ [x] Remember me Forgot pwd? │
│ │
│ [ Sign In ] │
│ │
│ ─────── or ─────── │
│ │
│ ( Sign in with Google ) │
│ ( Sign in with GitHub ) │
│ │
│ Don't have an account? Sign up │
│ │
└─────────────────────────────────────┘
Example 2: Dashboard
┌──────────────────────────────────────────────────────────────┐
│ 📊 Dashboard [Search...] 🔍 🔔 👤 ⚙️ │
└──────────────────────────────────────────────────────────────┘
┌────────┬─────────────────────────────────────────────────────┐
│ │ │
│ Home │ Overview │
│ Team │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ Files │ │ Total │ │ Active │ │ Revenue │ │
│ Reports│ │ Users │ │ Projects │ │ $125K │ │
│ Settings│ │ 1,234 │ │ 42 │ │ +12% ▲ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ │
│ │ │
│ │ Recent Activity │
│ │ ┌──────────────────────────────────────────────┐ │
│ │ │ Project Alpha completed 2h ago │ │
│ │ │ New user signup: john@co.com 3h ago │ │
│ │ │ Team Beta shipped v2.0 5h ago │ │
│ │ │ [View All Activity →] │ │
│ │ └──────────────────────────────────────────────┘ │
│ │ │
└────────┴─────────────────────────────────────────────────────┘
Example 3: Settings Page with Tabs
┌────────────────────────────────────────────────────────────┐
│ ⚙️ Settings │
└────────────────────────────────────────────────────────────┘
┌─────────┬──────────┬──────────┬──────────┐
│ Profile │ Security │ Billing │ Team │ ← Tabs
└─────────┴──────────┴──────────┴──────────┘
┌────────────────────────────────────────────────────────────┐
│ │
│ Profile Information │
│ ──────────────── │
│ │
│ Photo │
│ [ Avatar ] ( Upload New Photo ) │
│ │
│ Full Name │
│ [John Doe___________________________] │
│ │
│ Email Address │
│ [john@example.com___________________] │
│ │
│ Job Title │
│ [Product Manager____________________] │
│ │
│ Bio │
│ [____________________________________] │
│ [____________________________________] │
│ [____________________________________] │
│ │
│ [ Save Changes ] ( Cancel ) │
│ │
└────────────────────────────────────────────────────────────┘
Example 4: Mobile View (Narrow)
┌──────────────────────┐
│ ☰ Logo 🔔 👤 │
└──────────────────────┘
│ │
│ Welcome, John! │
│ │
│ ┌────────────────┐ │
│ │ Quick Actions │ │
│ │ ────────────── │ │
│ │ + New Task │ │
│ │ 📊 View Stats │ │
│ │ 👥 Team │ │
│ └────────────────┘ │
│ │
│ Today's Tasks │
│ ──────────────── │
│ [x] Task 1 │
│ [ ] Task 2 │
│ [ ] Task 3 │
│ │
│ [View All →] │
│ │
└──────────────────────┘
Output Format
Every napkin sketch delivery should follow this structure:
### [Feature Name] - Napkin Sketch
**Context:** [1-2 sentences on what this solves]
**Screens:** [N screens]
#### Screen 1: [Name]
[ASCII wireframe]
**Key interactions:** [What users can do]
**State variations:** [Empty, loading, error, success]
#### Screen 2: [Name]
[ASCII wireframe]
**Key interactions:** [What users can do]
**State variations:** [Empty, loading, error, success]
#### Flow Summary
[ASCII flow diagram showing screen-to-screen navigation]
e.g.,
[Screen 1] --click "Next"--> [Screen 2] --submit--> [Screen 3: Confirmation]
\--click "Back"--> [Screen 1]
#### Design Notes
- [Key design decisions and rationale]
- [Accessibility considerations]
- [Mobile considerations]
Mobile-First Variant
If the feature is primarily mobile or responsive, include a mobile viewport wireframe (320px width) alongside the desktop version.
Mobile frame format:
┌──────────┐
│ ☰ Logo │
├──────────┤
│ │
│ Content │
│ stacked │
│ vertically│
│ │
│ [Button] │
│ │
└──────────┘
When to include mobile wireframes:
- Feature is mobile-first or mobile-only
- PM explicitly asks for responsive design
- Feature involves touch interactions (swipe, pinch, tap)
- The PRD specifies mobile as a target platform
Side-by-side format for responsive features:
Desktop (1024px+) Mobile (320px)
┌──────────┬────────────────────┐ ┌──────────┐
│ Sidebar │ Main Content │ │ ☰ Header │
│ │ │ ├──────────┤
│ │ │ │ Content │
└──────────┴────────────────────┘ └──────────┘
Pro Tips
- Start simple: Rectangle with labels → detailed wireframe
- Consistency: Use same symbols throughout (don't mix styles)
- Annotations matter: Arrow + note explains what text can't
- Show state variations: Normal, hover, error, loading, empty
- Mobile-first: Start with narrow layout if responsive
- Real content: Use realistic text, not "lorem ipsum"
- Component library: Save common patterns to reuse
Common Symbols Reference
Boxes/Containers:
┌─┐ └─┘ ├─┤ ┬ ┴ ┼
Lines:
─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼
Arrows:
← → ↑ ↓ ↔ ↕
Bullets/Icons:
• ○ ◦ ■ □ ▪ ▫ ▸ ▹ ► ◄ ▲ ▼
Checkboxes:
[ ] [x] [~]
Common UI:
⚙️ 🔔 👤 📊 🗑️ ✏️ 🔍 + × ⋮ ☰
Integration with Other Skills
Feeds into:
/prd-draft- Include wireframes in PRDs/generate-ai-prototype- Use as reference for AI prototype prompts/create-tickets- Engineers see wireframe in ticket
Follows:
/interview-guide- Wireframes help structure interview questions/journey-map- Map user journey, wireframe each touchpoint
Context Routing (Check Before Wireframing)
Before creating any wireframe, check these sources:
| Source | Files | What to Extract |
|---|---|---|
| Active PRD | context-library/prds/*.md, outputs/prds/*.md |
UI requirements, user flows, feature scope, non-goals (what NOT to design) |
| User Research | context-library/research/*.md |
Pain points to solve, user quotes about current UX frustrations |
| Stakeholder Profiles | context-library/stakeholder-template.md |
Designer preferences (e.g., Lisa wants accessibility-first), exec priorities |
| Design System | Any design docs or style references in workspace | Colors, component patterns, layout conventions to follow |
| Past Prototypes | outputs/prototypes/*.md |
Existing wireframes for consistency, decisions already made |
| Business Context | context-library/business-info-template.md |
Product type, user personas, platform (web/mobile/both) |
Priority: PRD requirements first (the wireframe must match the spec), then user research (ground the design in real pain points), then past prototypes (maintain consistency).
Questions to Ask Before Wireframing
- What's the goal? Align stakeholders or guide designers?
- Desktop or mobile? Or both?
- Match existing UI? Use browser capture if yes
- What states? Empty, loading, error, success?
- Who's the audience? Engineers, designers, stakeholders?
Output Quality Self-Check
Before delivering the napkin sketch, verify:
- Output format followed -- Uses the structured output template (context, screens, flow summary, design notes)
- All requested screens included -- Every screen the PM asked for is sketched
- State variations shown -- At minimum: default state and one alternate state (empty, error, or loading)
- Annotations are clear -- Key interactions and non-obvious elements are labeled
- Consistent symbols -- Same symbol conventions used throughout (no mixing button styles, etc.)
- Realistic content -- Sample text looks production-like, not placeholder "lorem ipsum"
- Mobile variant included -- If feature is mobile/responsive, a mobile wireframe is provided
- Flow diagram present -- For multi-screen features, screen-to-screen navigation is shown
- Context checked -- PRD requirements, user research, and past prototypes referenced before wireframing
- Actionable for next step -- Wireframe is clear enough to feed into
/generate-ai-prototypeor/create-tickets
If any check fails, fix it before delivering. A 5-minute wireframe should save hours of miscommunication.
Remember: Wireframes are thinking tools, not art. Good enough to communicate is perfect. The best wireframe is the one you can draw in 5 minutes.