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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

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

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

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

14 条回复 • 2026-03-13 16:32:26 +08:00

finiking

2 天前

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

finiking

2 天前

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

tlerbao

2 天前

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

skallz

2 天前

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

tlerbao

2 天前

@skallz

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

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

daimaosix

2 天前 via Android

@skallz 正解

tlerbao

2 天前

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

uqf0663

2 天前

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

XTTX

2 天前

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

uqf0663

2 天前

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

finiking

1 天前

@uqf0663 figma 对齐的问题还在持续优化中，要对齐的特性还是有些多的，这两天会有新版本

Ketteiron

1 天前

@tlerbao #3 主要是大公司分责明确，如果没有固化的设计图，出事了谁来承担这部分的责任呢？
小公司的话现在确实不需要设计图了，直接修改代码的效率和准确率都更高，但在大公司的流程管理上，目前的设计职责很难分给开发人员或者产品经理。AI 提升了写一次性代码的效率，但还没很好地提升管理/组织效率。

MisterQ

1 天前

@tlerbao #3 这有啥好不理解的，除非是独立开发，哪个公司不是有专门的设计师，难道开发看着产品原型自己 vibe coding ，靠程序员自己的审美？

tlerbao

1 天前

@MisterQ 我们小公司就没有设计师