Component Brief to Figma

This add-on bridges Claude-generated component specs with design handoff. It maps component names, variants, tokens, and usage notes into a format design teams can quickly import.

Balanced tokens

Intermediate

Stable

Desktop

Code

API

MCP

GitHub

Token efficiency+8-12% per task

Adds format conversion prompts but reduces back-and-forth between design and code.

What problem it solves

Manual and inconsistent handoff from Claude UI drafts into design tooling.

When to use

Teams using both Claude and Figma
Design ops workflows

When to avoid

You do not use Figma libraries
You only need raw HTML output

Use cases

Design-to-code alignment

Ensure naming patterns stay consistent across design and implementation.

Variant naming driftHandoff cleanup overhead

Example workflow

1Generate component brief in Claude UI Canvas
2Run conversion template from this repo
3Import JSON into your Figma script
4Review token mapping and publish

Similar repos

Claude UI Canvas

Turn rough UI prompts into structured React component briefs with token-aware constraints.

design

Excellent tokens

Next.js Claude Starter

Minimal Next.js shell with prompt workflows, guardrails, and shipping templates.

frontend

Excellent tokens