Felix
← 学习路线

进阶 · 第 3 篇 · 让 AI 把事做对 · 第 6 课

AI 默认给你的，是语料里最常见的样子

为什么 AI 做出来的网站总是似曾相识？它的默认值从哪来，你又该在哪里把它拦下来？

课型：概念·约 20 分钟·6 个术语

先看出事的那一刻

7 月底，站长把自动驾驶知识站交给另一个 AI 继续改。要求很直接：现有的模板布局不太好，"尽量直接抄作业，学习别人比较好的组件和模版"。参考是几份流行网站的设计规范，其中一份来自一家文档产品的官网。

8 月 2 日上午，一个小时，重构完成。学习站的首屏换成了一张天空背景大图，大图下面是一个用代码画出来的浏览器窗口，地址栏里写着 e2e.academy：一个这个网站从来没用过的域名。页脚有四列、十二个看起来像链接的条目，没有一个点得动；目录页的角落亮着一盏绿灯，旁边写着"内容持续维护"。站长看完说："我觉得当前还是有过度设计的问题，导致整体高级感不够。"

这节课要回答的是：为什么 AI 做出来的网站总是似曾相识？它的默认值从哪来，你又该在哪里把它拦下来？

装备几个词

大模型Large Language Model“AI 为什么每次给我的方案都长得差不多？”一个读过海量文字的续写程序：给它一段开头，它按概率一个词一个词地往下写。提示词Prompt“我到底该怎么跟 AI 说，它才能做对？”你交给模型的全部文字：要求、背景、参考、限制。模型只能根据它看到的这些来写。幻觉Hallucination“AI 说得有鼻子有眼，结果那个函数根本不存在？”模型把不存在或不成立的东西，说得像真的一样：流畅、具体、语气笃定。上下文窗口Context Window“聊了很久之后，AI 好像把前面说好的事忘了？”模型一次能"看见"的文字上限。超出的部分，要么被截掉，要么被压缩成摘要。

为什么要懂

AI 替你做了

一句“参考这个网站的风格”，AI 就能一口气写出整套页面：首屏、卡片、页脚、按钮，样样齐全，看起来像一个成熟的产品。

留给你的

告诉它这个网站是什么、给谁用、不要什么。这些它猜不到，只能拿它见过最多的样子来补。

不懂的代价

学习站被做成了卖工具的官网；更麻烦的是，假按钮、假状态、假数据混在真内容里，事后得一项项找出来删掉。

续写机的默认值

大模型的工作方式，是根据前面所有的文字，写出最可能的下一段。它读过的网页里，"产品网站"最常见的长相，就是它最容易写出来的长相：渐变背景的首屏、一句大标题、两个按钮、一张产品截图、三列功能卡片、深色的行动号召横幅、五列页脚。

这不是缺点，是它的工作方式：你没说的地方，它就用最常见的答案填上。对照这次重构，每一样东西都有来处：

你说了什么AI 补上了什么它的依据
"参考这份设计规范"规范里的营销组件：首屏样机、代码块复制按钮、五列页脚规范里写了，就当作要用
（没说网站是给谁看的）"内容持续维护"的状态灯、"这篇内容有帮助吗"的反馈按钮这类网站最常见的配置，规范里并没有
（没说不要什么）英文大写标签、渐变、发光、毛玻璃这类设计最常见的装饰

那份规范是一家卖文档工具的公司为自己的官网写的：首屏样机和营销横幅，是为了让访客掏钱。学习站的读者要的是目录和正文。AI 并不知道这两者的区别，它只知道"这类网站通常这样"。

它不知道的三件事

几乎每一次"AI 味"，都出在下面三个空白里：

  1. 网站是给谁用的。读者、客户、同事，要的东西完全不同。你不说，它就按见过最多的那一种来。
  2. 哪些东西是真的。手里没有真实数据时，它会用看起来合理的东西把空白填满：一盏绿灯、一个点不动的"复制"、一段打扮成代码的文字。
  3. 你不要什么。没有禁用清单，它会不断加上"这类网站通常有"的东西。这次清理之后，禁用清单被写进了设计文档，就是为了挡住下一个 AI。
