1、在vscode安装 code buddy

在设置里面新增figma的mcp

2、首次mcp安装可能会报错

出现报错只要安装一下就可以使用

回到VScode当中，点击CodyBuddy，输入：

https://www.figma.com/design/LK8lb8OasxVIhIeioKD8kL/Figma-basics?node-id=4368-321123&t=dnKdiYiCZO4KFjJv-4 根据提供的figma链接，生成对应的html页面，要求css也放在html当中，且文件名为figmatocode.html

然后，CodeBuddy就开始调用对应的MCP，将我们需要转为代码的页面，进行代码生成

3、生成效果

UI图（左边） 效果图（右边）

但是复杂一点的图还是强差人意：UI图（左边） 效果图（右边）

总的来说肯定是能提升效率，但是还是需要人工进行优化

参考： https://cloud.tencent.com/developer/article/2520933

https://cloud.tencent.com/developer/article/2548237

https://www.codebuddy.cn/setup/

# figma
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

Codex Desktop模型切换思考

avatar MCP技术社区

Claude Code ：如何最大化你的 Session 价值

遇到困难问题、模糊，需要做复杂判断时，再上更大的模型。只是改变量名、跑测试、做一些重复性工作，用小一点的模型就够了。下面两幅图，左侧是简单任务下，不同模型和effort 程度下的对比；右侧是复杂任务下，不同模型和不同 effort 的程度对比。

avatar MCP技术社区
cover

Claude Code 提效真相：个人会用不算什么，能带团队才算入门

avatar MCP技术社区