Extract comprehensive, production-ready JSON design specifications from visual inputs using a 7-pass serial subtask architecture that ensures complete coverage and cross-validation.

The extraction produces JSON following the W3C Design Tokens Community Group (DTCG) 2025.10 format with extensions:

EVERY pass MUST write its output to a JSON file on disk. This is non-negotiable.

Before starting extraction, create the output directory:

mkdir -p .tmp-design-specs/{project-name}

The extraction uses 7 serial passes. Each pass MUST:

Screenshot Input
      |
      v
[Pass 1] Source Analysis & Layout  -----> pass-1-layout.json
      |
      v
[Pass 2] Color & Visual Style      -----> pass-2-colors.json
      |
      v
[Pass 3] Typography Analysis       -----> pass-3-typography.json
      |
      v
[Pass 4] Component Detection       -----> pass-4-components.json
      |
      v
[Pass 5] Spacing & Dimensions      -----> pass-5-spacing.json
      |
      v
[Pass 6] States & Accessibility    -----> pass-6-states.json
      |
      v
[Pass 7] Consolidation             -----> design-spec.json (FINAL)

Objective: Establish foundational understanding of the design source and spatial organization.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

Use the Write tool to save your analysis as valid JSON to this file.

Analyze the screenshot and extract:

Determine the primary layout strategy:

Map the major layout regions with bounding boxes:

Return JSON: { "$schema": "pass-1-layout", "$source": { "type": "figma-export|website-screenshot|mockup|...", "dimensions": { "width": N, "height": N, "aspectRatio": "W:H", "deviceClass": "..." }, "confidence": 0.0-1.0 }, "layout": { "type": "single-column|multi-column|sidebar|...", "regions": [ { "name": "header", "bounds": {"x":0,"y":0,"width":W,"height":H}, "sticky": true|false }, { "name": "navigation", "type": "sidebar|topnav|none", "bounds": {...} }, { "name": "main", "bounds": {...} }, { "name": "footer", "bounds": {...}, "present": true|false } ], "gridSystem": { "columns": N, "gutter": "Npx", "margin": "Npx", "maxWidth": "Npx" } }, "containers": [ { "id": "container-N", "bounds": { "x": N, "y": N, "width": N, "height": N }, "layout": "grid|flex|block", "parent": "parent-id|null", "childCount": N } ], "sections": [ { "id": "section-N", "purpose": "hero|features|testimonials|cta|...", "bounds": {...} } ] }

Use pixel values. Be precise with bounds. Note confidence level for uncertain areas.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Extract complete color palette with semantic mappings.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read the Pass 1 output: Then use the Write tool to save your analysis as valid JSON.

Extract ALL colors visible in this design:

For each color, provide:

Return JSON: { "$schema": "pass-2-colors", "tokens": { "colors": { "primitive": { "blue": { "500": { "$value": "#3B82F6", "$type": "color", "$description": "Primary blue" }, "600": { "$value": "#2563EB", "$type": "color", "$description": "Primary blue dark" } }, "gray": { "50": { "$value": "#F9FAFB", "$type": "color" }, "100": { "$value": "#F3F4F6", "$type": "color" }, "500": { "$value": "#6B7280", "$type": "color" }, "900": { "$value": "#111827", "$type": "color" } } }, "semantic": { "background": { "default": { "$value": "{colors.primitive.gray.50}", "$type": "color", "$description": "Page background" }, "elevated": { "$value": "#FFFFFF", "$type": "color", "$description": "Card surfaces" } }, "foreground": { "default": { "$value": "{colors.primitive.gray.900}", "$type": "color", "$description": "Primary text" }, "muted": { "$value": "{colors.primitive.gray.500}", "$type": "color", "$description": "Secondary text" } }, "interactive": { "primary": { "$value": "{colors.primitive.blue.500}", "$type": "color", "$description": "Primary buttons, links" }, "primary-hover": { "$value": "{colors.primitive.blue.600}", "$type": "color", "$description": "Primary hover" } }, "border": { "default": { "$value": "{colors.primitive.gray.200}", "$type": "color", "$description": "Subtle borders" }, "focus": { "$value": "{colors.primitive.blue.500}", "$type": "color", "$description": "Focus rings" } }, "feedback": { "error": { "$value": "#EF4444", "$type": "color", "$description": "Error states" }, "success": { "$value": "#22C55E", "$type": "color", "$description": "Success states" }, "warning": { "$value": "#F59E0B", "$type": "color", "$description": "Warning states" }, "info": { "$value": "#3B82F6", "$type": "color", "$description": "Info states" } } } } }, "shadows": [ { "name": "elevation-sm", "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px", "color": "rgba(0,0,0,0.05)" }, "$description": "Subtle elevation" } ], "gradients": [], "componentColorMap": { "button-primary": { "background": "{colors.semantic.interactive.primary}", "text": "#FFFFFF", "border": "transparent" } } }

