WorkBuddy + 墨刀 MCP 配置教程：从连接配置到生成原型与代码

最近在折腾各种 AI Agent，发现光让 AI 聊聊天、写写代码已经有点腻了。我觉得现在更有意思的玩法，是让 AI 能直接连上外部工具，真正插手到实际的工作流里去。
拿产品研发来说，一个需求从提出来到最终上线，中间要经过需求分析、写PRD、画原型、做UI设计、前端开发……一大堆环节。如果 AI 只会写写文案或者撸撸代码，那从需求到落地，中间还得靠人来回传话、对齐信息，效率一下子就下来了。
现在有了 MCP 协议，AI Agent 就能连接各种专业工具了。这篇文章就结合我自己的实操，用** WorkBuddy 加上墨刀的 MCP**，从配置到生成原型再到代码，完整走了一遍。具体怎么配、怎么调、效果怎么样，纯当给大家做个参考。

一、为什么要让 WorkBuddy 连接 MCP？

MCP 就是一套让 AI Agent 能调用外部工具的“通用语言”。以前 AI 只能靠自己的那点“学识”硬生成，但有了 MCP，它就能调用专业软件的真实能力了。比如连数据库查业务数据、连代码仓库看项目源码，或者连设计工具直接上手做产品。
对于产品研发来说，最大的价值就是让信息在不同环节之间传递时，不会“缺斤少两”。举个例子，如果产品经理说：“帮我搞一个企业内部审批系统，得有登录、工作台、审批列表、详情这些页面。”你直接拿这个需求去问通用AI，它大概率给你生成一个长得差不多、但逻辑很简陋的页面。而一旦连上专业的产品设计工具，AI 就能借助工具里现成的组件库和规范流程，整出来的方案更贴近真实业务，没那么“塑料”。
在这个组合里，WorkBuddy 的角色就是那个“大脑”，负责理解你的需求、拆解任务；墨刀 MCP 就是“专业工具包”，专门搞定原型设计和产品方案。俩家伙配合上，基本就能串起来一条从需求到原型、再到代码的小流水线。

二、WorkBuddy 接入墨刀 MCP 配置教程

配起来其实不费劲，主要就是让 WorkBuddy 能认出来这个 MCP 服务。

第一步：准备 WorkBuddy 环境

先装上 WorkBuddy，得确保你的版本是支持 MCP 功能的。MCP 本身不是个独立软件，就是一种连接方式。所以配置完了之后，WorkBuddy 还是负责跟你聊天、理解需求，只是可以调用外挂能力。

第二步：配置墨刀 MCP Server

打开 WorkBuddy 里的自定义连接器，也就是 MCP 的配置文件，把具体服务信息填进去就行。参考配置如下：
json

{
  "mcpServers": {
    "modao": {
      "type": "streamableHttp",
      "url": "https://modao.cc/agent-py/ai/mcp",
      "headers": {
        "modao-token": "把你的令牌填这里"
      },
      "timeout": 60000
    }
  }
}

填好保存，重启 WorkBuddy，记得把 modao 这个连接器调成信任状态。不放心的话可以先测试下连接，直接问它一句：“看看现在能连上哪些 MCP 工具？” 如果配置没问题，它就能列出来。

第三步：确认 MCP 能正常调用

连接成功之后别急着搞大项目，建议先扔个简单任务试试水，比如：“用墨刀 MCP 帮我生成一个登录页看看。” 如果能顺利调起墨刀 AI 并返回结果，那就说明整个链路已经通了。后面再有什么产品设计的需求，就可以直接用大白话让它去干了。

三、连接成功后，如何让 AI 生成产品原型？

配置好了只是个开始，实际用的时候有点小技巧。不建议上来就甩一句“帮我设计个后台”，太宽泛了，AI 容易懵。最好是把需求背景讲清楚，比如：“帮我用墨刀设计一个企业客户管理系统，使用者有销售人员和管理员，得有客户列表、详情页、跟进记录、数据统计这些功能。” 包含了业务类型、用户角色和核心功能，AI 发挥起来才不容易跑偏。

我当时走的流程大概是这样的：

先做需求分析，让 WorkBuddy 拆解功能模块。比如直接跟它说：“根据上面这个需求，帮我拆分一下系统要哪些功能模块，规划一下需要哪些页面。” 它就会帮你梳理角色、功能、页面结构和它们之间的跳转关系。这一步其实就是让 AI 充当产品经理，先帮我们把思路理清楚。
然后生成产品原型，等页面结构定了，就继续让它调用：“按照刚才的功能规划，生成对应的产品原型。” 这时候出来的就不只是单个页面了，而是一套完整的流程。比起单纯的UI界面，它更关注页面之间怎么跳转、交互逻辑是什么。
最后就是持续优化，像调页面细节、加筛选条件什么的，直接跟它聊就行。比如你可以说“客户列表里加个按负责人和更新时间筛选的功能”，或者“详情页下面再补一个跟进记录模块”。AI 会结合之前的上下文改，不用每次都从头交代一遍需求。

四、从原型到代码：实际效果怎么样？

除了画原型，这套组合拳的另一个好处是能直接对接开发阶段。当产品原型确定后，可以让 AI 根据设计结果生成前端代码。你可以直接跟它说：“根据现在这个原型，生成 React 的页面代码。” 墨刀 AI 会输出对应的页面结构、组件代码和基础样式。之后你可以继续让 WorkBuddy 帮你完善后端逻辑，查漏补缺。
不过 AI 生成代码更适合作为开发起点，帮你搭好架子，肯定不能直接用。像接口调用、状态管理、权限控制、性能优化这些复杂问题，还是得靠人工来搞定。不过对于开发来说，能省掉写静态页面的功夫，就已经挺香了。
从我自己的体验来看，WorkBuddy 加上墨刀 MCP，最大的提升不是“全自动做产品”，而是把需求、原型、代码这几个环节真正串起来了。产品经理可以快速验证自己的想法，设计师能减少重复劳动，开发也能更早拿到靠谱的页面结构。
这个组合肯定解决不了所有问题，有时候AI理解的需求还是会跑偏，但至少让产品经理和开发之间少了不少沟通成本。我觉得 MCP 的精髓不在于让 AI 多接了个外挂，而是让它真正融入了咱们的工作流。当 AI Agent 能真正连上专业软件，它才算从一个聊天机器人，变成了一个能实实在在帮你干活的帮手。

注：文中部分配图由AI生成