设计师的 AI 助手：Claude Code + Figma 交互设计实战指南

第一章

理解基本概念 —— AI 辅助设计的"积木块"

从你熟悉的 Figma 出发，用类比的方式理解每一个新概念。不需要深入技术细节，只需要知道"它能帮你做什么"。

想象一下这样的场景：你在 Figma 中完成了一个登录页面的设计，然后对着电脑说一句："帮我把这个设计变成一个可以真正点击、输入的网页原型"——几分钟后，一个可以在浏览器中运行的交互原型就出现了。

这就是 Claude Code + Figma 能帮你做到的事情。

1.1 什么是 Claude Code？

一句话理解：Claude Code 是一个"会写代码的 AI 助手"，你用自然语言告诉它想要什么，它帮你实现。

Claude

Anthropic 公司开发的 AI，能理解自然语言，能写代码、分析问题

类比：一个极其聪明的实习生

Claude Code

Claude 的一个专门工具，它能直接在你的电脑上读写文件、运行代码

类比：实习生的工作台

关键点：你不需要学编程。你只需要学会"怎么向 Claude 描述你想要的东西"。就像你和开发同事沟通需求一样，只不过这个"同事"响应更快、永不疲倦。

1.2 什么是 CLI？—— 不要被它吓到

CLI（Command Line Interface，命令行界面） 就是那个黑色的、只有文字的窗口。

Figma = 图形界面

你通过点击、拖拽来操作。就像发语音消息一样直观。

CLI = 文字界面

你通过打字来操作。就像发文字消息一样，只是另一种交流方式。

设计师只需要记住 5 个命令（就像学 Figma 只需要记住 V/F/T 几个快捷键一样）：

claude 启动 Claude Code（就像双击打开 Figma）

cd 文件夹名进入一个文件夹（就像双击进入一个 Frame）

cd .. 返回上一层（就像按 Esc 退出当前 Frame）

ls 查看当前文件夹里有什么（就像看图层面板）

pwd 显示我现在在哪里（就像看面包屑导航）

温馨提示：Claude Code 现在也有桌面应用（Mac/Windows），可以像普通软件一样双击打开，不必害怕命令行。你甚至可以在 VS Code 中使用 Claude Code 扩展，拥有更友好的图形界面。

1.3 什么是 MCP？—— AI 和工具之间的"万能插头"

MCP（Model Context Protocol，模型上下文协议） 是让 AI 连接外部工具的一种标准。

想象 Claude Code 是一台笔记本电脑，MCP 就是它的 USB-C 接口：

Claude Code

（你的 AI 助手）

MCP

（USB-C 万能接口）

Figma

（你的设计工具）

没有 MCP

Claude Code 看不到你的 Figma 设计，像蒙着眼工作

有了 MCP

Claude Code 能读取你的 Figma 文件，理解颜色、间距、组件结构

连接 MCP 后，Claude Code 能做三件事：

读取设计数据

颜色、字体、间距、Auto Layout 等信息

生成匹配代码

与设计稿高度匹配的前端代码

反向推送

把代码界面变成 Figma 中可编辑的图层

1.4 什么是 Skill？—— AI 的"操作手册"

Skill（技能） 是给 Claude Code 的一份预写好的操作指南，让它在特定任务上表现得更专业。

MCP = 连接能力

像 USB-C 接口，让 Claude 能连接外部工具（Figma、浏览器等）

Skill = 操作手册

教 Claude 怎么用这些工具来完成特定任务（如 7 步设计转代码流程）

举个例子：MCP 让 Claude 能读写 Figma，但 figma-implement-design 这个 Skill 教它具体的 7 步流程——先提取设计上下文、再截图参考、再分析组件结构……这样才能高保真地还原设计。

设计师需要知道的关键点：

用 / 调用输入 /frontend-design 即可使用技能

自动触发描述匹配时 Claude 会自动加载对应 Skill

可安装更多通过 /plugin 浏览和安装社区 Skill

可自己创建把设计规范写成 Skill，Claude 就能一直遵守

Skill、MCP、Plugin 三者关系

