Repolode
Submit
BIAsia

BIAsia/c2d2c

Claude Code skills that move designs from Figma into a codebase and code state back into Figma, plus a style-system governance skill.

Open-source alternative to:Figma Dev Mode

View on GitHubWebsite
Stars
57
Forks
2
Open issues
0
Last commit
3 months ago

What is it?

c2d2c is a set of three Claude Code skills that connect Figma and a production codebase in both directions. The d2c skill turns a Figma design link into code, running a survey of existing components, a plan review, a 1:1 build, a regression page, screenshot acceptance, and an automatically opened merge request. The c2d skill goes the other way, exporting components, states and design tokens from source code into Figma files.

The third skill, ds-govern, works on the code side alone. It takes a census of how styles such as border radius are used, proposes a single source of truth, migrates the whole project to it, and adds a CI gate to prevent drift. An optional Token Sync Figma plugin lets designers push edits back into code as merge requests.

Install with npx skills add. Each skill is triggered by natural-language requests, and project settings are saved to a C2D2C.md file at the repo root on first run. The Figma MCP connector is required for the design-facing steps.

Key features

  • 01Figma-to-code build with a survey of reusable components before implementation
  • 02Code-to-Figma export of components, states and design tokens
  • 03Style-system convergence with a single token source and CI gate
  • 04Regression screenshot tool built on Playwright, with full-page and section close-ups
  • 05Optional Figma plugin that pushes designer edits back to code as merge requests

Use cases

  • Implementing a Figma design 1:1 in an existing frontend codebase
  • Exporting a codebase's components into Figma for design review
  • Unifying scattered spacing, radius or color values into one token scale

Quick start

  1. 1

    Install the skills with the package manager

    npx skills add BIAsia/c2d2c
  2. 2

    Connect the Figma MCP connector (read access for d2c, write access for c2d)

  3. 3

    Ask the agent to run a skill with your intent and Figma link; config is bootstrapped into C2D2C.md on first run

Things to know

  • Requires the Figma MCP connector, which is a hard prerequisite.
  • The README recommends running it with Claude Fable 5 and says earlier models tend to drop steps.

Topics

#claude-code#figma#design-tokens#design-system#code-generation#agent-skills

FAQ

What is c2d2c?
Claude Code skills that move designs from Figma into a codebase and code state back into Figma, plus a style-system governance skill. c2d2c is a set of three Claude Code skills that connect Figma and a production codebase in both directions. The d2c skill turns a Figma design link into code, running a survey of existing components, a plan review, a 1:1 build, a regression page, screenshot acceptance, and an automatically opened merge request. The c2d skill goes the other way, exporting components, states and design tokens from source code into Figma files.
Is c2d2c free to use? What license does it have?
c2d2c is open source under the MIT license. Check the license terms before using it in commercial products.
Is c2d2c still maintained?
Updated within 6 months. The last commit to c2d2c was on Aug 3, 2026.
What can I use c2d2c for?
Implementing a Figma design 1:1 in an existing frontend codebase Exporting a codebase's components into Figma for design review Unifying scattered spacing, radius or color values into one token scale
How do I install c2d2c?
Install the skills with the package manager: npx skills add BIAsia/c2d2c Connect the Figma MCP connector (read access for d2c, write access for c2d) Ask the agent to run a skill with your intent and Figma link; config is bootstrapped into C2D2C.md on first run
Where can I get c2d2c?
The source code and installation instructions are on GitHub: https://github.com/BIAsia/c2d2c

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects