垂死病中惊坐起，笑问产品改哪里？CodeBuddy + Figma MCP 翻盘地狱任务
某个平平无奇的周五下午，阳光明媚、万里无云，天蓝得像一张刚换的新桌面。我正坐在工位上，脑子里已经飘出了对周末的种种幻想。想象着周五下班之后的烧烤摊、游戏局、还有和女朋友的电影约会——一切都按部就班地等待着时间走到六点整。
正在我默默合上 笔记本准备关机收工的时候，突然，企微一跳，“叮——”，一个来自产品经理的消息弹了出来。
“你看下这个设计，老板想下周一上午的时候给客户演示一下，辛苦你这边抓紧时间完成下。”
？？？
我一口水差点没呛出来。什么？老板要在周一演示？现在几点？周五下午三点半！真所谓产品一张嘴，开发忙断腿，大哥要是不看张的美，肯定打断你狗腿。
点开产品发来的链接，加载的一瞬间，我的脑袋“嗡”的一下，全是付航老师那句熟悉的脱口秀台词：
“我，你，马——！”
产品一张嘴，开发忙断腿
设计稿内容之丰富、交互之复杂、页面之多变，完全不像是一个“加个按钮”级别的小功能。你说这要在一两天之内搞定，不是逗我玩吗？要是换个平时，我可能还会先礼后兵发个“能不能下周中再演”的语音过去。
但我转念一想，这不就是“老生常谈”的职场经典桥段么？产品一张嘴，开发累成狗。老板要演示，产品要成果，苦的是谁？还不是咱这些写代码的搬砖人！
我一边深呼吸调整情绪，一边默默把耳机音量开到最大，来压一压内心的怒火。毕竟说到底，甩锅也解决不了问题。再说了，这事儿传出去对我也没啥好处——毕竟我是谁？
我可是个开发界的小王子，产品界的大侠客，美貌与智慧并存，代码与设计齐飞，怎么可能会被一个突发需求击垮！
不怕需求多，就怕你不会用工具
话虽如此，现实还是要面对的。这么多页面和交互，要从头写 UI、拉逻辑、调动画、对设计稿……哪怕不睡觉我也干不完。
这时，我灵光一闪，突然想起我最近才刚刚试水的一款神器 —— 腾讯云 CodeBuddy，还有配套的 Figma MCP 插件。之前玩票似的用了一下，觉得这东西确实有点料，但一直没机会真正实战。没想到啊，今天就轮到你们出场了。
说干就干，我拉起 IDE，打开 VS Code，开始这场周五加班逆袭战！
Step 1：打开 VSCode，安装 CodeBuddy 扩展
首先是安装插件。打开 VS Code 的扩展市场，搜索 CodeBuddy，几秒钟之内就找到了那个熟悉的蓝色图标。点击安装，等待几秒，插件就装好了。
接下来，登陆我早就注册好的腾讯云账号，这一步直接扫码，和登录微信差不多。
安装完成之后，CodeBuddy 会自动在侧边栏生成一个入口，点进去可以看到几个标签页：Craft、Chat、Code Review、Unit Test……该说不说，这 UI 做得确实挺有范儿，科技感满满。
Step 2：连接 Figma，开启 MCP 神器联动
想要快速开发，设计稿是关键。产品虽然发了链接，但我得让 Figma 和 CodeBuddy 通上话才行。
这一步，需要安装 Figma MCP 插件。好在我之前就装过一次，直接启用就行。
然后在 已安装 里选中这个项目，右键点击 开始按钮，它就会自动生成一段 MCP 接口地址。这时候回到 CodeBuddy，直接使用 MCP 就可以，屏幕左上角绿色标记表示连接成功。
我心中一阵狂喜，仿佛刚打通任督二脉。
Step 3：Craft + 命令指令 + 自动生成 UI 组件
接下来的重点来了——Craft 模块。
在 Craft 的命令输入框中，我输入指令：这个是从 figma 获取的设计链接，输入链接地址后，MCP Server 会自动识别。
这句话的意思是：从当前连接的 Figma 项目中读取组件、交互、结构，自动构建出可运行的前端代码。
几秒钟之后，左侧目录树“哗啦啦”开始变化。没错，所有页面和组件都生成完毕了，而且分门别类，结构清晰，交互都用代码封装好了。
我点进每一个页面看了下，居然连 hover、点击这些状态都写好了，这效率也太夸张了吧！
说实话，那一刻我真的想哭。不是因为辛苦，是因为感动。想当年，为了一个登录框调 padding，连夜加班改 margin-bottom，哪有现在这么“云淡风轻”。
Step 4：一点点自定义优化，再加点逻辑代码
当然，MCP 不是魔法棒，不是说点一下什么都好了。大部分页面、交互它都搞定了，但一些复杂的业务逻辑，还是得我手动补上。
不过这也正常，总不能让 AI 连我脑子里没说出口的业务规则都猜出来对吧？
我花了两个小时，补了几个接口联调，修了两个表单校验，加了一个 loading 状态的动画。再跑一遍项目，完美运行，毫无 bug。
从收到产品消息到搞定功能，总共也就五个小时——相比以前至少要两三天的开发量，简直就是开挂一样的效率。
Step 5：用 Edge Page MCP，一键生成预览链接
最后的操作更是绝了。做完页面之后，我没急着打包发 zip 文件，而是直接使用 CodeBuddy 的 Edge Page MCP 模块，生成了一个在线预览链接。
调用 MCP，发布页面，几秒钟后，一个可以在任意浏览器打开的演示页面生成了。把这个链接丢进企微群，直接 @老板：
“页面功能完成啦，点这个链接就可以直接预览！”
老板点开之后过了几分钟，发了一个竖大拇指的表情，然后回了一句：
“这个做得不错，下周演示稳了。”
我轻描淡写地回复一句：“小意思~”
然后一边默默把耳机摘下，一边感受到从未有过的成就感。
尾声
这件事过后，我是真的开始重新认识像 CodeBuddy 和 MCP 这样的工具。
它们不仅仅是开发加速器，更是我在关键时刻保命的“外挂”。要不是这次有它在，我这个周末可能真的泡汤了。
以前总觉得这种 AI 辅助写代码的东西只是玩具，用起来不放心，现在彻底改观了。只要设计逻辑合理，代码可控，这种协同方式完全可以成为新一代“主力战术”。
而且说实话，这种一条命令就能从设计稿生成半成品代码的体验，真的太爽了！
后记
周一上午，客户演示如期举行。老板在会议上一边展示页面，一边滔滔不绝讲业务逻辑。客户频频点头，连说“这套界面思路清晰、流程完整”，我在背后听着差点笑出声。
演示结束后，老板拍了拍我的肩膀：
“这次干得不错，准备给你升职。”
我没说话，只是看着 CodeBuddy 的图标，微微一笑。
你看，工具用得好，升职跑不了！
我发现 CodeBuddy 不是“工具”，它是“队友”
在这次使用过程中，我本来只是想“赶工”，结果用着用着，发现 CodeBuddy 的能耐远不止于此。
起初我只是用 Craft 快速生成项目结构，后来发现，它有一个“新物种”一样的存在——Craft 智能体。说它是“开发合伙人”也不为过：多文件的逻辑，不是简单粗暴地堆模板，而是根据上下文、组件职责、用户交互自动拆分，还能给出变量命名建议。这不是复制粘贴的聪明，而是真正理解需求背景后的“自我判断”。
以前写代码像是打地鼠，一个个功能点敲完；现在则更像在指挥一个靠谱的搭档，一人主攻一人补刀，效率高出几个层级。
而且它不仅“能写”，还“能看”——代码补全功能居然能结合我当前正在编辑的逻辑，提前预测我下一步想加的代码块，不是那种 IDE 傻乎乎推荐变量的补全，而是真正能根据上下文“猜中我要干嘛”的补全。尤其是处理 Vue 表单绑定和 API 数据处理逻辑时，推荐得丝丝入扣，让我边写边点头：懂我！
更夸张的是，我试着切进另一个旧项目，让 CodeBuddy 帮我做项目结构理解，它居然能通过 @Codebase 智能体快速识别出核心模块之间的依赖关系，然后生成了好几条可行的重构建议，甚至包括单测覆盖率低的文件。这不就是我天天琢磨但写在“以后有空再说”笔记里的重构愿望清单吗？
除了开发阶段，它还支持 代码评审功能，能自动扫描提交的文件，批量指出变量不规范、循环嵌套复杂、命名歧义等问题，还会给出清晰的优化建议，甚至自动生成 commit message。用一次就再也不想回到人工拉群说“麻烦你帮我 review 一下”的尴尬流程了。
最贴心的，是它还能连接 MCP 协议，把我 Figma 的设计稿无缝接入项目里，还能通过 Edge Page 一键生成演示链接给客户预览——真正实现从“设计到展示”一条龙，不需要我再自己搭服务器、调前后端、写部署脚本，项目跑起来仿佛开外挂。
说白了，这不是一款“写代码的工具”，而是一个：
“全栈开发 + 产品思维 + 工程审美”的复合型助手。
它不是来抢我饭碗的，而是帮我从繁琐中解放出来，能让我把精力放在更有价值的事上。
须知少日拏云志,曾许人间第一流 2020-07-23 加入
用心记录技术，走心分享，始于后端，不止于后端，励志成为一名优秀的全栈架构师，真正的实现码中致富。
评论