← 学习路线

识别 AI 味儿与过度设计

AI 做的页面为什么一眼就能认出来?哪些东西只是看起来像功能,其实什么也不做?

课型:鉴别·约 20 分钟·5 个术语

先看出事的那一刻

2026 年 7 月 28 日,站长让 AI 先做"板式和配图"。AI 提出了一个它自己很满意的方案:一张贯穿八章的场景图,同一个路口,每章往上叠一层信息。它用代码画完了八张场景图和四张原理图,截图看了第 1、4、8 章,其余交给脚本检查。

当天站长就说:"这个图画的太丑了。"图却在线上又挂了两个月。9 月复审时,AI 自己数出了问题:场景图共用同一张底图,下半部分大片空白,标签只有 10 像素左右,好几章的文字互相压住。它建议保留其中四张,站长的回答是:"图都删除掉,包括第一章,我觉得画的很丑。"

这节课要回答的是:AI 做的页面为什么一眼就能认出来?哪些东西只是看起来像功能,其实什么也不做?

装备几个词

为什么要懂

AI 替你做了

AI 能在几分钟里把页面填满:配图、图表、状态灯、按钮、页脚,一样不缺,看起来像一个完成度很高的产品。

留给你的

分辨哪些是真的:哪些数字有来源、哪些按钮有功能、哪些图真的帮读者看懂了。AI 自己很少区分这些。

不懂的代价

假的东西混在真内容里,读者分不清;过几周连你自己也忘了哪些是占位。等发现时,只能一项一项找出来删掉。

AI 味是从哪来的

"AI 味"不是某种颜色或字体,而是几种反复出现的习惯。这个网站的两个项目里,每一种都能找到实物:

  • 填满的冲动。没有真实数据的地方,也要放点什么。两张术语柱状图的数值 5、25、60、100 是编的;注释里的数量从"约 10 条"到"可能千万级",相差六个数量级,条形却按线性比例画,看上去只差二十倍。
  • 冒充功能的装饰。十二个页脚"链接"是普通文字,一个 href 都没有;写着"复制"的按钮背后没有复制逻辑;"这篇内容有帮助吗"的按钮点了什么也不发送。
  • 没有依据的状态。一盏发光的绿灯写着"内容库持续维护",背后没有更新日期,也没有更新记录。
  • 似是而非的精致。渐变、发光、毛玻璃、英文大写标签。单看都说得过去,合在一起就是一股说不清的模板感。
  • 只画了三张就收工的配图。八张场景图只截图看了三张。脚本能查出图在不在、尺寸对不对,查不出"丑"和"挤"。

三个问题,一眼认出来

不用懂设计,对页面上每个元素问三个问题:

  1. 它从哪来?每个数字、每个状态,都应该能在代码里指到一份真实的数据。
  2. 点它会发生什么?每个看起来能交互的东西,都应该真的能用。
  3. 删掉它,读者会少什么?答不上来的,多半只是装饰。

三个问题都答不上来的,就是 AI 味。

深潜配图为什么这么难验收+

配图的问题,脚本几乎查不出来:图在不在、尺寸对不对、有没有报错,脚本都能查;字小不小、挤不挤、有没有帮读者看懂,只能靠人看。

所以配图的验收标准要在画之前写好:最小字号多少、文字不能互相遮挡、每张图只讲一件事,然后逐张在实际显示的尺寸下截图检查。这次只看了三张,其余五张的问题要到两个月后才被数出来。

更根本的问题是:这些图是 AI 自己提议的,站长只说了"做配图"。在画之前先问一句"读者真的需要这张图吗",能省掉后面所有的返工。

找茬

下面是一次重构后页脚和文末的真实代码,以及一张术语图解的数据(节选并略作简化)。这个网站没有“更新记录”页,也没有收集反馈的后端。找出假数据、假按钮和没有依据的状态。

这段 JSX / JSON 里埋了 6 处问题。点击你觉得有问题的行,至少找出 3 处再揭晓。

查看代码与答案(6 处问题)
 1  // MintlifyExperience.jsx(重构后的页脚与文末,节选)
 2  { title: "学习", links: ["自动驾驶主线", "深度专题", "术语图鉴"] },
 3  { title: "项目", links: ["内容方法", "材料来源", "更新记录"] },
 4  <span className="mint-status"><i /> 内容库持续维护</span>
 5  {group.links.map((link) => <span key={link}>{link}</span>)}
 6  {viewed?.length ? <span>已读 {viewed.length} / {terms.length}</span> : null}
 7  <div><b>这篇内容有帮助吗?</b><span>你的反馈会帮助我们继续校准内容。</span></div>
 8  <button … onClick={() => setAnswer("yes")}>是</button>
 9  
