@calibrate-ds/cli · v0.1.98 · public beta

Your design fileis source code.Compile it.

ptb scans Figma into a typed model, generates React and tokens, and gives your AI IDE 23 live tools to implement and pixel-verify against the design. Below the 0.90 gate, the AI corrects itself.

Get started

npm install -g @calibrate-ds/cli

Local-first · no cloud syncReact + TypeScript outPublic beta · 735 testsWindows · macOS · Linux

Claude Code — ptb connected · 23 tools

01 · The problem

AI ships UI faster than ever.
From screenshots. By guessing.

The design file holds the real contract — variant axes, token bindings, state behavior. Everything downstream of the handoff loses it.

✗ context · hallucinated"make it match the design" + screenshot→ invented props · wrong tokens

The model never saw the real variant axes.

✗ handoff · redlines rotspec.pdf — updated 3 weeks ago→ Figma moved on the next day

The spec was stale before the sprint ended.

✗ done · unmeasured"looks right on my machine"→ no diff against the file

Nobody pixel-checked it. Nobody could.

✗ staleness · invisibledesigner edits hover state→ code keeps shipping the old one

There was no lockfile between design and code.

02 · The process

Scan. Implement. Verify.

Scan

ptb scan reads Figma like a compiler reads source.

The file becomes a structured, typed model — components, variant axes, token bindings, state contracts, render trees. Typed React shells and CSS custom properties are generated from it, and per-component context files are committed to git, so any AI can read design truth without a live Figma connection.

$ ptb scan
✔ 24 components · 180 tokens
✔ .ptb/latest.json written
$ ptb generate-components
✔ typed shells + CSS variables

Implement

Your AI IDE writes from real context, not screenshots.

ptb mcp setup wires Claude Code, Cursor, or Windsurf in one command — 23 live tools. implement_component hands the AI the actual variant axes, token bindings, and state contracts, plus the import paths of every dependency. No guessing, no invented props.

$ ptb mcp setup
✔ Claude Code → .mcp.json

you: "implement Button"
AI:  [get_component] [implement_component]

Verify & stamp

"Done" is a score, not a feeling.

run_verify renders the component and pixel-diffs it against the Figma reference. Below the 0.90 gate, the AI reads the visual feedback and self-corrects. At pass, the component is stamped into ptb.lock — and ptb status shows exactly what goes stale the moment design moves again.

AI:  [run_verify]
     similarity 0.96 ✓ (gate 0.90)
     stamped → ptb.lock
$ ptb status
     Design · Code · Visual — fresh

03 · The instrument

A compiler's rigor.
A teammate's manners.

23 MCP tools

Scan, inspect, implement, verify, document, assign, and stamp — entirely from chat. Claude Code, Cursor, Windsurf, VS Code, one setup command.

The verify loop

Pixel diff against the Figma render with a 0.90 similarity gate. Below it, the AI gets structured visual feedback and corrects itself. Verified means measured.

Freshness ledger

ptb.lock records designHash vs stampedHash per component. ptb status renders the Design / Code / Visual table; CI catches drift before it ships.

Context in git

.ptb/context/ and AI.md are committed files — portable design truth any AI IDE can read, even with no Figma token and no network.

Team lanes

assign_component, my_queue, start_work build orders in dependency order, submit_work. The lockfile is the team sync — no external service.

Hardened on real files

Cross-key collision guard with an --ignore-collisions escape hatch, zod-validated scans that skip bad nodes loudly, capped Retry-After rate-limit resilience. 735 tests.

All 23, from chat:

get_componentimplement_componentrun_verifyget_statuslist_componentsget_tokenget_variant_tokenstoken_impactwhat_usesrun_diffdiff_cleardocument_componentassign_componentmy_queuestart_worksubmit_workget_verify_reportfind_component_by_figma_nodelist_themesget_checklistwhats_newsetup_mcprun

MCP docs

Stop guessing from
screenshots. Compile.