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/

相关推荐
TELL5211 天前
vue前端架构
vue
南城以南溫暖如初1472 天前
社区健身小程序开发流程详解:技术选型与实施经验分享
java·经验分享·spring boot·mysql·vue·apache
万亿少女的梦1682 天前
基于Spring Boot、Vue与MySQL的私人健身教练预约管理系统设计
java·spring boot·mysql·vue·预约管理
满栀5853 天前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
碧水澜庭4 天前
头条【vue+fastapi 】全栈教学项目系列之《02_双系统零基础环境搭建手册》
vue·fastapi
DsirNg6 天前
从 `@wheel.prevent.stop` 到事件捕获:一次讲清浏览器事件流与 Vue 事件修饰符
javascript·vue·事件修饰符·事件冒泡·dom 事件·事件捕获·wheel
其美杰布-富贵-李6 天前
Vue 3 模板语法速通:彻底理解 `:`、`@`、`#`、`v-if`、`v-for` 与 `v-model`
vue
DsirNg6 天前
基于拓扑排序的画布自动布局:用最长上游路径决定节点列级
vue·流程图·拓扑排序·状态管理·有向图·自动布局·最长路径
way_hj8 天前
Flask笔记(2)快速web项目
笔记·flask·vue·web
Sterting8 天前
初识Vue3与开发环境搭建
前端·vue