Install CLI

AI Implementation

CalibrateDS extracts so much structured context from Figma — layout trees, state contracts, token bindings, variant axes — that AI can write production-ready component code on the first attempt.

Two Ways to Implement

Via your AI IDE (recommended)

With the MCP server connected, just ask your IDE:

"Implement the Button component"

Your AI calls implement_component, reads the full design context, writes the code, then calls run_verify to pixel-diff the result against the Figma thumbnail. No terminal required, no prompt engineering needed — the AI has everything it needs through MCP.

Via the CLI

If you prefer terminal-driven automation:

1. Set up your AI provider

ptb ai setup

Store the API key persistently (works for CLI and MCP server):

ptb token set sk-ant-xxxx --name ANTHROPIC_API_KEY

Supported providers:

  • Claude (Anthropic) — recommended. Use claude-sonnet-4-6 or claude-opus-4-8.
  • OpenAI — use gpt-4o or gpt-4o-mini.
  • Local models — supported via OpenAI-compatible baseUrl.

We strongly recommend Claude Sonnet or GPT-4o. Smaller models often ignore accessibility contracts and variant constraints from the design context.

2. Implement

ptb implement component Button
ptb implement component .        # implement all components sequentially

PTB bundles the rich ComponentContext and sends it to your configured model, injecting the resulting code directly into your component files.

What the AI Receives

The ComponentContext fed to the AI includes:

  • Variant axes — every Figma property and its allowed values
  • Token bindings — fills, strokes, spacing mapped to CSS variables (var(--ptb-colors-brand-900))
  • State contracts — hover, focus, active, disabled state requirements
  • Interaction contracts — Figma prototype links and expected behaviors
  • Render tree — the expected DOM/layout structure from Figma Auto Layout
  • Dependencies — which other components must be imported

This context is what separates PTB from naively pasting a screenshot into a chat window.

Using Context Without PTB's AI

You can also pass design context to any AI tool manually:

  1. Run ptb export context
  2. Open Cursor, Claude Code, or any AI editor
  3. Tell your AI: "Implement the Button component using the context in .ptb/context/components/button.json"

Your AI IDE gets the full Figma design intent without needing a live Figma connection.

Next Steps

If you are working with a team, see the Team Collaboration guide.