Repolode
提交项目
BIAsia

BIAsia/c2d2c

一组 Claude Code 技能，实现 Figma 设计与代码之间的双向同步，并附带样式系统治理能力。

可替代:Figma Dev Mode

在 GitHub 查看官网
Star
57
Fork
2
未关闭 Issue
0
最近提交
3个月前

这是什么？

c2d2c 是一组 Claude Code 技能，用于在 Figma 与生产代码库之间双向同步。d2c 技能可将 Figma 设计链接实现为代码，流程包括现有组件盘点、方案审阅、1:1 还原构建、回归页面、截图验收，并自动发起合并请求。c2d 技能则反向工作，把源码中的组件、状态和设计令牌导出到 Figma。

第三个技能 ds-govern 专注于代码侧，对圆角等样式的使用情况做全量梳理，提出统一的单一来源，迁移整个项目，并通过 CI 门禁防止样式再次分散。可选的 Token Sync Figma 插件允许设计师把修改以合并请求的形式推回代码。

通过 npx skills add 安装，技能根据自然语言请求触发；项目配置会在首次运行时保存到仓库根目录的 C2D2C.md 中。涉及设计的步骤需要 Figma MCP 连接器。

核心功能

  • 01Figma 转代码，实现前先盘点可复用组件
  • 02代码转 Figma，导出组件、状态与设计令牌
  • 03统一样式系统，提供单一令牌来源和 CI 门禁
  • 04基于 Playwright 的回归截图工具，支持整页与分区截图
  • 05可选的 Figma 插件，将设计师修改以合并请求形式推回代码

适用场景

  • 在现有前端项目中按 1:1 还原 Figma 设计
  • 把代码库中的组件导出到 Figma 供设计评审
  • 将分散的间距、圆角、颜色取值统一为一套令牌

快速上手

  1. 1

    使用 npx 安装技能

    npx skills add BIAsia/c2d2c
  2. 2

    连接 Figma MCP 连接器（d2c 需读取权限，c2d 需写入权限）

  3. 3

    用你的意图和 Figma 链接让代理运行技能；首次运行时会将配置写入 C2D2C.md

使用前须知

  • 必须先连接 Figma MCP 连接器，这是硬性前提。
  • README 建议使用 Claude Fable 5 运行，并称较早的模型容易中途漏掉步骤。

标签

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

常见问题

c2d2c 是什么？
一组 Claude Code 技能，实现 Figma 设计与代码之间的双向同步，并附带样式系统治理能力。 c2d2c 是一组 Claude Code 技能，用于在 Figma 与生产代码库之间双向同步。d2c 技能可将 Figma 设计链接实现为代码，流程包括现有组件盘点、方案审阅、1:1 还原构建、回归页面、截图验收，并自动发起合并请求。c2d 技能则反向工作，把源码中的组件、状态和设计令牌导出到 Figma。
c2d2c 可以免费使用吗？用的什么许可证？
c2d2c 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
c2d2c 还在维护吗？
半年内有更新。c2d2c 最近一次提交是在 2026年8月3日。
c2d2c 适合用来做什么？
在现有前端项目中按 1:1 还原 Figma 设计 把代码库中的组件导出到 Figma 供设计评审 将分散的间距、圆角、颜色取值统一为一套令牌
c2d2c 怎么安装和运行？
使用 npx 安装技能: npx skills add BIAsia/c2d2c 连接 Figma MCP 连接器（d2c 需读取权限，c2d 需写入权限） 用你的意图和 Figma 链接让代理运行技能；首次运行时会将配置写入 C2D2C.md
在哪里获取 c2d2c？
源代码和安装说明在 GitHub 上：https://github.com/BIAsia/c2d2c

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目