---
prompt-id: "24"
name: Pixel-perfect clone — token-enforced
status: live
mcp: figma-dev-mode
model: Sonnet 4.6
environment: Claude Code (file output) or Claude Desktop
inputs:
  - Figma frame URL (canonical reference)
  - tokens.css :root block (pasted)
  - Archetype name
outputs:
  - HTML/CSS matching Figma exactly, with all values via tokens
  - Comment block listing every flagged divergence (Figma value with no matching token)
chains: []
prereqs: []
documented-in: Ch18 — Figma → Code (Pixel-perfect clone section)
---

# Prompt 24 — Pixel-Perfect Clone (Token-Enforced)

For when the Figma frame is the contract. The designer has approved a hi-fi mock; engineering must ship it at byte-level fidelity. The trick: enforce tokens while preserving exact visual output. Without enforcement, the AI freelances; with it, the AI maps every value to a token or flags it as a deliberate one-off for designer decision.

## When to use

Path B Scenario A — designer-approved hi-fi mock that must ship pixel-perfect. Run per-frame, not per-codebase. The output is one component or screen; not a refactor of an existing file.

## Output shape

Three parts:
1. **HTML structure** matching Figma layer hierarchy
2. **CSS** using tokens only — no raw values anywhere
3. **Comment block** at the top listing every flagged divergence: "Differs from spec at: [element], [property]"

The flagged-divergence list is the most valuable artifact. The designer reviews each one and decides: one-off override, or new token addition?

## Chain memberships

- None. Scenario-specific tool. Variant of Phase 2 GENERATE (Prompt 17) — pick this one when token enforcement is stricter than the Phase 1 spec.

## Prompt body

```
Read this Figma frame and produce pixel-perfect HTML/CSS.
The frame is canonical — match it exactly, do not reinterpret.

Source frame: [FIGMA_URL]
Token system: src/tokens.css (paste full :root block below)
Archetype: [Harbor | Sentinel | Current | Lattice | Meridian]

Token enforcement rules — ZERO exceptions:
1. Every color value → var(--color-token-name) from tokens.css.
   If a color in Figma does not exist in tokens.css, DO NOT use it.
   Flag it: "[element]: Figma value #ABCDEF has no matching token.
   Closest match: var(--color-...). Use match? OR add new token?"

2. Every spacing/radius/shadow → var(--space-N) / var(--radius-N) /
   var(--shadow-N). Off-grid values flagged the same way.

3. Every typography value → match exactly to the type scale tokens.

4. Every transition → use --duration-* + --easing-* tokens.

Output format:
- HTML structure matching Figma layer hierarchy
- CSS using tokens only — no raw values anywhere
- A comment block at the top listing every flagged divergence
  ("Differs from spec at: [element], [property]")

Critical rule: do NOT silently fix divergences. List them. The
designer decides whether each is a one-off or a token addition.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MCP REQUIRED
  Figma Dev Mode MCP for source frame access.
  Sonnet 4.6 · Claude Code · paste tokens.css inline.

SAVE INSTRUCTION
  Save component to: output/components/<framework>/<ComponentName>.<ext>
  Save divergence list separately if it's long: output/divergences-<date>.md

VERIFY
  Search the output for raw hex / raw spacing — should be zero
  outside the divergence list. Designer reviews divergences and
  decides per-item: token addition or accepted one-off.

HANDOFF
  "Pixel-perfect clone produced. <N> divergences flagged.
   Designer review next: each divergence is either a new
   token (extend tokens.css + re-run Chain 1) or an accepted
   one-off (annotate in component CSS). After review, run
   Chain 5 (a11y audit) before merge."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```