01
设计稿解析
通过 Figma REST 拉取节点数据，生成标准 DSL，不依赖截图脑补布局。
核心特性
从设计稿解析到代码输出，围绕「精准还原」与「Skill 化集成」打造。
02
精准 HTML 输出
按 Auto Layout、填充、描边、字号等字段逐项翻译，面向像素级还原。
03
CSS 分离
结构与样式解耦，便于接入项目已有前端栈与设计令牌体系。
04
Skill 化集成
符合 Agent Skills 规范，可放入 Cursor、Trae、Trae Work、Codex 等技能目录。
05
开源自由
MIT License，可商用、可修改、可二次分发，适合团队内沉淀规范。
06
轻量高效
纯脚本 + Markdown 技能包，无重型运行时；可从 GitHub 克隆或 npm 安装。
三步安装
克隆或安装到 Agent 的 skills 目录即可。
克隆仓库
从 GitHub 或 Gitee 克隆，也可以直接用 npm 包。
git clone https://github.com/rtsthcom/fig2code-skill.git # 国内镜像 git clone https://gitee.com/rtsthcom/fig2code-skill.git # 或 npm pack @rtsthcom/fig2code-skill
安装到技能目录
目录名保持 fig2code，例如 Cursor 项目级路径。
cp -r fig2code-skill .cursor/skills/fig2code
验证安装
配置 FIGMA_API_KEY 后跑自检脚本。
cp .env.local.example .env.local node scripts/self-check.mjs
用法说明
以下示例均在业务项目根目录执行，<skill-dir> 为技能安装路径。
命令行：拉取设计稿并生成 DSL
REST 取数是权威主路径；写出 compact DSL 后即可交给 Agent 生成 HTML。
# 1. 拉取 Figma 节点 JSON node <skill-dir>/scripts/fetch-figma.mjs \ --url "https://www.figma.com/design/xxxx?node-id=1-2" \ --out docs/figma/raw # 2. 生成标准 DSL（默认 compact） node <skill-dir>/scripts/extract-figma-dsl.mjs \ docs/figma/raw/<page>__<id>.json \ docs/figma/dsl/<page>__<id>.dsl.json
在 Agent 中调用（推荐）
直接把 Figma 链接发给已安装 Fig2Code Skill 的对话，例如：
请用 Fig2Code 把这个设计稿转成 HTML： https://www.figma.com/design/xxxx/MyPage?node-id=10-5 要求：结构语义化，样式与 Auto Layout 一致，切图放到 frontend/src/assets。
输出目录结构示例
docs/figma/ ├── raw/ # REST 原始节点 JSON │ └── Home__10-5.json ├── dsl/ # 标准 DSL（生成代码时读取） │ └── Home__10-5.dsl.json └── screenshot/ # 仅校对时使用，默认不拉 frontend/src/assets/ ├── raw/ # 导出的原始切图 ├── icons/ └── images/
中文文档与开源协作
Fig2Code 源码托管在 Gitee， 同步发布到 npm。适合中文开发者、前端团队和设计协作场景，提供完整中文文档、示例代码与 MIT 开源协议说明。
- 一份
git clone或npm pack即可拿到全部源码与文档 - 中文 README、工具索引与布局翻译表，降低上手成本
- 兼容 Trae / Trae Work 的
.trae/skills/技能目录 - 开源协议清晰：MIT，可放心用于商业项目
常见问题
关于 Figma 转 HTML 的对比、精度与集成方式，先看这几条。
01Fig2Code 和 Figma Dev Mode 有什么区别？
Dev Mode 是 Figma 官方在设计界面里给的标注视图，还得人工把标注抄进代码；Fig2Code 是开源的 Agent Skill，直接读 Figma REST 节点数据，翻译成标准 DSL 再生成 HTML/CSS，能在 Cursor、Trae、Codex 里批量跑，产出直接进仓库。Dev Mode 负责「看」，Fig2Code 负责「写」，两者可以并行用。
02转换精度如何保证？
靠确定性翻译，不靠模型脑补：节点 JSON 是唯一输入，按 references/layout-mapping.md 逐字段映射到 CSS，不推断、不凭截图猜布局。DSL 默认 compact，只省略与 CSS 默认值一致的字段；paint 级透明度折进 rgba()，渐变角度已换算成 CSS 角度。生成后可用 outline.mjs / node-info.mjs / subtree.mjs 回查节点，用 audit-opacity.mjs 核对透明度。
03和把截图丢给 AI 生成代码有什么不同？
截图路线只能靠模型目测像素，字距、内边距、描边很容易偏。Fig2Code 读的是真实节点数据（Auto Layout、填充、描边、字号、圆角），结构用语义化标签表达，样式单独抽 CSS，结果可复核、可重跑、可 diff。
04支持哪些 AI 客户端和技术栈？
客户端侧符合 Agent Skills 规范，可放进 Cursor、Codex、Claude Code、Trae、Trae Work 的 skills 目录。输出不绑定技术栈：代码写入目标项目已有前端目录，风格跟随现有 Vue / React / 纯 HTML 工程。
05需要 Figma 付费账号或安装 MCP 吗？
不需要额外付费服务，也不需要 MCP。一个 Figma 个人访问令牌（勾选 file_content:read + file_metadata:read）走 REST 就够；MCP 只做预览与连通确认，缺失时脚本会提示但不阻断流程。
06转换过程需要联网访问哪些服务？
只需访问 Figma REST API，用个人访问令牌取节点数据。仓库可从 GitHub 克隆或 npm 安装；网络受限时设置 FIGMA_PROXY 让脚本走代理，也可以先在线取数、离线再抽 DSL。
07许可证是什么，可以商用吗？
MIT License，可商用、可修改、可二次分发，保留版权与许可声明即可。
更细的排障（令牌、403、429、透明度、切图目录）见 完整 FAQ，工具全表见 references/tooling.md。