AI
用Trae开发还原figma中的设计稿
2025/7/27 · 2 min read
准备工作： trae添加好Puppeteer（帮助AI查看操作浏览器中的内容）、figma AI bridge（获取figma中的图片内容）
开搞：
- 用figma的某个插件 figma to cursor来复制设计源json数据（这个是用来还原设计的）
- 再通过figma MCP 连接复制设计图的链接地址提供给UI，让AI根据json数据比对，需要哪些设计切图。
- 然后通过trae对内容进行微调
发现问题：
- figma中对位图进行调色了，这种素材AI是没办法变色导出下载的，所以设计稿要严格规范
- AI会给页面添加一些不需要的内容
- 需要追加让AI检查比对是否完全还原（貌似总会弄错，我没有单独测试模型效果）