Plugin（插件）= 一个工具包
├── MCP Server（连接能力）→ 让 Claude 能操作 Figma
└── Skills（操作指南）→ 教 Claude 怎么做设计转代码、代码转设计

一个 Figma 插件同时提供了 MCP Server（能力）和多个 Skill（知识），两者配合才能发挥最大效果。

1.5 整体工作原理

1

你（设计师）
用自然语言描述

2

Claude Code
理解意图、生成代码

3

通过 MCP 连接
Figma / 浏览器

4

输出结果
原型 / 设计稿

三种工作模式

设计 → 代码

Figma → Claude Code → 浏览器

把设计稿变成可交互原型

代码 → 设计

Claude Code → Figma

把代码界面推送回 Figma 画布

纯对话生成

描述需求 → Claude Code → 浏览器

不用 Figma，直接语言描述生成原型

第二章

工具全景 —— 你的 AI 设计工具箱

了解你需要安装什么、怎么连接、以及每个工具能帮你做什么。

2.1 需要安装的软件

Claude Code 桌面版

AI 助手主体，从 claude.ai/code 下载

Node.js

运行前端项目的"电池"，从 nodejs.org 下载 LTS 版本

VS Code（推荐）

代码编辑器，预览和微调，从 code.visualstudio.com 下载

Figma 桌面版

你已经有了，确保更新到最新版本

2.2 Figma MCP 服务器 —— 官方桥梁

Figma 官方提供的 MCP 服务器是你最重要的工具。

安装方式（推荐：一键安装）

Terminal
claude plugin install figma@claude-plugins-official

手动安装方式（备选）

Terminal
claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user

首次使用的认证步骤

1

启动
Claude Code

2

输入 /mcp
选择 Figma

3

点击
Authenticate

4

Figma 页面
点击允许

5

确认绿色
连接成功

2.3 Figma MCP 能做什么？—— 核心工具一览

设计师最常用的 7 个工具

get_design_context

"读取我 Figma 中这个页面的设计"

提取图层结构、颜色、字体、间距等信息

get_screenshot

"截个图看看设计效果"

对选中内容截图作为视觉参考

generate_figma_design

"把这个网页推送到 Figma"

将浏览器中的 UI 转化为 Figma 可编辑图层

use_figma

"在 Figma 里画一个按钮"

直接在 Figma 画布上创建或修改元素

search_design_system

"查找我设计系统中的按钮组件"

搜索已连接的组件库

create_new_file

"创建一个新的 Figma 文件"

在草稿中创建空白文件

generate_diagram

"生成一个用户流程图"

在 FigJam 中生成交互式流程图

进阶工具（团队协作用）

get_metadata

获取图层的详细元数据（ID、尺寸、位置）

get_variable_defs

获取设计变量和样式定义

get_code_connect_map

查看 Figma 组件与代码的映射关系

create_design_system_rules

创建团队的设计到代码转换规范

2.4 Skills 详解 —— Claude Code 的"超能力"

怎么使用 Skill？

斜杠命令调用
# 方式一：斜杠命令（推荐）
/frontend-design 做一个电商首页
/figma-implement-design https://figma.com/file/xxx
/page-review http://localhost:3000

# 方式二：自然语言触发（自动匹配）
把这个 Figma 设计转成代码  → 自动使用 figma-implement-design

设计师最常用的 Skills

figma-implement-design

将 Figma 设计高保真地转化为代码

7 步自动化：提取设计 → 截图参考 → 分析组件 → 下载资产 → 转化代码 → 验证还原度

figma-use

在 Figma 画布上直接创建/修改内容

操作 frame、组件、变量、Auto Layout

figma-generate-design

从代码反推到 Figma 设计

说"把这个页面发送到 Figma"

figma-generate-library

从代码库生成 Figma 组件库

变量/token、组件、主题、light/dark 模式

frontend-design

直接生成高质量前端界面

/frontend-design + 描述你想要的界面

page-review

对网页进行五维度设计评审打分

/page-review URL 即可获得设计质量报告

发现和安装更多 Skills

Terminal
/plugin                          # 打开插件市场，浏览 Discover 标签
/plugin install 插件名            # 安装插件（含多个 Skills）
/find-skills                     # 让 Claude 帮你搜索适合的 Skill