Use DTCG $value and $type syntax. Include $description for AI readability.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Extract complete typography system including fonts, sizes, weights, and text styles.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read previous pass outputs:

Then use the Write tool to save your analysis as valid JSON.

Extract ALL typography information:

Analyze visible text to identify:

For EACH distinct text style visible, extract:

For each style, estimate:

Return JSON: { "$schema": "pass-3-typography", "tokens": { "typography": { "fontFamilies": { "sans": { "$value": ["Inter", "system-ui", "sans-serif"], "$type": "fontFamily", "$description": "Primary font" }, "mono": { "$value": ["JetBrains Mono", "monospace"], "$type": "fontFamily", "$description": "Code font" } }, "fontWeights": { "regular": { "$value": 400, "$type": "fontWeight" }, "medium": { "$value": 500, "$type": "fontWeight" }, "semibold": { "$value": 600, "$type": "fontWeight" }, "bold": { "$value": 700, "$type": "fontWeight" } }, "fontSizes": { "xs": { "$value": "12px", "$type": "dimension" }, "sm": { "$value": "14px", "$type": "dimension" }, "base": { "$value": "16px", "$type": "dimension" }, "lg": { "$value": "18px", "$type": "dimension" }, "xl": { "$value": "20px", "$type": "dimension" }, "2xl": { "$value": "24px", "$type": "dimension" }, "3xl": { "$value": "30px", "$type": "dimension" }, "4xl": { "$value": "36px", "$type": "dimension" }, "5xl": { "$value": "48px", "$type": "dimension" } }, "lineHeights": { "tight": { "$value": 1.25, "$type": "number" }, "normal": { "$value": 1.5, "$type": "number" }, "relaxed": { "$value": 1.75, "$type": "number" } }, "letterSpacing": { "tighter": { "$value": "-0.05em", "$type": "dimension" }, "normal": { "$value": "0em", "$type": "dimension" }, "wide": { "$value": "0.05em", "$type": "dimension" } }, "textStyles": { "display": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.5xl}", "fontWeight": "{typography.fontWeights.bold}", "lineHeight": "{typography.lineHeights.tight}", "letterSpacing": "{typography.letterSpacing.tighter}" }, "$description": "Hero headlines" }, "heading-1": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.4xl}", "fontWeight": "{typography.fontWeights.bold}", "lineHeight": "{typography.lineHeights.tight}" }, "$description": "Page titles" }, "heading-2": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.2xl}", "fontWeight": "{typography.fontWeights.semibold}", "lineHeight": "{typography.lineHeights.tight}" }, "$description": "Section headings" }, "body": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.base}", "fontWeight": "{typography.fontWeights.regular}", "lineHeight": "{typography.lineHeights.normal}" }, "$description": "Standard body text" }, "body-small": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.sm}", "fontWeight": "{typography.fontWeights.regular}", "lineHeight": "{typography.lineHeights.normal}" }, "$description": "Secondary text, captions" }, "button-label": { "$type": "typography", "$value": { "fontFamily": "{typography.fontFamilies.sans}", "fontSize": "{typography.fontSizes.sm}", "fontWeight": "{typography.fontWeights.medium}", "lineHeight": "{typography.lineHeights.tight}" }, "$description": "Button text" } } } }, "typeScale": { "ratio": 1.25, "base": "16px", "steps": [12, 14, 16, 20, 24, 30, 36, 48] } }

Reference tokens using {token.path} syntax per DTCG specification.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Build hierarchical component tree with atomic design classification.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read previous pass outputs:

Then use the Write tool to save your analysis as valid JSON.

Identify and classify ALL UI components:

Simple, indivisible elements:

Simple combinations of atoms:

Complex, distinct UI sections:

Create definitions for reusable component types:

