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/

相关推荐
蓝黑20201 天前
Vue组件通信之v-model
前端·javascript·vue
不会写DN1 天前
Vue3中的computed 与 watch 的区别
javascript·面试·vue
钛态1 天前
前端WebSocket实时通信:别再用轮询了!
前端·vue·react·web
蓝黑20201 天前
Vue组件通信之slot
前端·javascript·vue
蓝黑20202 天前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小彭努力中2 天前
204.Vue3 + OpenLayers:加载 GIF 文件(CSS 背景实现动画标记)
前端·css·vue·openlayers·geojson·webgis
陶甜也2 天前
3D智慧城市:blender建模、骨骼、动画、VUE、threeJs引入渲染,飞行视角,涟漪、人物行走
前端·3d·vue·blender·threejs·模型
NPCZ3 天前
vite与tailwindcss创建大屏可视化项目
vue
蓝黑20203 天前
Vue导入和注册组件
前端·javascript·vue
有来技术3 天前
Vite 8 全面 Rust 化!vue3-element-admin 升级实战,构建提速 65%
前端·vue.js·前端框架·vue