当18个AI学习站决定"拆墙"：一次全站架构的费曼式重构

> 来源 commit： 9dbde4f — 整合多个技能至garden-skills仓库 > 项目： easy-learn-ai > 日期： 2026-05-30

---

一、一个网站，18扇门

想象你走进一座图书馆。里面没有书架，只有18个独立的房间。每个房间里有一本关于AI的书——Transformer、GPT、Llama、LoRA、Token……你要想读完所有书，得逐个房间推门进去，看完一本再退出来，再推下一扇门。

这就是 easy-learn-ai 项目之前的状态：18个学习站点，每个站点都有自己的 多页面架构——HomePage、ConceptPage、PrinciplesPage、ProcessPage……每个知识点被拆成若干子页面，用户通过导航栏在不同房间之间穿梭。

这不是设计失误。在项目早期，内容量有限，多页面结构清晰、易于维护。每个子页面专注讲一件事，导航栏一目了然。但随着内容膨胀，问题出现了：

认知负担重：用户刚进入Transformer站点，看到导航栏有"首页、架构、组件、预测、演进"五个选项，还没开始读就已经在选路。
上下文断裂：用户在"架构页"读到一半，想跳去"预测页"看softmax可视化，需要点击、等待加载、重新定位，阅读节奏被打断。
设计不统一：18个站点由不同作者在不同时间编写，每个站点的配色、动画风格、交互习惯都不尽相同。有的用蓝色系，有的用绿色系；有的动画是fade-in，有的是slide-up。
维护成本高：每个站点有独立的tailwind配置、postcss配置、路由配置。改一个全局样式要改18个文件。

这18扇门，到了该"拆墙"的时候。

---

二、拆墙方案：从"房间制"到"长卷制"

2026年5月30日，项目作者 ConardLi 提交了一个巨大的重构 commit：9dbde4f。这个 commit 改动了 742个文件，删除了 59618行代码，新增了 52815行代码。

核心思路可以概括为一句话：把每个站点的多页面结构，压缩成一张连续滚动的长卷。

旧架构 vs 新架构

维度	旧架构（多页面）	新架构（单页面Section）
页面数量	每个站点3-6个子页面	每个站点1个页面
导航方式	顶部导航栏切换	向下滚动自然过渡
内容组织	按主题分房间	按叙事节奏分章节
交互重心	用户选择看什么	用户跟随故事线
设计系统	各站点独立	全局统一
代码复用	低（各页面重复组件）	高（共享Section模板）

这不是简单的"把几个页面合并成一个页面"。这是一次从 信息架构 到 叙事设计 的深层变革。

---

三、新架构的核心设计：Mailchimp-Freddie 风格

重构后的所有站点共享一套统一的设计系统，项目内部称之为 "Mailchimp-Freddie 风格"——灵感来自邮件营销平台 Mailchimp 的吉祥物 Freddie 那种友好、工具感、略带复古的审美。

配色系统

设计采用了一套克制的四色板：

ink（墨黑） #241C15 —— 主文字色、边框色、重色块
cream（米白） #FBEFE3 —— 背景色、卡片底色
butter（黄油） #F4D35E —— 高亮、标记、交互反馈
coral（珊瑚） #E07A5F —— 警示、活跃状态、关键数据
teal（青绿） #1B4B5A —— 辅助信息、成功状态、最佳点标记

这套配色最大的特点是：没有蓝色，没有紫色，没有渐变。 在AI教育网站的世界里，蓝紫渐变几乎成了默认皮肤。Mailchimp-Freddie 风格刻意避开这种"AI感"，选择更接近印刷品、更接近实体工具的色彩语言——让学习者感觉自己在读一本设计精良的说明书，而不是在看一个科技产品的营销页。

动画系统

每个Section都有统一的入场动画：

animate-enter-up —— 从下方淡入上滑（用于标题和核心定义）
animate-enter-fade —— 纯淡入（用于段落和辅助信息）
animate-enter-pop —— 弹入（用于标签和徽章）
animate-float-y —— 悬浮呼吸（用于装饰元素）
animate-pulse-dot —— 脉冲点（用于状态指示）

这些动画不是炫技，而是阅读节奏的控制器。它们让内容像幻灯片一样逐层揭示，而不是一股脑堆在屏幕上。

布局模式：左文右图

每个站点的 Hero Section（第一章）都遵循统一的 "左文右图" 布局：