深潜为什么它会说“检查通过”＋

那次重构的状态文件里写着"Mintlify 视觉检查：通过"，还写着"带图解的术语 31 / 31"。可同一时刻，示意图全变成了黑块，31 张术语图解都没有样式（第 15 课）。

这不是 AI 故意说谎。"做完了就写通过"，是它见过最多的收尾方式；它并没有真的逐页打开看。所以 AI 的自我报告只能当线索，不能当证据：让它说清楚检查了哪些页面、用什么方法，然后你自己打开看。

找茬

下面是那次重构后首页首屏和章节页的真实代码（节选）。这个网站是给智能驾驶从业者读的学习站，没有要卖的产品。找出那些从别人的官网搬来、或者假装有功能的地方。

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

查看代码与答案（6 处问题）
 1  // MintlifyExperience.jsx（重构后的首页首屏，节选）
 2  <img className="mint-home-hero-media" src="/assets/mintlify-sky-hero.jpg" alt="浅蓝天空过渡到暖白云层的背景" />
 3  <div className="mint-product-mockup" aria-label="知识库结构预览">
 4    <div className="mint-mockup-bar"><span /><span /><span /><b>e2e.academy / knowledge-base</b></div>
 5    {portals.map((portal, index) => <i className={index === 0 ? "is-active" : ""} key={portal.id}>{portal.title}</i>)}
 6    <p>{editorial.mainline.thesis}</p>
 7    <header><span>system-pipeline</span><span>复制</span></header>
 8    <code><b>input</b> 真实世界与导航目标{"\n"}<b>model</b> 定位 → 感知 → 预测 → 决策{"\n"}<b>output</b> 可执行轨迹与车辆控制</code>
 9  </div>
10  
11  // 章节页的头部（节选）
12  <div><code>progress</code><span><progress value={index + 1} max={mainline.stages.length} /> …</span></div>
  • 第 2 行 · 低危 · 营销式首屏大图：一张 125KB 的天空渐变图，是官网为了营造氛围放的。学习站的首屏最该给读者的，是从哪里开始读。 该问的话：首屏的每个元素，分别帮读者做了什么？
  • 第 4 行 · 中危 · 画出来的浏览器，写着一个不存在的地址：三个灰点模仿窗口按钮，地址栏里的 e2e.academy 这个网站从来没用过。它在向读者展示一个并不存在的产品界面。 该问的话：页面上出现的域名、网址，哪些是这个网站真实在用的？
  • 第 5 行 · 中危 · 看起来像导航，其实点不动：侧栏条目用的是 <i> 标签，不是链接，点了没有任何反应。它只是在样机里摆个样子。 该问的话：这些看起来能点的条目，点了之后会发生什么？
  • 第 7 行 · 中危 · "复制"按钮什么也不复制：官网的代码块旁边都有复制按钮，于是这里也放了一个。但它只是一个 <span>，背后没有任何复制逻辑。 该问的话：这个复制按钮背后调用了什么？点一下试试。
  • 第 8 行 · 低危 · 把一句话打扮成代码："输入、模型、输出"本来是一句介绍，被排成了等宽字体的代码块，看起来像一段可以运行的配置。 该问的话：这里为什么用代码的样式？它真的是代码吗？
  • 第 12 行 · 中危 · 进度条显示的不是进度：这根进度条的数值是"这一章是第几章"，不是读者的阅读进度。读者会以为网站记住了他读到哪里。 该问的话：这根进度条的数值从哪来？它代表的是什么？

快测

1. 你让 AI “做一个个人博客”，没有给任何参考。最可能得到什么？

查看选项与答案
  • A. AI 自由发挥出的原创设计，很少和别的博客撞脸——AI 有创意，会给我一个独特的设计。可它没读过你的文章，也不知道你的读者是谁；没说的地方，它只会用见过最多的样子来填，所以才总是似曾相识。
  • B. 极简的一页，只有标题和文章列表，其余留给你补——提示越短，产物越简单。可你没说的地方，它不会留白，而是用最常见的答案填满：大图首屏、卡片列表、订阅框，样样齐全。
  • C. 它见过最多的那种博客模板：大图首屏、卡片列表、订阅框（正确）——你没说的地方，它就用最常见的样子填上。

