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
cd claude-figma-skill
npm install
npm run build

第 2 步:在 Claude Code 中配置 MCP

编辑 ~/.claude/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["./claude-figma-skill/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "<your-figma-token>"
      }
    }
  }
}

重启 Claude Code,/mcp 应看到 figma 工具集。

第 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. 输出:

// 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。

常见问题 FAQ

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

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

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

A: claudes-figma 来自 community,主要面向支持 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: 取决于 claudes-figma 的许可证。常见许可证包括 MIT(完全自由)、Apache-2.0(自由但有专利条款)、源可用(可看不能用)、GPL(强开源)。商用前请查仓库 LICENSE 文件。

进阶学习建议

如果想进一步用好 claudes-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 库的实用性,清理不用的

参考链接

• claudes-figma 仓库:https://github.com/Stephpp/claude-figma-skill
• Figma REST API 文档:https://www.figma.com/developers/api
• Figma Personal Access Token:https://www.figma.com/developers/api#access-tokens
• Figma Variables:https://help.figma.com/hc/en-us/sections/14506167395095-Variables
• Auto Layout 指南:https://help.figma.com/hc/en-us/articles/360040451373-Using-auto-layout
• Figma Dev Mode:https://www.figma.com/dev-mode/
• Storybook:https://storybook.js.org/
• pixelmatch:https://github.com/mapbox/pixelmatch
• Tailwind CSS:https://tailwindcss.com/docs
• Claude Code MCP:https://docs.claude.com/en/docs/claude-code/mcp

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

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

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

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

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

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

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

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