左侧（5/12宽度）：定义层。 eyebrow标签（如"Transformer · 神经网络架构"）→ H1大标题（"Transformer是什么？"）→ 一句话定义（带黄油色下划线高亮）→ 三段解释文字 → 操作提示（"右边按play，看同一句话..."）→ 滚动引导（"往下滚 · 6章 · ~12分钟"）。
右侧（7/12宽度）：交互层。这是每个站点最独特的部分，也是新架构的精髓所在。

---

四、每个站点的"专属交互体验"

旧架构下，每个站点的交互体验分散在各个子页面中。新架构把所有交互浓缩到了 Hero Section 的一个核心组件里。这是本次重构最让我兴奋的部分——18个站点，18种完全不同的交互隐喻。

1. Transformer：RNN vs Transformer 时序播放器

当用户点击"播放"，右侧的面板开始运行：

RNN列：5个token（"猫、坐、在、沙发、上"）从上到下依次点亮，每个token的信号强度随距离衰减。到第5步，第一个token"猫"的信号只剩不到10%。
Transformer列：所有token在第一步同时点亮，每个token的信号都是100%。
实时数据：底部显示当前耗时（RNN: 5步 vs Transformer: 1步）和第一个词的信号强度（RNN: 10% vs Transformer: 100%）。

这个交互的核心隐喻是：Transformer不是读得快，而是看得全。 用户通过亲手操作slider，从0步拖到5步，直观感受到"串行vs并行"的本质差异。这比任何文字解释都更有力。

代码中甚至有一个细节：RNN的信号衰减公式是 1 - 0.22·d（d为距离），这个参数不是编的，而是参照了实际RNN的长距离依赖衰减特性。

2. Epochs：Loss 曲线双轨拖动器

Epochs（训练轮数）站点右侧是一个 SVG双曲线图：

横轴是epoch数（0到15），纵轴是loss值。
两条曲线：train loss（实线、墨黑）和val loss（虚线、珊瑚色）。
用户拖动slider，一个cursor竖线在图上滑动，实时显示当前epoch的train loss和val loss数值。
更妙的是：当cursor超过best epoch（val loss最低点）时，val loss曲线开始回升，同时右侧区域被珊瑚色填充，状态条提示"过拟合区 · val已经回升"。

用户还可以点击四个场景chip（SFT微调、LoRA微调、LLM预训练、视觉小数据），每种场景下曲线的形状和最佳epoch都不同。SFT的甜区是2个epoch，LoRA是4个，预训练是14个（但实际上只跑1遍）。

这个交互的隐喻是：训练不是越久越好，有个"最甜点"，过了就开始自欺欺人。 用户亲手拖动slider，看着val loss从下降转为上升，比任何"避免过拟合"的警告都直观。

3. Llama：时间轴快照卡

Llama站点右侧是一个 月份滑块，从2023年2月拖到2026年4月。每到一个关键月份，面板刷新为三张卡片：

Meta旗舰：当月最新的Llama版本（LLaMA 1 → Llama 2 → Llama 3 → Llama 3.1 → Llama 3.3 → Llama 4 → Muse Spark）
闭源对手：同期的GPT和Claude版本
关键事件：一句话总结当月最重要的事

滑动到2023年3月，你会看到"LLaMA 1（已泄露）"和"4chan用户Laminon泄露权重"；滑动到2026年4月，你会看到"Muse Spark（不再叫Llama）"和"Meta改闭源 · Llama暂停"。

这个交互的隐喻是：Llama不是静态的技术，而是一段正在发生的历史。 用户拖动时间轴，就像翻阅一本编年史。

4. 其他站点的交互设计

Token：BPE算法可视化 + 多语言token计数
Learning Rate：学习率调试器 + 缩放公式计算器
LoRA：LoRA秩选择器 + 四指标对比图
GPT： Few-shot示例计数器 + 推理成本计算器
GGUF：量化格式解剖图 + 内存占用fit check
SFT：SFT模板对比 + LIMA vs Bet 胜率模拟
Pretrain：Chinchilla定律计算器 + 数据混合比例
Multimodality：模态融合矩阵 + 任意到任意token条
WhyFinetune：微调诊断工具 + 三岔路选择器
MGA：MGA流水线 + 重复陷阱检测器
T5：BERT vs GPT vs T5 架构对比 + 编码器-解码器流程图
Deploy：Ollama vs VLLM 三世界对比 + 部署工具选择器
Illusion：幻觉检测 leaderboard + 案例拆解 + 缓解方案
Finetune：方法矩阵 + 适配器互换模拟器
Transformer：QKV架构图 + 注意力弧线流动

