Canva Token Inference — AI-Powered Token Extraction

Purpose

Extract design tokens from Canva design screenshots using Claude's vision capabilities. Unlike Figma's programmatic token extraction, Canva doesn't expose design data through APIs. This skill bridges that gap by analyzing screenshots to infer colors, typography, spacing, and effects, then presenting them with confidence scores for user confirmation before writing the lockfile.

The output is identical to design-token-lock — a design-tokens.lock.json that downstream phases consume with no awareness of the source.

When to Use

• Phase 2 of the /build-from-canva pipeline (after canva-intake)
• Phase 2 of the /build-from-screenshot pipeline (after screenshot-intake)
• Any time you need to extract design tokens from Canva screenshots
• Any time you need to extract design tokens from screenshots (any source)
• When regenerating Tailwind config from Canva screenshots

Inputs

• Required: .claude/plans/build-spec.json with "source": "canva" or "source": "screenshot" and screenshot paths
  • For canva: reads canva.exportedScreenshots[]
  • For screenshot: reads screenshot.capturedScreenshots[]
• Optional: User-provided brand guidelines, style guide, or color palette

Process

Step 1: Gather Screenshots for Analysis

Read build-spec.json and collect all exported screenshots:

1. Determine source type from build-spec.json.source
2. If "canva": read canva.exportedScreenshots[]
3. If "screenshot": read screenshot.capturedScreenshots[]
4. Verify all screenshot files exist
5. If missing:
   - canva: re-export via Canva MCP
   - screenshot URL: re-capture via Chrome DevTools/Playwright MCP
   - screenshot files: ask user to re-provide

Step 2: AI Vision Token Extraction

Analyze each screenshot with Claude vision. Extract tokens in stages:

Pass 1 — Colors:

Analyze the screenshots and extract ALL distinct colors used in the design.
Group them as:

1. Brand/Primary colors (dominant, used for CTAs and key UI)
2. Secondary/Accent colors
3. Neutral/Gray scale (backgrounds, borders, muted text)
4. Semantic colors (success green, error red, warning amber, info blue)
5. Background colors (page, card, section backgrounds)
6. Text colors (headings, body, muted, links)

For each color, provide:
- Exact hex value (best estimate from the screenshot)
- Suggested semantic name
- Where it appears in the design
- Confidence: high (clear, solid color) / medium (gradient or subtle) / low (ambiguous)

Pass 2 — Typography:

Analyze the screenshots and extract ALL typography styles:

1. Font families (identify by visual characteristics)
   - Heading font
   - Body font
   - Monospace font (if any)
   - Note: may need user confirmation since fonts can't be identified
     with 100% accuracy from screenshots

2. Size scale (estimate px values from relative sizing)
   - Each distinct text size used
   - Map to semantic names (xs, sm, base, lg, xl, 2xl, etc.)

3. Font weights used
   - Normal (400), Medium (500), Semibold (600), Bold (700)

4. Line heights (estimate from text block spacing)

For each, provide confidence level.

Pass 3 — Spacing:

Analyze the screenshots for spacing patterns:

1. Component internal padding
2. Section padding (top/bottom, left/right)
3. Gap between repeated elements (cards, list items)
4. Margin between sections
5. Container max-width

Estimate px values. Map to Tailwind spacing scale where possible.

Pass 4 — Effects & Advanced Styling:

Extract ALL visual effects and advanced styling:

1. Border radius values (per component type: buttons, cards, inputs, avatars)
2. Box shadows (subtle, medium, large — note direction and spread)
3. Border styles (width, color, style: solid/dashed/dotted)
4. Opacity values (structural vs decorative)
5. Gradients:
   - Direction (top-to-bottom, left-to-right, diagonal)
   - Color stops with positions
   - Type (linear, radial)
6. Backdrop effects:
   - Blur radius estimates
   - Background opacity behind blur
7. Text effects:
   - Letter spacing (tight, normal, wide)
   - Text shadows (color, offset, blur)
8. Transitions/motion hints:
   - Elements that appear to have hover states
   - Progress indicators or animated elements

For each, provide confidence level and specific Tailwind mapping suggestion.

Step 3: Confidence Scoring

Assign confidence to each extracted token:

High   — Clear, unambiguous value
         Examples: solid button color, large heading size, obvious border radius
         Action: Include in lockfile automatically

Medium — Likely correct but could be slightly off
         Examples: body text size (14px or 16px?), muted text color, subtle shadow
         Action: Include in lockfile, flag for user review

Low    — Best guess, needs confirmation
         Examples: font family identification, exact spacing values, gradient stops
         Action: Include tentative value, require user confirmation

Step 4: Present Tokens for User Confirmation

Display extracted tokens grouped by category with confidence indicators:

## Extracted Design Tokens from Canva

### Colors (12 detected)

**Brand**
[High]   primary:           #2563EB (blue, used for CTAs and links)
[High]   primary-hover:     #1D4ED8 (darker blue, button hover state)
[High]   secondary:         #7C3AED (purple, accent elements)