推荐安装：figma@claude-plugins-official（Figma 全套）、document-skills@anthropic-agent-skills（文档处理）、frontend-design@anthropic-agent-skills（前端设计）

创建自己的设计规范 Skill

把你的设计规范做成 Skill，Claude 就会一直遵守：

.claude/skills/my-design-rules/SKILL.md
---
name: my-design-rules
description: 团队设计规范。当生成前端代码或审查设计时自动应用。
---

## 设计规范
- 主色：#6366F1，辅助色：#F59E0B
- 字体：Inter / Noto Sans SC
- 间距：4px 基准倍数（4/8/12/16/24/32）
- 圆角：按钮 8px，卡片 12px，弹窗 16px
- 所有按钮必须有 hover 和 active 态
- 禁止使用纯黑 #000000，用 #1E293B 代替

Skill vs CLAUDE.md：CLAUDE.md 每次都加载，适合简短规范。Skill 按需加载，适合详细流程。对于固定的设计规范建议用 CLAUDE.md，对于复杂操作流程建议用 Skill。

2.5 第三方替代方案

如果你没有 Figma Dev Mode 许可证，可以考虑免费方案：claude-talk-to-figma-mcp（开源免费）

GitHub: github.com/arinspunk/claude-talk-to-figma-mcp

不需要 Dev Mode，免费账户即可使用。支持读取、分析、修改 Figma 设计，需要安装配套的 Figma 插件。

2.6 完整工作流程

模式 A：设计稿 → 交互原型

1

在 Figma 中
完成设计

2

Claude Code
"读取设计,
生成原型"

3

自动读取 →
提取样式 →
生成代码

4

浏览器中
查看效果

5

自然语言
迭代调整

模式 B：自然语言 → 交互原型

1

描述界面
"做一个电商首页"

2

Claude 生成
代码并预览

3

浏览器查看
自然语言调整

4

（可选）
推送到 Figma

模式 C：代码 → Figma 设计稿

1

已有运行中的
网页或原型

2

"把这个页面
发送到 Figma"

3

截图 → 分析
→ 生成图层

4

Figma 中
微调编辑

第三章

前端基础 —— 设计师需要知道的最小知识

你不需要成为前端工程师，但了解一些基础知识能帮你更好地和 Claude Code 协作。就像你不需要会开车才能告诉出租车司机目的地，但知道大概的路线能让沟通更顺畅。

3.1 三分钟理解网页的组成

一个网页由三样东西组成，就像设计中的三个概念：

HTML

类比：Figma 的图层面板

定义页面上有哪些元素（标题、按钮、图片）

CSS

类比：Figma 的设计面板

定义元素长什么样（颜色、大小、间距）

JavaScript

类比：Figma 的原型面板

定义元素怎么动（点击、切换、动画）

3.2 推荐技术栈 —— 最适合设计师出原型的组合

最佳推荐：React + Tailwind CSS + Vite

推荐技术栈

React

UI 框架

业界最流行，Claude 最擅长。像 Figma 的组件系统。

Tailwind CSS

样式框架

用 class 名直接写样式，像 Figma 的 Auto Layout + Design Token。

Vite

开发服务器

秒级启动，改了代码立刻看到效果。像 Figma 的实时预览。

为什么这个组合最适合设计师？

Tailwind CSS 和设计思维最接近：

内边距 16px → Tailwind 写 p-4

圆角 8px → Tailwind 写 rounded-lg

水平居中 → Tailwind 写 flex justify-center

React 组件 = Figma 组件：一个 React 组件就像一个 Figma 组件实例，组件可以传入不同的属性（Props），就像 Figma 的变体（Variants）。

Vite 所见即所得：保存代码后浏览器自动刷新，从修改到看到效果不到 1 秒。

备选方案

方案	适用场景	复杂度
纯 HTML + Tailwind CDN	最简单的单页原型	最低
Next.js + Tailwind + shadcn/ui	需要多页面路由的完整原型	中等
Vue + UnoCSS	团队使用 Vue 技术栈时	较低

Ant Design

企业级组件库，组件最全