Return JSON: { "$schema": "pass-4-components", "components": { "$root": { "id": "root", "type": "Page", "bounds": {"x":0,"y":0,"width":W,"height":H}, "children": [ { "id": "header-1", "type": "Header", "name": "Main Navigation Header", "atomicLevel": "organism", "bounds": {"x":0,"y":0,"width":W,"height":80}, "styles": { "background": { "color": "#FFFFFF", "tokenRef": "{colors.semantic.background.elevated}" }, "shadow": { "tokenRef": "{shadows.elevation-sm}" } }, "children": [ { "id": "logo-1", "type": "Image", "atomicLevel": "atom", "bounds": {"x":24,"y":24,"width":120,"height":32}, "content": { "alt": "Company Logo" } }, { "id": "nav-1", "type": "Navigation", "atomicLevel": "molecule", "bounds": {...}, "children": [ { "id": "nav-item-1", "type": "NavItem", "atomicLevel": "atom", "content": { "text": "Home" }, "states": { "current": "active" } } ] }, { "id": "btn-signin", "type": "Button", "atomicLevel": "atom", "bounds": {...}, "content": { "text": "Sign In" }, "variants": { "variant": "secondary", "size": "md" }, "states": { "current": "default" } } ] } ] }, "catalog": { "Button": { "name": "Button", "category": "action", "atomicLevel": "atom", "htmlElement": "button", "ariaRole": "button", "variants": [ { "name": "variant", "values": ["primary", "secondary", "ghost", "destructive"] }, { "name": "size", "values": ["sm", "md", "lg"] } ], "tokens": { "background": "{colors.semantic.interactive.primary}", "color": "#FFFFFF", "borderRadius": "{radii.md}", "paddingX": "{spacing.4}", "paddingY": "{spacing.2}" }, "instances": ["btn-signin", "btn-cta-1"] }, "Card": { "name": "Card", "category": "layout", "atomicLevel": "organism", "htmlElement": "article", "ariaRole": "article", "variants": [ { "name": "variant", "values": ["default", "elevated", "outlined"] } ], "tokens": { "background": "{colors.semantic.background.elevated}", "borderRadius": "{radii.lg}", "shadow": "{shadows.elevation-md}", "padding": "{spacing.6}" }, "instances": ["card-1", "card-2"] } } }, "statistics": { "totalComponents": N, "byType": { "Button": N, "Card": N, "Input": N }, "byAtomicLevel": { "atom": N, "molecule": N, "organism": N } } }

Be exhaustive. Every visible interactive or content element must be cataloged.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Extract spacing scale, sizing tokens, borders, and radii.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read previous pass outputs:

Then use the Write tool to save your analysis as valid JSON.

Measure and systematize ALL spacing and dimension values:

Analyze gaps between elements to find the base spacing unit:

Identify the spacing scale:

Extract size patterns:

For each border type:

Link spacing values to specific components from Pass 4

Return JSON: { "$schema": "pass-5-spacing", "tokens": { "spacing": { "scale": { "0": { "$value": "0px", "$type": "dimension" }, "1": { "$value": "4px", "$type": "dimension", "$description": "Minimal spacing, icon gaps" }, "2": { "$value": "8px", "$type": "dimension", "$description": "Tight spacing, inline elements" }, "3": { "$value": "12px", "$type": "dimension" }, "4": { "$value": "16px", "$type": "dimension", "$description": "Default component padding" }, "5": { "$value": "20px", "$type": "dimension" }, "6": { "$value": "24px", "$type": "dimension", "$description": "Card padding, form gaps" }, "8": { "$value": "32px", "$type": "dimension", "$description": "Section spacing" }, "10": { "$value": "40px", "$type": "dimension" }, "12": { "$value": "48px", "$type": "dimension", "$description": "Large section gaps" }, "16": { "$value": "64px", "$type": "dimension", "$description": "Hero section padding" } }, "semantic": { "inset": { "card": { "$value": "{spacing.scale.6}", "$type": "dimension", "$description": "Card internal padding" }, "section": { "$value": "{spacing.scale.8}", "$type": "dimension", "$description": "Section padding" } }, "stack": { "tight": { "$value": "{spacing.scale.2}", "$type": "dimension", "$description": "Compact vertical spacing" }, "default": { "$value": "{spacing.scale.4}", "$type": "dimension", "$description": "Standard vertical spacing" } }, "gap": { "grid": { "$value": "{spacing.scale.6}", "$type": "dimension", "$description": "Card grid gap" } } } }, "sizing": { "component": { "button-sm": { "$value": "32px", "$type": "dimension" }, "button-md": { "$value": "40px", "$type": "dimension" }, "button-lg": { "$value": "48px", "$type": "dimension" }, "input-md": { "$value": "40px", "$type": "dimension" } }, "icon": { "sm": { "$value": "16px", "$type": "dimension" }, "md": { "$value": "20px", "$type": "dimension" }, "lg": { "$value": "24px", "$type": "dimension" } }, "avatar": { "sm": { "$value": "32px", "$type": "dimension" }, "md": { "$value": "40px", "$type": "dimension" }, "lg": { "$value": "48px", "$type": "dimension" } } }, "radii": { "none": { "$value": "0px", "$type": "dimension" }, "sm": { "$value": "4px", "$type": "dimension" }, "md": { "$value": "8px", "$type": "dimension", "$description": "Default for cards, buttons" }, "lg": { "$value": "12px", "$type": "dimension" }, "xl": { "$value": "16px", "$type": "dimension" }, "full": { "$value": "9999px", "$type": "dimension", "$description": "Pills, avatars" } }, "borders": { "width": { "thin": { "$value": "1px", "$type": "dimension", "$description": "Default borders" }, "medium": { "$value": "2px", "$type": "dimension", "$description": "Focus rings, emphasis" } } }, "container": { "maxWidth": { "sm": { "$value": "640px", "$type": "dimension" }, "md": { "$value": "768px", "$type": "dimension" }, "lg": { "$value": "1024px", "$type": "dimension" }, "xl": { "$value": "1280px", "$type": "dimension" } } } }, "componentSpacing": { "button": { "paddingX": "{spacing.scale.4}", "paddingY": "{spacing.scale.2}", "gap": "{spacing.scale.2}" }, "card": { "padding": "{spacing.scale.6}", "gap": "{spacing.scale.4}" }, "input": { "paddingX": "{spacing.scale.3}", "paddingY": "{spacing.scale.2}" } } }

