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