适合企业级项目

Material UI

Google Material Design 风格

Google 风格项目

给设计师的建议：首选 shadcn/ui。它和 Tailwind CSS 完美配合，Claude Code 对它有内置支持（可以直接说"用 shadcn 的 Button 组件"），而且它的视觉风格非常简洁、现代，不会让你的原型看起来像模板。

3.3 项目结构 —— 你只需要关注这几个文件

当 Claude Code 帮你创建项目后，你会看到一堆文件。不用慌，你只需要关注标记的文件：

explorer

my-prototype/
├── src/
│   ├── App.tsx          ← 主页面（你最常改的文件）
│   ├── components/      ← 组件文件夹（就像 Figma 的组件页）
│   │   ├── Header.tsx
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   └── index.css        ← 全局样式
├── public/
│   └── images/          ← 图片资源
├── package.json         ← 项目配置（不用管）
└── tailwind.config.js   ← Tailwind 配置（可以定义 Design Token）

记住：你不需要手动改这些文件。告诉 Claude Code 你想要什么改动，它会帮你修改正确的文件。

第四章

实战演练 —— 从零开始做一个交互原型

假设你需要设计一个任务管理 App 的移动端原型，包含任务列表页、添加任务的交互、任务完成的勾选动效、底部导航栏。我们将用两种方式来完成。

1

启动 Claude Code

打开终端（Mac 按 Cmd + 空格，输入"终端"；Windows 搜索 "Terminal"），或者直接打开 Claude Code 桌面应用。

2

创建项目

在 Claude Code 中输入以下内容：

Claude Code 对话
帮我创建一个新的前端项目，用 React + Tailwind CSS + Vite，项目名叫 task-app-prototype

Claude 会自动执行创建项目所需的命令，你只需要看着它完成就好。

3

描述你想要的界面

项目创建好后，输入详细的界面描述：

Claude Code 对话
帮我做一个任务管理 App 的移动端原型，要求：

1. 整体风格：简洁现代，使用 Inter 字体，主色调 #6366F1（靛蓝色）
2. 顶部导航栏：显示"我的任务"标题，右侧有一个用户头像
3. 任务列表：
   - 每个任务是一张卡片，包含勾选框、任务标题、截止日期、优先级标签
   - 优先级用颜色区分：红色=紧急，黄色=重要，蓝色=普通
   - 完成的任务有删除线效果和淡出动画
4. 底部有一个悬浮的"添加任务"按钮（+号，圆形，紫色渐变）
5. 点击添加按钮弹出底部抽屉，可以输入任务标题、选择优先级、设置截止日期
6. 整个页面限制在 390x844 的手机尺寸内（iPhone 14 Pro）
7. 添加 3-5 条示例任务数据

请用 shadcn/ui 的组件来构建，确保有流畅的交互动画。

4

预览效果

Claude 完成后会告诉你如何启动预览：

Terminal
npm run dev

然后在浏览器中打开 http://localhost:5173 查看效果。

5

用自然语言迭代

看到效果后，像和同事沟通一样提出修改意见：

Claude Code 对话
修改以下几点：
1. 卡片之间的间距从 8px 改为 12px
2. 优先级标签改成圆角胶囊形状
3. 勾选动画加上一个弹性效果（spring animation）
4. 底部添加按钮加个阴影，看起来更浮起来

Claude 会自动修改代码，浏览器会实时更新，你可以立刻看到效果。

6

（可选）推送到 Figma

Claude Code 对话
把这个原型界面推送到我的 Figma，生成可编辑的设计稿

1

确保 Figma MCP 已连接

在 Claude Code 中输入 /mcp，确认 Figma 连接状态为绿色。

2

在 Figma 中选中你的设计

在 Figma 中打开你的任务管理 App 设计文件，选中你要转化为原型的页面或 Frame。

3

告诉 Claude 你想做什么

Claude Code 对话
请读取我 Figma 中当前选中的设计稿（任务管理 App），然后：
1. 提取所有设计 Token（颜色、字体、间距）
2. 生成一个可交互的网页原型
3. 保持和 Figma 设计稿的像素级一致
4. 添加基本的交互：任务勾选、添加任务、页面切换

