# Fig2Code Skill
> 将 Figma 设计稿精准转换为 HTML/CSS 代码的技能包。

Fig2Code 是一个面向前端开发者和设计协作场景的技能包，用于把 Figma 设计稿解析并生成可用的 HTML、CSS 代码。项目采用 MIT 协议开源，提供中文文档、示例和快速上手指南。

最新版本：v1.0.0（2026-10-26）
许可证：MIT
运行环境：Node.js >= 18
npm：@rtsthcom/fig2code-skill
仓库：https://github.com/rtsthcom/fig2code-skill

## 快速开始
- [README](README.md): 项目介绍、安装方式和基本用法
- [快速开始](docs/quickstart.md): 从零安装并运行第一次转换
- [使用示例](docs/examples.md): Figma 转 HTML 的示例输出

## 文档
- [API 说明](docs/api.md): Skill 调用方式和参数说明
- [配置说明](docs/config.md): 转换规则、输出目录和自定义配置
- [常见问题](docs/faq.md): 安装、转换精度和兼容性说明

## 常见问题（摘要）
- Fig2Code 与 Figma Dev Mode 的区别：Dev Mode 提供标注视图供人阅读；Fig2Code 读取 Figma REST 节点数据并生成可直接入库的 HTML/CSS 文件。
- 精度保证：raw 节点 JSON 为唯一输入，按 references/layout-mapping.md 逐字段映射，不推断、不凭截图猜布局；paint 透明度折入 rgba()，渐变角度换算为 CSS 角度。
- 与截图生成的区别：读真实节点数据而非目测像素，结果可复核、可重跑、可 diff。
- 客户端支持：Cursor、Codex、Claude Code、Trae、Trae Work 的 skills 目录。
- 依赖：单个 Figma 个人访问令牌（file_content:read + file_metadata:read），MCP 可选。
- 运行依赖：只需访问 Figma REST API；网络受限时可用 FIGMA_PROXY 让脚本走代理。

## 仓库
- [GitHub](https://github.com/rtsthcom/fig2code-skill): 主仓库，源码与文档
- [npm](https://www.npmjs.com/package/@rtsthcom/fig2code-skill): 发行包