14 KiB

Raw Blame History

Step 4B: Sketch Analysis (AI-Interprets, User-Confirms)

Goal: AI reads entire sketch, identifies sections, interprets function/purpose, user confirms before detailed specification.

WORKFLOW APPROACH

Balance: AI Enhancement + User Control

AI Reads Entire Sketch → Identifies all sections holistically
Designer Confirms Structure → Validates section breakdown
Section-by-Section AI Interpretation → AI reads each section, interprets objects, function, purpose
User Refinement Dialog → Designer adds specifics, confirms/adjusts
Batch Generation → AI generates complete section spec with all translations

STEP 1: HOLISTIC SKETCH READING

Let me read your entire sketch and identify the main sections...

Please share your sketch:

Describe it to me
Paste/upload an image
Reference filename in Sketches/ folder

Your sketch:

Analyze entire sketch holistically:

Establish Scale First:
- Check if other pages in project have been analyzed
- Look for established text styles (body text, buttons, headings)
- Identify UI anchors (browser chrome, scrollbars, buttons, icons)
- Use previous pages + UI elements to calibrate scale
Identify Sections:
- Identify logical sections (header, hero, features, cards, footer, etc.)
- Determine section boundaries (whitespace, visual grouping, layout)
- Recognize section purposes from visual context
- Count objects/elements in each section
Cross-Page Pattern Matching:
- Check if sections look like components from previous pages
- Compare text styles to established patterns (e.g., "thin lines, icon-sized spacing = 16px body text")
- Note potential design system components

📊 I've analyzed your sketch. Here's what I see:

