Quick Start

YAML
# Extract design context first
get_design_context(figma_url)

# For any <img> nodes, fetch asset URLs
WebFetch(asset_url)

# Screenshot specific elements for verification
get_screenshot(node_id)

# Output normalized YAML structure
colors:
  primary: "#4385FF"
  text_primary: "#1A1A1A"
components:
  card:
    layout: column
    padding: 16dp
    background: white
    cornerRadius: 8dp

Workflow

Progress:

• Extract design context and analyze layer hierarchy
• Fetch all <img> asset URLs to extract colors/fills
• Screenshot key components for verification
• Normalize inconsistent spacing/sizing to 4dp grid
• Verify alignment intent before writing positions
• Calculate content padding for page layouts
• Create unified design tokens (colors, typography, shadows)
• Structure component hierarchy with proper parent-child relationships
• Validate arithmetic: container size = children + padding + gaps
• Review for forbidden patterns (multiple children with individual offsets)

1. Layer Analysis: Remove hidden/useless layers, merge overlapping decorative elements
2. Color Extraction: Fetch all <img> assets, extract colors from SVG/PNG, normalize similar values
3. Layout Normalization: Convert to responsive layout (flex, weight, match_parent) over fixed dimensions
4. Alignment Detection: Identify common patterns (icon+text rows, centered content) and use alignment properties
5. Typography Unification: Create hierarchy tiers, merge inconsistent font sizes
6. Component Structure: Define clear parent-child relationships, avoid positioning ambiguity

Examples

Example 1: Card Component Input: Figma card with slight size variations (332px vs 336px width) Output:

YAML
card:
  layout: column
  width: match_parent  # normalized from inconsistent widths
  padding: 16dp
  background: white
  cornerRadius: 8dp  # normalized from 7-9px variations
  children:
    - image:
        width: match_parent
        height: 180dp
        cornerRadius: 4dp
    - content:
        layout: column
        padding: [12dp, 0dp]
        verticalAlignment: center  # detected alignment intent

Example 2: Icon+Text Row Input: Icon at y=23px, text at y=27px in 56dp container Output:

YAML
row:
  height: 56dp
  verticalAlignment: center  # normalized from offset positions
  spacing: 12dp
  children:
    - icon: { resource: "ic_star", size: 24dp }
    - text: { content: "Rating", style: "{textStyles.body}" }

Best Practices

• Use 4dp baseline grid - Round all spacing/sizes to multiples of 4
• Prefer semantic alignment over absolute positioning (center, space-between vs top: 23dp)
• Normalize similar values - Merge 11px, 12px, 13px spacing into 12dp
• Extract mandatory content padding for pages, especially bottom padding for scrollable content
• Fetch all <img> assets - Never guess colors for vector images
• Verify arithmetic - Container size should equal sum of children + gaps + padding
• Full property matching - Only reference shared text styles if ALL properties match

Common Pitfalls

• DON'T write individual offsets for children without container alignment declaration
• DON'T assume white backgrounds - verify from screenshots
• DON'T guess gradient colors - only declare if found in SVG source
• DON'T skip fetching <img> assets - this causes wrong color values
• DON'T ignore bottom content padding on scrollable pages
• DON'T use fixed dimensions when responsive layout is more appropriate
• DON'T reference text style presets if any property differs from component's actual values