4

Claude 的自动化流程

Claude 会执行以下步骤（你只需要等待）：

1

读取设计上下文

2

截图作为参考

3

提取设计变量

4

分析并生成代码

5

启动预览验证

5

对比验证和微调

预览启动后，对比 Figma 设计稿和生成的原型，用自然语言提出调整：

Claude Code 对话
和 Figma 对比了一下，以下几点需要调整：
1. 标题字体应该是 Semi Bold，现在看起来太细了
2. 卡片的阴影不够明显，参考 Figma 中的阴影设置
3. 底部导航的图标大小应该是 24px，现在偏大了

4.4 常用的对话指令速查表

修改颜色"把主按钮颜色改成 #FF6B6B"

调整间距"卡片和卡片之间的间距改成 16px"

修改字体"标题用 24px 加粗，正文用 14px 常规"

添加动画"点击按钮时加个缩放的微动效"

响应式适配"让这个布局在平板上也能正常显示"

替换组件"把这个按钮换成 shadcn 的 Button"

添加页面"新增一个任务详情页面，点击卡片跳转"

添加数据"生成 20 条模拟数据，有不同的优先级和状态"

导出设计"把当前页面推送到 Figma"

生成流程图"在 FigJam 中生成用户操作流程图"

第五章

进阶技巧与常见问题

让 AI 更懂你，以及解答你可能遇到的疑惑。

5.1 让 Claude 记住你的设计偏好

在项目根目录创建 CLAUDE.md 文件，写入你的设计规范：

CLAUDE.md
## 设计规范

- 主色调：#6366F1，辅助色：#F59E0B
- 字体：Inter，中文用 Noto Sans SC
- 圆角：小组件 8px，卡片 12px，大容器 16px
- 间距系统：4px 为基础单位（4/8/12/16/24/32/48）
- 阴影：使用三层阴影（sm/md/lg），不要使用纯黑阴影
- 动画：所有过渡使用 ease-out，时长 200-300ms
- 手机原型尺寸：390x844 (iPhone 14 Pro)

## 组件偏好

- 使用 shadcn/ui 作为基础组件库
- 图标使用 Lucide Icons
- 所有按钮都要有 hover 和 active 状态

这样每次启动 Claude Code，它都会按照你的偏好来生成设计。就像给新同事一份设计规范手册。

5.2 高效沟通的技巧

描述越具体，结果越准确。 对比以下两种描述：

模糊描述（效果差）	具体描述（效果好）
"做一个好看的登录页"	"做一个登录页：居中卡片布局，上方 Logo（64px），Email 和密码输入框，主色按钮，底部有'忘记密码'和'注册'链接，白色背景配淡灰色卡片"
"加个动画"	"任务卡片勾选后，文字从左到右出现删除线（300ms），然后卡片淡出并向上收起（200ms）"
"改下样式"	"卡片内边距从 12px 改为 16px，标题字号从 14px 改为 16px Semi Bold"

使用设计师的语言：Claude 理解设计术语。你可以说：

"用 8px 的网格系统"

"Auto Layout，纵向，间距 12px"

"参考 MD3 的 FAB 按钮样式"

"添加一个 Skeleton 加载状态"

5.3 常见问题与解答

不需要。Claude Code 会帮你写所有代码。你只需要像和开发同事沟通一样，描述你想要的效果。但了解第三章的基础知识会让沟通更高效。

可以。有几种方式：

直接让同事在你的电脑上看（启动本地服务器）
让 Claude 帮你部署到 Vercel/Netlify（免费，一行命令）
推送到 Figma 后通过 Figma 链接分享

Figma MCP 本身免费，但某些高级功能需要 Figma Dev Mode（付费）。如果你没有 Dev Mode，可以使用第三方的 claude-talk-to-figma-mcp（开源免费）。

Claude Code 需要 Anthropic 账号的 API 使用额度，或者 Claude Pro/Team/Enterprise 订阅。

确保 Figma 中的图层命名清晰规范（避免"Frame 1234"这样的默认名）
使用 Auto Layout 而非固定定位
使用设计变量和样式（而非硬编码颜色值）
复杂布局分步骤生成，先结构后细节

