Design Vision

Design Vision

Transform design inspiration into implemented code by deeply understanding both the visual and your intent.

The Problem This Solves

Traditional approach:

• Look at screenshot → Extract colors/fonts → Implement → Lose the original "feel"

This skill:

• Analyze screenshot deeply → Understand YOUR intent → Plan with vision → Implement with checkpoints → Verify against original

Workflow Phases

Phase 1: Deep Visual Analysis (Silent)

Input: Screenshot path, URL, or image file

Process:

1. Use ai-multimodal skill to analyze the image deeply
2. Extract ALL visual elements:
   • Color palette (primary, secondary, accent, neutrals) with hex codes
   • Typography (font families, sizes, weights, line heights)
   • Spacing system (margins, padding patterns)
   • Layout structure (grid, flex patterns, breakpoints)
   • Component patterns (cards, buttons, forms, navigation)
   • Visual effects (shadows, borders, gradients, blur)
   • Micro-interactions implied by the design
3. Interpret the design:
   • Design style classification (Minimalism, Glassmorphism, Neo-brutalism, etc.)
   • Emotional tone (calm, energetic, professional, playful)
   • What principles make this design effective
   • What creates the "feel" of the design

Output: Internal analysis object (NOT shown to user yet - used to inform questions)

Phase 2: Vision Discovery (Interactive)

Purpose: Understand what the USER wants, not just what's visible

Process:

1. Generate contextual questions BASED on Phase 1 analysis
2. Use AskUserQuestion to gather intent

Smart Questions (informed by analysis):

Context questions:

• "What are you building? (app type, purpose, audience)"
• "What drew you to this design? What specifically appeals to you?"

Analysis-informed questions (examples):

• If analysis found heavy whitespace: "This design uses generous spacing for a calm feel - is that breathing room important, or are you more interested in the layout structure?"
• If analysis found muted colors: "The color palette is quite subdued - do you want similar tones, or different energy?"
• If analysis found complex animations: "This appears to have sophisticated animations - how important is motion to your project?"
• If analysis found specific typography: "The typography uses [detected font] which creates [effect] - do you want to match this, or have different type preferences?"

Adaptation questions:

• "What should feel DIFFERENT from this reference?"
• "Any constraints? (tech stack, existing design system, accessibility requirements)"

Output: User intent data

Phase 3: Vision Synthesis

Purpose: Create a source-of-truth document for all subsequent work

Process:

1. Combine analysis + user answers into Vision Document
2. Categorize elements:
   • KEEP: Elements to preserve exactly as in reference
   • ADAPT: Elements to modify for user's context
   • IGNORE: Elements not relevant to user's needs
3. Define goals:
   • Emotional goals (how it should feel)
   • Functional goals (what it needs to do)
   • Constraints (tech, accessibility, etc.)

Present to user for confirmation:

## Vision Summary

**Building:** [what they're building]
**Inspired by:** [reference description]
**Target feel:** [emotional goals]

### Keep from reference:
- [element 1]
- [element 2]

### Adapt for your context:
- [element 1] → [how to adapt]

### Your additions:
- [requirements not in reference]

Does this capture your vision?

Use AskUserQuestion:

• header: "Vision"
• options:
  • "Yes, this is right" - Proceed to planning
  • "Needs adjustment" - Let me clarify
  • "Start over" - Re-do discovery

Output: Approved Vision Document

Phase 4: Planning

Purpose: Convert vision into concrete implementation plan

Process:

1. Invoke writing-plans skill OR use EnterPlanMode
2. Plan should include:
   • Component breakdown (what to build)
   • Implementation order (dependencies)
   • File structure
   • Technical decisions (libraries, patterns)
   • Checkpoints for vision verification

Present plan for approval before any code

Output: Approved implementation plan

Phase 5: Implementation with Checkpoints

Purpose: Build while staying true to the vision

Process:

1. Invoke executing-plans skill with vision context

2. Implement in stages:

   • Stage 1: Structure - Layout, routing, basic components
   • Stage 2: Core UI - Main components with styling
   • Stage 3: Details - Typography, colors, spacing refinement
   • Stage 4: Polish - Micro-interactions, animations, edge cases

3. At each stage checkpoint, ask:

   Stage [N] complete. Here's what I built: [summary]
   
   Comparing to your vision:
   - [what matches]
   - [what might differ]
   
   Should I continue, adjust, or show you the current state?
   

Output: Implemented code

Phase 6: Vision Verification

Purpose: Ensure final result matches original intent

Process:

1. Use ai-multimodal to compare:
   • Original reference screenshot
   • Current implementation (via chrome-devtools screenshot)
2. Evaluate alignment with Vision Document
3. Present comparison to user:

   ## Vision Check
   
   **Original reference:** [key characteristics]
   **Your implementation:** [how it compares]
   **Vision alignment:** [what matches, what differs]
   
   Are you satisfied, or should we refine?
   

Output: User approval or refinement requests

Modes

To specify mode: User can say "quick mode" or skill can ask:

How thorough should the vision discovery be?
- Full (deep analysis, multiple questions, checkpoints)
- Quick (brief questions, faster to code)
- Analyze only (just create vision doc)

Skills Integration

This skill orchestrates:

Context Persistence

Maintain throughout execution:

vision_context = {
  original_reference: [image path/description],
  analysis: [Phase 1 output],
  user_intent: [Phase 2 answers],
  vision_document: [Phase 3 output],
  plan: [Phase 4 output],
  checkpoints: [Phase 5 progress],
  current_stage: [where we are]
}

Pass this context to each skill invocation so they all work toward the same vision.

Example Flow

User: "Build me a dashboard like this" [attaches screenshot]

Phase 1: [Silent analysis extracts: dark theme, glassmorphism cards, SF Pro font, purple accent, lots of data visualization, sidebar nav]

Phase 2:

• "What kind of dashboard is this for?" → "Analytics for my SaaS"
• "I notice the glassmorphism card style - is that frosted glass effect important to you?" → "Yes, love that"
• "The dark theme with purple accents - keep those colors or different?" → "Keep dark, but blue instead of purple"
• "What should feel different from this?" → "Less cluttered, I have fewer metrics"

Phase 3:

Vision Summary:
Building: SaaS analytics dashboard
Keep: Dark theme, glassmorphism cards, sidebar nav
Adapt: Purple → Blue accents, fewer metrics (cleaner)
Goals: Professional, modern, easy to scan

Phase 4: [Plan: 5 components, start with layout, then cards, then charts...]

Phase 5: [Build with checkpoints at each stage]

Phase 6: [Compare final to original, verify vision alignment]

Rules

1. Never skip vision discovery - Even in quick mode, ask at least 2 contextual questions
2. Analysis informs questions - Don't ask generic questions; make them specific to what was detected
3. Vision document is source of truth - Reference it throughout implementation
4. Checkpoints prevent drift - Verify alignment before moving to next stage
5. User can always adjust - Provide modification options at every phase
6. Pass context forward - Every skill invocation should know the full vision context