Figma MCP 与 Claude Code：设计师实战手册

鲨叔
0 阅读6分钟

原文作者：Felix Lee (@felixleezd) 发布时间：2026-02-17 原文链接：x.com/felixleezd/… 整理时间：2026-02-21

摘要

我最近读到 @felixleezd 的一篇长文，他以设计师身份进行了 100 天的"氛围编程"（Vibe Coding）实践后，系统梳理了一套 Figma MCP + Claude Code 的设计落地工作流。这套方法能让设计师跳过传统的设计交付环节，直接将 Figma 设计稿转化为生产级代码，效率提升可达 5 倍，且不需要编程背景。文章覆盖了从环境配置、能力边界到进阶策略的完整路径，对于希望自主完成设计落地的设计师来说非常有实操参考价值。以下是我的整理。

正文

传统交付流程的痛点

作者开篇就指出了一个尖锐的问题：传统的设计交付流程正在以 3 倍的时间成本拖慢产品上线。这个判断和我的体感一致——设计稿经过标注、开发解读、评审、反馈循环之后，最终的实现往往只能做到"差不多"。

Figma MCP 的出现改变了这个局面。接入 MCP 后，Claude Code 能直接读取 Figma 设计稿中的颜色、间距、组件变体等信息，从根本上消除了设计到开发的翻译损耗。以下是作者给出的新旧流程对比：

flowchart LR
    subgraph old["旧流程（数周）"]
        A1[设计] --> A2[标注文档]
        A2 --> A3[开发解读]
        A3 --> A4[评审]
        A4 --> A5["反馈循环 ×10"]
        A5 --> A6["差不多就行"]
    end

    subgraph new["新流程（分钟级）"]
        B1[设计] --> B2["Claude 读取 Figma"]
        B2 --> B3["构建代码"]
        B3 --> B4["上线 🚀"]
    end
  • 旧流程：设计 → 标注文档 → 开发解读 → 评审 → 反馈循环（可能往复 10 次） → "差不多就行"，整个周期以周为单位
  • 新流程：设计 → Claude 直接读取 Figma → 下指令生成代码 → 上线，周期压缩到分钟级

作者还用自身经历佐证了这一点：他以设计师身份，仅通过 Figma MCP 配合 Claude Code，一次性构建出了一个完整的游戏，不需要任何编程背景。

Part 1：环境配置

作者给出的配置流程非常简洁，三步即可完成：

flowchart TD
    S1["1. 获取 Figma Token"] --> S2["2. 连接 Claude Code"]
    S2 --> S3["3. 验证连接"]
  1. 获取 Figma 个人访问令牌（Personal Access Token）：进入 Figma.com → 个人头像 → Settings → Security → Personal access tokens → 生成新令牌
  2. 连接 Claude Code：在终端执行以下命令将 Figma 接入 Claude Code：
claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx
  1. 验证连接：在 Claude Code 中输入 /mcp，确认看到 figma ✓ connected 即表示配置成功

Part 2：Claude 对 Figma 的读取能力边界

这部分我认为在实操前必须了解清楚，可以帮助合理设定预期、提前规避限制。

可以读取：

  • 图层名称与层级结构
  • 颜色（填充、描边）
  • 排版样式（Typography Styles）
  • 效果（阴影、模糊）
  • 设计令牌（Design Tokens）/ 变量（Variables）
  • 自动布局（Auto Layout）设置
  • 组件变体（Component Variants）
  • 间距与内边距
  • 约束（Constraints）
  • 文本内容

无法读取：

  • 实际图片像素内容
  • 原型交互（Prototype Interactions）
  • 评论与反馈
  • 版本历史

这意味着图片、图标等素材资源需要手动导出，不能指望 Claude 自动处理。原型中的交互动效也无法被读取，需要在提示词中额外描述。

Part 3：标准工作流模板

作者推荐的工作流分为四个阶段，每个阶段的产出物作为下一阶段的输入：

flowchart LR
    P1["阶段一<br/>分析设计稿"] --> P2["阶段二<br/>提取设计令牌"]
    P2 --> P3["阶段三<br/>生成组件"]
    P3 --> P4["阶段四<br/>构建完整区块"]
  1. 阶段一：分析设计稿 —— 梳理页面结构、区块划分、色板、排版和组件清单
  2. 阶段二：提取设计令牌 —— 从 Figma 中提取颜色、间距、字号等变量，生成 Tailwind 配置和 CSS 变量
  3. 阶段三：生成组件 —— 基于设计令牌产出 React + Tailwind + TypeScript 组件代码
  4. 阶段四：构建完整区块 —— 将组件组装成响应式页面区块，使用语义化 HTML

