今天把所有功能整合到一个页面了。
填内容、选封面、一键发布,不用到处跳转。

功能是实现了,但界面看着像 10 年前的产品。
问题在哪
想优化,但自己不懂设计。
直接让 AI 改?我试过,效果像模板。
我原本以为跟 AI 说"帮我设计得好看一点"就行了。
结果出来的页面,还是那个味儿。
用 AI 做 UI 时,卡住的不是功能,是"设计感"。
页面能跑,但看起来像模板。按钮有了,但没人想点。首屏堆满信息,却没有记忆点。
问题是你给 AI 的参考太模糊了。
我的方法
看到网上有个方法:找有设计感的网站,截图给 AI 参考。
简单说就是给 AI 具体的视觉参考,不要抽象描述。
10 个设计灵感网站
做页面前,先去这些网站找 3-5 个参考。
- 1.
Awwwards- https://www.awwwards.com/ 网页设计灵感 - 2.
Land-book- https://land-book.com/ SaaS 官网参考 - 3.
Mobile Patterns- https://www.mobilepatterns.com/ 移动端 UI - 4.
Brand New- https://www.underconsideration.com/brandnew/ 品牌重塑 - 5.
Noun Project- https://thenounproject.com/ 图标资源 - 6.
UI Design Daily- https://www.uidesigndaily.com/ 组件系统 - 7.
Minimal Gallery- https://minimal.gallery/ 极简设计 - 8.
NavNav- https://navnav.co/ 导航栏设计 - 9.
Figma Community- https://www.figma.com/community/ 设计模板 - 10.
SiteInspire- https://www.siteinspire.com/ 综合灵感
实际操作
我在 UI Design Daily 找到一个不错的页面:
https://www.uidesigndaily.com/posts/figma-enter-password-log-in-authentication-card-day-1583

截图,然后给 AI 这样的提示:
参考这个截图的 UI 风格,优化我现有的页面。
要参考的:卡片式设计、圆角和阴影、配色方案、输入框和按钮样式。
效果对比
改完之后好多了:

踩过的坑
不要让 AI 同时优化 10 个东西。
我一开始跟 AI 说"优化配色、布局、字体、间距、阴影……"
结果改得乱七八糟。
后来改成一次只改一个方向:
这次只改配色。下次只改布局。最后改细节。
效果好很多。
可以复用的流程
如果你也想试试:
- 11. 去设计网站找 3-5 个参考
- 12. 截图保存
- 13. 告诉 AI 要参考哪些设计元素
- 14. 让 AI 按参考改造页面
下次做新页面,用同样的方法。
小结
给 AI 具体的视觉参考,不要抽象描述。
关键不是 AI 能力有多强,是你给它的参考有多清晰。
夜雨聆风