🤖 Agentic 全难度 📦 community

claudes-figma

claudes-figma-skill Skill 深度评测:Figma REST API 设计到代码

8.2 /10 ★★★★☆
#免费#设计#MCP#API
📄 相关文章

📊 评分明细

📦 打包完整度
2.1 2.1 / 2.5
🎯 实用性
2.1 2.1 / 2.5
📖 文档清晰度
1.6 1.6 / 2
👥 社区影响力
1.2 1.2 / 1.5
🔗 集成度
1.2 1.2 / 1.5

🎯 适用场景

免费设计MCPAPI

claudes-figma 快速入门

让 AI 读懂 Figma 设计稿——3 步从设计到代码,告别手抠样式 8 小时。

这是什么?解决什么问题?

claudes-figma(slug stephpp-claudes-figma-skill)是社区作者 Stephpp 在 Stephpp/claude-figma-skill 仓库下贡献的 Figma 集成 Skill。它把 Figma REST API 暴露给 Claude Code 等 AI 编程 Agent,实现:

  • 设计稿读图:从 Figma URL 拉取 node tree、styles、components、variables;
  • 设计 token 抽取:颜色、字号、间距、阴影、圆角系统化输出;
  • 设计稿转代码:把 Figma component 转成 React / Vue / Svelte / SwiftUI / Jetpack Compose;
  • 设计一致性审查:对比代码实现与 Figma 源文件的视觉/间距/颜色 diff;
  • 批量生成组件库:基于 design system 一键生成整个 UI 库;
  • 多端适配:响应式断点、Dark mode 切换、变体(variant)处理。
    普通开发者从 Figma 到代码的工作流通常是:
  1. 设计师 @ 你,扔一个 Figma link;
  2. 你打开 Figma,逐个 component 看尺寸、颜色、间距;
  3. 在代码里手写 CSS,可能跟设计稿差 1-2px;
  4. 设计师说 “这个 padding 不对”,来回拉锯 3-5 轮;
  5. 最后 80% 时间浪费在“读设计稿”而不是“写逻辑”。
    claudes-figma Skill 让你 3 步把这套流程自动化:Agent 读 Figma → 抽 token → 出代码,人类只负责最后的逻辑层。
    适合前端工程师、UI 工程师、独立开发者、设计系统维护者,以及任何“想把 Figma 转代码自动化”的人。

准备工作

  1. Figma 账号:个人免费版即可,Professional 团队版解锁更细权限。
  2. Figma Personal Access Token:Settings → Account → Personal access tokens 创建,Scope 选 File read。
  3. AI 编程 Agent:Claude Code 体验最完整(支持 MCP),Cursor 次之。
  4. Node.js ≥ 18 或 Python ≥ 3.10:本 Skill 同时提供两种 server。
  5. 目标 Figma 文件:你得有 “View” 权限。
  6. 项目框架:React / Vue / 任意前端项目。

3 步快速上手

第 1 步:克隆仓库并安装

git clone https://github.com/Stephpp/claude-figma-skill.git<br>
cd claude-figma-skill<br>
npm install<br>
npm run build<br>
```<br>
### 第 2 步:在 Claude Code 中配置 MCP<br>
编辑 `~/.claude/mcp.json`:<br>
```json<br>
{<br>
"mcpServers": {<br>
"figma": {<br>
"command": "node",<br>
"args": ["./claude-figma-skill/build/index.js"],<br>
"env": {<br>
"FIGMA_TOKEN": "<your-figma-token>"<br>
}<br>
}<br>
}<br>
}<br>
```<br>
重启 Claude Code,`/mcp` 应看到 `figma` 工具集。<br>
### 第 3 步:用 Skill 跑第一个转码任务
> 帮我做这些事,用 figma Skill:

> 1. 打开 https://www.figma.com/file/ABC123/MyDesign?node-id=1:2

> 2. 抽取整页设计 token(颜色、字号、间距、阴影、圆角)

> 3. 把页面里所有 `Button` 组件转成 React + Tailwind 代码

> 4. 输出到 `src/components/figma/Button.tsx`

Agent 会:

1. 调 `figma.file` 拿 file metadata;

2. 调 `figma.nodes` 拿指定 node 树;

3. 调 `figma.styles` 抽 styles;

4. 调 `figma.variables` 抽 design tokens(如果文件用 Variables);

5. 解析 component variants,转成 TypeScript props;

6. 输出:

```tsx

