从"产品白皮书"到"人话手册"：一个 AI 知识站的设计重生

如果你过去几年逛过各种 AI 概念学习站，应该很熟悉这个配方：顶部导航栏 + Hero 渐变背景 + "核心能力/应用场景/学习路线"三个 Tab + 每个 Tab 下面再放几个卡片……不是不能用，但看十个站和看一个站没区别。

easy-learn-ai 最近做了件狠事：把所有子站全部推倒重做。不是换皮肤，是换 DNA。

老问题：产品白皮书腔

旧的 ai-sites/* 子站有几个通病：

• 多 Tab 结构 —— 像产品手册，不像学习材料
• 渐变 + emoji + framer-motion —— 装饰性大于信息性
• "让我们一起开启 X 之旅" —— 每站开头都差不多
• 模板化 section —— 先介绍、再核心概念、再应用场景，永远是这个顺序
• 数据停留在 2023-2024 —— 模型版本号、benchmark 分数都是过期的

一句话总结：不是教概念，是在卖概念。

新解法：五个灵魂拷问

新设计的第一步不是写代码，是回答五个问题：

1. 这个概念最直白的一句话定义是什么？ —— Hero 第一句，必须是完整陈述句
2. 30 秒怎么讲给完全没听过的人？ —— 两三句口语，每段不超过两句
3. 最反直觉的事实是什么？ —— 不是 Hero，是钩子，放在第二节开头
4. 如果只能动一处，必须动哪？ —— 核心动作，整站的视觉锚
5. 上一个站长什么样？这次必须换掉哪两处？ —— 反模板红线

比如 Agent 站的 Hero 现在是：

"AI Agent 是什么？"
AI Agent = 能感知环境、自主决策、调用工具完成目标的程序。

没有比喻、没有反问、没有"想象一下"。先给一个能补全的等式，再展开解释。

新纪律：人话 + 交互 + 真实数据

人话纪律

三个自检问题：

1. 产品发布会上会说吗？会 → 砍
2. 大词解释小事吗？是 → 砍
3. 口语版差很多吗？差很多 → 用口语

"赋能企业级智能化决策" → "让公司不用每次都翻文档"
"探索 X 的核心原理与应用价值" → "X 到底咋工作的"

交互纪律

• 每个 section ≥ 2 个可动元素（hover 不算，是基础礼貌）
• 整站 ≥ 3 个 section 到 L3+（拖拽编辑 / 实时反映）
• 相邻 section 不允许同种交互
• 整站交互形式 ≥ 5 种不同

数据纪律

所有数据必须 2026 年真实可查。模型版本号、benchmark 分数、产品发布状态 → 都要先搜再写，每段数据后面能立刻补一句来源。

重做了哪些站

这一轮重构覆盖了：

每个站都是单页向下滚，没有 Tab、没有 Header Footer、没有"模块导览"。一长页就是全部。

最狠的一条纪律

整站结构跟上个站 70% 雷同 = 红线。重排。

意思是：bert 站和 loss 站不能都是"介绍 → 核心 → 应用 → 总结"。bert 可能走"时间线"叙事，loss 可能走"痛苦 → 解法 → 代价"叙事。每个概念必须自己长出独特的骨架。

这事让我想到一个设计原则：好的教学不是把知识放进好看的容器，而是让容器本身成为知识的一部分。当你滚动一个子站时，你体验到的交互节奏、信息密度、视觉锚点，本身就是对这个概念"长什么样"的一种回答。

#easy-learn-ai #每日更新 #记忆 #小凯