Turn Figma designs into production-ready code — reviewed at every step.
The Design-to-Component Agent converts Figma designs, prototypes, and screenshots into typed React (TypeScript + Tailwind) components or Flutter widgets. It's assistive, not autonomous — nothing is written to disk without your explicit approval.
What it does
One agent, the full design-to-code loop
Every capability below runs through the same reviewed, resumable LangGraph workflow — nothing skips the developer.
Pixel-fidelity Figma compiler
A deterministic geometry compiler translates Auto Layout and real bounding-box geometry directly into Tailwind and JSX — no LLM guessing of structure, colors, or text for a targeted Figma frame.
Full project scaffolding
Optionally creates a complete Vite + React + Tailwind + Storybook project, or a Flutter + Widgetbook project — routing, typed API service stubs, and design-token files included.
Four review checkpoints
Component inventory, generated code, build verification, and a visual diff against the original design all pause for an explicit developer decision — approve, or describe changes.
SDLC pipeline context
Ingests upstream agent output — requirements, OpenAPI specs, screen descriptions — to name entities correctly and generate typed service stubs, plus live design tokens from a shared design system.
Self-learning
Every review comment is distilled into reusable correction patterns and quality-ranked past examples, so future generations improve from real developer feedback automatically.
Any design source
Figma URLs, website/prototype URLs, pasted screenshots, Claude design URLs, and Markdown/PDF/JSON user-story documents all flow through the same analysis-to-inventory pipeline.
How it works
A resumable, reviewed workflow — not a one-shot generation
Built on LangGraph. Every run can pause for minutes, hours, or days at a checkpoint and resume exactly where it left off.
Analyze the design
A Figma URL with a targeted frame goes through the deterministic geometry compiler; other sources (website URLs, screenshots, documents) go through a vision or text analysis pass.
Build the component inventory
Identifies components, props, state, and Tailwind classes — enriched with SDLC pipeline context and design tokens when available.
Checkpoint ① — you review the inventoryGenerate code
Vision-guided or template-based generation produces typed components, Storybook stories or Widgetbook use-cases, layouts, pages, routing, and service stubs.
Checkpoint ② — you review the generated codeScaffold and verify the build
When requested, creates a full runnable project and runs a real build smoke-test (Storybook/Vite build, or Flutter analyze/build) before anything is called done.
Checkpoint ③ — you confirm the build passedVisual verification
For a Figma source, a vision model compares a real render of the design against a screenshot of the running app and lists concrete discrepancies for you to act on.
Checkpoint ④ — you review the visual diffFigma MCP integration
Built to work alongside Figma's official MCP tools
When the calling agent (Claude Code, Claude Desktop, or any MCP-compatible client) already has Figma's official MCP plugin connected, this agent never talks to Figma's API itself. It consumes exactly what the plugin already fetched and refactors it into your project's own conventions — no OAuth client, no Figma token, no independent re-fetch of the design.
get_design_context— fetch the design's code from Figma's plugindownload_assets— save real images/icons locallyget_variable_defs(optional) — fetch design tokenssubmit_figma_export— hand the results to this agent, which refactors them into your project's conventions via the same reviewed pipeline every input type uses
Requirements
What you need to run it
| Component | Notes | |
|---|---|---|
Python 3.11+ and uv | Runs the agent server (FastAPI + LangGraph) | Required |
| An MCP-compatible client | Claude Code, Claude Desktop, or any Model Context Protocol client | Required |
| An LLM provider | Claude, Gemini, or any LiteLLM-supported provider — a single config value switches providers | Required |
| Node.js 20+ | Only needed when scaffolding a full React project (Vite + Storybook) | Optional |
| Flutter SDK | Only needed when scaffolding a full Flutter project (Widgetbook) | Optional |
| Figma's official MCP plugin | Recommended for Figma sources — lets this agent skip direct Figma API access entirely | Optional |
| PostgreSQL + Qdrant | Persistent run history, semantic search over past components, and the self-learning layer | Optional |
Data & privacy
How your design data is handled
This agent is self-hosted by your organization — it is not a hosted third-party service, and it does not sell or share data.
Self-hosted, org-controlled
Runs entirely on infrastructure your organization controls. Design files, generated code, and run history stay on your own servers and database.
You choose the LLM provider
Design content and analysis text are sent only to the LLM provider you configure (e.g. Anthropic, Google, or a self-hosted model) — never to any other third party.
No Figma credentials required
When used alongside Figma's official MCP plugin, this agent never authenticates to Figma itself — it only consumes what the plugin already fetched under the human's own authorization.
Bytes never pass through the LLM
File uploads/downloads for remote deployments are streamed through a dedicated storage layer (MinIO) directly — asset and output bytes are never embedded in an LLM prompt.
Get started
Add the MCP server to Claude Code or Claude Desktop, then describe what you want to build.
Claude Code (CLI)
Claude Desktop (or manual .claude/settings.json)