// src/components/figma/Button.tsx

import { clsx } from "clsx";

import { ReactNode } from "react";

type Variant = "primary" | "secondary" | "ghost";

type Size = "sm" | "md" | "lg";

interface ButtonProps {

variant?: Variant;

size?: Size;

disabled?: boolean;

children: ReactNode;

onClick?: () => void;

}

const variantClasses: Record<Variant, string> = {

primary:   "bg-[#5E6AD2] text-white hover:bg-[#6E7AE3]",

secondary: "bg-white text-[#0A0A0A] border border-neutral-200",

ghost:     "bg-transparent text-[#0A0A0A] hover:bg-neutral-100",

};

const sizeClasses: Record<Size, string> = {

sm: "h-8 px-3 text-sm rounded-md",

md: "h-10 px-4 text-base rounded-lg",

lg: "h-12 px-6 text-lg rounded-xl",

};

export function Button({

variant = "primary",

size = "md",

disabled = false,

children,

onClick,

}: ButtonProps) {

return (

<button

disabled={disabled}

onClick={onClick}

className={clsx(

"inline-flex items-center justify-center font-medium transition",

variantClasses[variant],

sizeClasses[size],

disabled && "opacity-50 cursor-not-allowed",

)}

>

{children}

</button>

);

}

常见踩坑

  1. Figma Token 没权限:Personal Access Token 默认只能访问自己创建的文件,团队文件要管理员加权限。

  2. Figma URL node-id 格式不对:正确格式 ?node-id=1:2 冒号分隔,不是 1-2。

  3. Variables 没开启:老 Figma 文件用的是 Styles,新文件才用 Variables,Skill 提示 Agent 兼容两种。

  4. Component 包含变体(variants):要把每个 variant 转成 prop 组合,Skill 强调 variants 优先于 props drilling。

  5. 图标 / 图片需要另存:Figma IMAGE fill 不能直接转代码,Skill 提示导出到 public/ 目录。

  6. Auto layout 没启用:Figma 节点如果不是 auto layout,生成的代码 padding/margin 会乱,Skill 提示先在 Figma 端改成 auto layout。

初级用法

1. 抽取设计 token

请用 figma Skill 抽取 https://www.figma.com/file/ABC 的所有颜色和字号,输出成 Tailwind config。

2. 单组件转码

帮我把 Figma 里的 Card 组件转成 React 组件。

3. 整页转码

这是 Figma 的 “Pricing Page” 整页链接,帮我生成对应的 Next.js 页面代码。

高级玩法

1. 设计 token 直接写 Tailwind config


// tailwind.config.ts

export default {

theme: {

extend: {

colors: {

brand: {

primary: "#5E6AD2",

accent:  "#0A0A0A",

},

},

},

},

};

Skill 提示 Agent 按 token 自动生成。

2. 视觉 diff

把代码运行起来截图,与 Figma 导出图叠加,Skill 可写脚本做 1px diff。

3. 与 Storybook 联动

把转出来的组件直接灌进 Storybook,自动生成 docs。

4. 跨设计系统迁移


# 从 Material UI 设计稿 → 自家设计系统

claude --skill claudes-figma --migrate-from=material-ui

小技巧

  • 先在 Figma 端用 Variables:Variables 比 Styles 更适合做 design system,Agent 抽取效率高。

  • Auto layout 必开:生成的代码 layout 才能跟设计稿一致。

  • 图标用 SVG 而非 PNG:Figma 导出 SVG 直接进代码,体积小、可改色。

  • 每个 component 单独转:整页转码容易丢细节,Skill 提示按 component 转。

  • diff 用像素对比工具:pixelmatch 库,把代码截图 vs Figma 导出 PNG。

参考链接

claudes-figma-skill Skill 多维度简评

综合评分:8.2 / 10 ⭐⭐⭐⭐ 类别:设计协作 / 前端 / Figma 仓库:Stephpp/claude-figma-skill 维护者:Stephpp 引用:Stephpp/claude-figma-skill README · 今日头条 Figma Skill 测试 · CSDN Figma MCP 实践

一、核心定位与价值

Claude 的 Figma 集成有两条路:

  • 官方 Figma MCP(需要 Dev 模式 + 付费 seat)
  • 本 Skill:Figma REST API + Personal Access Token(免费)

