看看这个 AI 设计稿导出代码（React/Vue/ Swift ...）的还原度咋样？

[finiking]

用 OpenPencil 随便一句话生成了一个美食 APP 首页，设计感不错的！提示词高手应该能发挥得更好。



最近上了 AI Enhance to Code 之后，可以说打通了最后一百米。直出 8 种前端/客户端代码，运行无报错，还原度可以说相当高了。（我怎么觉得有些比设计稿对的还要齐呢[doge]）。




最后要强调的是支持导出 Vue ，可以说太符合国情了，好的 Design to Code 工具支持 Vue 的几乎没有啊😭。

总之对设计师、前端、后端、全栈的小伙伴来说，都是个神器！

[finiking]

https://github.com/ZSeven-W/openpencil

[finiking]

@finiking 地址在这里，喜欢的老哥可以点个 star

[tlerbao]

我呢就不是很理解，有提示词，我直接让 ai 生成代码了，为什么要生成设计图，然后再根据设计图生成代码呢？

[skallz]

@tlerbao 因为设计图所见即所得，包括要修改起来也更直观，代码只要保持还原设计图一致就能保证出效果了，但是如果你直接生成代码并且在代码的基础上去调整样式，就很难直观的修改整体效果

[tlerbao]

@skallz

提示词 到 设计图 ，一次满意吗？不是吧
设计图 到 成品 不可能细节 1:1 还原吧

那既然 提示词 > 设计图 > 代码 > 修改
我为什么不 提示词 > 代码 > 修改

[daimaosix]

@skallz 正解

[tlerbao]

@skallz 他这个口完的设计图倒出的代码是 1:1 还原的吗，如果是的话那还行吧，可以在之前就管控细节了。

[uqf0663]

感谢分享，这几天正头疼 figma 的 make 积分不够用呢，有个替代品挺好的

[XTTX]

https://ibb.co/4Z0Stq6J
https://ibb.co/MYNzG39
https://ibb.co/ymBYD5Q4 我觉得触及到了现在 ai agent skill 的遍及了。 三张图片一张是 CC 拿原图直接跑的， 另外一张是原图，另外一张是经过魔法淬炼，然后 CC 使用魔法做出来的

[uqf0663]

试了一下，跟 figma 的 make 比差距还是很大，同样的提示词 figma 生成出来直接就是可用的，这个生成的结果各种错位。可能是我的使用方式有问题？