Part 4：三大核心应用场景

作者总结了 Figma MCP 的三种主要使用场景，覆盖了从精细设计到快速原型的不同需求：

flowchart TD
    R["Figma MCP 应用场景"] --> U1["场景一<br/>设计稿 → 生产代码"]
    R --> U2["场景二<br/>线框图 → 可运行应用"]
    R --> U3["场景三<br/>AI 生成 UI → 注入代码库"]
  1. Figma 设计稿 → 生产级代码（最常用）：将精心设计的 Figma 文件直接转化为可部署的前端代码，适合设计完成度高的项目
  2. FigJam 线框图与用户流程 → 可运行应用：从 FigJam 中的粗略线框和流程图直接生成功能完整的应用，适合快速验证想法
  3. Figma Make（AI 生成 UI） → 注入现有代码库：利用 Figma 的 AI 生成功能创建 UI，再通过 MCP 整合到已有项目中，适合增量开发

Part 5：进阶工作流

针对不同项目规模和复用需求，作者给出了三种进阶策略：

flowchart TD
    subgraph WA["工作流 A：设计系统驱动"]
        A1[设计系统] --> A2[基础组件]
        A2 --> A3[首页]
        A3 --> A4[扩展其他页面]
    end

    subgraph WB["工作流 B：单页极速"]
        B1["良好的 Figma 文件"] --> B2[全速推进单页]
    end

    subgraph WC["工作流 C：组件优先"]
        C1[令牌] --> C2[原子组件]
        C2 --> C3[分子组件]
        C3 --> C4[区块]
        C4 --> C5[页面]
    end
  • 工作流 A（设计系统驱动）：先建立设计系统 → 构建基础组件 → 搭建首页 → 逐步扩展其他页面。适合需要系统化、可复用架构的中大型项目
  • 工作流 B（单页极速模式）：直接针对单个页面全速推进。前提是 Figma 文件已经组织良好、层级清晰，适合快速交付场景
  • 工作流 C（组件优先）：按照原子设计方法论，沿"令牌 → 原子组件 → 分子组件 → 区块 → 页面"的路径逐层构建。适合追求高可维护性的长期项目

Part 6：开工前的 Figma 文件检查清单

作者特别强调，Figma 文件的组织质量直接决定了 Claude 的读取效果。文件混乱会导致产出代码质量大打折扣。以下是开工前必须确认的规范：

命名规范：

  • 使用语义化的图层名称（而非默认的 Frame 1、Frame 2）
  • 组件名称清晰明了
  • 变体描述准确

结构规范：

  • 容器元素使用自动布局（Auto Layout）
  • 层级结构扁平化，避免过深嵌套
  • 区块划分清晰

令牌规范：

  • 颜色定义为样式（Styles）
  • 排版定义为文本样式（Text Styles）
  • 间距保持一致性

实战技巧

最后，作者分享了五条实战经验，我觉得都非常实用：

  1. 图层命名像 CSS 类名一样：比如用 hero-section、nav-bar 而不是 Frame 47，Claude 生成的代码可读性也会更高
  2. 按区块逐步推进：不要一次性让 Claude 处理整个页面，分区块下达指令效果更好
  3. 直接引用 Figma 文件：在提示词中直接粘贴 Figma 链接或节点 ID
  4. 优先导出素材资源：图片、图标等素材先手动导出，规避 Claude 无法读取像素的限制
  5. 预先告知技术栈：在第一轮对话中就明确告诉 Claude 你使用的技术栈（如 React + Tailwind + TypeScript）

关键术语对照

英文术语中文翻译说明
Figma MCPFigma MCPModel Context Protocol 的 Figma 集成，允许 AI 直接读取设计稿
Vibe Coding氛围编程以自然语言指令驱动 AI 生成代码的编程方式
Design Tokens设计令牌设计系统中可复用的基础变量，如颜色、间距、字号
Auto Layout自动布局Figma 中的弹性布局功能，类似 CSS Flexbox
Component Variants组件变体Figma 组件的不同状态或样式变体
Personal Access Token个人访问令牌Figma API 的身份认证凭据
FigJamFigJamFigma 旗下的白板协作工具

参考资料

来源摘要链接
@felixleezd作者呼吁设计师学习 AI 辅助编程，认为这是今年最高杠杆的技能x.com/felixleezd/…
@felixleezd作者分享"氛围编程"第 32 天成果：仅用 FigJam 流程图配合 Figma MCP 一次性构建出完整的俄罗斯方块游戏x.com/felixleezd/…
avatar
文章
阅读
粉丝