为了让AI Agent编程工具不局限与命令行代码生成和调试，可以通过MCP扩展其能力，例如通过MCP调用Chrome浏览器直接调试AI生成的WEB代码，不用手工去浏览器里截图和复制报错来告诉AI修bug或改代码了，它可以自动验证。

那么理论上，也可以直接通过MCP调用Figma、Pixso这些UI设计工具来辅助软件界面设计，这样就不需要美工了（笑），实战一下？

从互联网新闻的碎片中可以了解到，最先拥抱AI的是Figma，然后Pixso这些国产平替们也加入了AI功能，但都是类似WPS+AI这种在自己的一亩三分地里倒腾，给人的感觉就是……能用，但不好用。

所以最新一个新闻里，有个国外小哥用Claude Code+MCP调用Figma，而不是用Figma自带的AI设计功能，完全颠覆了使用体验，我们来求证一下。

由于Figma免费版本不开放MCP需要付费订阅，而Pixso免费版本就可以启用MCP，先用Pixso测试，开启方式很简单，在菜单里有明显的Pixso MCP开关，打开就行，然后在Opencode或Claude Code里添加MCP服务。

OpenCode添加Pixso MCP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
opencode mcp add 

┌  Add MCP server
│
◇  Enter MCP server name
│  pixso
│
◇  Select MCP server type
│  Remote
│
◇  Enter MCP server URL
│  http://localhost:3667/mcp
│
◇  Does this server require OAuth authentication?
│  No
│
◆  MCP server "pixso" added to /Users/mac/.config/opencode/opencode.json
│
└  MCP server added successfully

Claude Code添加Pixso MCP

1
claude mcp add --transport http pixso http://localhost:3667/mcp

重启OC或CC就可以指示AI设计一个具体的软件界面了，例如：用Pixso设计一个WebRTC视频会议UI。

结果试了好多次各种卡bug，最后大模型的这段Thinking看完我要骂人了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Thinking: 用户希望我在Pixso中设计WebRTC视频会议UI，先不生成HTML，只设计Pixso。
我现在知道：
1. 当前选中的是一个空白的容器（5:2079），尺寸是1766x1112像素
2. Pixso中有一些本地组件可用，包括样式、颜色、排版等组件
3. 用户要求只设计Pixso，不生成HTML
对于WebRTC视频会议UI，我需要设计包含以下元素的界面：
- 主视频区域（展示其他参会者的视频）
- 本地视频预览（小窗口）
- 控制按钮（麦克风、摄像头、屏幕共享、聊天、离开会议等）
- 参会者列表
- 聊天面板
- 标题栏（会议标题、会议信息）
由于这是在Pixso中设计，我需要直接在Pixso中创建和编辑元素。但是，我现有的工具主要是获取代码、图片、DSL等，没有直接创建或修改Pixso设计元素的工具。
让我检查一下可用的Pixso工具：
- pixso_getCode - 获取代码
- pixso_getImage - 获取图片
- pixso_getNodeDSL - 获取DSL
- pixso_getVariants - 获取变体
- pixso_getVariableSets - 获取变量集
- pixso_getVariables - 获取变量
- pixso_getExportImage - 导出图片
- pixso_getLocalStyles - 获取本地样式
- pixso_getRemoteStyles - 获取远程样式
- pixso_getAllComponents - 获取所有组件
- pixso_createInstance - 创建组件实例
- pixso_setBoundVariables - 绑定变量
- pixso_setFillStyle - 设置填充样式
- pixso_setStrokeStyle - 设置描边样式
- pixso_setTextStyle - 设置文本样式
- pixso_setGridStyle - 设置网格样式
我意识到这些工具主要用于读取和设置属性，但不能直接创建新的设计元素。设计WebRTC视频会议UI需要更复杂的创作能力。
设计需要包含多个关键功能：视频网格布局、本地视频预览、控制按钮、交互元素和状态指示器。这些功能要求精细的组件设计和交互逻辑。
由于工具限制，我将采用替代方案。通过创建详细的HTML和CSS，我可以为用户构建一个功能完整的视频会议界面，满足他们的设计需求。这种方法虽然不能直接在Pixso中实现，但能提供一个清晰的结构框架。
我发现当前Pixso工具主要用于读取现有设计，无法直接创建新的设计元素。让我为你创建一个完整的WebRTC视频会议HTML设计文件，你可以参考后在Pixso中手动创建。