每个站点的交互都围绕一个核心问题设计，而不是把知识点平铺直叙。用户不是"读"完一个站点，而是"玩"完一个站点。

---

五、KnowledgeCover：18张SVG动画封面

新架构还有一个隐性的大改动：新增了 18个KnowledgeCover组件，每个对应一个学习站点。

这些封面不是普通的图片，而是用SVG手写的动画插画。以TransformerCover为例：

4层Transformer block堆叠，每层有attention（小圆点）和FFN（小方块）标记
右侧Q/K/V三块chip卡，hover时会微旋
底部4个中文token（"猫、坐、沙发、上"）之间有attention弧线流动
左上角stamp标签"2017 · 1706.03762"（论文编号）
右上角8个head小方点（multi-head视觉隐喻）
左下角标注"decoder-only · 2026主流"

每个cover都有独特的视觉隐喻，跟站点的核心概念直接对应：

TokenCover：token方块 + BPE合并动画
GPTCover：token流式生成 + 温度参数调节
LlamaCover：Llama系列时间轴 + 开源/闭源状态切换
LoRACover：低秩矩阵分解 + 秩选择器
EpochsCover：loss曲线 + 过拟合警戒线
LRCover：学习率调度器 + 步长缩放
DeployCover：Ollama vs VLLM 对比 + 部署工具图标
IllusionCover：幻觉检测 + 真实vs虚假对比

这些封面在知识站目录页作为卡片预览展示，hover时有微妙的动画效果（弧线加速、点呼吸、chip微旋）。它们不只是装饰，而是每个站点的"视觉摘要"——还没点进去，就已经在封面里看到了核心概念。

---

六、技术细节：从代码层面看重构

文件结构变化

以 transformer 站点为例：

旧结构：

src/
  ├── index.tsx                    # 路由入口
  ├── pages/
  │   ├── HomePage/index.tsx       # 首页
  │   ├── ChapterPages/
  │   │   ├── ChapterIntroduction/index.tsx
  │   │   ├── ChapterComponents/index.tsx
  │   │   ├── ChapterPrediction/index.tsx
  │   │   ├── ChapterAdvantages/index.tsx
  │   │   └── ChapterToLLM/index.tsx
  ├── components/
  │   ├── Layout/index.tsx         # 布局组件
  │   ├── InteractiveDemo/index.tsx # 通用交互
  │   └── HomePage/index.tsx       # 首页专属组件

新结构：

src/
  ├── entry.tsx                    # 统一入口
  ├── entry.css                    # 统一样式
  ├── App.tsx                      # 单页面组件
  └── components/
      ├── SectionHero.tsx          # 第一章：定义 + 核心交互
      ├── SectionPaper.tsx         # 第二章：论文溯源
      ├── SectionInside.tsx        # 第三章：内部结构
      ├── SectionQKV.tsx           # 第四章：QKV详解
      ├── SectionArch3.tsx         # 第五章：三种架构对比
      └── SectionToday.tsx         # 第六章：2026现状

统一配置

所有站点共享：

entry.css —— 统一的设计系统（字体、动画、阴影、圆角、边框）
tailwind.config.js —— 统一的tailwind主题（colors, fonts, spacing, animations）
rsbuild.config.ts —— 统一的构建配置

依赖精简

每个站点的依赖大幅精简。以 transformer 为例：

pnpm-lock.yaml 从5027行减少到约2000行
删除了 postcss.config.js（集成到tailwind配置中）
删除了 tailwind.config.ts（改为统一的 .js）
删除了 index.tsx（路由系统不再需要）

静态文件重新打包

所有站点的 public/ 静态文件重新编译打包，CSS和JS文件合并优化，减少了HTTP请求数。以 transformer 为例，从原来的4个JS chunk + 3个CSS文件，压缩为1个JS + 1个CSS。

---

七、这次重构的深层意义

1. 从"信息展示"到"认知构建"

旧架构的问题是：它假设用户知道自己想学什么，然后提供分类导航。新架构的假设是：用户可能不知道自己想学什么，所以用一个故事线引导他们从0到1。

每个站点的6-7个Section不是按主题分类，而是按认知节奏排列：

