求助：运用 AI 技术实现设计稿转换为前端代码

[oldjohn]

各位大佬，小弟是一位交互设计师，现在领导分派了任务，要研究下运用 AI 技术实现设计稿转换为前端代码； 小弟毫无前端知识，完全没有方向。 求助各位大佬有没有一些开源的实现方案或者比较容易落地的实现路径啊？ 不胜感激！！ 不想砸谁的饭碗，也只是想完成任务而已！ 真心求解答

[noahlias]

你说的是可是这种类型？

https://github.com/abi/screenshot-to-code

[kaktos]

https://github.com/abi/screenshot-to-code

[hxzhouh1]

https://v0.dev/

[tianzx]

我正在搞这个方向，但是距离商用落地太遥远了。现有开源的 wandb/openui 、screenshot-to-code , 都是基于 GPT4 、Claude3 opus 来去做的。包括不开源的 https://v0.dev/ 。如果仅仅是基于 tailwind css 来去做的话，糊弄一下也能交差吧。

[oldjohn]

@tianzx 大佬方便加个地球号吗？ T05ldnNPTkUxMQ==

[oldjohn]

@noahlias 嗯嗯，很像

[oldjohn]

@kaktos 差不多就是这样的

[oldjohn]

@hxzhouh1 感谢大佬啊

[tianzx]

@oldjohn #5 X 随便聊聊吧。

[tool2dx]

AI 可以的，我发一张截图，让他写代码。

想作为商业落地估计有点难，只是很简单的 CURD 演示站，那么是可行的。

[183387594]

借楼 求一个 ，文字描述生成 设计稿的 网站

[bearbig43]

推荐试试这个，我们前不久有调研 https://www.imgcook.com/

[IndieYe]

ai 生成的代码，只能看看，但几乎不能用，问题比如：
1. 实际上列表展示我们用的是数组+一个列表项组件 map 出来，ai 则是会把整个列表项都生成
2. 如果要改动代码，我们要先理解 ai 生成的结构，ai 生成的代码虽然能看，但可能很复杂，尤其是包含了响应式或深色模式的时候
3. ai 生成的所有组件都堆在一起，我们要手动拆封成一个个单独的组件
4. 生成的图标需要用实际的图标库替换；生成的 ui （如按钮）需要用实际的 ui 库替换
5. 修改颜色样式，比如我们可能有全局调色板，但生成的代码里，就直接把颜色代码放上来了
。。。

[oldjohn]

@tianzx 什么意思啊大佬

[epiphyllum]

这种吗？

云音乐 D2C 设计稿转代码建设实践
https://segmentfault.com/a/1190000044514340
来源：魏慷 网易云音乐技术团队
https://music.163.com/st/seal

[qingyingwan]

这不是前端团队的活么，这是什么垃圾领导

[badbay]

@oldjohn twitter 吧

[kneo]

加油。搞定之后前端的活也是你的了。

[qsnow6]

AI 最多生成 60 分的代码，没法直接使用

[xhawk]

v0.dev 还是非常厉害的，其实我想要的是 vue3 的代码，不然我真的会下单买，我试过了，那个图片生成代码质量还是非常高的。