什么意思？意思是，Pixso通过MCP只开放了大量get（也就是只读权限），写权限有哪些？创建组件、给组件应用样式……嗯，拜拜了您，Pixso还是护食的，你想通过AI大模型指导它直接修改UI设计稿没戏，这是它的吃饭家伙不开放。
它只希望你用AI Agent工具读取它的设计稿来生成HTML代码，不希望AI Agent插手它的设计工作。官网的帮助文档示例也验证了这一点，它希望你的用法是：“选中Pixso里的一个设计容器，让AI Agent生成对应的HTML代码。”

再确认下Figma官方的MCP的能力，果然也是类似的，是“只读”的，官方希望你用AI将它的UI设计稿转成代码，而不希望你用AI来直接设计UI。

但是，话怎么说的？你不干，有的是人干，Figma有开放API，所有就有社区版本的Figma MCP服务来解决这个问题。
例如这个：https://github.com/arinspunk/claude-talk-to-figma-mcp

并且这个社区版本MCP不需要付费Figma，用免费的Figma就可以工作，我们来实战吧。

安装Figma社区版MCP

  1. 下载Figma客户端：https://www.figma.com/downloads/

  2. 安装mcp服务

  • 前提1：需有可工作的nodejs环境，最好是Linux或Mac环境
  • 前提2：全程得有好梯子，稳定的互联网连接
1
2
3
4
5
6
7
8
mkdir ~/figma-mcp-rw
cd ~/figma-mcp-rw
npx claude-talk-to-figma-mcp
。。。
🚀 Starting Socket Server...
$ bun run dist/socket.js
[INFO] Claude to Figma WebSocket server running on port 3055
[INFO] Status endpoint available at http://localhost:3055/status
  1. 成功后，即在本地启动了MCP服务。
    去Figma添加插件：
1
In Figma Desktop go to Menu → Plugins → Development → Import plugin from manifest → inside the folder where you installed the MCP, select src/claude_mcp_plugin/manifest.json

！注意：需要手动启动插件：在Figma中按 Cmd + / (Mac) 或 Ctrl + / (Windows)

成功启动后会有一个小提示框,里面有一个Channel ID需要复制下来，后面要拷贝给AI输入：
image

  1. 最后在Cluade Code里添加MCP：
1
claude mcp add ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server

使用AI agent控制Figma设计UI

  • 启动Claude Code
    输入/mcp检查连接状态。
1
2
/mcp
  ❯ ClaudeTalkToFigma · ✔ connected
  • 通过MCP连接到Figma设计文件
1
2
输入上面插件运行后生成的Channel ID，例如：
Connect to Figma, channel xxxxxx**
  • 开始设计任务

例如还是输入：设计一个webrtc视频会议ui。

接下来的工作完全交给AI了，最终会得到一个可编辑的，符合UI设计规范的Figma设计稿件：https://www.figma.com/design/cFjrwFfM6I8LpyoGjJ5O9b/webrtc-meeting?node-id=1-15&t=mdnN7twl7toOVDzg-1

image

过程日志，可以观察AI是怎样通过MCP与Figma交流的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
❯ 设计一个webrtc视频会议ui 
                                  
⏺ 我来帮你设计一个WebRTC视频会议UI。让我先获取Figma文档信息，然后开始创建界面。                                                                                              ⏺ ClaudeTalkToFigma - get_document_info (MCP)
  ⎿  Error getting document info: Must join a channel before sending commands                                                                                                               
⏺ ClaudeTalkToFigma - join_channel (MCP)(channel: "xxxxxx")                                                                                                                         
  ⎿  Successfully joined channel: xxxxxx                                                                                                                                                                                                                                                                  
