---
prompt-id: "25"
name: Framework migration via Figma source
status: live
mcp: figma-dev-mode
model: Sonnet 4.6
environment: Claude Code (file output) or Claude Desktop
inputs:
  - Existing component code (any framework)
  - Source framework name (Tailwind / styled-components / CSS modules / vanilla)
  - Target framework name
  - Figma file URL with canonical version of the component
  - tokens.css (target token system)
outputs:
  - New component file in target framework
  - Migration notes (what changed, what stayed, prop API preservation)
  - List of new tokens needed in tokens.css
  - Test surface (props/states to verify post-migration)
chains: []
prereqs: []
documented-in: Ch18 — Figma → Code (Framework migration section)
---

# Prompt 25 — Framework Migration via Figma Source

For codebase migrations that span the design system layer. A component shipped in Tailwind, the system is moving to vanilla CSS with custom properties (or the reverse). The trick: don't translate class-by-class — that carries baggage from old conventions. Use Figma as the canonical source of design intent and re-derive the component fresh in the target framework, against the token system.

## When to use

When migrating between frameworks (Tailwind ↔ vanilla CSS, styled-components ↔ CSS modules, etc.) and the target codebase has a different token convention. Run per-component, not as a bulk codemod. The Figma source must exist and be canonical.

## Output shape

Four artifacts:
1. **New component file** in the target framework, using `var(--token)` references throughout
2. **Migration notes** — what changed, what stayed
3. **Token gap list** — any tokens needed that aren't in tokens.css yet
4. **Test surface** — which props and states to exercise post-migration

The prop API is preserved exactly so consumers don't break.

## Chain memberships

- None. Scenario-specific refactor tool. Pairs naturally with Chain 4 (drift audit) post-migration.

## Prompt body

```
Migrate this component from [SOURCE_FRAMEWORK] to [TARGET_FRAMEWORK].
Use the Figma file as the canonical source — not the existing code.

Existing component: [paste source code]
Source framework: [Tailwind | styled-components | CSS modules | vanilla]
Target framework: [Tailwind | styled-components | CSS modules | vanilla]
Figma source: [FIGMA_URL] · frame: [FRAME_NAME]
Token system: src/tokens.css (paste below)

Steps:
1. READ the Figma frame and extract its design intent
   (spacing, typography, color usage by role).
2. IGNORE the existing component's literal class names.
   They may carry baggage from old conventions.
3. WRITE fresh code in the target framework using:
   - Token references from tokens.css (not raw values)
   - Semantic HTML matching the Figma layer hierarchy
   - Component states (hover, focus-visible, disabled)
     even if not visible in Figma's default state
4. PRESERVE the existing component's prop API surface
   (props in → props out the same), so consumers don't change

Output:
- New component file in target framework
- Migration notes: what changed, what stayed
- List of any tokens that need to be added to tokens.css
- Test surface: what props/states should be exercised post-migration

Do NOT translate class-by-class. Re-derive from Figma + tokens.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MCP REQUIRED
  Figma Dev Mode MCP for canonical source.
  Sonnet 4.6 · Claude Code · component-by-component migration.

SAVE INSTRUCTION
  Replace the existing component file in output/components/
  Keep the original in output/components/_archive/<date>/

VERIFY
  Prop API matches the original (consumers don't break).
  No raw values in the new component (all tokens).
  All states present (hover / focus-visible / disabled).
  Run Chain 4 (drift audit) on the new file.

HANDOFF
  "Migration complete. <N> tokens flagged for addition to tokens.css.
   Run Chain 4 (drift audit) and Chain 5 (a11y audit) on the new
   component before replacing the old one in production."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```