内容
# SPFR Figma 设计流程
Figma 的 AI 设计助手。分析网站，创建设计系统，设计页面和仪表盘，同步设计令牌，生成生产代码 — 所有这些都可以在终端中完成。
与 **Claude Code**、**Codex CLI** 和 **Gemini CLI** 配合使用。使用官方 Figma MCP 实现对 Figma 的完全读写访问，并使用高性能插件实现 30-60 倍更快的写入。
## 你可以做什么
```
"查看 stripe.com 并基于其样式创建设计系统"
"为我设计一个包含侧边栏导航、指标卡和图表的分析仪表盘"
"将 Figma 中的设计令牌同步到我们的 Tailwind 配置"
"从这个 Figma 页面生成 React 组件"
"审核 https://figma.com/design/ABC/My-File 的命名和可访问性问题"
```
## 快速开始
```bash
npx -y -p @spicefactory/figma-design-pipeline spfr-figma-design-pipeline-install --client all
```
然后在 Figma Desktop 中：**插件 → 开发 → 从清单导入插件 →** `~/.figma-design-pipeline/plugin/manifest.json`。
打开 Claude Code、Codex CLI 或 Gemini CLI 并开始输入。设计助手技能将负责路由。
有关先决条件、每个 CLI 的验证、手动配置和故障排除，请参阅 **[INSTALL.md](INSTALL.md)**。
有关工具参考和端到端工作流程，请参阅 **[USAGE.md](USAGE.md)**。
## 工作原理
```
AI 代理（Claude Code / Codex / Gemini）
│
├─ 官方 Figma MCP ──→ 读取和写入 Figma（OAuth，无需设置）
│
├─ 此 MCP 服务器 ─────→ 设计智能（分析、规划、代码生成）
│ ↕ WebSocket（端口 4010-4014）
│ Figma 插件 ─────→ 批量执行器（43 种操作类型，30-60 倍更快）
│
└─ 浏览器工具 ───────→ 网站捕获和分析
```
官方 Figma MCP 通过 OAuth 处理 Figma 读取和文件创建，无需个人访问令牌。此 MCP 服务器添加了设计智能（检查、审核、规划、令牌同步、代码生成），以及用于批量写入的插件桥。
## 新增功能
**0.8.0** （2026-05-12）
- **需要 Node 24 LTS**。目标从 Node 22 提升到 Node 24（截至 2025 年 10 月的活跃 LTS）。现在声明 `engines.node: ">=24.0.0"`。
- **Zod 4** — 内部模式验证从 zod 3 迁移到 zod 4.4。无公共 API 更改；一个内部 `z.record(...)` 签名更新为新的双参数形式。
- **TypeScript 6** — 开发工具链升级到 TS 6.0。`tsc --noEmit` 清洁。
- **esbuild 0.28**、**@types/node 24** — 工具链升级。
- 捆绑：服务器 `dist/index.js` ~1.4 MB（高于 ~1.0 MB）。MCP SDK 显式导入 `zod/v3` 以实现向后兼容，因此两个 zod 主要版本都捆绑在一起。在实践中，对工具延迟或内存没有影响 — 服务器是一个本地子进程。
请参阅 [CHANGELOG.md](CHANGELOG.md) 以获取以前的版本。
## MCP 工具
### 检查（只读）
`figma_get_tree`, `figma_audit`, `figma_extract_tokens`, `figma_find_nodes`, `figma_get_components`, `figma_get_styles`, `figma_diff_tokens`, `figma_export_images`
### 规划（分析，返回操作批次）
`figma_plan_naming`, `figma_plan_grouping`, `figma_plan_layout`, `figma_plan_components`
### 代码生成
`figma_map_components`, `figma_generate_page`, `figma_generate_schema`, `figma_export_tokens`
### 写入（高性能批量执行）
`figma_execute`, `figma_plugin_status`
43 种操作类型 — 框架、文本、组件、实例、涂料、笔画、渐变、效果、自动布局、约束、变量、页面。请参阅 `figma://actions` MCP 资源或 [USAGE.md](USAGE.md) 以获取目录。
## 文档
- **[INSTALL.md](INSTALL.md)** — 先决条件、安装步骤（适用于 Claude/Codex/Gemini）、插件设置、故障排除、卸载。
- **[USAGE.md](USAGE.md)** — 工具参考、常见工作流程、提示。
- **[CHANGELOG.md](CHANGELOG.md)** — 版本历史。
- **[CONTRIBUTING.md](CONTRIBUTING.md)** — 开发设置、范围、PR 检查清单。
- **[PUBLISHING.md](PUBLISHING.md)** — 发布流程。
- **[SECURITY.md](SECURITY.md)** — 凭证处理、支持的版本。
## 开发
```bash
npm install
npm run dev # tsx src/index.ts
npm run build # 构建服务器 + 插件
npm run check # tsc --noEmit
npm test # vitest 运行
npm run test:watch
```
## 许可证
MIT
