Handbook
AI figma-to-code tools regenerate from scratch every run: names drift, nested loops collapse wrong, and the PR diff is noise. Calque is a pure-rules engine — the same Figma JSON always produces the same files.
| AI tools | Calque | |
|---|---|---|
| Replay | Different code each run | Byte-identical for same input + context |
| Design system | div-soup or invented imports | Scans your repo; real import paths |
| Whole page | Self-contradicting names | Stable batch: array of nodes → tree of files |
| CI | Hard to trust | --check / /v1/check self-proof |
PascalCase function (collisions get stable -2, -3)source id through the IR
In CI: convert twice and assert equality, or run
bun run calque check design.json / POST /v1/check.
Raw Figma values are magic numbers. Calque maps them to semantic classes (e.g. Tailwind scale, palette tokens) only when the rendered pixels stay identical. Off-scale gaps, off-palette colors, and near-miss radii stay as literals — never “close enough.”
| Raw Figma | Recovered | Rule |
|---|---|---|
gap: 24px | gap-6 | Exact hit on scale |
#18181b | bg-zinc-900 | Byte-equal palette match |
cornerRadius: 9999 on 36×8 | rounded-full | Radius ≥ half short side → pill |
gap: 13px | gap-[13px] | Off-scale kept literal |
| Deterministic | Whole page | DS mapping | |
|---|---|---|---|
| FigmaToCode-style OSS | ✓ | ✓ | ✗ |
| Builder.io-class AI | ✗ | ✓ | ✓ |
| Figma Code Connect | ✓ | ✗ | ✓ |
| Calque | ✓ | ✓ | ✓ |
Calque owns structure, styles, loops, and component binding. You own data fetching, app state, routing, and business logic. That split keeps PRs reviewable: the generated files are geometry + mapping, not “whatever the model felt like today.”