# Sketch Text Strategy: Actual Text vs. Markers **Guidance for Creating WDS Sketches** --- ## The Two Approaches ### 1. Actual Text (Recommended for Headlines) **Draw readable text directly in sketch** ``` ┌─────────────────────────────────────┐ │ │ │ Every walk. on time. │ │ Every time. │ │ │ │ [Get Started - Free Forever] │ │ │ └─────────────────────────────────────┘ ``` **When to use:** - Headlines (H1, H2, H3) - Button labels - Navigation items - CTAs (calls-to-action) - Any short, important text **Why:** ✅ Agent can read and interpret text ✅ Provides content context ✅ Shows character count naturally ✅ Guides design decisions ✅ Can still be refined during specification ### 2. Horizontal Line Markers (For Body Text) **Draw lines to indicate text blocks** ``` ┌─────────────────────────────────────┐ │ │ │ ─────────────────────────────────── │ ← Body text │ ─────────────────────────────────── │ │ ─────────────────────────────────── │ │ ─────────────────────────────────── │ │ │ └─────────────────────────────────────┘ ``` **When to use:** - Body paragraphs - Long descriptions - Feature lists (when wording TBD) - Content where you want to show SIZE, not specific text **Why:** ✅ Faster to sketch ✅ Shows font size (distance between lines) ✅ Shows font weight (line thickness) ✅ Indicates capacity without committing to content ✅ Focuses on layout, not copywriting --- ## Mixed Approach (Recommended) **Combine both methods for best results:** ``` ┌──────────────────────────────────────────┐ │ │ │ Welcome to Dog Week │ ← ACTUAL TEXT (H1) │ │ │ ─────────────────────────────────────── │ ← LINE MARKERS │ ─────────────────────────────────────── │ ← (Body paragraph) │ ─────────────────────────────────────── │ │ ─────────────────────────────────────── │ │ │ │ [Start Planning] │ ← ACTUAL TEXT (CTA) │ │ └──────────────────────────────────────────┘ ``` **Result:** - Headlines provide content guidance - Body text shows sizing and capacity - Buttons show clear actions - Fast to sketch, still informative --- ## Dog Week Example ### Start Page Hero Sketch ``` ┌─────────────────────────────────────────────┐ │ │ │ 🐕 Dog Week │ ← Logo (actual) │ [Sign In] SE ▼ │ ← Buttons (actual) │ │ │ │ │ Every walk. on time. │ ← H1 (actual text) │ Every time. │ │ │ │ ──────────────────────────────────────── │ ← Subtext (markers) │ ──────────────────────────────────────── │ │ │ │ [start planning - free forever] │ ← CTA (actual) │ │ │ ┌───────────────────────────────────────┐ │ │ │ │ │ │ │ [Person with dog image] │ │ ← Image placeholder │ │ │ │ │ └───────────────────────────────────────┘ │ │ │ │ Never ask whose turn it is again │ ← Small text (actual) │ │ │ ─────────────────────────────────────────│ ← Feature description │ ─────────────────────────────────────────│ ← (markers) │ ─────────────────────────────────────────│ │ │ └─────────────────────────────────────────────┘ ``` ### Agent Analysis **Agent reads:** 1. **Logo text:** "Dog Week" → suggests as logo content 2. **H1 actual text:** "Every walk. on time. Every time." → suggests as starting headline 3. **Marker analysis:** 2 thin lines → body text, spacing matches icon size (~16-20px), ~120-140 chars 4. **CTA actual text:** "start planning - free forever" → suggests as button label 5. **Small actual text:** "Never ask whose turn it is again" → suggests as supporting text 6. **Marker analysis:** 3 thin lines → feature description, spacing matches icon size (~16-20px), ~180-210 chars **Agent output:** ``` I found text in your sketch: "Every walk. on time. Every time." Would you like to use this for the Primary Headline, or change it? EN: Every walk. on time. Every time. SE: [Your Swedish translation] ``` **User can:** - ✅ Keep the sketch text - ✅ Change it completely - ✅ Refine it slightly --- ## Technical Details for Markers ### Line Thickness → Font Weight (Relative) ``` ═══════════════════ ← Thickest = Bold (700) ─────────────────── ← Medium = Medium (500) ───────────────────── ← Thinnest = Regular (400) ``` **Compare relative thickness within the sketch, not absolute pixels.** ### Distance Between Lines → Font Size (Context-Based) ``` ═══════════════════ ↕ ~Button Height ← H1 (~40-48px) ═══════════════════ ─────────────────── ↕ ~Icon Size ← Body (~16-20px) ─────────────────── ``` **Use UI elements (buttons, icons, scrollbars) as scale references.** ### Complete Example ``` ═══════════════════ ← Thickest lines in sketch ↕ ~Button Height ═══════════════════ ← Thickest lines in sketch ``` **Analysis:** - Thickness: Bold (relative to other text) - Distance: Matches button height (~40-48px) - Lines: 2 - Capacity: ~50-60 chars --- ## Agent Behavior ### When Sketch Has Actual Text **Agent says:** ``` I found text in your sketch: "Every walk. on time." Content for Primary Headline: EN: Every walk. on time. SE: (You can keep the sketch text or change it) ``` **Benefits:** - Pre-filled starting point - Still editable - Saves time - Provides context ### When Sketch Has Line Markers **Agent says:** ``` Text placeholder detected: - 4 horizontal lines - Line thickness: Thinnest → Regular weight - Distance: Matches icon/scrollbar size → ~16-20px font - Capacity: ~240-280 characters Content for Feature Description: Please provide content in one language, and I'll suggest translations! EN: ``` **User provides:** ``` EN: Organize your family around dog care. Assign walks, track feeding schedules, and never miss a walk again. ``` **Agent suggests:** ``` Great! Here are translation suggestions: SE: Organisera din familj kring hundvård. Tilldela promenader, spåra matscheman och missa aldrig en promenad igen. Does this work, or would you like to adjust it? ``` **Benefits:** - Clear capacity guidance - Agent suggests translations - User reviews and confirms - Helps with content length --- ## Workflow: From Analysis to Specification When AI analyzes sketch text markers, the workflow is: ### Step 1: AI Analyzes Sketch Agent detects text markers and estimates properties: ``` Line thickness: Thicker than body text → Bold font weight Spacing between pairs: Similar to button height → ~40-48px font size estimate Line-height: ~1.2 (calculated from font size) Character capacity: ~35 characters per line ``` ### Step 2: AI Presents Estimates with Reasoning Agent shows analysis WITH explanation of how estimates were derived: ```markdown - **Style**: - Font weight: Bold (from thick line markers, relative to body text) - Font size: 42px (est. from spacing matching button height) - Line-height: 1.2 (est. calculated as font-size × 1.2) ``` **Why show reasoning?** - Designer understands **how** AI interpreted the sketch - Designer can judge if estimation logic makes sense - Makes it easy to adjust if sketch measurements were different - Builds trust through transparency ### Step 3: Designer Confirms/Adjusts Designer reviews estimates and either: 1. **Confirms** - "Yes, 42px based on button-height spacing is correct" 2. **Adjusts** - "Actually, the spacing is larger, make it 48px instead" 3. **Overrides** - "Ignore the sketch measurements, I want it to be 56px" ### Step 4: Finalize Specification Agent updates spec with confirmed values, removes estimation notes: ```markdown - **Style**: - Font weight: Bold - Font size: 48px - Line-height: 1.15 ``` Clean, production-ready specification with no estimation artifacts. **Key Principle:** - **All estimated values are spelled out explicitly** (not hidden) - **Marked with (est.) label** to indicate AI interpretation - **Designer confirms or adjusts** each estimated value - **Label removed** once designer specifies actual values This ensures **transparency** about which values came from AI sketch analysis vs. designer specification. --- ## Best Practices ### ✅ DO: 1. **Use actual text for headlines** - Provides content direction - Agent can read and suggest - Still changeable during spec 2. **Use markers for body text** - Shows sizing without committing - Faster to sketch - Focuses on layout 3. **Mix both approaches** - Headlines = actual text - Body = markers - Best of both worlds 4. **Keep sketch text informal** - It's a suggestion, not final - Can be refined later - Agent will ask to confirm/change ### ❌ DON'T: 1. **Don't use Lorem Ipsum** - Not helpful for context - Agent can't interpret - Use real(ish) content or markers 2. **Don't commit too early** - Sketch text is guidance - Refinement happens in spec phase - Stay flexible 3. **Don't mix for same element** - Either actual text OR markers - Not both for one text block - Confuses analysis --- ## Workflow Integration ### During Sketching **Designer:** ``` 1. Draw page layout 2. Add ACTUAL TEXT for headlines/buttons 3. Add LINE MARKERS for body paragraphs 4. Show font weight (thickness) 5. Show font size (distance) ``` ### During Specification (Phase 4) **Agent:** ``` 1. Analyze sketch 2. Read any actual text found 3. Suggest sketch text as starting point 4. Analyze markers for sizing 5. Request final content 6. Allow refinement 7. Document in spec ``` **User:** ``` 1. See sketch text as suggestion 2. Keep, change, or refine 3. Add translations 4. Confirm length fits capacity ``` --- ## Real Dog Week Flow ### Sketch Shows: ``` Every walk. on time. Every time. ← Actual text in sketch ``` ### Agent Says: ``` I found text in your sketch: "Every walk. on time. Every time." Let me suggest translations... Suggested content for Primary Headline: EN: Every walk. on time. Every time. SE: Varje promenad. i tid. Varje gång. These are my suggestions. Do they work? 1. Use these translations 2. Adjust translations 3. Manual input Choice [1/2/3]: ``` ### User Says: ``` 1 ← Accepts! ``` Or refines: ``` 2 SE: Varje promenad. Punktligt. Varje gång. ← Adjusted ``` EN: Every walk. on time. Every time. ← Keeps it! SE: Varje promenad. i tid. Varje gång. ```` ### Specification Result: ```markdown #### Primary Headline **OBJECT ID**: `start-hero-headline` - **Component**: H1 heading - **Position**: Center of hero - **Style**: Bold, 42px, line-height 1.2 - **Content**: - EN: "Every walk. on time. Every time." - SE: "Varje promenad. i tid. Varje gång." ```` **Result:** Sketch text became final content! ✅ --- ## Summary | Element Type | Sketch Method | Agent Behavior | | ------------------- | ------------- | -------------------------------------------- | | **Headlines** | Actual text | Reads & suggests as starting content | | **Buttons** | Actual text | Reads & suggests as button label | | **Navigation** | Actual text | Reads & suggests as nav items | | **Body paragraphs** | Line markers | Analyzes for size/capacity, requests content | | **Descriptions** | Line markers | Analyzes for size/capacity, requests content | **Golden Rule:** - **Important/short text** = Draw actual text - **Long/placeholder text** = Use line markers - **Mix both** for best results **Remember:** - Sketch text is a suggestion, not final - Agent will ask to confirm or change - Refinement happens during specification - Stay flexible, iterate as needed --- **Use actual text for headlines, markers for body text!** 📝✨