Detect patterns and express them. Use 4px or 8px base unit convention.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Analyze interactive states and accessibility compliance.

You MUST write your output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read previous pass outputs:

Then use the Write tool to save your analysis as valid JSON.

For each interactive component type, define state variations:

State Changes:

Contrast Ratios: For each text-on-background combination:

For each interactive element:

Return JSON: { "$schema": "pass-6-states", "states": { "button": { "primary": { "default": { "background": "{colors.semantic.interactive.primary}", "text": "#FFFFFF", "border": "transparent", "shadow": "{shadows.elevation-sm}" }, "hover": { "background": "{colors.semantic.interactive.primary-hover}", "shadow": "{shadows.elevation-md}", "$description": "Darken 10%, increase elevation" }, "active": { "background": "{colors.primitive.blue.700}", "shadow": "none", "transform": "scale(0.98)" }, "focus": { "outline": "2px solid {colors.semantic.interactive.primary}", "outlineOffset": "2px" }, "disabled": { "background": "{colors.primitive.gray.300}", "text": "{colors.primitive.gray.500}", "cursor": "not-allowed", "opacity": 0.6 } } }, "input": { "default": { "border": "{colors.semantic.border.default}", "background": "#FFFFFF" }, "hover": { "border": "{colors.primitive.gray.400}" }, "focus": { "border": "{colors.semantic.border.focus}", "outline": "2px solid {colors.semantic.interactive.primary}", "outlineOffset": "-1px" }, "error": { "border": "{colors.semantic.feedback.error}", "background": "#FEF2F2" }, "disabled": { "background": "{colors.primitive.gray.100}", "opacity": 0.6 } } }, "transitions": { "fast": { "$type": "transition", "$value": { "duration": "150ms", "timingFunction": [0.4, 0, 0.2, 1] }, "$description": "Micro-interactions, hovers" }, "normal": { "$type": "transition", "$value": { "duration": "200ms", "timingFunction": [0.4, 0, 0.2, 1] }, "$description": "Standard transitions" }, "slow": { "$type": "transition", "$value": { "duration": "300ms", "timingFunction": [0.4, 0, 0.2, 1] }, "$description": "Page transitions, modals" } }, "accessibility": { "contrastIssues": [ { "element": "components.btn-secondary", "foreground": "#9CA3AF", "background": "#FFFFFF", "ratio": 2.8, "required": 4.5, "wcagLevel": "AA", "passes": false, "recommendation": "Darken text to #6B7280 for 4.5:1 ratio" } ], "colorBlindnessIssues": [ { "type": "deuteranopia", "affectedElements": ["error-state", "success-state"], "recommendation": "Add icons alongside color indicators" } ], "semanticHierarchy": { "headings": [ { "level": 1, "text": "Welcome to Our Platform", "componentRef": "hero-title" }, { "level": 2, "text": "Features", "componentRef": "features-heading" } ], "landmarks": [ { "role": "banner", "componentRef": "header-1" }, { "role": "navigation", "componentRef": "nav-1" }, { "role": "main", "componentRef": "main-content" }, { "role": "contentinfo", "componentRef": "footer-1" } ] }, "touchTargets": { "minimumSize": "44px", "violations": [ { "componentRef": "icon-btn-close", "actualSize": "32x32", "recommendation": "Increase to 44x44px minimum" } ] }, "interactiveElements": [ { "componentRef": "icon-btn-menu", "type": "IconButton", "hasVisibleLabel": false, "suggestedAriaLabel": "Open menu" } ] } }