**Neutral**
[High]   background:        #FFFFFF (page background)
[High]   surface:           #F9FAFB (card/section backgrounds)
[High]   border:            #E5E7EB (dividers and input borders)
[Medium] muted-text:        #6B7280 — could be #64748B, hard to tell

**Semantic**
[High]   destructive:       #DC2626 (error states)
[Low]    success:           #16A34A — I see green but it's small, confirm?

### Typography (2 families detected)

[Medium] heading-font:      "Inter" — looks like Inter or possibly Outfit. Which?
         Options: a) Inter  b) Outfit  c) Something else: ___
[High]   body-font:         "Inter" — consistent weight/metrics with Inter
[Low]    mono-font:         Not detected — do you use a monospace font?

**Size scale:**
[High]   h1:  48px (2xl-3xl range)
[High]   h2:  36px
[High]   h3:  24px
[High]   body: 16px
[Medium] small: 14px — or 13px?

### Spacing
[High]   section-padding:    64px (py-16)
[High]   card-padding:       24px (p-6)
[Medium] card-gap:           24px — or 32px?
[High]   container-max:      1280px (max-w-7xl)

### Effects
[High]   card-radius:        12px (rounded-xl)
[High]   button-radius:      8px (rounded-lg)
[Medium] card-shadow:        0 4px 6px -1px rgba(0,0,0,0.1) — subtle, confirm?
[High]   input-border:       1px solid #E5E7EB

---

Please confirm or correct the flagged values (Medium and Low confidence).
You can also add any tokens I missed.

Wait for user response. Update values based on their corrections.

Step 5: Write Lockfile

After user confirmation, write src/styles/design-tokens.lock.json in the same format as design-token-lock:

{
  "version": "1.0.0",
  "generatedAt": "2026-03-18T12:00:00Z",
  "source": "canva",
  "canvaDesignId": "DAGxyz...",
  "inferenceConfidence": "high",

  "colors": {
    "primitives": {
      "blue-600": { "hex": "#2563eb", "rgb": "37, 99, 235", "tailwind": "blue-600" }
    },
    "semantic": {
      "primary": { "ref": "blue-600", "hex": "#2563eb", "tailwind": "primary" }
    },
    "component": {
      "card-bg": { "ref": null, "hex": "#f9fafb", "tailwind": "card" }
    }
  },

  "typography": {
    "families": {
      "sans": { "value": "Inter", "fallback": "system-ui, -apple-system, sans-serif" }
    },
    "scale": {
      "base": { "px": 16, "rem": "1rem", "tailwind": "text-base" }
    },
    "weights": { "normal": 400, "medium": 500, "semibold": 600, "bold": 700 },
    "lineHeights": { "tight": 1.25, "normal": 1.5, "relaxed": 1.75 }
  },

  "spacing": {
    "scale": {
      "4": { "px": 16 },
      "6": { "px": 24 },
      "8": { "px": 32 }
    },
    "custom": {}
  },

  "borderRadius": {
    "lg": { "px": 8 },
    "xl": { "px": 12 }
  },

  "shadows": {
    "md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" }
  },

  "textContent": {
    "hero-heading": "Build faster with AI",
    "cta-primary": "Get Started"
  }
}

Step 6: Generate Framework Config and CSS Properties

The token-extraction above is framework-agnostic; only the config target changes. Resolve the build-spec's renderer manifest to pick the target:

node scripts/renderer-registry.js resolve <renderer> --json

Use manifest.language to choose the styling approach and manifest.template to locate where the framework's config lives and what shape it takes:

• react / vue / svelte — Tailwind CSS-variable approach. Generate or update the Tailwind config (e.g. tailwind.config.ts, alongside manifest.template) plus src/styles/tokens.css. All values reference var(--color-*) — no raw hex in config. (Astro reuses this React/Tailwind path: its language is react.)
• react-native — NativeWind. Generate the NativeWind/Tailwind config and a StyleSheet token module for the Expo template (manifest.template) instead of a web tokens.css.

Steps otherwise mirror design-token-lock Steps 4-5.

Step 7: Validate Lockfile

After generation, verify:

1. Completeness: Every section of the design has corresponding tokens
2. Consistency: No duplicate values with different keys
3. Tailwind mapping: Every lockfile entry has a valid Tailwind class
4. Cross-reference: Spot-check 3-5 values against the Canva screenshots

Report any gaps to the user before proceeding.

Output

Accuracy Expectations

User confirmation compensates for lower accuracy areas.

Error Handling

• Screenshots too low resolution: Re-export at higher scale (3x or 4x)
• Font not identifiable: Present top 3 candidates, ask user to confirm
• Inconsistent colors across pages: Flag and ask if intentional (theme/branding) or error
• User provides brand guidelines: Use as ground truth, skip inference for covered tokens

Integration

• Produces: design-tokens.lock.json, tailwind.config.ts, tokens.css
• Consumed by: tdd-from-figma (test assertions), canva-react-converter (component generation), verify-tokens.sh (enforcement), /build-from-screenshot (screenshot pipeline)
• Uses: Canva MCP (export), Claude vision analysis, Read