AI 时代你们是怎么开发前端页面的?

作为一名后端,前端开发我是真的不会写,写的太烂了,没法看。有时候自己做个工具自己都看不下去了。现在有了AI,我是直接截图个同行的发给ai让他帮我写。但是要调优很久才相对满意点。

最近image2出来了,能生成出高大上的设计稿图,丢给ai根本没发还原。请问下大家对于这种情况是按流程来。找UI设计师画图,再找个前端开发吗? 还是如何处理好,给点建议。谢谢佬。

不知道,我让ai写代码然后提交推送到gitee我本地拉取让他改

好把。界面好丑也不管吗?比如开发个app,总的设计好看点把 :grinning_face_with_smiling_eyes:

感觉让ai对着图片去实现还是达不到完美还原,只能做到对称啊,色调啊这种,复杂一点的有设计感的就还原不出来了,甚至还会用莫名其妙的svg来拼图 :rofl:

站内有很多佬分享提高 AI 审美的 skills,可以去搜索一下尝试一下。另外遇到喜欢的风格,也可以直接描述要求他模仿即可。多几轮对话就大差不差能调出来一个能看的版本了。还是得慢慢调,反正我是一次对话得不到我想要的前端。

可以用Figma Mcp,还原度会高很多。

直接文本描述,比如:
网页全局限宽,导航栏、card公告、文章列表,页脚,shadcn/ui风格,中性配色。

我觉得重点在于维持样式的一致性,生成的设计稿看起来可能很好,但问题是每一次组件的样式都不一样,按钮的内边距、阴影、色彩这些东西,都是需要保持一致性才能好看的。

首先基本的组件样式:

这里调自己喜欢的主题,然后按他的引导创建项目,安装 Agent Skills,要求 LLM 在设计时先阅读 shadcn skill

其次,做界面的时候只要描述构图/排版,然后让 LLM 遵循 shadcn 的 composition 去做,相比于看起来花里胡哨的界面,符合设计系统的才会更自然,也比还原一个图片里的界面容易很多。

前端样式都交给gemini去改,就谷歌的模型前端写的好看了

是的,真要一个一个去调。哪里不满意,怎么调告诉它最终才能出一个相对满意的设计出来

感谢,我试试,又得学习下了。快做成全栈了。 :sweat_smile:

现在我就算这么描述得,写提示词告诉它怎么改,就是有点费时间。需要精细化调优

目前来说没有一比一完全还原设计图的方法只能说快速搭建人为调整,最接近的就是使用Figma Mcp 能接近一点 但是还是需要微调,细节处理没有办法。有时候一个微调样式使用大量提示词不划算

分享下我当前的做法吧。
1.先写完所有后端接口,调通测试正常;
2.开始一个个磕前端模块,组件,一个个打磨;
3.直到自己满意为止,很多想法动画效果、真的AI写不出来,只能给些建议。
我也求等有好用的方法介绍。

确实,gemini前端还是很强的。相比claude/gpt还是要强很多。

建议直接搞个pro账号,反重力。目前gemini3.1前端还是独一档。

我现在也是这么打磨的。就算有点费时间。ai视觉还是不行。

有设计相关的skill,不满意让他改,反正做事的是ai我负责审核:smiley:

如果偷懒的话,可以直接ui-ux-pro-max,一整套设计风格;
但是组件的话,真的很难。最近上线了一个claude 设计,你可以试试看。

用了Figma或者Sticth,然后mcp或者直接下源码给ai,在用前端skill补充一下就差不多还原了