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/

相关推荐
No8g攻城狮5 小时前
【AI工具】wsl2 + ubuntu22.04安装部署sub2api详细教程
人工智能·ai·go·vue
审判长烧鸡12 小时前
【AI问答/前端】前端满天过海局(一)
前端·vue·浏览器
审判长烧鸡13 小时前
【AI问答/前端】前端瞒天过海局(三)
前端·vue·html5·js
弹简特1 天前
【Vue3速成】04-vue3官方库-路由机制
前端·vue·路由
shadow_glory3 天前
大屏邪修自适应
vue
是梦终空3 天前
计算机源码274—基于深度学习的中医舌象智能识别与健康管理系统(源代码+数据库+12000字论文)
人工智能·python·深度学习·opencv·django·vue·springboot
涵涵(互关)3 天前
Naive-ui树型选择器只显示根节点
前端·ui·vue
jay神3 天前
基于微信小程序课外创新实践学分认定系统
java·spring boot·小程序·vue·毕业设计
QuZhengRong3 天前
【Luck-Report】缓存
java·前端·后端·vue·excel