用 AI 重设计作品集网站:为什么生成的页面都像档案柜

原文:https://dev.to/anchildress1/i-asked-for-a-portfolio-but-got-a-filing-cabinet-4ef8(作者 @anchildress1)

嗯……然后呢?

我的原版作品集网站看起来像 AI 生成的,这不是什么秘密:它确实就是 AI 生成的。所以当我收到的反馈正是这一点时,我的反应基本是"嗯……然后呢?"

同样不是秘密的是,我不是搞 UX 的。我甚至不知道大多数这些元素叫什么名字,更不知道该怎么用它们。我对"动画页面"的理解就是字面意义上的"让它动起来"。

好消息是,我不需要知道这些也能做出一个不算太差的页面。没错——"不算太差"就是我的目标线,因为再往上就意味着我要假装自己知道在做什么。


"吓人"是新的下限

我拉了一下数据——这事儿我很少做——然后看到了一条我没想找的匿名反馈。

*吓人。*

我知道它不算好。但"吓人"对我来说是新的下限,即便在设计领域也是如此。

于是我让 Gemini 爬取我的网站,列出所有暴露 AI 痕迹的地方。答案基本上是"整个网站都很糟糕"——从配色到卡片式布局的实现,无一幸免。整个网站上唯一有人味的东西是关于我的个人简介(这倒合理,毕竟那部分大部分是我自己写的)。

📌 Screenshot the original version of my portfolio site(图,点击查看)

好吧。 那现在就是重写整个实现的最佳时机。


每一个方案都是数据库

我试过用 Impeccable 作为风格指南,配合 Claude Design——两者都没能消除 AI 生成的观感。Claude 和我最终搞出了十多个独立的设计方案,我每一个都比第一个更讨厌。

📌 Screenshots of rejected portfolio redesigns(图,点击查看)

后来我才意识到,这些我讨厌的设计方案,每一个都在描述一个档案库。每一个都是浏览界面——筛选器、计数器、下拉菜单、搜索——没有一个把我作为背后的人呈现出来。

问题在于我一直在重复同样的事情。我厌倦了紫色(之前用了一阵的默认选择),于是试了彩虹色——结果糟糕了一百万倍。蓝色、绿色、粉色、红色、橙色,最后是黄色,这是我最喜欢的,但什么都没能改善整体的观感。


要艺术感,不要仪表盘

然后,在彻底的挫败中,我告诉 Claude 我想要一个"艺术感的页面",而不是仪表盘。

那种感觉终于对上了。我终于有了我不完全讨厌的选项。

黄色在暗色模式下看起来不错。亮色模式则毫无亮点,看起来像某个不知道自己在做什么的人做出的褪色尝试——这倒不意外,因为这确实就是事实。于是我又回去追问 AI 有什么办法能让它行得通。

这些规则是我做了大量研究、每次做决定时都跟自己争论一番后得出的:

  1. 任何地方都不用眉题文字——没错,我学了个新词,就是放在一个区块顶部的那行小字。
  2. 只用一种色相作为强调色,需要时用透明度调整。
  3. 两种对立的字体:一种有个性,一种保持可读性。
  4. 需要偏移和不匹配的文本元素
  5. 展示判断力。 不要把每个设计决策都推给 AI——现在就选一个,以后再改主意。
  6. 记住目标是描述人,而不是描述作品。

"不算太差"真的是一个标准

高亮效果是在一个灵光一闪的瞬间把几个选项揉在一起做出来的。

{% embed https://system-notes-288489184837.us-east1.run.app %}

你也可以在 https://anchildress1.dev 查看完整页面。

当我让 Gemini 审查我之前的网站时,我把整份报告总结为"这整个东西都很糟糕"。我让它重新审查更新后的版本,得到的回复是"不算完全糟糕"。我把这记为一次胜利。

📌 Screenshot of Gemini's final review of my portfolio versus the original(图,点击查看)

我花了十多个设计方案才搞明白为什么关于我的个人简介是唯一通过审查的部分。其他所有内容都只是一种非常有条理的查看我作品的方式。

描述人这件事,是我必须自己做的部分。


更正说明

在我接受关于自己网站的"采访"时,Claude 编造了一个我从没做过的产品和一个从没发生过的重新设计。我修正了那些内容,但让它写了这个页脚。

原文:https://dev.to/anchildress1/i-asked-for-a-portfolio-but-got-a-filing-cabinet-4ef8(作者 @anchildress1)

发布评论
全部评论(0)