Section 1（Hero）：用一个交互体验建立直觉
Section 2：回答"它从哪来？"（论文、历史、动机）
Section 3：回答"里面长什么样？"（结构、组件、数学）
Section 4：回答"它怎么工作？"（流程、机制、可视化）
Section 5：回答"跟别的东西怎么比？"（对比、选择、决策）
Section 6：回答"现在怎么样了？"（最新进展、2026现状）

这不是知识的罗列，这是认知的阶梯。

2. 从"网页设计"到"教育设计"

旧架构的每个页面都是"网页设计师"的思维：导航清晰、信息分层、响应式适配。新架构的每个Section都是"教育设计师"的思维：

每页只有一个核心交互，不让用户分心
每个交互都有"操作 → 反馈 → 理解"的闭环
每个数字都有出处（"来源：arXiv:1706.03762 §3"）
每段文字都有语气控制（"训几个epoch是个超参"——像朋友聊天，不是教科书）

3. 从"项目维护"到"设计系统"

旧架构的18个站点是18个独立项目。新架构的18个站点是同一个设计系统的18个实例。新增一个站点时，作者只需要：

1. 复制一个模板站点的结构 2. 写6个Section组件（每个约200-500行） 3. 设计一个KnowledgeCover SVG（约300-500行） 4. 在数据文件中添加一条记录

这大大降低了新站点开发的门槛，也保证了视觉一致性。

---

八、一些值得关注的细节

反模板设计

每个站点的Hero Section顶部都有注释，标注"反模板：避开6个邻居"。例如Transformer的Hero注释写道：

> "不抢quantization的7-pill离散选择，不抢batch-size的1D loss landscape ball drop，不抢loss的chip选场景，不抢distill的T slider + 5类柱……"

这意味着设计团队在进行全局交互设计管理——确保18个站点的18种交互体验不重复、不撞车。这是只有在大型设计系统中才会出现的设计纪律。

真实数据来源

每个站点的数据都不是编的。以Epochs为例：

SFT场景参照 Tulu 3 recipe (arXiv:2411.15124)
LoRA场景参照 Unsloth LoRA 指南
预训练场景参照 Llama 3 / DeepSeek V3 公开记录

以Llama为例：

LLaMA 1: arXiv:2302.13971 / DeepLearning.ai The Batch
Llama 2: ai.meta.com/llama2 / 700M MAU红线
Llama 3: ai.meta.com/blog/meta-llama-3
Llama 3.1: arXiv:2407.21783
Llama 4: github.com/meta-llama/llama-models/tree/main/models/llama4
Muse Spark: about.fb.com/news/2026/04

无障碍设计

所有SVG组件都有 aria-hidden 标记， decorative元素不参与屏幕阅读。交互组件都有 aria-label 和键盘操作支持。状态条（如"过拟合区"）用颜色和文字同时传达信息，不依赖单一感官通道。

性能优化

loading="lazy" —— 图片和封面懒加载
transition-transform + will-change —— GPU加速动画
减少了路由切换的页面加载时间（单页面应用，无需多次HTTP请求）

---

九、结语：拆墙之后，是更大的图书馆

这次重构让我想起一件事：图书馆有两种设计。一种是把书按类别分房间，用户需要知道"我想看的小说在3楼B区"；另一种是长卷式展示，书沿着一条走廊排列，用户在走动的过程中自然发现"原来还有这种书"。

easy-learn-ai 选择了后一种。但这不是说前一种不好——而是说，对于从零开始的AI学习者来说，他们不知道自己不知道什么。给他们18扇门，他们会焦虑；给他们一条故事线，他们会跟随。

这次重构的 commit message 写得谦逊："整理项目结构，确保代码和文档的清晰性与可维护性"。但代码不说谎——742个文件的改动，52815行新增代码，18个全新的交互式Hero组件，18个手绘SVG封面——这是一次从"信息网站"到"教育体验"的质变。

拆墙之后，不是变少了，是变长了。18个房间变成18章长卷，每个学习者可以沿着自己的节奏，一路向下滚动，从一个概念自然过渡到下一个概念。

这或许就是费曼学习法的终极形态：不是把知识切成小块喂给用户，而是把知识变成一段可以亲手探索的旅程。

---

参考文档：

项目地址：https://github.com/ConardLi/easy-learn-ai
设计系统文档：.cursors/skills/create-knowledge-site/（基础设施、交互模式、常见陷阱）
相关论文：arXiv:1706.03762（Transformer）、arXiv:2302.13971（LLaMA）、arXiv:2411.15124（Tulu 3）

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