---
prompt-id: "27"
name: Component mapping report (Code → Figma)
status: live
mcp: figma-dev-mode (read access)
model: Sonnet 4.6
environment: Claude Desktop (with Figma Dev Mode MCP)
inputs:
  - Existing codebase components (paste or path)
  - Target Figma library URL
outputs:
  - Three-section report: Direct Matches, Partial Matches, Figma Assembly Spec
  - Per-component recommended action
  - Auto-layout specs for components to be built in Figma
chains: [8]
prereqs: []
documented-in: Ch19 — Code → Figma
---

# Prompt 27 — Component Mapping Report (Code → Figma)

The planning artifact for the Code → Figma direction. Reads existing code components and the target Figma library, produces a three-way classification: Direct Matches (exists in both, same), Partial Matches (exists in Figma but missing variants), Figma Assembly Spec (must be built — with auto-layout, padding, child hierarchy specified). This is the most valuable artifact in the workflow — review it with the designer before any writes.

## When to use

Listed in Chain 8 (Figma write-back) as an optional Step 0 — run when you don't already know what's in Figma vs. what needs to be created. The mapping report is the design-decision document; Chain 8 is the execution. Run this prompt first, get sign-off on what should be added/changed, then run Chain 8 to perform the writes.

## Output shape

Three-section report:
1. **DIRECT MATCHES** — code components that exist identically in Figma. Format: code path → Figma library path.
2. **PARTIAL MATCHES** — exists in Figma but missing variants/states. For each: what exists, what's missing, recommended action.
3. **FIGMA ASSEMBLY SPEC** — must be built in Figma. For each: name, target location, auto-layout direction, padding/gap, child hierarchy as ASCII tree, variants to create.

## Chain memberships

- Chain 8 — Figma write-back (optional Step 0 — plan before write)

## Prompt body

```
Analyze my existing codebase and the target Figma file.
Produce a component mapping report.

Codebase: [paste components or file path]
Target Figma library: [FIGMA_URL]

Output three sections:

1. DIRECT MATCHES
   Code components that exist identically in the Figma library.
   For each: code path → Figma library path

2. PARTIAL MATCHES
   Code components that exist in Figma but are missing variants
   or states. For each:
   - What exists in Figma
   - What is missing
   - Recommended action

3. FIGMA ASSEMBLY SPEC
   Components in code that do not exist in Figma at all.
   For each, specify:
   - Name and target location in Figma library
   - Auto-layout direction (horizontal | vertical | grid)
   - Padding, gap, sizing constraints (exact px)
   - Child component hierarchy as ASCII tree
   - Variants to create (if any)

Rules:
  - Preserve exact naming conventions from the codebase
  - Use Figma auto-layout terminology (not CSS flexbox)
  - All measurements in px (Figma native)
  - Do NOT modify Figma yet. This is planning only.

Review the report with the designer before any writes.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MCP REQUIRED
  Figma Dev Mode MCP (read only — this prompt does not write).
  Sonnet 4.6 · Claude Desktop.

SAVE INSTRUCTION
  Save report to: output/component-mapping-report-<YYYY-MM-DD>.md
  Share with the designer for review before running Chain 8.

VERIFY
  All three sections present. Auto-layout specs use Figma
  terminology (not CSS flexbox). All measurements in px.

HANDOFF
  "Mapping report complete. Designer reviews and decides which
   Direct Matches and Partial Matches to action, and which
   Assembly Spec items to build. Then proceed to Chain 8 to
   perform the writes — Chain 8 will reconcile against this
   report and execute variable updates via MCP write."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```