基本要求很低。能运行 Figma 的电脑就能运行 Claude Code。建议内存 8GB 以上。

5.4 推荐的学习路线

Week 1 入门

安装 Claude Code + 连接 Figma MCP

尝试"纯对话生成"模式做 2-3 个简单页面

熟悉常用对话指令

Week 2 进阶

用 Figma 设计稿 → 代码的流程完成一个完整原型

创建 CLAUDE.md 配置自己的设计规范

尝试多页面原型（路由跳转、页面切换动效）

Week 3 融入工作流

在实际项目中使用 Claude Code 出交互原型

尝试"代码 → Figma"反向推送

与开发同事协作，将原型代码作为开发参考

附录

术语表与资源链接

随时查阅的参考手册。

术语表

CLI

命令行界面，通过打字操作电脑

类比：用文字版的 Figma

MCP

模型上下文协议，AI 连接外部工具的标准

类比：USB-C 接口

React

构建 UI 的前端框架

类比：Figma 的组件系统

Tailwind CSS

用 class 名写样式的 CSS 框架

类比：样式面板 + Token

Vite

前端开发服务器，所见即所得

类比：Figma 的实时预览

shadcn/ui

高质量的 UI 组件库

类比：Figma 的组件库

npm

前端的包管理器

类比：Figma 的插件市场

localhost

本地预览地址

类比：Figma 的预览窗口

组件 Component

可复用的 UI 模块

类比：Figma 的 Component

Props

组件的可配置属性

类比：Figma 的 Variant 属性

路由 Router

页面之间的跳转规则

类比：Figma 原型中的连线

状态 State

界面中可变化的数据

类比：Interactive Components

设计师的 AI 助手 Claude Code + Figma 交互设计实战指南

理解基本概念 —— AI 辅助设计的"积木块"

1.1 什么是 Claude Code？

Claude

Claude Code

1.2 什么是 CLI？—— 不要被它吓到

Figma = 图形界面

CLI = 文字界面

1.3 什么是 MCP？—— AI 和工具之间的"万能插头"

没有 MCP

有了 MCP

读取设计数据

生成匹配代码

反向推送

1.4 什么是 Skill？—— AI 的"操作手册"

MCP = 连接能力

Skill = 操作手册

Skill、MCP、Plugin 三者关系

1.5 整体工作原理

三种工作模式

工具全景 —— 你的 AI 设计工具箱

2.1 需要安装的软件

Claude Code 桌面版

Node.js

VS Code（推荐）

Figma 桌面版

2.2 Figma MCP 服务器 —— 官方桥梁

安装方式（推荐：一键安装）

手动安装方式（备选）

首次使用的认证步骤

2.3 Figma MCP 能做什么？—— 核心工具一览

设计师最常用的 7 个工具

进阶工具（团队协作用）

2.4 Skills 详解 —— Claude Code 的"超能力"

怎么使用 Skill？

设计师最常用的 Skills

发现和安装更多 Skills

创建自己的设计规范 Skill

2.5 第三方替代方案

2.6 完整工作流程

模式 A：设计稿 → 交互原型

模式 B：自然语言 → 交互原型

模式 C：代码 → Figma 设计稿

前端基础 —— 设计师需要知道的最小知识

3.1 三分钟理解网页的组成

HTML

CSS

JavaScript

3.2 推荐技术栈 —— 最适合设计师出原型的组合

最佳推荐：React + Tailwind CSS + Vite

React

Tailwind CSS

Vite

为什么这个组合最适合设计师？

备选方案

推荐的 UI 组件库

shadcn/ui

Ant Design

Material UI

3.3 项目结构 —— 你只需要关注这几个文件

实战演练 —— 从零开始做一个交互原型

4.4 常用的对话指令速查表

进阶技巧与常见问题

5.1 让 Claude 记住你的设计偏好

5.2 高效沟通的技巧

5.3 常见问题与解答

5.4 推荐的学习路线

术语表与资源链接

术语表

资源链接

官方资源

教程与案例

第三方工具

设计师的 AI 助手
Claude Code + Figma
交互设计实战指南