Design Twin — Design skill for Claude Code

Design Twin

Figma → code with Claude Code, on the **free** Figma plan, with nothing leaving your machine.

Design Twin exports a Figma design through the **Figma Plugin API** (not the REST API or a paid Dev Mode seat). The design, its variables and its assets are written to your project's `design/export/` as stack-neutral JSON. Claude Code skills then review the design, build it in your stack reusing your components and tokens, check the result against the design, and re-sync the code when the design changes. The Figma plugin can only reach `ws://localhost`, so it cannot phone home.

[](https://github.com/its-magdy/design-twin/actions/workflows/test.yml) [](LICENSE)

---

• How it works
• Prerequisites
• Installation
• Set up your project
• Usage
• Command reference
• Where files land
• Running tests
• Further reading
• License

---

How it works

The repo ships **three products**, installed separately:

Piece	What it is	How you install it
figma-plugin/	The Figma-side extractor. Reads the open file and exports JSON, variables, and SVG/PNG assets.	Imported into Figma desktop from its manifest
bridge/	The dtwin CLI and the MCP server. Both talk to the Figma plugin over a localhost WebSocket (port 8787).	From a clone (not on npm): root bun install, then bun link in bridge/
claude-plugin/	The designtwin Claude Code plugin: skills, stack profiles and agents. It has no dependencies beyond Bun on PATH.	claude plugin install

There are three ways to get a design out of Figma:

Path	Setup	Best for
Manual: click Export in the Figma plugin, save th