design-import

# Design Import Turn a Claude Design handoff bundle into scaffolded React components, with provenance and dedup against the existing codebase. ```bash design-import https://claude.ai/design/abc123 # From handoff URL design-import /tmp/handoff-bundle.json # From local file ``` ## When to use After exporting a handoff bundle from claude.ai/design. This skill is the **entry point** — it does NOT open a PR, run tests, or deploy. For the end-to-end flow (import → tests → PR), use `design-ship` instead. ## Pipeline ``` Handoff bundle (URL or file) │ ▼ ┌──────────────────────────────┐ │ 1. PARSE + VALIDATE │ via claude-design-orchestrator agent │ - Fetch bundle │ Schema validation │ - Compute bundle_id (sha) │ Surface deviations └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ 2. RECONCILE TOKENS │ Diff bundle tokens vs project tokens │ - Read project tokens │ Conflicts → AskUserQuestion │ - Apply additions │ Additions → write to design-tokens.json └──────────┬───────────────────┘ │ ▼ ┌──────────────────────────────┐ │ 3. DEDUP COMPONENTS │ For each proposed component: │ Storybook MCP first │ • exact match → reuse (skip) │ 21st.dev next │ • similar match → adapt │ Filesystem grep last │ • no match → scaffold └──────────┬───────────────────┘ │ ▼ ┌──────────...