claude code 和 figma 结合的流程

MCP 基础管理命令

在开始配置之前，先了解 Claude Code 中 MCP 的基本管理命令：

复制代码

# 列出所有已配置的服务器
claude mcp list

# 查看特定服务器的详细信息
claude mcp get github

# 删除服务器
claude mcp remove github

# 在 Claude Code 中检查服务器状态
/mcp

添加远程 HTTP 服务：

复制代码

# 基础添加命令
claude mcp add --transport http <name> <url>

# 示例：连接到本地 HTTP MCP 服务器
claude mcp add --transport http my-server http://localhost:8080/mcp

# 需要认证时使用 --header 参数
claude mcp add --transport http secure-api https://api.example.com/mcp \
  --header "Authorization: Bearer your-token"

Figma 官方 MCP（推荐付费用户）

复制代码

1、添加Figma MCP
Figma mcp connect to ai agent
全局配置(推荐)：claude mcp add figma https://mcp.figma.com/mcp -s user -t http
figma官方：claude mcp add --transport http figma https://mcp.figma.com/mcp

这个命令实际上会修改用户目录下的 .claude.json 文件。配置完成后的效果：

授权连接

首次使用需要授权 Figma 账号。启动 Claude Code 后，输入 /mcp 查看连接状态：

如果未授权，会出现授权选项：

PS：

要求

figma dev权限或更高full权限
claude code会员或API Key使用如果使用其它客户端可以不需要claude code会员

Claude Code配置

复制代码

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

# 检查mcp列表，确定是否正确添加
claude mcp list

使用：

在Figma中选择一个图层节点
右键点击该节点，选择"Copy Link"选项
- Mac下可以使用热键 Cmd + L 进行拷贝。
在Claude Code中粘贴该链接，自然语言告诉AI使用该figma设计稿子进行代码生成/修改即可。打开开发工具 VS Code 或者 Android Studio 打开命令行，输入claude 执行，然后再输入复制的 flgma 链接。

也可以在claude命令行中直接截图：

直接生成的代码有时会"水土不服"，比如用了项目中不存在的颜色或组件。下面这两招能让生成代码的质量从"实验室"走向"生产环境"。

1. 准备你的"项目说明书" (CLAUDE.md)

这是最关键的一步！Claude不了解你的项目私有规范，所以需要你提供一个文档，告诉它你的规则。在项目根目录创建一个 CLAUDE.md 文件，内容模板如下：

markdown

复制代码

# 项目上下文

## 设计系统组件
- 按钮请使用 `MyAppButton` 组件，不要生成原始Button。
- 所有圆角必须使用主题定义的 `shape` 系统。

## 颜色规范
- 所有颜色必须从 `Theme.colorScheme` 中引用。
- 不要生成任何硬编码的 `Color(0xFF....)`。

## 排版
- 标题请使用 `MaterialTheme.typography.headlineMedium` 等预定义样式。

## 架构模式
- UI文件统一放在 `com.your.app.presentation.screens` 包下。
- 使用MVI模式，State定义在Composable文件内。

加上这个文件后，生成的代码会更贴近你的实际项目。