设计不是皮肤，而是骨架：25 种设计语言如何重塑知识站

设计不是皮肤，而是骨架。让我先把这句话写在这里，因为它理解起来需要时间。

先讲一个你能感知到的变化

假设你打开一个网站学「BERT 是什么」。你预期看到什么？

大概率是这样：一个蓝色渐变背景，顶部导航栏写着「概述」「架构」「训练过程」，你点一个按钮，页面像 PPT 一样切换到下一张。每个按钮的圆角、阴影、hover 时的淡入淡出，和另一个讲「Batch Size」的网站完全一样，只是标题和内容换成了不同的。

这是大多数「学习平台」的默认形态。模板 + 内容填充。就像所有教科书用同一个开本，只是内文不同。

而 easy-learn-ai 最新的提交（59aa901），做了一件完全相反的事。

它做了两件事，但两件事的本质是一个：把设计从「装饰层」搬到「结构层」。

第一件：25 种设计语言的「标本柜」

想象一下，一个网页不是「一个网页」，而是会说话的人。不同的人有不同的口音、语速、用词习惯。Linear 的网页像一个穿黑色高领衫的硅谷工程师，说话简洁、边距精确，连按钮的边框都只有 1 像素。Bloomberg 终端的网页像一个在昏暗交易室里盯着屏幕的交易员，所有信息挤在一起，琥珀色的数字在深蓝背景上跳，没有「美观」这个概念，只有「密度」。Aesop 的网页像一个伦敦的药剂师，驼黄色的背景、衬线字体，连产品描述都像文学杂志的散文。

这个提交新建了一个叫 web-design-engineer 的项目。它做了 25 个这样的「人」，每一页都是一个完整的可交互 demo。不是截图，不是 figma 稿，是可以点、可以滚动、可以看到字体和颜色真实呈现的网页。

这 25 个 demo 被分进 7 个流派：

• 编辑 / 极简：Apple 的产品页、MUJI 的器物目录、Aesop 的药剂师风格、Dieter Rams 的工业设计档案、Monocle 杂志。它们的共同点是「留白」不是空白，而是有意义的沉默。就像你进一家好书店，书架之间有足够的距离，让你能停下来呼吸。
• 信息架构：Pentagram 的标识样本、Vignelli 的纽约地铁图、Bloomberg 终端、Tufte 的数据墨水、纽约时报的宽幅报纸。它们的共同点是「信息密度」不是混乱，而是秩序。像一张地图，你不需要美观，你需要在 0.3 秒内找到换乘站。
• 现代工具 / SaaS：Linear、Vercel、Raycast、Notion。它们的共同点是「工具感」——设计本身就在暗示你「这是用来干活的」。发丝边框、键盘快捷键、紫色点缀，不是为了好看，是为了让你觉得「这里效率很高」。
• 动态 / 实验：Field.io 的粒子系统、Active Theory 的 WebGL 野心、Resn 的叙事滚动。它们的共同点是「网页不是文档，是空间」。像走进一个装置艺术展，你不是在阅读，你是在经历。
• 粗野 / 反设计：Are.na 的诚实网页、Businessweek 的拼贴封面、Balenciaga 的冷面时装。它们的共同点是「不假装」。系统默认字体、蓝色下划线链接、没有动画。这种设计是在说：「我不讨好你，你爱看不看。」
• 温暖人文：Mailchimp 的黄色涂鸦、Stripe Press 的奶白纸书、Headspace 的橙色冥想。它们的共同点是「手触感」——不是机器做的，是有人类温度的东西。像收到一封朋友手写的信。
• 类型 / 流派：Y2K 复古未来、中世纪现代。它们是时间胶囊。Y2K 的铬合金倒角和 MSN 蓝，像打开一台 2001 年的电脑；中世纪现代的芥末黄和剪纸几何，像 1957 年的乐观主义海报。

每个 demo 的代码只有 150-300 行。这意味着你可以打开它、读它、改它。设计不再是设计师的特权，而是工程师可以直接执行的代码。

