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进行拷贝。
- Mac下可以使用热键
- 在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文件内。
加上这个文件后,生成的代码会更贴近你的实际项目。