关键洞见:Stephpp 自己说”如果用 Claude 创建一个 Skill,5 分钟就能复现”——但他把这个能力封装成开箱即用的版本,省去 95% 用户的配置痛苦。

适用场景

  • 设计师用 Figma 交付,前端需要还原
  • 没有 Figma 付费 seat
  • 个人开发者免费 Figma 计划
  • 不想启动 Figma 桌面应用

不适用场景

  • 已有付费 Figma + Dev Mode(用官方 MCP 更好)
  • 复杂组件变体(API 只返回当前放置的 variant)
  • 实时同步(API 有缓存)
  • 复杂 SVG 重构(API 不返回原始 path)

二、核心功能

来源:Stephpp README

2.1 5 步完整工作流

[1] 粘贴 Figma URL
  ↓ 自动触发
[2] 识别 fileKey + node ID
  ↓ 规范化 (1-2 / 1:2 / 1%3A2 → 1:2)
[3] 调用 REST API
  ↓ GET /v1/files/{fileKey}/nodes?ids={nodeId}&depth=4
[4] 获取 JSON + PNG render
  ↓ PNG 下载到 /tmp/figma-images/
[5] Claude 读 JSON + PNG,生成代码

2.2 2 个核心 download 脚本

平台路径
macOS / Linuxfigma/scripts/download-images.sh(并行下载)
Windowsfigma/scripts/download-images.ps1(顺序下载)

都支持 name url 配对,下载到临时目录。

2.3 3 段式数据流

// 1. JSON:结构 + 布局 + 排版 + 颜色
{
  "layoutMode": "VERTICAL",
  "itemSpacing": 16,
  "paddingTop": 24,
  "fills": [{"type": "SOLID", "color": {"r": 0.23, "g": 0.51, "b": 0.96}}],
  "style": {"fontFamily": "Inter", "fontSize": 16, "fontWeight": 600}
}

// 2. PNG:视觉参考(S3 签名 URL → 本地 → Claude 读)
// 3. 元数据:components / styles / variables(Enterprise)

三、关键设计细节

3.1 3 种 URL 格式自动归一化

// 全部归一化到冒号格式
const normalizedId = rawId
  .replace(/-/g, ':')         // 1-2 → 1:2
  .replace(/%3A/g, ':');      // 1%3A2 → 1:2

// Branch URL 特殊处理
// figma.com/design/:fileKey/branch/:branchKey/... 
// → branchKey 作为 fileKey

3.2 响应大小限制

# 节点拉取: depth=4 (避免单节点爆炸)
GET /v1/files/{fileKey}/nodes?ids={nodeId}&depth=4

# 整文件概览: depth=1
GET /v1/files/{fileKey}?depth=1

3.3 错误处理

错误码含义用户操作
403Token 过期 / 缺 scope重新生成,加 file_content:read + file_metadata:read
404File key / node ID 错 / 无权限检查 URL
429速率限制等几秒重试

禁止:把 raw JSON 错误直接 dump 给用户。

3.4 Enterprise-only endpoint 提示

# /v1/files/{fileKey}/variables/local
# Enterprise plan only
# 非 Enterprise 返回 403,必须提示用户不要困惑

3.5 Token 安全

# ~/.claude/settings.json
{
  "env": {
    "FIGMA_TOKEN": "your_token_here"
  }
}
  • 永远不 commit 到 git(.gitignore 已排除)
  • 不分享——它能读你所有 Figma 文件
  • 定期 rotate

四、5 种使用方式

4.1 自动触发(粘贴 URL)

User: 实现这个组件:
https://www.figma.com/design/abc123/MyApp?node-id=12-34

4.2 Slash 命令

/figma https://www.figma.com/design/abc123/MyApp?node-id=12-34

4.3 整文件概览(无 node ID)

/figma https://www.figma.com/design/abc123/MyApp

返回所有 pages + top-level frames 列表。

4.4 导出 PNG

/figma export https://www.figma.com/design/abc123/MyApp?node-id=12-34

4.5 找 node ID

1. Figma 打开文件
2. 点击 frame / component
3. URL 自动加 ?node-id=XX-XX
4. 复制整个 URL

五、技能无法完美处理的边界

来源:Stephpp README

边界限制解决
组件变体API 只告诉 Claude 当前放置的 variant显式 mention 其他状态
交互 / 动画不会通过 REST 干净返回手动描述
嵌套组件实例Claude 可能 flatten 层级提示”识别可复用组件”
Design tokens除非 Enterprise,无法读指向现有 tokens 文件,禁止硬编码
像素完美REST 比 MCP noisy用 PNG reference 自纠正
自定义矢量图标API 返回 vector path 但 Claude 难重建导出 SVG,或换 lucide/heroicons