想要不一样的结果，就要给出不一样的输入：给谁看、参考什么、不要什么。

2. AI 交付时说“视觉检查：通过”。你应该怎么做？

查看选项与答案
  • A. 问它检查了哪些页面、用什么方法，再自己打开看（正确）——AI 的自我报告是线索，不是证据。问清方法，是为了知道该重点看哪里；亲眼看过才算数。
  • B. 相信它：状态文件里白纸黑字写着“视觉检查：通过”——状态文件都写了通过，应该没问题。可那次重构的状态文件就写着“视觉检查：通过”，同一时刻示意图全变成了黑块。“做完了就写通过”是它见过最多的收尾方式，不代表它真的逐页打开看过。
  • C. 要求它逐页汇报检查结果，汇报得完整就放心——报告写得完整，就可以放心。可汇报得再详细，也还是它的自我报告。AI 的自我报告只能当线索，不能当证据，最后要你自己打开页面看。

“做完了”要能被验证：给出页面、方法和结果，你亲眼看过才算数。

3. 你打算让 AI 参考一家公司官网的设计规范，来改自己的学习网站。最该先补上的一句话是？

查看选项与答案
  • A. “风格要克制一点，别做得太花哨，整体上也别过度设计”——先让风格收一收。可“克制”只是一个形容词，没法检查：AI 可能只是把颜色调淡、字号调小，假按钮和假状态原样留着。
  • B. “说明网站给谁用，只借鉴字号和间距，不要营销组件”（正确）——说清楚用途、借鉴的范围和不要的东西，它才知道在哪里停手。
  • C. “完全照着这份规范来做，规范里有的每个组件都要用上”——抄得越像越安全。可那样它会把人家为了卖产品设计的营销组件，也一起搬过来：首屏样机、复制按钮、五列页脚。

给参考时，同时给出边界：借哪几样，不要哪几样。

判断时刻

重构后的学习站多出了首屏样机、状态灯、反馈按钮、英文标签和渐变横幅，站长觉得过度设计。你让 AI 处理，它给了三个方案。

你会选哪一个？

三个选项各自的代价
  • A. 整体回滚到重构之前——考察推倒重来的代价：恢复最快，但重构里也有有用的部分：文档式的导航骨架、搜索入口、显示真实数量的入口卡片。回滚会连它们一起丢掉，下一轮还得从头再来。
  • B. 逐项删掉营销装饰，保留骨架，把禁用清单写进设计文档——考察清理加防复发：要一项项判断，花时间。但有用的骨架留下了，禁用清单还能挡住下一个 AI。这次最后走的就是这条路：删掉了近 400 行，清单至今还在设计文档里。
  • C. 让 AI 把风格改得克制一点——考察形容词的效果：看起来最快，但“克制”只是一个形容词。AI 可能只是把颜色调淡、字号调小，假按钮和假状态原样留着。没有清单，就没法验收。

AI 加东西很快，删东西需要你给标准。把“不要什么”说清楚，写进它下次还会读的文档里，比每次事后清理省力。

带走

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

  1. 这个网站是给谁用的、主要用来做什么？动手之前，请先复述一遍你的理解。
  2. 你参考了哪些来源？哪些组件是参考里有的，哪些是你按"这类网站通常有"加上的？
  3. 页面上每个数字、状态、按钮和链接，分别来自哪份真实数据、哪个真实功能？
  4. 哪些元素只起装饰作用？列出来，由我决定去留。

自己验证

  • 把页面上所有看起来能点的东西都点一遍：链接、按钮、标签页、复制图标。
  • 对每个数字和状态问一句"它从哪来"，在代码里找到它的数据来源。
  • AI 声称"已检查"的地方，自己打开页面实际看一遍，别只看它的报告。

AI 不知道你的网站是给谁的。你没说的地方，它就用最常见的样子填上。