figma 快速入门

拿到 Figma 设计稿链接,直接让 AI 输出可用的 React/Vue 组件代码,告别手抠样式。

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

前端工程师最常做又最不爱做的事:把 Figma 设计稿”翻译”成代码。其中 80% 的时间花在抠颜色、量间距、识别图标、复现字号上,真正有”创造性”的工作很少。

figma Skill(社区版,来自 Stephpp/claude-figma-skill)让 AI 借助 Figma REST API + Personal Access Token,直接拉取设计稿的结构化信息:节点树、颜色、字号、间距、Auto Layout 设置、组件 props、icon 名称,然后输出:

• 等价的 React/Vue/Svelte 组件代码;
• 配套的 Tailwind/CSS Modules 样式;
• 必要的 props 注释,让组件可复用;
• 还可以”近似”还原 icon(从 Figma 拉到的 SVG vector)。

适合:接私活的前端、公司内”设计-研发”流程不顺的小团队、想搭 Design System 的独立开发者。

准备工作

• 一个 Figma 账号(免费账号即可)
• 一份 Figma Personal Access Token(Figma → Settings → Personal Access Tokens)
• Node.js ≥ 18(给前端工程用)
• 一个支持 SKILL.md 的 agent
• 把目标设计稿链接准备好,形如 https://www.figma.com/file/XXXXX/...

3 步快速上手

第 1 步:克隆与软链

git clone https://github.com/Stephpp/claude-figma-skill.git
ln -sf "$(pwd)/claude-figma-skill" ~/.claude/skills/figma

OpenCode 用户把目标路径改为 ~/.config/opencode/skills/,Cursor 用户改为 ~/.cursor/skills/。

第 2 步:把 Token 注入环境变量

在 ~/.bashrc(或 ~/.zshrc)里追加:

export FIGMA_PERSONAL_ACCESS_TOKEN="figd_xxxxxxxxxxxxxxxxx"
export FIGMA_FILE_KEY="你的文件 KEY,从 Figma 链接里 /file/ 后那串"

重启 shell,然后 echo $FIGMA_PERSONAL_ACCESS_TOKEN 验证能正常输出。注意:不要把 token 提交到 git。

第 3 步:用 Skill 出第一个组件

在 agent 对话里说:

用 figma Skill,根据 https://www.figma.com/file/XXX/MyApp?t=abc 里的 "LoginScreen" 页面,
输出 React + Tailwind 代码,组件名 LoginForm。

AI 会调 REST API 拉节点数据,解析 Auto Layout、字号、颜色,产出可运行的组件。完成后追加:

这个组件的 props 我希望接受 onSubmit 和 loading,
再调整一版。

常见踩坑

1. Token 过期/权限不足:Figma Token 90 天不续会失效,而且 Token 必须勾上”File read”权限。报错时先去 Figma 后台确认。
2. 链接拿错:要的是 /file/KEY/Title,不是 /design/... 也不是 share 出去的 ?node-id=... 短链。带 node-id 反而是好事(可以定位到具体节点)。
3. Auto Layout 没启用:老 Figma 文件经常没有 Auto Layout,Skill 拿不到 padding/gap,只能按”绝对定位”还原,这种稿子还原度有限。
4. 图标是图片不是 vector:如果设计师把 logo 上传成 PNG,Skill 拿不到 SVG,只能描述”这里放一个 24x24 的 logo 图”。可以追问”建议用什么尺寸的 png 占位”。
5. 多主题色没建变量:现代 Figma 用 Variables 管色,如果设计师没用,Skill 输出的颜色是写死的 hex,主题切换时会很难改。
6. 一锤子转完整个 App:转一个登录页可以,转 30 页面的 App 会把上下文塞爆,建议按页面分批跑。

初级用法

• 单组件快速生成:把设计稿里某个按钮、卡片丢给 Skill,出 JSX 片段直接粘贴。
• 设计 token 提取:让 Skill 把稿子里所有颜色/字号/间距提取成一个 tokens.ts 文件,后续所有组件都从 token 引用,统一品牌。

高级玩法

• 批量生成 + Storybook:让 Skill 跑批,把 Figma Components 全部转成 React 组件 + 对应 Storybook story,半天使设计系统上线。
• Design Token 双向同步:把生成的 tokens.ts 反向推到一个新的 Figma Variables 文件,实现”代码定义设计”。
• 接 CI:在 PR 流程里跑”设计稿 vs 实际渲染”的截图对比,差异超过阈值就 fail,保持设计还原度。

小技巧