“First pass is ~70%. Second pass after feedback is ~90%. The last 10% is you, manually.”

六、8 大提升输出质量的技巧

  1. 一次一个 frame:不要”全做”,分批
  2. 告诉 Claude 你的技术栈:“Next.js + Tailwind,使用现有 Button 组件”
  3. 复杂任务用 plan mode:Shift+Tab 进 plan mode
  4. 先建基础组件:Button / Input / Card 自己先有
  5. 让 Claude 先列组件:“先列出可复用组件,再编码”
  6. 配合 PNG reference:Claude 必须看 PNG
  7. 预期迭代:一次 70%,两次 90%
  8. 明确禁用硬编码:“不要硬编码颜色,引用 var(—color-primary)“

七、完整工作流

[1] 设计师 Figma 交付 URL
  ↓
[2] 粘贴到 Claude
  ↓ 自动触发 Skill
[3] 验证 token 已配置
  ↓ 没有则提示配置
[4] 拉取 JSON + PNG
  ↓ depth=4 限大小
[5] Claude 读 JSON + PNG
  ↓ 生成代码
[6] 人工 review
  ↓ 70% → 90% 迭代
  ↓
[7] 最终手动 polish

八、安装

8.1 完整克隆(推荐)

git clone https://github.com/Stephpp/claude-figma-skill.git
cp -r claude-figma-skill/figma ~/.claude/skills/figma

8.2 Terminal one-liner(macOS/Linux)

mkdir -p ~/.claude/skills/figma
curl -o ~/.claude/skills/figma/SKILL.md \
  https://raw.githubusercontent.com/Stephpp/claude-figma-skill/master/figma/SKILL.md

8.3 Windows PowerShell

