共计 1584 个字符，预计需要花费 4 分钟才能阅读完成。
大家好，我是星哥，之前 今天继续介绍使用腾讯云 CodeBuddy+Figma MCP 快速还原设计稿。
PS: 我正在参加 CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：
CodeBuddy
腾讯云代码助手（Tencent Cloud CodeBuddy，以下简称 CodeBuddy），由腾讯云自研的一款开发编程提效辅助工具，基于腾讯混元 + DeepSeek 双轮模型驱动，构建对开发者友好，好用易用的代码助手，为开发者提供 AI 技术问答、Craft 软件编码智能体、智能代码补全、单元测试、智能评审、代码修复等 Agent 智能体拓展能力，兼容 MCP 开放生态，并可支持团队知识库管理、自定义智能体与指令管理、多模型接入、企业账号集成等功能，辅助开发者提升编码效率和质量，助力研发团队提质增效。
兼容 Visual Studio Code、JetBrains IDEs (IntelliJ IDEA、Rider、Pycharm、Android Studio、鸿蒙 DevEco Studio）、Visual Studio、CloudStudio、微信开发者小程序工具等主流 IDE)。
文章提要
本文需要做的是什么
1.Window 演示环境
2.VScode 的编程 IDE
3.VScode 安装腾讯云代码助手 CodeBuddy
4. 配置 Figma MCP，再用 CodeBuddy+MCP 直接把设计图生成 HTML
安装 vscode
下载地址：https://code.visualstudio.com/，点击“Download for Windows”下载，安装。
安装腾讯云 CodeBuddy
点击扩展，再搜索“CodeBuddy”，点击安装，即可安装。
申请 Figma 的 API key
1. 进入 figma 的官网
https://www.figma.com/ 首页登录，再点击“setting”设置
2. 申请 API KEY
点击“Security”，再点击 new token
随便填一个名字，再赋予权限。
点击 Generate token 生成一个 token，复制下来。
安装 Figma MCP
在 CodeBuddy 右上角有个 MCP 市场，点击
在搜索框中搜索“FIGMA”再点击安装，稍等片刻
填写刚才申请的 key
在右边把修改一下
"command":"npx", 改成"command":"cmd",
添加：
"/c",
"npx",
测试运行
FramelinkFigmaMCPServer MCP Server 已经安装完成，通过使用工具之一来演示服务器的功能
成功如下图：
失败如下图：
直接输入地址
https://www.figma.com/design/lXOGZ0BobE8n4aRN9orpBy/Das?node-id=0-1&p=f&t=W6vaEFZX5QncdJ4X-0下载了图片
把 https://www.figma.com/design/lXOGZ0BobE8n4aRN9orpBy/Das?node-id=0-1&p=f&t=W6vaEFZX5QncdJ4X-0 设计图生成 html
打开 html 页面
再一个大的设计图，就会报错，可能是图片太多网络连接问题、设计文件很大很复杂，无法生成。
结束
这个组合拳带来的不仅是效率提升，更是工程思维的进化。当设计稿可以直接转化为符合工程规范的可维护代码，前端开发者终于可以从重复劳动中解放，聚焦真正的业务创新。
缺点是如果设计图一旦过多、多大则可能生成失败。
写文不易，如果你都看到了这里，请点个赞和在看，分享给更多的朋友；也别忘了关注星哥玩云！这里有满满的干货分享，还有轻松有趣的技术交流～点个赞、分享给身边的小伙伴，一起成长，一起玩转技术世界吧！😊