{{#if has_previous_pages}} 🔗 Cross-Page References Detected: {{#each established_patterns}}

{{pattern_name}}: {{specification}} (from {{source_page}}) {{/each}}

I'll use these as reference points for consistency. {{/if}}

{{page_name}} contains {{section_count}} main sections:

Section {{index}}: {{section_name}} ({{location}})

Purpose: {{interpreted_purpose}}
Contains: {{object_count}} objects/elements
Layout: {{layout_description}} {{#if looks_like_previous_component}}
💡 Component? Similar to {{component_name}} from {{previous_page}} {{/if}} {{#if matches_established_pattern}}
✅ Pattern Match: Text styles match {{pattern_name}} from {{source_page}} {{/if}} {{/each}}

This is my interpretation of the structure. Does this look right?

Section structure:

Confirm - Yes, this is correct!
Adjust - I need to refine the section breakdown
Add sections - I see more sections
Remove/merge sections - Some sections should be combined

Choice [1/2/3/4]:

**How should I adjust the sections?**

Current breakdown: {{#each identified_sections}} {{index}}. {{section_name}} - {{interpreted_purpose}} {{/each}}

Your changes:

Update section structure based on feedback Updated structure:

{{#each updated_sections}} {{index}}. {{section_name}} - {{interpreted_purpose}} {{/each}}

Does this look better?

Loop until user confirms structure

STEP 2: COMPONENT IDENTIFICATION

**🔄 I noticed some sections might be reusable components:**

{{section_name}} looks similar to {{component_name}} from {{previous_page}} {{/each}}

Should these be components (reusable across pages)?

Yes, make them components - Define once, reference later
No, keep them as page-specific - Each page has unique version
Let me decide section-by-section - I'll choose as we go

Choice [1/2/3]:

Mark sections as components or page-specific based on user choice

STEP 3: SECTION-BY-SECTION AI INTERPRETATION

Perfect! Now I'll analyze each section in detail, one at a time.

I'll interpret the objects, functions, and content for each section. You can confirm or refine my interpretation before I generate the spec.

📍 Section {{current_index}}/{{total_sections}}: {{section_name}}

3A: AI Reads & Interprets Section (Recursive)

For current section, identify objects Top-Left to Bottom-Right:

Identify Top-Level Containers (e.g., Cards, Rows, Groups)
- IF container has children → Dive in and identify child elements
- IF repeating group (e.g., 3 Feature Cards) → Identify as "Repeating Pattern"
Handle Repeating Objects:
- Fixed Count (e.g., 3 Cards): Name individually (card-01, card-02, card-03)
- Dynamic List: Define as Pattern + Data Source
Determine Object Hierarchy:
- Parent: feature-card-01
- Child: feature-card-01-icon, feature-card-01-title
Interpret Attributes:
- Type (Button, Text, Input)
- Function & Purpose
- Text Content (Actual vs. Markers)
- Visual Hierarchy

My interpretation of "{{section_name}}":

Section Purpose: {{interpreted_section_purpose}}

Hierarchy I see:

{{#each interpreted_objects}} {{object_index}}. {{interpreted_type}} ({{hierarchy_level}})

Object ID: {{suggested_object_id}} {{#if is_container}}
Contains: {{#each children}}
- {{child_type}}: {{child_object_id}} {{/each}} {{/if}}
Function: {{interpreted_function}}
Purpose: {{interpreted_purpose}} {{#if has_actual_text}}
Text in sketch: "{{extracted_text}}" {{/if}} {{/each}}

Overall Function: {{section_function_summary}}

3B: User Refinement Dialog

Does this interpretation look right?

Yes, looks good! - Move to content/translations
Adjust interpretations - I need to correct some things
Add missing objects - You missed something
Remove objects - Something isn't an object

Choice [1/2/3/4]:

**Which interpretations need adjustment?**

{{#each interpreted_objects}} {{object_index}}. {{interpreted_type}} - {{interpreted_function}} {{/each}}

Your corrections:

Update interpretations based on user feedback

**What did I miss?**

Describe the missing object(s):

Add missed objects to interpretation

**Which objects should I remove?**

{{#each interpreted_objects}} {{object_index}}. {{interpreted_type}} {{/each}}

Remove numbers:

Remove specified objects

Re-display updated interpretation for confirmation Loop until user confirms: "Yes, looks good!"

STEP 4: CONTENT & TRANSLATION GATHERING

Great! Now let's gather the content for all text elements in this section.

I'll suggest translations for everything at once.

{{object_purpose}} ({{object_id}})

{{#if has_actual_text}} I found text in your sketch: "{{extracted_text}}"

Let me suggest translations...

Generate translations for all product_languages

Suggested content:

{{#each product_languages}} {{this}}: {{suggested_translation}} {{/each}}

For "{{object_purpose}}":

Use these translations
Adjust translations
Manual input

Choice [1/2/3]:

{{else}} Content for "{{object_purpose}}":

{{primary_language}}:

After receiving primary language, suggest other languages

Translation suggestions:

{{#each remaining_languages}} {{this}}: {{suggested_translation}} {{/each}}

Use these? [1] Yes [2] Adjust [3] Manual

Store confirmed content for this object

STEP 5: BATCH SPECIFICATION GENERATION

Perfect! I have everything I need for "{{section_name}}".

Let me generate the complete section specification...

Generate section spec:

Section header with purpose
All objects with full details
All translations grouped by object
Component references if applicable
Interactions and behaviors
States if applicable
Validation rules if applicable

✅ Section "{{section_name}}" specification generated!

### {{Section_Name}}

**Purpose**: {{section_purpose}}

{{#each objects}}

#### {{Object_Purpose_Title}}

**OBJECT ID**: `{{object_id}}`

- **Component**: {{component_type}}
- **Position**: {{position}}
- **Style**: {{style_specs}}
  {{#if has_behavior}}
- **Behavior**: {{behavior}}
  {{/if}}
  {{#if is_text}}
- **Content**:
  {{#each product_languages}}
  - {{this}}: "{{content}}"
    {{/each}}
    {{/if}}
    {{#if has_states}}
- **States**: {{states}}
  {{/if}}

{{/each}}

Next: {{#if more_sections}}Section {{next_index}}: {{next_section_name}}{{else}}Complete page!{{/if}}

Move to next section Repeat STEP 3 for next section **🎉 All sections complete!**

Your page specification includes:

{{total_sections}} sections
{{total_objects}} objects
{{total_text_elements}} text elements with {{language_count}} languages
{{component_count}} reusable components identified

Ready to generate prototype!

Proceed to 4C-08 (Generate Final Spec)

KEY PRINCIPLES

✅ AI Enhancement

Reads entire sketch holistically
Identifies sections automatically
Interprets function & purpose from context
Suggests translations proactively
Batch generates complete specs

✅ User Control

Confirms structure before detailed work
Refines interpretations through dialog
Reviews translations before acceptance
Stays in the loop at key decision points
Can adjust at any step

✅ Efficient Workflow

Section-by-section keeps focus manageable
AI does heavy lifting (interpretation, translation)
User does validation (confirm, adjust, approve)
Batch generation produces complete specs
Faster than pure manual while maintaining quality

EXAMPLE: Dog Week Start Page

Step 1: Holistic Reading

AI:

I've analyzed your sketch. Here's what I see:

Start Page contains 5 main sections:

1. Header (Top)
   - Purpose: Navigation and user access
   - Contains: 3 objects (logo, sign-in button, language selector)
   - Layout: Horizontal bar, logo left, buttons right

2. Hero (Center)
   - Purpose: Primary value proposition and CTA
   - Contains: 3 objects (headline, supporting text, CTA button)
   - Layout: Centered, vertical stack
   - 💡 Component? Similar to Hero from other landing pages

3. Illustration (Center)
   - Purpose: Visual storytelling
   - Contains: 1 object (hero image)
   - Layout: Full-width image

4. Message (Below illustration)
   - Purpose: Supporting messaging
   - Contains: 2 objects (preheader, secondary headline)
   - Layout: Centered text

5. Feature Cards (Bottom)
   - Purpose: Key benefits showcase
   - Contains: 9 objects (3 cards × 3 elements each)
   - Layout: 3-column grid

Does this structure look right?

User: 1 (Confirms)

Step 2: Section 1 - Header

AI interprets:

My interpretation of "Header":

Section Purpose: Primary navigation and user access

Objects I see:

1. Image/Logo (Top-left)
   - Object ID: `start-header-logo`
   - Function: Brand identity, links to home
   - Purpose: Establish brand presence

2. Button (Top-right, before language)
   - Object ID: `start-header-signin`
   - Function: Navigate to sign-in page
   - Purpose: User authentication access
   - Text in sketch: "Sign in"

3. Dropdown (Top-right, far right)
   - Object ID: `start-header-language`
   - Function: Toggle language
   - Purpose: Language selection
   - Text in sketch: "SE ▼"

Overall Function: Provide navigation and access to core functionality

Does this interpretation look right?