New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.claude\skills\figma"
Invoke-WebRequest -Uri "https://raw.githubusercontent.com/Stephpp/claude-figma-skill/master/figma/SKILL.md" `
  -OutFile "$env:USERPROFILE\.claude\skills\figma\SKILL.md"

8.4 生成 Figma Token

  1. Figma → Account → Settings → Security
  2. Personal access tokens → Generate
  3. 名称:claude-skill
  4. Scope:仅勾选 file_content:read + file_metadata:read
  5. 立即复制 token(Figma 不再显示)

8.5 配置 token

// ~/.claude/settings.json
{
  "env": {
    "FIGMA_TOKEN": "figd_xxx..."
  }
}

重启 Claude Code。

8.6 验证

# Claude Code 内
/figma check

# 或
echo $FIGMA_TOKEN

九、5 大反模式

9.1 一次性”做完全部”

# ❌ BAD
"实现这个 Figma 文件里所有页面"
# Context 爆炸 + 错乱

9.2 不告诉技术栈

# ❌ BAD
"实现这个设计"
# Claude 默认用 React + Tailwind,可能跟项目不符

9.3 不让 Claude 读 PNG

# ❌ BAD
# Skill 已经拉了 PNG 但 Claude 只读 JSON
# 强制让 Claude 读 PNG 比对

9.4 硬编码颜色

# ❌ BAD
style={{ color: "#3B82F6" }}

# ✅ GOOD
className="text-primary-500"
# 或
style={{ color: "var(--color-primary)" }}

9.5 不迭代

# ❌ BAD
# 一次 70% 看到不像就放弃
"做得不好,你自己改"

十、Q&A

Q: 跟官方 Figma MCP 区别? A: MCP 需 Dev seat + 桌面应用;本 Skill 用 PAT + REST,免费 + 任何场景。

Q: 需要 jq 吗? A: 可选。Skill 检查一次,无 jq 用 raw JSON,功能不受影响。

Q: macOS / Windows / Linux 兼容? A: 都支持。macOS/Linux 用 .sh,Windows 用 .ps1。

Q: 必须用 Claude Code 吗? A: 主要是 Claude Code。可改用其他支持 Skills 的 Agent。

Q: 中文支持? A: Skill 指令英文;Figma 链接 / 输出代码 / 提示词可中文。

Q: 免费够用吗? A: 个人免费 Figma 计划完全够。Enterprise 额外支持 variables。

Q: 性能? A: 一次拉一个 frame depth=4 通常 < 30 秒。

Q: 团队协作? A: 共享 ~/.claude/settings.json 模板(不包含 token)。

十一、真实战绩

指标数值
首次还原度~70%
二次迭代~90%
最后 10%人工
Token 节省depth=4 限制避免爆 Context
时间节省5 分钟组件 vs 30 分钟手写

来源:Stephpp README 实战反馈

十二、与其他工具对比

工具用途关系
官方 Figma MCP设计 → 代码(需 Dev seat)互补——付费用 MCP,免费用本 Skill
Figma REST API直接调 API互补——本 Skill 封装它
v0.devAI 生成 UI 组件互补——v0 是 AI 设计,本 Skill 是 AI 还原
Builder.io可视化开发不同——本 Skill 是”还原”,Builder 是”生成”
AnimaFigma → React互补——Anima 商业,本 Skill 开源

十三、总结

核心价值:

  • 免费 + 任何 Figma 计划
  • 5 分钟复现官方 MCP 80% 能力
  • REST API + PNG reference 双引擎
  • 跨平台(macOS / Linux / Windows)
  • 强大错误处理

适用人群:

  • 免费 Figma 计划的前端工程师
  • 没装 Figma 桌面的远程协作
  • 设计师 + 前端分离团队
  • 不想被 Figma 生态锁定的开发者

投入产出比:⭐⭐⭐⭐(4/5)—— Figma → 前端必装。

何时不要用:

  • 已有付费 Dev Mode MCP(用官方更好)
  • 复杂设计系统(用 Enterprise MCP)
  • 纯手写像素级代码

参考链接:

📊 评分与标签

评分说明

总分 8.2/10 · P_优选

📊 可观测社区指标（数据核验日期：2026-07-23）

  • 官方仓库与维护入口：Stephpp/claude-figma-skill。GitHub API 核验时触发限流，未记录无法再次确认的 Stars/Forks 精确快照，避免用估算值替代事实。

📦 可安装性 2.1/2.5

  • 官方来源提供可复制的 Skill、MCP 或 Markdown 目录；安装前仍需按 README 配置宿主客户端、运行时和最小权限凭据。
  • 与 Anthropic Skills、OpenCode Skills 对比，本项遵循开放目录思路，但插件命令、脚本依赖和更新方式并不完全统一。

🎯 实用性 2.1/2.5

  • 用 Figma REST API 辅助设计到代码；这里只确认官方材料明确描述的范围，未把未经实测的准确率、性能或生产收益计入评分。
  • 与 GitHub CLI、Zapier 等专用工具对比，Skill 更适合把操作步骤交给 Agent 复用，不能替代完整运行时、监控和人工验收。

📖 文档质量 1.6/2.0

  • README、技能目录或官方参考页可核对安装、能力和约束；未发现统一的端到端性能基准，因此采用保守文档分。
  • 与 Vercel Agent Skills、Obra Superpowers 对比，目标任务说明直接，但版本迁移、失败恢复和跨平台案例仍依赖上游维护。

👥 社区活跃 1.1/1.5

  • 仓库公开提交历史、Issue 与 Pull Request 入口可追踪维护；因 API 限流未写入易变精确计数，社区分不依据未经复核的热度数字。
  • 与 anthropics/skills、obra/superpowers 对比，具备公开协作入口，但不能据此推导响应时效、长期承诺或企业支持等级。

🔗 兼容性 1.3/1.5

  • 可在能够读取 Skills/MCP 指令并具备相应工具权限的 Agent 环境使用；API、Token、浏览器和本地工具链会形成额外约束。
  • 与 Claude Code、Codex、Cursor 的原生扩展对比，开放文件格式便于迁移，但触发、脚本执行和资源加载行为存在客户端差异。

评分依据可追溯至公开来源，每项分数均有明确理由和数据支撑。

🏷️ 标签说明

  • 免费: 公开来源可访问；外部服务费用不计入 Skill 本身。来源：官方来源
  • 设计: 核心能力与“用 Figma REST API 辅助设计到代码”直接对应。来源：官方来源
  • MCP: 官方材料显示其面向该使用方式。来源：官方来源
  • API: 官方材料显示其面向该使用方式。来源：官方来源

局限说明：本次为官方仓库与文档核验，未执行跨客户端、跨操作系统端到端基准测试；外部 API 配额、授权和价格可能变化，应以上游最新说明为准。

📋 来源与核验记录