⏺ 已连接到Figma。让我开始设计WebRTC视频会议UI。
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - get_document_info (MCP)                                                                                                                                         
  ⎿  {                                                                                                                                                                                
       "name": "Page 1",                                                                                                                                                              
       "id": "0:1",                                                                                                                                                                   
     … +21 lines (ctrl+o to expand)                                                                                                                                                   
                         
⏺ ClaudeTalkToFigma - get_selection (MCP)                                                                                                                                             
  ⎿  {                                                                                                                                                                                
       "selectionCount": 1,                                                                                                                                                           
       "selection": [                                                                                                                                                                 
     … +8 lines (ctrl+o to expand)                                                                                                                                                    

⏺ 现在开始创建WebRTC视频会议UI。我会设计一个现代、专业的视频会议界面。

⏺ ClaudeTalkToFigma - create_frame (MCP)(x: 0, y: 0, width: 1440, height: 900, name: "WebRTC Video Conference", fillColor: {"r":0.067,"g":0.078,"b":0.102,"a":1})                     
  ⎿  Created frame "WebRTC Video Conference" with ID: 1:3. Use the ID as the parentId to appendChild inside this frame.
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - create_frame (MCP)(fillColor: {"a":1,"b":0.098,"g":0.075,"r":0.063}, height: 56, name: "Header", parentId: "1:3", width: 1440, x: 0, y: 0)                      
  ⎿  Created frame "Header" with ID: 1:4. Use the ID as the parentId to appendChild inside this frame.                                                                                
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - create_frame (MCP)(fillColor: {"a":1,"b":0.078,"g":0.059,"r":0.047}, height: 744, name: "Main Content", parentId: "1:3", width: 1080, x: 0, y: 56)              
  ⎿  Created frame "Main Content" with ID: 1:5. Use the ID as the parentId to appendChild inside this frame.                                                                          
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - create_frame (MCP)(fillColor: {"a":1,"b":0.098,"g":0.075,"r":0.063}, height: 744, name: "Sidebar", parentId: "1:3", width: 360, x: 1080, y: 56)                 
  ⎿  Created frame "Sidebar" with ID: 1:6. Use the ID as the parentId to appendChild inside this frame.                                                                               
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - create_frame (MCP)(fillColor: {"a":1,"b":0.118,"g":0.09,"r":0.075}, height: 100, name: "Control Bar", parentId: "1:3", width: 1440, x: 0, y: 800)               
  ⎿  Created frame "Control Bar" with ID: 1:7. Use the ID as the parentId to appendChild inside this frame.                                                                           
                                                                                                                                                                                      
……
省略大量中间步骤
……
 ClaudeTalkToFigma - create_text (MCP)(fontColor: {"a":1,"b":0.95,"g":0.95,"r":0.95}, fontSize: 18, fontWeight: 400, parentId: "1:21", text: "👤", x: 38, y: 14)                     
  ⎿  Created text "Text" with ID: 1:53                                                                                                                                                
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - create_text (MCP)(fontColor: {"a":1,"b":0.95,"g":0.95,"r":0.95}, fontSize: 40, fontWeight: 400, parentId: "1:13", text: "👤", x: 140, y: 70)                    
  ⎿  Created text "Text" with ID: 1:54                                                                                                                                                
                                                                                                                                                                                      
⏺ WebRTC视频会议UI设计已完成！                                                                                                                                                        
                                                                                                                                                                                      
  设计概览                                                                                                                                                                            
                                                                                                                                                                                      
  我创建了一个完整的现代视频会议界面，包含以下组件：                                                                                                                                  
                                                                                                                                                                                      
  布局结构

  - 主框架 (1440 x 900) - 深色主题背景
  - 顶部导航栏 - 包含品牌名称、会议ID和通话时长
  - 主视频区域 - 显示远程参与者视频
  - 本地视频预览 - 右上角的画中画视图
  - 参与者缩略图条 - 底部显示所有参与者
  - 侧边聊天栏 - 实时消息面板
  - 底部控制栏 - 会议控制按钮

  功能按钮

  ┌──────┬──────────────────┐
  │ 按钮 │       功能       │
  ├──────┼──────────────────┤
  │ 🎤   │ 麦克风开关       │
  ├──────┼──────────────────┤
  │ 📷   │ 摄像头开关       │
  ├──────┼──────────────────┤
  │ 🖥️    │ 屏幕共享         │
  ├──────┼──────────────────┤
  │ 💬   │ 聊天面板         │
  ├──────┼──────────────────┤
  │ 👥   │ 参与者列表       │
  ├──────┼──────────────────┤
  │ End  │ 结束通话（红色） │
  └──────┴──────────────────┘

  设计特点

  - 深色模式，减少眼睛疲劳
  - 清晰的视觉层级
  - 当前说话者高亮显示（绿色边框）
  - 实时聊天窗口
  - 会议计时器显示

  你可以在Figma中查看并进一步调整这个设计。需要添加其他功能或调整样式吗？
  • 按需修改Figma设计稿

基于这个设计稿，你可再次让AI修改不满意的地方（直接在Figma中选中相应元素，告诉AI你要怎么改），也可以让美工人工修改。

例如让AI：修改界面语言为中文。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:8", text: "🔗 连接会议")                                                                                                      
  ⎿  Updated text content of node "Text" to "🔗 连接会议"
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:9", text: "会议号: 847-293-156")
  ⎿  Updated text content of node "Text" to "会议号: 847-293-156"                                                                                                                     
                                                                                
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:10", text: "● 00:32:45")                                                                                                      
  ⎿  Updated text content of node "Text" to "● 00:32:45"                
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:14", text: "我")       
  ⎿  Updated text content of node "Text" to "我"                                                                                                                                      
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:16", text: "👤 陈婷婷")                                                                                                       
  ⎿  Updated text content of node "Text" to "👤 陈婷婷"                                                                                                                               
                                                                                 
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:22", text: "+3 人")                                                                                                           
  ⎿  Updated text content of node "Text" to "+3 人"                                                                                                                                   
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:35", text: "结束")                                                                                                            
  ⎿  Updated text content of node "Text" to "结束"                                                                                                                                    
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:36", text: "💬 聊天")                                                                                                         
  ⎿  Updated text content of node "Text" to "💬 聊天"                                                                                                                                 
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:41", text: "陈婷婷")                                                                                                        
  ⎿  Updated text content of node "Text" to "陈婷婷"                                                                                                                                  
                                                                                                                                                                                    
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:42", text: "大家能看到我的屏幕吗？")                                                                                          
  ⎿  Updated text content of node "Text" to "大家能看到我的屏幕吗？"                                                                                                                  
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:43", text: "张三")                                                                                                            
  ⎿  Updated text content of node "Text" to "张三"                                                                                                                                    
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:44", text: "可以，很清晰！👍")                                                                                                
  ⎿  Updated text content of node "Text" to "可以，很清晰！👍"                                                                                                                        
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:45", text: "我")                                                                                                              
  ⎿  Updated text content of node "Text" to "我"                                                                                                                                      
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:46", text: "我想问一下第5页的问题")                                                                                           
  ⎿  Updated text content of node "Text" to "我想问一下第5页的问题"                                                                                                                   
                                                                                                                                                                                      
⏺ ClaudeTalkToFigma - set_text_content (MCP)(nodeId: "1:48", text: "输入消息...")
  ⎿  Updated text content of node "Text" to "输入消息..."

就很快改成这样了：

image

AI生成软件代码

以WEB为例，可以按需输入你使用的前端框架VUE还是原生JS+CSS。

输入：

  • Connect to Figma, channel xxxxxx
  • 把figma设计稿转成html代码，使用本地tailwindcss+alpinejs最新版本库文件（不使用cdn）
  • 页面需自适应浏览器，不使用Figma设计稿的绝对高度、宽度

AI根据Figma设计稿生成WEB源码（无实际功能仅UI展示）：AI设计WebRTC视频会议。

标准页面
手机页面
平板页面