• 选节点时,优先用 node-id 锁到具体 frame,不要”整文件读”,性能好很多。
• Figma 的字体名要和本地一致(本地没装字体会回退),提前 fc-list | grep Inter(Linux/macOS)检查。
• Auto Layout 里的 gap/padding 命名很乱,让 Skill 把这些值汇总成一张”间距表”附在代码里,可读性更好。
• 复杂页面建议先让 Skill 出一份”组件拆分建议”(把稿子切成 Card / Button / Input 等),人工确认后再出代码。
• icon vector 拿到后用 SVGR 工具转成 React 组件,比手贴 SVG 字符串方便。

常见问题 FAQ

Q1: 这个 Skill 跟 figma 有什么关系?必须装吗?

A: Skill 是给 AI Agent 用的”技能包”,能告诉 Agent 怎么按特定规范工作。不是必须装——如果你的项目规模小、要求不高,不装也能用。但装上能让 Agent 输出的质量更高、更符合最佳实践,推荐装。

Q2: 这个 Skill 适合哪些 AI Agent?Cursor?Claude Code?其他?

A: figma 来自 Anthropic,主要面向支持 Skill 机制的 Agent。常见兼容 Agent 包括 Claude Code、Cursor、OpenCode、Windsurf 等。具体兼容性请查 Skill 官方文档。

Q3: 装了这个 Skill 后,会拖慢 Agent 响应吗?

A: 会的——Skill 通常会增加 prompt 长度,导致响应变慢、token 消耗增加。但质量提升明显。建议:1) 只装项目必需的 Skill;2) 用 Skill 启动/加载/卸载机制按需加载;3) 定期清理不用的 Skill。

Q4: 怎么验证 Skill 装对了?

A: 在 Agent 中输入”列出已加载的 Skill”或类似命令。如果 Skill 出现在列表里,说明装对了。然后用 Skill 跑一个相关任务,看输出是否符合 Skill 规范。

Q5: 这个 Skill 有许可证吗?能商用吗?

A: 取决于 figma 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。

进阶学习建议

如果想进一步用好 figma,建议按以下路径学习:

第 1 周:熟练使用

• 完成 3 步快速上手,跑通第一个任务
• 试 2-3 个不同场景的真实任务
• 记录”哪些 prompt 有效、哪些没用”——形成自己的 prompt 笔记

第 2 周:理解机制

• 阅读 Skill 的官方文档(README、SKILL.md)
• 了解 Skill 的”触发关键词”和”输出格式”
• 学习”如何用更具体的描述触发 Skill”

第 3-4 周:组合使用

• 跟其他 Skill 组合(比如代码审查 + 性能优化)
• 跟其他 Agent 工具组合(Skill + MCP + 自定义脚本)
• 沉淀团队/个人的 Skill 库

长期:贡献社区

• 把自定义的 Skill 开源到 GitHub
• 提 PR 改进现有 Skill
• 写使用心得分享到 CSDN/掘金/知乎

推荐资源:

• 官方文档:https://github.com/Stephpp/claude-figma-skill
• 官方仓库 README 里的 Examples
• 社区最佳实践:Anthropic 官方博客 https://www.anthropic.com/blog
• 国内社区:CSDN AI 板块、掘金 AI 板块

避免的坑:

• 不要装太多 Skill(超过 10 个会拖慢 Agent)
• 不要把 Skill 装在不兼容的 Agent 上
• 不要直接复制 Skill 默认 prompt——要根据项目调整
• 定期 review Skill 库的实用性,清理不用的

参考链接

• 仓库主页:https://github.com/Stephpp/claude-figma-skill
• Figma REST API:https://www.figma.com/developers/api
• Figma Token 申请:https://www.figma.com/developers/api#access-tokens
• Tailwind CSS:https://tailwindcss.com/
• SVGR:https://react-svgr.com/
• 相关 Skill:anthropic-brand-guidelines、vercel-react-best-practices

我的个人推荐(测试编辑 Mnet)

最常用的 1 个核心用法:每天打开 Agent 第一时间加载这个 Skill,既不消耗太多 token 也能规范输出。

最容易踩的坑:别把 Skill 提示词当”开箱即用”的最终答案——它只是给你一个”标准框架”,具体项目还得你自己调整。

适合人群:做过 3+ 个实际项目的开发者,而不是”看一遍文档就完事”的小白。

3 个月使用心得:刚开始用时觉得”规范是约束”,用了 3 个月后才发现”规范是省时间”——避免每次重新决策同样的细节。

推荐配合的工具:Claude Code / Cursor / OpenCode 任选一个主流 Agent 即可,不要在工具选择上纠结太久。

长期价值:这类 Skill 的核心价值不是”立竿见影的输出”,而是”持续一致的质量”——长期用下来,你的项目质量会稳定在专业水平。

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。