Infer states from visual context. When states are not visible, provide reasonable defaults.

Use the Write tool to save this JSON to: Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Objective: Merge all passes into final spec, validate completeness, resolve conflicts.

You MUST write your final output to a JSON file. This is mandatory - do not just return JSON in your response.

OUTPUT FILE:

First, read ALL previous pass outputs:

Then use the Write tool to save your consolidated analysis as valid JSON.

Create the final, validated design specification:

Combine all token extractions into unified structure:

Assign confidence scores:

Based on analysis:

Return complete JSON matching the schema at references/design-tokens-schema.json:

{ "$schema": "https://design-tokens.org/schema.json", "$version": "1.0.0", "$source": { "type": "<figma-export|website-screenshot|mockup>", "dimensions": { "width": N, "height": N, "aspectRatio": "W:H", "deviceClass": "..." }, "extractedAt": "<ISO timestamp>", "confidence": 0.0-1.0 },

"tokens": { "colors": { "primitive": {...}, "semantic": {...} }, "typography": { "fontFamilies": {...}, "fontWeights": {...}, "fontSizes": {...}, "lineHeights": {...}, "letterSpacing": {...}, "textStyles": {...} }, "spacing": { "scale": {...}, "semantic": {...} }, "sizing": {...}, "radii": {...}, "borders": {...}, "shadows": {...}, "transitions": {...} },

"components": { "$root": {...}, "catalog": {...} },

"layout": { "type": "...", "regions": [...], "gridSystem": {...} },

"accessibility": { "contrastIssues": [...], "colorBlindnessIssues": [...], "semanticHierarchy": {...}, "touchTargets": {...} },

"semantics": { "designPatterns": [ { "pattern": "Hero Section", "confidence": 0.95, "instances": [...] }, { "pattern": "Card Grid", "confidence": 0.9, "instances": [...] } ], "contentTypes": ["marketing", "e-commerce"], "brandPersonality": { "traits": ["modern", "professional"], "tone": "friendly" } },

"$extensions": { "com.design-spec.extraction": { "passesCompleted": 7, "confidence": { "overall": 0.85, "layout": 0.9, "colors": 0.95, "typography": 0.8, "components": 0.85, "spacing": 0.9, "accessibility": 0.75 }, "recommendations": [ "Increase contrast on secondary buttons", "Add aria-labels to icon-only buttons" ] } } }

The final file MUST be valid JSON. Validate all references resolve correctly.

Use the Write tool to save this JSON to: This is the FINAL deliverable. Do NOT proceed without writing the file. Confirm the file was written successfully.

---

Before launching any pass:

mkdir -p .tmp-design-specs/{project-name}

Execute each pass as a delegated worker. Replace

{project}

with actual project name in ALL prompts.

// Step 0: Create directory for intermediate files
mkdir -p .tmp-design-specs/my-design

// Steps 1-6: Delegate each pass sequentially
teams(action: 'delegate', tasks: [{
  text: '[Pass 1 prompt - worker MUST write to .tmp-design-specs/my-design/pass-1-layout.json]',
  assignee: 'design-pass-1'
}])
// VERIFY: Read .tmp-design-specs/my-design/pass-1-layout.json exists

// Continue for Passes 2-6, verifying each file exists ...

// Step 7: Final Consolidation
teams(action: 'delegate', tasks: [{
  text: '[Pass 7 prompt - worker reads ALL pass files, MUST write to design-spec.json]',
  assignee: 'design-consolidator'
}])
// VERIFY: Read .tmp-design-specs/my-design/design-spec.json exists

// Step 8: Save final spec as a ticket
todos_oneshot(
  title: "Design spec: my-design",
  description: "<contents of design-spec.json>",
  tags: "design-spec",
  type: "task"
)

After each subtask completes, verify the output file was written:

// After Pass N completes:
Read(".tmp-design-specs/{project}/pass-N-{type}.json")
// If file doesn't exist or is invalid JSON, re-run the pass

After extraction, provide:

[Full JSON spec attached]

---

Load these references as needed during extraction for detailed guidance on specific analysis tasks.

Output follows W3C Design Tokens Community Group format (2025.10):