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/

相关推荐
烈焰晴天17 天前
Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据 来精准还原UI
服务器·ui·figma
小葛要努力18 天前
安装nvm 管理node.js版本实现vue2和vue3项目共存
node.js·vue·nvm
这里是杨杨吖18 天前
SpringBoot+Vue高校在线考试系统 附带详细运行指导视频
vue·在线考试·springboot
良逍Ai出海19 天前
免费模板搭完独立站后,我用 Codex + Figma 做了自己的页面设计
前端·人工智能·figma
wuxia211819 天前
在5种环境中编写点击元素改变内容和颜色的JavaScript程序
javascript·微信小程序·vue·jquery·react
Sweet锦19 天前
Vue3 集成 ApexCharts 避坑指南:从动画失效到自定义指令的完美解决方案
vue·echarts
王小王-12320 天前
基于深度学习的个性化音乐推荐系统的设计与开发
人工智能·深度学习·mysql·vue·推荐算法·个性化音乐推荐系统·音乐预测
alexander06820 天前
使用vite脚手架,快速创建一个vue3的项目
vue
toooooop821 天前
UniApp Vue2 动态修改 SCSS 伪类颜色
vue
console.log('npc')21 天前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端·人工智能·python·figma·code·codex·mcp