vscode结合code buddy 和figma还原UI设计稿

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/

相关推荐
RuoyiOffice1 天前
SpringBoot+Vue3 企业考勤如何处理法定假期?节假日方案、调休补班与工作日判断链路拆解
spring boot·后端·vue·anti-design-vue·ruoyioffice·假期·人力
REDcker2 天前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
Ww.xh2 天前
ClaudeCode安全注入Figma Token最佳实践
安全·figma
jay神3 天前
基于团队模式的C程序设计课程辅助教学管理系统
java·spring boot·vue·web开发·管理系统
钛态3 天前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
周凡1234 天前
Figma Make AI生成【供应商租车询价系统】原型
figma
吴声子夜歌4 天前
Vue3——路由管理
前端·vue·es6·vue-router
Ww.xh4 天前
Figma设计稿转React代码:ClaudeCode+MCP实战教程
前端·react.js·figma
钛态5 天前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
钛态5 天前
前端趋势:别被时代抛弃
前端·vue·react·web