前端开发的春天！腾讯云CodeBuddy+Figma MCP快速还原设计稿

前端开发的春天！腾讯云CodeBuddy+Figma MCP快速还原设计稿

大家好，我是星哥，之前介绍过什么是MCP，在本地配置MCP今天继续介绍使用腾讯云CodeBuddy+Figma MCP快速还原设计稿。

PS:我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

image-20250516224713325

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”，点击安装，即可安装。

image-20250513174147224

申请Figma 的API key

1.进入figma的官网

https://www.figma.com/ 

首页登录，再点击“setting”设置

image-20250516170542052

2.申请API KEY

点击“Security”，再点击 new token

image-20250516170612123

随便填一个名字，再赋予权限。

image-20250516170716067

点击 Generate token 生成一个token，复制下来。

image-20250516170811097

安装Figma MCP

在CodeBuddy右上角有个 MCP市场，点击

image-20250516223332708

在搜索框中搜索“FIGMA”再点击安装，稍等片刻

image-20250516170831513

填写刚才申请的key

image-20250516171136753

在右边把修改一下

"command": "npx", 改成 "command": "cmd",
添加：
 "/c",
 "npx",

image-20250516171517455

测试运行

FramelinkFigmaMCPServer MCP Server 已经安装完成，通过使用工具之一来演示服务器的功能

image-20250516171555111

成功如下图：

image-20250516171632114

失败如下图：

image-20250516171307819

直接输入地址

https://www.figma.com/design/lXOGZ0BobE8n4aRN9orpBy/Das?node-id=0-1&p=f&t=W6vaEFZX5QncdJ4X-0

下载了图片

image-20250516175159953

把 https://www.figma.com/design/lXOGZ0BobE8n4aRN9orpBy/Das?node-id=0-1&p=f&t=W6vaEFZX5QncdJ4X-0 设计图生成html

image-20250516180700815

打开html页面

image-20250516180536369

再一个大的设计图，就会报错，可能是图片太多网络连接问题、设计文件很大很复杂，无法生成。

image-20250516183844389

结束

这个组合拳带来的不仅是效率提升，更是工程思维的进化。当设计稿可以直接转化为符合工程规范的可维护代码，前端开发者终于可以从重复劳动中解放，聚焦真正的业务创新。

缺点是如果设计图一旦过多、多大则可能生成失败。

写文不易，如果你都看到了这里，请点个赞和在看，分享给更多的朋友；也别忘了关注星哥玩云！这里有满满的干货分享，还有轻松有趣的技术交流～点个赞、分享给身边的小伙伴，一起成长，一起玩转技术世界吧！ 😊