乐于分享
好东西不私藏

微信排版工具更新:让 AI 做出有设计感的页面

微信排版工具更新:让 AI 做出有设计感的页面

今天把所有功能整合到一个页面了。

填内容、选封面、一键发布,不用到处跳转。

功能是实现了,但界面看着像 10 年前的产品。


问题在哪

想优化,但自己不懂设计。

直接让 AI 改?我试过,效果像模板。

我原本以为跟 AI 说"帮我设计得好看一点"就行了。

结果出来的页面,还是那个味儿。

用 AI 做 UI 时,卡住的不是功能,是"设计感"。

页面能跑,但看起来像模板。按钮有了,但没人想点。首屏堆满信息,却没有记忆点。

问题是你给 AI 的参考太模糊了。


我的方法

看到网上有个方法:找有设计感的网站,截图给 AI 参考。

简单说就是给 AI 具体的视觉参考,不要抽象描述。

10 个设计灵感网站

做页面前,先去这些网站找 3-5 个参考。

  1. 1. 

    Awwwards - https://www.awwwards.com/  网页设计灵感

  2. 2. 

    Land-book - https://land-book.com/  SaaS 官网参考

  3. 3. 

    Mobile Patterns - https://www.mobilepatterns.com/  移动端 UI

  4. 4. 

    Brand New - https://www.underconsideration.com/brandnew/  品牌重塑

  5. 5. 

    Noun Project - https://thenounproject.com/  图标资源

  6. 6. 

    UI Design Daily - https://www.uidesigndaily.com/  组件系统

  7. 7. 

    Minimal Gallery - https://minimal.gallery/  极简设计

  8. 8. 

    NavNav - https://navnav.co/  导航栏设计

  9. 9. 

    Figma Community - https://www.figma.com/community/  设计模板

  10. 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 说"优化配色、布局、字体、间距、阴影……"

结果改得乱七八糟。

后来改成一次只改一个方向:

这次只改配色。下次只改布局。最后改细节。

效果好很多。


可以复用的流程

如果你也想试试:

  1. 11. 去设计网站找 3-5 个参考
  2. 12. 截图保存
  3. 13. 告诉 AI 要参考哪些设计元素
  4. 14. 让 AI 按参考改造页面

下次做新页面,用同样的方法。


小结

给 AI 具体的视觉参考,不要抽象描述。

关键不是 AI 能力有多强,是你给它的参考有多清晰。