第二件：8 个 AI 知识站，从「模板」变成「杂志」

之前讲过的 8 个 AI 知识站（BERT、Batch Size、DeepSpeed、DeepSeek-R1、Loss、MCP、NLP、RLHF），在这同一个提交里被全部重构了。

重构了什么？结构。

原来的结构是这样的：每个站有一个导航栏，你在导航栏上点「概述」「架构」「训练」，页面像 PPT 一样切换。每个站的切换动画、配色、按钮样式，来自同一个 UI 框架（NextUI + framer-motion）。

新的结构是这样的：每个站变成一个长页面，由多个 Section 组成。Section 的命名不再是「概述」「架构」这种功能性的标签，而是「BERT 是什么」「双向的眼睛」「训练就是猜谜」「任务头的变形」——每个 Section 的名字是在问一个问题，或者给出一个比喻。

更重要的是，每个站的设计风格统一了，但站与站之间不再一样。 BERT 站是「奶白纸 + 浓墨」，像一本打开的手册。DeepSeek-R1 站是「深色 + 紫色点缀」，像一个深夜的实验室。Loss 站是「曲线医生的诊所」，页面里真的有一条可以互动的损失曲线。RLHF 站是「你对齐了吗？」的拷问感，页面像一份心理测试。

每个站都有自己的排版、自己的配色、自己的交互方式。BERT 的 hero 是一个「盖住单词猜答案」的游戏，你一打开就能玩。Batch Size 的 hero 是「一锅饺子到底煮多少」的动画。Loss 的 hero 是「损失曲线怎么看病」的诊断器。

这些不是「换了个皮肤」。皮肤是贴在外面的，不影响骨架。但这些变化是骨架层面的：每个站的信息结构、叙事节奏、交互方式，都变成了那个站自己的「设计语言」。

为什么这很重要？

很多人理解「设计」是「让东西好看」。但这里的设计是「让信息被理解的方式」。

Tufte 的数据墨水原则说：图表里的每一滴墨水都应该携带信息。延伸到网页设计，每一个像素的布局、每一种字体的选择、每一种颜色的搭配，都应该帮助用户理解内容，而不是分散注意力。

当你学 BERT 的时候，你不需要一个「好看的学习平台」。你需要一个「让你理解 BERT 是什么」的界面。如果 BERT 的核心是「盖住词猜答案」，那最好的界面就是让你直接盖词猜答案。如果 Loss 的核心是「曲线怎么看病」，那最好的界面就是一条可以互动的曲线。

而 25 种设计语言的标本柜，意味着以后做新的知识站时，不需要从零发明设计。你可以说：「这个站的主题是『信息密度优先』，那用 Bloomberg 终端的 recipe。」「这个站的主题是『温暖引导』，那用 Headspace 的 recipe。」设计语言变成了像代码库一样的可复用资产。

回到开头那句话

设计不是皮肤，而是骨架。

这句话的意思是：当你改变一个网页的字体和颜色时，你是在化妆。但当你改变它的信息结构、叙事节奏、交互方式时，你是在改变它的骨架。骨架决定了这个网页「怎么说话」，而说话的方式决定了用户「怎么理解」。

easy-learn-ai 这个提交做了两个层面的工作：一层是建立了 25 种「说话方式」的标本库，另一层是让 8 个知识站各自找到了自己的说话方式。前者是「设计语言的分类学」，后者是「分类学的工程实践」。

如果你打开这些站，你会发现它们不是「学习平台」。它们更像是 8 本不同风格的杂志，每本都在讲 AI 的一个切面，但每本都有自己的编辑语气。有的像《纽约客》的散文，有的像 Bloomberg 终端的快讯，有的像 Aesop 产品页的诗意描述。

这就是设计作为知识架构的力量。不是更好看，而是更理解。

来源 commit: 59aa901abfa1611c7ba68187b9a8ac5992d8394b
easy-learn-ai 项目: https://github.com/ConardLi/easy-learn-ai

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