CROSS-PAGE-CONSISTENCY.md 7.3 KB
Cross-Page Consistency Strategy
Maintaining Visual Coherence Across Project Sketches
Core Principle
Text that looks similar and serves the same role should have the same specification across all pages.
This creates:
- ✅ Consistent user experience
- ✅ Natural design system patterns
- ✅ Faster specification process
- ✅ Professional, cohesive design
Workflow: Multi-Page Projects
Page 1: Start Page (Establish Baseline)
First page analyzed - establish reference patterns:
Start Page Analysis:
├─ Body Text: Thin lines, icon-sized spacing → 16px Regular
├─ Button Labels: Medium lines → 16px Semibold
├─ Page Title: Thick lines, button-height spacing → 48px Bold
├─ Navigation: Medium lines, small spacing → 14px Medium
└─ Caption: Thinnest lines, half-icon spacing → 12px Regular
These become your reference anchors for subsequent pages.
Page 2: About Page (Apply Patterns)
When analyzing the About Page sketch:
Step 1: Check Previous Pages
Agent: "I see you've already analyzed the Start Page.
I'll use those text styles as reference points."
Step 2: Match Visual Patterns
About Page body text:
- Thin lines ✓
- Icon-sized spacing ✓
- Left-aligned ✓
→ Matches Start Page body text pattern
→ Apply same spec: 16px Regular
Step 3: Confirm with Designer
Agent: "This body text looks identical to Start Page body text.
Should I use the same specification (16px Regular)?"
Designer: "Yes!" or "No, make it 18px"
Pattern Matching Rules
When to Apply Same Specification
Match if ALL criteria align:
Visual Similarity
- Line thickness matches (relative to other elements)
- Spacing matches (relative to UI anchors)
- Alignment matches
Functional Role
- Serves same purpose (e.g., both are body paragraphs)
- Same content type (e.g., both are descriptions)
- Same hierarchy level
Context
- Similar page sections (e.g., both in main content area)
- Similar surrounding elements
When to Create New Specification
Create new spec if:
- Visual appearance differs (thicker lines, different spacing)
- Functional role differs (e.g., one is a quote, one is body text)
- Designer explicitly requests different styling
- Context requires emphasis/de-emphasis
Design System Integration
Automatic Pattern Building
As you analyze pages, WDS naturally builds design system patterns:
Project: Dog Week
Text Styles Identified:
├─ heading-xl: 48px Bold (Page titles)
├─ heading-lg: 36px Bold (Section headings)
├─ heading-md: 24px Semibold (Subsection headings)
├─ body-text: 16px Regular (Paragraphs)
├─ button-label: 16px Semibold (All buttons)
├─ caption: 12px Regular (Helper text)
└─ nav-item: 14px Medium (Navigation)
Components Identified:
├─ Feature Card (used on Start, Features, About pages)
├─ Navigation Bar (used on all pages)
├─ Footer (used on all pages)
└─ CTA Button (used on Start, Pricing pages)
Benefits
Without explicit design system:
- Maintains consistency through pattern recognition
- Reduces specification time (reference previous pages)
- Creates professional, cohesive experience
With explicit design system:
- Automatically maps to existing components
- Validates sketch against design system
- Suggests design system updates when new patterns emerge
Agent Behavior Examples
Example 1: Exact Match
Agent: "I'm analyzing the Contact Page body text.
Visual Analysis:
- Line thickness: Thinnest (matches Start Page body text)
- Spacing: Icon-sized (matches Start Page body text)
- Alignment: Left (matches Start Page body text)
Pattern Match: Start Page body text (16px Regular)
Should I use the same specification?"
Designer: "Yes, keep it consistent."
Agent: "✅ Applied: 16px Regular (consistent with Start Page)"
Example 2: Intentional Variation
Agent: "I'm analyzing the Testimonial Quote text.
Visual Analysis:
- Line thickness: Medium (thicker than body text)
- Spacing: Slightly larger than body text
- Alignment: Center (different from body text)
This looks different from body text. Should this be:
1. New style: 18px Medium, center-aligned (emphasis)
2. Same as body: 16px Regular (consistency)
Your choice?"
Designer: "Option 1 - quotes should stand out."
Agent: "✅ Created new style: testimonial-quote (18px Medium)"
Example 3: Component Recognition
Agent: "I'm analyzing the Features section on the Pricing Page.
Component Match Detected:
- Layout: 3-column card grid ✓
- Card structure: Icon + Title + Description ✓
- Visual style: Matches Features section from Start Page ✓
This looks like the same 'Feature Card' component.
Should I:
1. Reference existing component (recommended)
2. Create page-specific version
Your choice?"
Designer: "Option 1 - it's the same component."
Agent: "✅ Referenced: Feature Card component (defined on Start Page)"
Best Practices
For Designers
Be Consistent in Sketches
- Use same line thickness for same text types
- Use same spacing patterns across pages
- Helps AI recognize patterns automatically
Confirm Pattern Matches
- When AI suggests pattern match, verify it's intentional
- Speak up if variation is desired
Build Design System Gradually
- First few pages establish patterns
- Later pages reference patterns
- Natural evolution into design system
For AI Agents
Always Check Previous Pages First
- Before analyzing text, look for established patterns
- Show detected patterns to designer for transparency
Ask, Don't Assume
- Even if visual match is strong, confirm with designer
- Designer may have intentional variation
Track Pattern Usage
- Note which pages use which patterns
- Helps identify true design system components
Implementation in WDS Workflow
Step 1: Holistic Sketch Reading
<action>
1. Check if other pages in project have been analyzed
2. Load established text style patterns
3. Identify UI anchors in current sketch
4. Use previous pages + UI elements to calibrate scale
</action>
Step 2: Pattern Detection
<action>
For each text element in current sketch:
1. Analyze visual properties (thickness, spacing, alignment)
2. Compare to established patterns from previous pages
3. If match found → suggest applying same specification
4. If no match → analyze using UI anchors + relative measurements
</action>
Step 3: Designer Confirmation
<output>
Text Element: Body paragraph in "About Us" section
Pattern Match: Start Page body text
- Visual: Thin lines, icon-sized spacing ✓
- Functional: Paragraph description ✓
- Specification: 16px Regular
Apply same specification?
</output>
<ask>
1. Yes - Use 16px Regular (consistent)
2. No - I want different styling
</ask>
Summary
Cross-page consistency is achieved through:
- Pattern Recognition - AI identifies similar visual patterns across pages
- Reference Anchors - First pages establish baseline specifications
- Designer Confirmation - AI suggests matches, designer validates
- Natural Design System - Patterns emerge organically from consistent application
Result: Professional, cohesive multi-page designs with minimal specification overhead.