如何将 figma make 的原型尽量 100%的还原到 cursor 中

[Xbathy]

前言：使用 stitch google 生成的页面的效果比 figma 好，但是 figma 可以直接生成原型，所以我在 stitch 生成的页面，然后复制到 figma 生成原型
问题：在 figma 生成原型后，使用官方 mcp 或者其他 mcp 都不能在 cursor 中“还原”，大家是否有一些原型到代码的技巧，请教一下！

[onedge]

很难 100%，因为 figma 图纸对于 web 来说是有硬伤的，它的图层并不是和 web/css 绝对兼容的，打个比方近期新出的 glass effect 就是一个例子，css 里有模拟方法，但没有 1:1 还原的办法，诸如此类，绝对定位的问题也是，虽然 AI 可以靠视觉去复刻，但就前端 100%还原来说，很难

[onedge]

静态 UI 还小事，好调整一些，一些动态，motion ，动画，弹出层，特定操作才会显示的那些东西，更难

[nc]

你让设计师在 Figma 里设计出一套组件库，然后用 figma MCP 让 AI 把组件库做出来，人工调整细节。之后让 AI 还原页面设计，直接用组件库就行了，人工和设计稿做校对微调，给设计师看一遍确保没问题。

[wjj5728]

有个东西叫做 figma code connect ，好像不是免费的，相当于把本地的组件跟 figma 做映射，这样再调用 mcp 的时候就不是根据数值猜测，而是根据映射来完成。

[zealotxxxx]

figma make 不是可以直接下载源代码么？ 你还原个啥？

不过现在 figma make 的 ai credit 完全不够用的，你可以直接放弃这个产品。

[Xbathy]

@onedge 是的，就是 figma 设计好的自适应 ui ，到 cursor 里面就乱套了，能还原 50%就不错了

[Xbathy]

@zealotxxxx 比如我现在的工程用的 taro ，figma 创建 ui 用的 react 和 css ，那就需要 cursor 读取 figma 的设计然后用我自己的项目的技术还原。figma 的额度确实不够用，准备放弃了，看到 cc 出了一个 design 功能，准备试试，只不过都要会员..

[Xbathy]

@nc 没有设计师，我想自己试试，一个不会美术的程序员用 AI 做一个小程序到底能做成什么样，边界在哪里

[zealotxxxx]

@Xbathy 那你应该考虑利用 figma make 生成原型后，在让 ai 给你用 taro 重构一个新的。或者就走 electron

另外，figma make 的小技巧是：
1. 新建一个 Team ，给你的账号开个 Pro 计划的 full 座位，你就会有 3000 点的 AI credit 。
2. 如果上述 team 的 AI credit 用完了，就再新建一个 team ， 再付 18 刀。然后把第一个 team 里面的 figma make 项目，move 到新 team 里面去。这样的话，你只需要付 36 刀就可以获得 6000 点 AI credit 。

[zealotxxxx]

这种方式比你 1 个 team 充值 AI credit 要好非常多。因为你充值的时候，figma 会把最后一轮多用的 点数从充值里面扣除。而且 充值的 AI credit 非常贵。