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/

相关推荐
木斯佳1 天前
前端八股文面经大全:阿里云AI应用开发二面(2026-03-21)·面经深度解析
前端·css·人工智能·阿里云·ai·面试·vue
鄭郑1 天前
Figma学习笔记--01
笔记·学习·figma
工业互联网专业2 天前
基于Python的黑龙江旅游景点数据分析系统的实现_flask+spider
python·flask·vue·毕业设计·源码·课程设计·spider
大叔_爱编程2 天前
基于协同过滤算法的理财产品推荐系统-flask
python·flask·vue·毕业设计·源码·课程设计·协同过滤
小彭努力中2 天前
193.Vue3 + OpenLayers 实战:圆孔相机模型推算卫星拍摄区域
vue.js·数码相机·vue·openlayers·geojson
小彭努力中3 天前
192.Vue3 + OpenLayers 实战:点击地图 Feature,列表自动滚动定位
vue·webgl·openlayers·geojson·webgis
百锦再3 天前
Vue不是万能的:前后端不分离开发的优势
前端·javascript·vue.js·前端框架·vue
新缸中之脑3 天前
Google Stitch:Figma杀手?
figma
BUG创建者3 天前
openlayers上跟据经纬度画出轨迹
开发语言·javascript·vue·html