你是否想过用AI直接生成设计原型图？通过MCP（模型上下文协议），某AI编辑器（如Cursor）可以与某设计工具（如Figma）无缝协作，让AI“听懂”你的需求并自动绘制设计稿。本文将用最简单的步骤，带你完成从安装到生成原型图的全流程！

---

一、准备工作：安装核心工具
无需编程能力，只需按以下步骤准备环境：

1. 下载Node.js

• 访问Node.js官网，下载并安装最新版本（推荐LTS版本）。
• 验证安装：打开终端，输入 node -v，返回版本号即成功。

2. 下载某AI编辑器（如Cursor）

• 访问某AI编辑器官网，下载并安装。

3. 下载某设计工具（如Figma）桌面端

• 登录某设计工具官网，点击“Get Desktop App”下载桌面客户端。

4. 下载GitHub talk-to-figma源码

• 访问GitHub仓库（如cursor-talk-to-figma-mcp），点击“Code”下载ZIP文件并解压。

5. 安装Bun

• 打开终端，执行以下命令安装Bun（替代Node.js运行环境）：

  macOS/Linux  
  curl -fsSL https://bun.sh/install | bash  
  Windows  
  powershell -c "irm bun.sh/install.ps1|iex"  
  

  安装完成后，输入 bun -v 验证。

---

二、安装并配置MCP插件

1. 启动WebSocket服务

• 进入解压后的cursor-talk-to-figma-mcp目录，执行以下命令：

  bun socket  
  

  成功后终端会显示“WebSocket服务器已启动”。

2. 配置某AI编辑器的MCP服务器

• 打开某AI编辑器，进入“设置”→“MCP”→“添加新服务器”，输入以下配置（Windows示例）：

  {  
    "mcpServers": {  
      "TalkToFigma": {  
        "command": "cmd",  
        "args": ["/c", "npx", "cursor-talk-to-figma-mcp@latest"]  
      }  
    }  
  }  
  

  保存后，MCP服务器状态变为绿色即成功。

3. 安装某设计工具插件

• 打开某设计工具桌面端，进入“插件”→“开发”→“导入现有插件”，选择源码中的manifest.json文件。
• 插件启动后，记录生成的“Channel编码”（如lf99dj4w），后续步骤会用到。

---

三、连接Channel并生成原型图

1. 在某AI编辑器中连接Channel

• 在某AI编辑器的对话框中输入：

  join_channel "lf99dj4w"  
  

  （替换为你的实际Channel编码）

2. 输入自然语言指令生成原型图

• 示例指令：

  “帮我设计一个电商登录页面，包含用户名、密码输入框和登录按钮”  
  

  AI将自动生成设计稿并同步到某设计工具中，你可实时查看效果。

3. 验证与调整

• 在某设计工具中检查生成的原型图，通过“选择”工具调整布局或样式。
• 重复输入指令优化细节，例如：

  “将登录按钮改为蓝色，并添加‘立即登录’文字”  
  

---

四、常见问题与优化建议

1. 连接失败怎么办？
   • 检查某设计工具插件是否已启用，重启WebSocket服务和某AI编辑器。
   • 确保Channel编码与某AI编辑器输入一致。
2. 如何提升生成效果？
   • 使用更具体的描述，例如：“按钮尺寸100x40，字体大小16px”。
   • 结合某设计工具的“组件库”功能，复用已有元素。
3. 商业化潜力
   • 为团队提供自动化设计服务，按项目收费。
   • 开发模板库（如电商、APP原型），供用户订阅使用。

---

五、总结：MCP让AI设计触手可及
通过MCP协议，某AI编辑器与某设计工具的结合，让非技术用户也能体验AI设计的便利。从安装到生成，全程无需编写代码，只需简单的指令即可完成原型图制作。未来，随着MCP生态的完善，AI与设计工具的协作将更加智能！