Canva Intake — Structured Discovery

Purpose

Gather everything needed to build a React app from a Canva design in a single structured pass. Uses the Canva AI Connector MCP to export screenshots, Claude's vision capabilities to analyze design structure, asks the user only what it must, and outputs a machine-readable build-spec.json that downstream skills consume without re-asking questions.

When to Use

• First phase of /build-from-canva pipeline
• Any time a user provides a Canva URL and wants to build from it
• When you need to understand a Canva design's structure before generating code

Inputs

• Required: Canva design URL (e.g., https://www.canva.com/design/DAGxyz.../...)
• Optional: Existing project directory to integrate into

Process

Step 1: Auto-Discovery (No User Input)

Extract from Canva via MCP:

Use the Canva AI Connector MCP to interact with the design:

1. Search/identify the design from the URL
   → Design name, dimensions, page count
2. Export full-page screenshots (PNG, 2x scale)
   → One screenshot per page at high resolution
3. If multi-page: export each page separately
   → Individual page screenshots for detailed analysis

Vision analysis of screenshots:

Feed each exported screenshot to Claude for structural analysis:

1. Page structure:
   - Identify distinct sections (hero, navigation, features, footer, etc.)
   - Detect layout patterns (grid, flex, sidebar, stacked)
   - Note responsive hints (if multiple artboards exist)

2. Component candidates:
   - Buttons (variants: primary, secondary, ghost, etc.)
   - Cards, inputs, modals, navbars, footers
   - Repeated patterns that suggest reusable components

3. Visual hierarchy:
   - Heading levels (H1, H2, H3) from size/weight
   - Primary vs secondary actions
   - Content grouping and spacing patterns

4. Text content:
   - All visible text strings (headings, body, labels, CTAs)
   - Placeholder text vs real content

Simultaneously scan the local project (identical to figma-intake):

1. Detect framework via the renderer registry:
   - Run: node scripts/renderer-registry.js detect . --json
   - On { "renderer": "<name>", "language": "<lang>" }:
       set build-spec renderer = <name>
       set build-spec outputTarget = <language>  (react | vue | svelte | react-native)
   - On { "renderer": null }:
       no framework detected → New project needed (ask output target question)
   Do not hand-sniff config files or package.json deps; the registry owns detection.

2. Detect app type:
   - manifest.json with "manifest_version" → Chrome Extension
   - manifest.json with "start_url" or "display" → PWA
   - Otherwise → Web App

3. Scan existing components:
   - Glob: src/components/**/*.tsx, app/components/**/*.tsx
   - Build inventory: name, props interface, file path

4. Check package.json for UI libraries:
   - @shadcn/ui, @radix-ui/*, @headlessui/react
   - tailwindcss, @emotion/*, styled-components
   - State: zustand, jotai, @tanstack/react-query

5. Check for existing design tokens:
   - tailwind.config.ts theme.extend
   - src/styles/tokens.css or similar
   - design-tokens.lock.json (from prior runs)

6. Load pipeline config:
   - Read .claude/pipeline.config.json for thresholds and app type definitions
   - Read canva section for export settings

Step 2: Compile Discovery Summary

Present findings to the user in a structured format:

## Canva Design: [name]
- Pages: [count] pages exported
- Dimensions: [width x height per page]
- Sections detected: [list from vision analysis]
- Component candidates: [count] identified

## Vision Analysis Confidence
- Layout structure: [high/medium/low]
- Component identification: [high/medium/low]
- Text extraction: [high/medium/low]

## Local Project
- Framework: [detected or "none"]
- Existing components: [count] in [path]
- UI library: [detected or "none"]
- Design tokens: [existing or "none"]

## Component Mapping
| Detected Component | Confidence | Existing Match? | Action |
|-------------------|------------|-----------------|--------|
| Primary Button    | High       | src/.../Button  | Reuse / Regenerate |
| Hero Section      | High       | (none)          | Generate new |
| Card              | Medium     | (none)          | Generate (confirm) |

Step 3: Ask Targeted Questions (Max 5)

Only ask questions whose answers cannot be derived from the design or local project.

Question 1 — Scope:

Which pages should I build? [Show numbered list with detected sections] (Default: all pages)

Question 2 — Component Confirmation:

I detected these components from the design screenshots. Confirm or correct: [Show table from Step 2 with confidence levels] (This question is always asked for Canva — unlike Figma, detection is vision-based)

Question 3 — Component Reuse:

I found [N] existing components that match detected components. Should I: a) Reuse them and only generate missing ones b) Regenerate all from the Canva design (replaces existing) c) Generate alongside with new names (no overwrites) (Only ask if existing components were found)

Question 4 — Business Logic:

Are there any interactions or business logic beyond what's visible in the design? (e.g., form validation rules, API calls, auth requirements, state machines) (Default: pure presentational)

Question 5 — Integration:

Should this be: a) A standalone app (new project scaffold) b) Integrated into the existing project at [detected path] (Only ask if existing project detected)

Question 6 — Output Target (only if no framework detected):

Run node scripts/renderer-registry.js list --json and present the returned renderer names as the choices (each entry has name and language): "Which renderer should I build this in? [numbered list of registry renderers]"

• Greenfield React default: vite.
• Set build-spec renderer = the chosen name and outputTarget = its language. (Skip if the registry already detected a framework for the existing project.)

Step 4: Generate build-spec.json

Write the spec file that all downstream phases consume:

// .claude/plans/build-spec.json
{
  "version": "1.0.0",
  "source": "canva",
  "renderer": "vite",             // registry renderer name (from `renderer-registry list`): "nextjs" | "vite" | "sveltekit" | "expo" | "astro" | ...
  "outputTarget": "react",    // resolved language; equals the renderer's language. "react" | "vue" | "svelte" | "react-native"
  "createdAt": "2026-03-18T12:00:00Z",
  "canva": {
    "designId": "DAGxyz...",
    "designName": "My App Design",
    "url": "https://www.canva.com/design/DAGxyz/...",
    "exportedScreenshots": [
      ".claude/visual-qa/screenshots/canva/page-1.png",
      ".claude/visual-qa/screenshots/canva/page-2.png"
    ]
  },
  "appType": "web-app",
  "framework": {
    "type": "vite",           // DEPRECATED — superseded by top-level `renderer`. Retained for back-compat only.
    "version": "6.0.0",
    "outputDir": "src"
  },
  "styling": {
    "approach": "tailwind",
    "uiLibrary": "shadcn",
    "existingTokens": false
  },
  "pages": [
    {
      "canvaPageIndex": 0,
      "screenshotPath": ".claude/visual-qa/screenshots/canva/page-1.png",
      "name": "Home",
      "route": "/",
      "sections": ["hero", "features", "pricing", "footer"]
    }
  ],
  "components": [
    {
      "detectedName": "Primary Button",
      "confidence": "high",
      "reactName": "Button",
      "category": "ui",
      "action": "generate",
      "existingPath": null,
      "variants": ["primary", "secondary", "outline"],
      "props": ["variant", "size", "disabled", "children"]
    }
  ],
  "textContent": {
    "hero-heading": "Build faster with AI",
    "hero-subheading": "Ship production apps in days, not months",
    "cta-primary": "Get Started",
    "cta-secondary": "Learn More"
  },
  "businessLogic": {
    "forms": [],
    "apiCalls": [],
    "auth": null,
    "stateManagement": null
  },
  "e2e": {
    "strategy": "navigate-interact-verify",
    "flows": [
      {
        "name": "page-navigation",
        "description": "Navigate between all pages and verify rendering",
        "steps": ["navigate to /", "verify hero section visible", "click nav link"]
      }
    ]
  },
  "testStrategy": {
    "unit": true,
    "e2e": true,
    "visual": true,
    "crossBrowser": false,
    "coverageThreshold": 80
  },
  "options": {
    "componentReuse": "reuse",
    "integration": "existing"
  }
}

Renderer fields:

• renderer (string) is the authoritative framework field. Valid values are the renderer names from node scripts/renderer-registry.js list --json (currently nextjs, vite, sveltekit, expo, astro).
• outputTarget is retained and equals the resolved renderer's language (react / vue / svelte / react-native). Set both together from the registry detect/resolve output.
• framework.type is deprecated — folded into renderer. Keep it only for back-compat with older specs; renderer wins on any conflict.
• Back-compat rule: a build-spec carrying only outputTarget (no renderer) resolves to that language's DEFAULT renderer: react → vite, svelte → sveltekit, react-native → expo. (vue has no renderer yet — its default is unsupported/future.)

Key differences from Figma build-spec:

• source is "canva" instead of "figma"
• canva block replaces figma block (different metadata)
• exportedScreenshots array — paths to exported PNGs (used by token inference and visual diff)
• Components have confidence field (high/medium/low) since detection is vision-based
• Pages reference canvaPageIndex and screenshotPath instead of figmaNodeId

Step 5: Confirm and Proceed

Present a summary of the build plan:

## Build Plan Summary
- Source: Canva design "[name]"
- Framework: Vite 6.0
- Pages: 3 (Home, Pricing, Dashboard)
- Components: 12 to generate (8 high-confidence, 3 medium, 1 low)
- Existing to reuse: 4
- Output: src/components/, src/pages/
- Token extraction: AI-powered inference (will need your confirmation)

Proceed with token inference? (This starts the autonomous pipeline)

Wait for user confirmation before the pipeline continues.

Output

Primary: .claude/plans/build-spec.json Secondary: Exported screenshots in .claude/visual-qa/screenshots/canva/ Tertiary: Build plan summary displayed to user

Error Handling

• Canva MCP unavailable: Ask user to check Canva AI Connector setup. Offer to proceed with manually provided screenshots.
• Export fails: Fall back to asking user to export PNGs from Canva and provide file paths.
• Low confidence on most components: Warn user that vision-based detection has limitations. Ask for more details or suggest exporting to Figma for higher accuracy.
• Multi-page design ambiguity: Show all pages and ask user to specify which to build.
• Rate limited by Canva API: Apply retry protocol from pipeline.config.json > canva.retry. Log each retry attempt. If all retries fail, ask user to wait 2 minutes and re-invoke Phase 1.
• MCP timeout during export: Retry up to 3 times with exponential backoff. If persistent, reduce export scale to 1x and retry. Fall back to manual export as last resort.

Integration

• Consumed by: canva-token-inference, tdd-from-figma, canva-react-converter, /build-from-canva
• Uses: Canva AI Connector MCP (search, export), Claude vision analysis, Glob, Read