10  // content/terms/production.json(术语图解的柱状图数据,四条合成一行)
11  [{ "value": 5, "note": "约 10 条数据就能发现明显问题" }, { "value": 25, "note": "百到千条 clip" }, { "value": 60, "note": "约 10w clip 见到较好效果" }, { "value": 100, "note": "可能千万级 clip" }]
  • 第 3 行 · 中危 · 指向不存在的页面:“内容方法”“更新记录”这些条目,网站上根本没有对应的页面。它们出现在这里,是因为这类网站的页脚通常有这几项。 该问的话:页脚里的每一项,分别链接到哪个真实存在的页面?
  • 第 4 行 · 中危 · 没有依据的状态灯:一盏发光的绿灯加一句“内容库持续维护”,背后没有更新日期,也没有更新记录。它只是这类网站常见的装饰,却在向读者做一个承诺。 该问的话:这个状态是根据什么数据显示的?最后一次更新是什么时候?
  • 第 5 行 · 中危 · 看起来像链接,其实点不动:十二个条目都渲染成了普通文字(<span>),整个组件里一个 href 都没有。读者点了没反应,只会以为网站坏了。 该问的话:页面上看起来能点的东西,哪些其实点不动?
  • 第 7 行 · 中危 · 承诺了一件不存在的事:“你的反馈会帮助我们继续校准内容”:可反馈根本没有发到任何地方,也没有“我们”在看。 该问的话:点了“是”或“否”之后,这条反馈被发到了哪里,谁会看到?
  • 第 8 行 · 中危 · 按钮只改了页面上的一个变量:点击只是在浏览器里记下一个“yes”,刷新就没了,服务器什么也没收到。第一版里,这两个按钮连点击处理都没有。 该问的话:这个按钮背后调用了哪个接口?
  • 第 11 行 · 高危 · 数值是编的,尺度也画错了:四个值 5、25、60、100 没有任何出处;旁边的注释从“约 10 条”到“可能千万级”,相差六个数量级,条形却按线性比例画,看上去只差二十倍。一张图就这样把数量级讲错了。 该问的话:图里的每个数值来自哪份资料?坐标是线性的还是对数的?

快测

1. AI 做的首页写着“已帮助 10,000+ 学习者”。你该怎么处理?

查看选项与答案
  • A. 改成保守一点的“1,000+”,不容易被人质疑——数字保守一点,就不算编的。可改小一点,它还是编的,问题不在数字大小,而在没有来源。
  • B. 留着,首页放这类数字很常见,读者早就习惯了——别的网站首页都有这种数字,读者习惯了。可没有来源的数字,读者一旦发现是假的,整个网站的可信度都会一起打折;“这类网站通常有”,正是 AI 味的来源。
  • C. 问它这个数字的数据来源,没有来源就删掉(正确)——每个数字都应该能指到一份真实的数据。找不到来源的,多半是 AI 顺手编的。

没有来源的数字,要么删掉,要么明确写成示例。

2. 一个纯静态的博客,页面右上角有一盏写着“在线”的绿灯。它最可能是什么?

查看选项与答案
  • A. 没有任何数据支撑的装饰效果(正确)——它不对应任何真实状态,只是这类页面常见的样子。
  • B. 网站健康检查的实时结果——绿灯就是健康检查的结果。可纯静态网站没有需要“在线”的后端服务,也没有任何代码去检查它。
  • C. 当前有多少访客在线的指示——绿灯是在线人数的指示。可统计在线人数要有后端和数据来源,纯静态网站两样都没有。

每一个状态指示,都要能说出它根据什么数据显示。

3. AI 给配图写了检查脚本,报告“12 张图全部通过”。你还需要做什么?

查看选项与答案
  • A. 翻一遍图库的缩略图,整体观感没问题就行——缩略图上整体看着行,就够了。可缩略图上看不出字小不小、挤不挤;要放到实际显示的尺寸下逐张看。
  • B. 先定下可读性标准,再逐张在实际尺寸下截图看(正确)——看得清、看得懂,只能靠人按标准逐张检查。最小字号、不重叠、留白,都要在画之前写好。
  • C. 抽查三张有代表性的图,没问题就当其余也没问题——抽查几张,没问题就说明整体没问题。可这次就是这么漏掉的:八张场景图只截图看了三张,其余五张的问题两个月后才被数出来。

脚本能证明“图在”,证明不了“图好”。

判断时刻

AI 复审了 12 张配图:场景图共用一张底图、标签太小、文字互相压住。它建议保留其中 4 张,其余删掉。

你会怎么做?

三个选项各自的代价
  • A. 听 AI 的,保留 4 张——考察沉没成本:留下的 4 张问题确实少一些,但风格和毛病同源。你在 7 月就觉得它们丑,留下的每一张都要继续维护、继续被读者看到。
  • B. 全部删掉,正文靠文字讲清楚——考察宁缺毋滥:少了图,但文字本来就讲得清楚,删完整站观感反而统一了。这次最后选的就是这条:12 张图、2 张柱状图和渲染代码一起删掉,校验器还加了一条规则,防止配图标记再混进正文。
  • C. 让 AI 按新标准重画一遍——考察再投入一轮:如果图真的必要,这是对的方向:先写下可读性标准,再逐张验收。代价是又一轮投入,而且要先回答一个问题:这些图,读者真的需要吗?

判断一张图、一个组件该不该留,先问它帮读者做了什么。答不上来的,删掉通常比修好更省事,也更干净。

带走

下次让 AI 做这件事时,问它

  1. 页面上的每个数字、图表和状态,数据来源是什么?没有来源的请列出来。
  2. 所有看起来能点的元素,点了之后会发生什么?哪些其实没有功能?
  3. 哪些元素只起装饰作用?删掉它们,读者会少什么?
  4. 配图和图表的可读性标准是什么(最小字号、是否重叠、留白)?逐张截图给我看。

自己验证

  • 把页面上所有像链接、像按钮的东西都点一遍,记下没反应的。
  • 对每个数字问一句"它从哪来",在代码里找到它的数据来源。
  • 把配图放到实际显示的尺寸下逐张看,不要只看缩略图或脚本报告。

每个数字问来源,每个按钮点一下,每个装饰问一句:删掉会少什么?