这是《无线电》杂志1974年第9期P32上的一篇，介绍超外差式收音机的中频为什么选用465千赫的文章。收音机中频选465千赫的奥秘我国超外差收音机中频...
2025-07-26 0
前端开发的春天！腾讯云CodeBuddy+Figma MCP快速还原设计稿
健康生活
2025年07月24日 06:10 1
admin
前端开发的春天！腾讯云CodeBuddy+Figma MCP快速还原设计稿
大家好，我是星哥，之前介绍过什么是MCP，在本地配置MCP今天继续介绍使用腾讯云CodeBuddy+Figma MCP快速还原设计稿。
PS:我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
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页面
再一个大的设计图，就会报错，可能是图片太多网络连接问题、设计文件很大很复杂，无法生成。
结束
这个组合拳带来的不仅是效率提升，更是工程思维的进化。当设计稿可以直接转化为符合工程规范的可维护代码，前端开发者终于可以从重复劳动中解放，聚焦真正的业务创新。
缺点是如果设计图一旦过多、多大则可能生成失败。
写文不易，如果你都看到了这里，请点个赞和在看，分享给更多的朋友；也别忘了关注星哥玩云！这里有满满的干货分享，还有轻松有趣的技术交流～点个赞、分享给身边的小伙伴，一起成长，一起玩转技术世界吧！
相关文章
- 详细阅读
-
老板女儿高考530分，门卫随礼2800；门卫儿子考710，老板回礼320详细阅读
“王总，这红包……”宋建国看着手里的三张百元大钞和一张二十元的钞票，脸上一阵青一阵白。“这是我的一点心意，320不少了，你就是一个门卫，你们也就配这些...
2025-07-26 0
-
一见·习主席的三点主张，讲清楚了中欧这对“大个子”如何相处详细阅读
“中欧都是国际社会中的‘大个子’，我们要牢牢把握中欧关系发展的正确方向，一道努力开辟中欧关系更加光明的下一个50年。”7月24日，在会见欧洲理事会主席...
2025-07-26 0
-
泽丰半导体取得半导体测试多元合金探针及制作方法专利详细阅读
金融界2025年7月26日消息，国家知识产权局信息显示，上海泽丰半导体科技有限公司取得一项名为“一种半导体测试的多元合金探针及制作方法”的专利，授权公...
2025-07-26 0
-
不用光刻机5nm芯片良率达70％？疯传中国芯“突破进展”打脸老美详细阅读
中国芯片行业面临美国强力制裁，无法取得生产先进制程所需的EUV光刻机，仅能透过不断改良的DUV机台提升制程能力。近期，微博上疯传SMIC 5nm的良率...
2025-07-26 0
-
OPPO ColorOS七月大升级！超20亮点+重磅AI功能，体验直线拉满详细阅读
在智能手机操作系统不断迭代的浪潮中，OPPO旗下的ColorOS始终保持着强劲的创新势头。就在7月22日，OPPO、一加手机操作系统官方微博Color...
2025-07-26 0
-
中煤科工西安研究院申请用于煤矿井下的多向动力吸振装置及设计方法专利，吸收、减弱主系统振动详细阅读
金融界2025年7月25日消息，国家知识产权局信息显示，中煤科工西安研究院（集团）有限公司申请一项名为“一种用于煤矿井下的多向动力吸振装置及设计方法”...
2025-07-26 0
-
江苏金利源印务取得可调节内部空间包装纸箱专利，使相邻移动板间装载物品空间更稳定详细阅读
金融界2025年7月24日消息，国家知识产权局信息显示，江苏金利源印务有限公司取得一项名为“一种可调节内部空间的包装纸箱”的专利，授权公告号CN223...
2025-07-26 0
发表评论