先看出事的那一刻
2026 年 7 月 28 日,站长让 AI 先做"板式和配图"。AI 提出了一个它自己很满意的方案:一张贯穿八章的场景图,同一个路口,每章往上叠一层信息。它用代码画完了八张场景图和四张原理图,截图看了第 1、4、8 章,其余交给脚本检查。
当天站长就说:"这个图画的太丑了。"图却在线上又挂了两个月。9 月复审时,AI 自己数出了问题:场景图共用同一张底图,下半部分大片空白,标签只有 10 像素左右,好几章的文字互相压住。它建议保留其中四张,站长的回答是:"图都删除掉,包括第一章,我觉得画的很丑。"
这节课要回答的是:AI 做的页面为什么一眼就能认出来?哪些东西只是看起来像功能,其实什么也不做?
装备几个词
为什么要懂
AI 替你做了
AI 能在几分钟里把页面填满:配图、图表、状态灯、按钮、页脚,一样不缺,看起来像一个完成度很高的产品。
留给你的
分辨哪些是真的:哪些数字有来源、哪些按钮有功能、哪些图真的帮读者看懂了。AI 自己很少区分这些。
不懂的代价
假的东西混在真内容里,读者分不清;过几周连你自己也忘了哪些是占位。等发现时,只能一项一项找出来删掉。
AI 味是从哪来的
"AI 味"不是某种颜色或字体,而是几种反复出现的习惯。这个网站的两个项目里,每一种都能找到实物:
- 填满的冲动。没有真实数据的地方,也要放点什么。两张术语柱状图的数值 5、25、60、100 是编的;注释里的数量从"约 10 条"到"可能千万级",相差六个数量级,条形却按线性比例画,看上去只差二十倍。
- 冒充功能的装饰。十二个页脚"链接"是普通文字,一个
href都没有;写着"复制"的按钮背后没有复制逻辑;"这篇内容有帮助吗"的按钮点了什么也不发送。 - 没有依据的状态。一盏发光的绿灯写着"内容库持续维护",背后没有更新日期,也没有更新记录。
- 似是而非的精致。渐变、发光、毛玻璃、英文大写标签。单看都说得过去,合在一起就是一股说不清的模板感。
- 只画了三张就收工的配图。八张场景图只截图看了三张。脚本能查出图在不在、尺寸对不对,查不出"丑"和"挤"。
三个问题,一眼认出来
不用懂设计,对页面上每个元素问三个问题:
- 它从哪来?每个数字、每个状态,都应该能在代码里指到一份真实的数据。
- 点它会发生什么?每个看起来能交互的东西,都应该真的能用。
- 删掉它,读者会少什么?答不上来的,多半只是装饰。
三个问题都答不上来的,就是 AI 味。
深潜配图为什么这么难验收+
配图的问题,脚本几乎查不出来:图在不在、尺寸对不对、有没有报错,脚本都能查;字小不小、挤不挤、有没有帮读者看懂,只能靠人看。
所以配图的验收标准要在画之前写好:最小字号多少、文字不能互相遮挡、每张图只讲一件事,然后逐张在实际显示的尺寸下截图检查。这次只看了三张,其余五张的问题要到两个月后才被数出来。
更根本的问题是:这些图是 AI 自己提议的,站长只说了"做配图"。在画之前先问一句"读者真的需要这张图吗",能省掉后面所有的返工。
找茬
下面是一次重构后页脚和文末的真实代码,以及一张术语图解的数据(节选并略作简化)。这个网站没有“更新记录”页,也没有收集反馈的后端。找出假数据、假按钮和没有依据的状态。
这段 JSX / JSON 里埋了 6 处问题。点击你觉得有问题的行,至少找出 3 处再揭晓。
·第 3 行中危
指向不存在的页面
“内容方法”“更新记录”这些条目,网站上根本没有对应的页面。它们出现在这里,是因为这类网站的页脚通常有这几项。
该问的话:页脚里的每一项,分别链接到哪个真实存在的页面?
·第 4 行中危
没有依据的状态灯
一盏发光的绿灯加一句“内容库持续维护”,背后没有更新日期,也没有更新记录。它只是这类网站常见的装饰,却在向读者做一个承诺。
该问的话:这个状态是根据什么数据显示的?最后一次更新是什么时候?
·第 5 行中危
看起来像链接,其实点不动
十二个条目都渲染成了普通文字(
<span>),整个组件里一个href都没有。读者点了没反应,只会以为网站坏了。该问的话:页面上看起来能点的东西,哪些其实点不动?
·第 7 行中危
承诺了一件不存在的事
“你的反馈会帮助我们继续校准内容”:可反馈根本没有发到任何地方,也没有“我们”在看。
该问的话:点了“是”或“否”之后,这条反馈被发到了哪里,谁会看到?
·第 8 行中危
按钮只改了页面上的一个变量
点击只是在浏览器里记下一个“yes”,刷新就没了,服务器什么也没收到。第一版里,这两个按钮连点击处理都没有。
该问的话:这个按钮背后调用了哪个接口?
·第 11 行高危
数值是编的,尺度也画错了
四个值 5、25、60、100 没有任何出处;旁边的注释从“约 10 条”到“可能千万级”,相差六个数量级,条形却按线性比例画,看上去只差二十倍。一张图就这样把数量级讲错了。
该问的话:图里的每个数值来自哪份资料?坐标是线性的还是对数的?
查看代码与答案(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+ 学习者”。你该怎么处理?
你可能是这么想的:数字保守一点,就不算编的。可改小一点,它还是编的,问题不在数字大小,而在没有来源。
你可能是这么想的:别的网站首页都有这种数字,读者习惯了。可没有来源的数字,读者一旦发现是假的,整个网站的可信度都会一起打折;“这类网站通常有”,正是 AI 味的来源。
对了。每个数字都应该能指到一份真实的数据。找不到来源的,多半是 AI 顺手编的。
没有来源的数字,要么删掉,要么明确写成示例。
查看选项与答案
- A. 改成保守一点的“1,000+”,不容易被人质疑——数字保守一点,就不算编的。可改小一点,它还是编的,问题不在数字大小,而在没有来源。
- B. 留着,首页放这类数字很常见,读者早就习惯了——别的网站首页都有这种数字,读者习惯了。可没有来源的数字,读者一旦发现是假的,整个网站的可信度都会一起打折;“这类网站通常有”,正是 AI 味的来源。
- C. 问它这个数字的数据来源,没有来源就删掉(正确)——每个数字都应该能指到一份真实的数据。找不到来源的,多半是 AI 顺手编的。
没有来源的数字,要么删掉,要么明确写成示例。
2. 一个纯静态的博客,页面右上角有一盏写着“在线”的绿灯。它最可能是什么?
对了。它不对应任何真实状态,只是这类页面常见的样子。
你可能是这么想的:绿灯就是健康检查的结果。可纯静态网站没有需要“在线”的后端服务,也没有任何代码去检查它。
你可能是这么想的:绿灯是在线人数的指示。可统计在线人数要有后端和数据来源,纯静态网站两样都没有。
每一个状态指示,都要能说出它根据什么数据显示。
查看选项与答案
- A. 没有任何数据支撑的装饰效果(正确)——它不对应任何真实状态,只是这类页面常见的样子。
- B. 网站健康检查的实时结果——绿灯就是健康检查的结果。可纯静态网站没有需要“在线”的后端服务,也没有任何代码去检查它。
- C. 当前有多少访客在线的指示——绿灯是在线人数的指示。可统计在线人数要有后端和数据来源,纯静态网站两样都没有。
每一个状态指示,都要能说出它根据什么数据显示。
3. AI 给配图写了检查脚本,报告“12 张图全部通过”。你还需要做什么?
你可能是这么想的:缩略图上整体看着行,就够了。可缩略图上看不出字小不小、挤不挤;要放到实际显示的尺寸下逐张看。
对了。看得清、看得懂,只能靠人按标准逐张检查。最小字号、不重叠、留白,都要在画之前写好。
你可能是这么想的:抽查几张,没问题就说明整体没问题。可这次就是这么漏掉的:八张场景图只截图看了三张,其余五张的问题两个月后才被数出来。
脚本能证明“图在”,证明不了“图好”。
查看选项与答案
- A. 翻一遍图库的缩略图,整体观感没问题就行——缩略图上整体看着行,就够了。可缩略图上看不出字小不小、挤不挤;要放到实际显示的尺寸下逐张看。
- B. 先定下可读性标准,再逐张在实际尺寸下截图看(正确)——看得清、看得懂,只能靠人按标准逐张检查。最小字号、不重叠、留白,都要在画之前写好。
- C. 抽查三张有代表性的图,没问题就当其余也没问题——抽查几张,没问题就说明整体没问题。可这次就是这么漏掉的:八张场景图只截图看了三张,其余五张的问题两个月后才被数出来。
脚本能证明“图在”,证明不了“图好”。
判断时刻
AI 复审了 12 张配图:场景图共用一张底图、标签太小、文字互相压住。它建议保留其中 4 张,其余删掉。
你会怎么做?
考察:沉没成本
留下的 4 张问题确实少一些,但风格和毛病同源。你在 7 月就觉得它们丑,留下的每一张都要继续维护、继续被读者看到。
考察:宁缺毋滥
少了图,但文字本来就讲得清楚,删完整站观感反而统一了。这次最后选的就是这条:12 张图、2 张柱状图和渲染代码一起删掉,校验器还加了一条规则,防止配图标记再混进正文。
考察:再投入一轮
如果图真的必要,这是对的方向:先写下可读性标准,再逐张验收。代价是又一轮投入,而且要先回答一个问题:这些图,读者真的需要吗?
判断一张图、一个组件该不该留,先问它帮读者做了什么。答不上来的,删掉通常比修好更省事,也更干净。
三个选项各自的代价
- A. 听 AI 的,保留 4 张——考察沉没成本:留下的 4 张问题确实少一些,但风格和毛病同源。你在 7 月就觉得它们丑,留下的每一张都要继续维护、继续被读者看到。
- B. 全部删掉,正文靠文字讲清楚——考察宁缺毋滥:少了图,但文字本来就讲得清楚,删完整站观感反而统一了。这次最后选的就是这条:12 张图、2 张柱状图和渲染代码一起删掉,校验器还加了一条规则,防止配图标记再混进正文。
- C. 让 AI 按新标准重画一遍——考察再投入一轮:如果图真的必要,这是对的方向:先写下可读性标准,再逐张验收。代价是又一轮投入,而且要先回答一个问题:这些图,读者真的需要吗?
判断一张图、一个组件该不该留,先问它帮读者做了什么。答不上来的,删掉通常比修好更省事,也更干净。
带走
下次让 AI 做这件事时,问它
- 页面上的每个数字、图表和状态,数据来源是什么?没有来源的请列出来。
- 所有看起来能点的元素,点了之后会发生什么?哪些其实没有功能?
- 哪些元素只起装饰作用?删掉它们,读者会少什么?
- 配图和图表的可读性标准是什么(最小字号、是否重叠、留白)?逐张截图给我看。
自己验证
- 把页面上所有像链接、像按钮的东西都点一遍,记下没反应的。
- 对每个数字问一句"它从哪来",在代码里找到它的数据来源。
- 把配图放到实际显示的尺寸下逐张看,不要只看缩略图或脚本报告。
每个数字问来源,每个按钮点一下,每个装饰问一句:删掉会少什么?
