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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

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

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

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

10 条回复 • 2026-03-12 23:49:17 +08:00

finiking

6 小时 4 分钟前

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

finiking

6 小时 4 分钟前

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

tlerbao

5 小时 37 分钟前

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

skallz

5 小时 29 分钟前

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

tlerbao

5 小时 27 分钟前

@skallz

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

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

daimaosix

5 小时 26 分钟前 via Android

@skallz 正解

tlerbao

5 小时 24 分钟前

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

uqf0663

4 小时 59 分钟前

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

XTTX

4 小时 34 分钟前

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

uqf0663

4 小时 17 分钟前

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