当设计史变成 React 组件：25 种风格配方与知识站点的重构

来源 Commit: 59aa901 — feat: 初始化Web设计工程师项目结构与文档

想象一下，你走进一家装修店。墙上有二十五种墙纸样品，每一种都来自不同的时代、不同的国度、不同的设计师之手。有的像苹果专卖店一样干净得近乎冷淡，有的像六十年代的纽约地铁海报一样粗粝大胆，还有的像一本日本杂志，留白多到你以为印刷厂忘了印字。

这不是装修店。这是一个代码仓库。有人在同一天，把二十五种「设计风格」装进了代码里。

什么是设计风格的代码化？

我们平常说「这个网站很有设计感」，通常是凭感觉。但这位作者（或这群作者）做了一件更疯的事：他们把设计史上最有辨识度的二十五个流派，一个一个翻译成了 React 组件。

不是模仿。是翻译。像把一首诗从法语译成中文，要保留的不只是意思，还有节奏、气息和那种读完之后胸口微微发紧的感觉。

这二十五个流派被归成七大门派：

• 编辑/极简派 — 苹果的人机界面指南、无印良品原研哉、Aesop 药房、Dieter Rams 的 Braun、Monocle 杂志。共同点是：敢留空白。他们觉得空白不是没做完，是一种态度。
• 信息架构派 — Pentagram 设计事务所、Vignelli 的瑞士网格、Bloomberg 终端、Tufte 的数据墨水、纽约时报 The Daily。这些人相信信息本身可以是美的，不需要装饰来帮忙。
• 现代工具/SaaS 派 — Linear、Vercel、Raycast、Notion（AI 之前的版本）。特征是极细的分割线、暖色的深色背景、一个 accent 色走天下。
• 动态/实验派 — Field.io、Active Theory、Resn。他们不把网页当页面，当剧场。
• 粗野/反设计派 — Are.na、Bloomberg Businessweek（Turley 时代）、Balenciaga 2017 之后的风格。故意做得.raw，像没修过的照片。
• 温暖人文派 — Mailchimp 的 Freddie、Stripe Press、Headspace 冥想。手写字、圆角、让你想起某个人的声音而不是某个机器。
• 类型/流派派 — Y2K 复古未来主义、中世纪现代主义。时间编码的，十年一看就知道是哪年生的。

每一个风格，不只是颜色和字体。Linear 的组件里有 hairline border，Aesop 的有 small-caps 标签和一株 sage（鼠尾草），Bloomberg Terminal 有六格窗格和琥珀色配海军蓝的配色，Tufte 有 inline sparkline 和 small multiples——这些名词你不用懂，你只要打开页面，就知道「哦，这是那个」。

更疯狂的是：它不只是展示，它是配方

README 里写得很清楚：这不是一个统一的模板，不是 16:9 的舞台。每一个 recipe 都是完整的页面。Linear 是产品落地页，Aesop 是药房产品页，Bloomberg Terminal 是六窗格交易工作站，Are.na 是研究频道。

每个配方都配备了：

• 调色板（不是默认的 Inter + 蓝紫色）
• 实际字体（或最接近的 Google Fonts 替代）
• 标志性动作（Bloomberg 的 amber-on-navy，Aesop 的 small-caps，Linear 的 hairline）
• 一个场景合适的产物，不是通用落地页

组件小到可以读（150-300 行 TSX 一个），像一篇短篇小说，而不是一部长篇小说。

同时发生的另一件事：所有旧站点的重构

同一天，batch-size、bert、deepseek-r1、deepspeed、loss、mcp、nlp、rlhf 这七个知识站点全部从 postcss 迁移到了 rsbuild，组件被拆解成更模块化的 Section 组件。

这意味着什么？原先这些站点是「一页到底」的叙事，现在变成了「章节化」的——每个大概念有自己的组件，可以独立阅读、独立维护、独立复用。像把一本厚书拆成了可以单独抽出来的章节。

batch-size 从原来的动画演示变成了五个清晰命名的 Section：WhatIs（是什么）、OneUpdate（一次更新）、SharpFlat（锋利与平坦）、Effective（有效性与效率）、TrainVsServe（训练 vs 服务）。

bert 的组件变成了 SectionWhat、SectionTrain、SectionHeads、SectionBothEyes、SectionFamily、SectionLiveIn2026——每篇都在回答一个具体问题，而不是笼统地「介绍 BERT」。

deepseek-r1 的页面被拆成 Hero、AhaCases、GRPO、Distill、Emergence、AfterR1——在讲一个完整的故事线：为什么 DeepSeek R1 重要？那些 Aha Moment 是怎么回事？GRPO 算法怎么运作？蒸馏是什么意思？涌现行为是什么？之后会发生什么？

一个有趣的观察

这次 commit 的两件事——风格配方库和知识站点重构——其实是同一种思维的两个面向：

一面是横向的：把设计史上所有的经典风格收集起来，编码成可复用的组件。像一个厨师把全球菜系的所有基础酱汁都做好，放在罐子里，随时取用。

一面是纵向的：把每一个 AI 知识点的讲解拆成独立的章节组件，每个都能单独理解，组合起来就是完整的叙事。像把一部长篇小说拆成章节，你可以随便翻开一章就读，也可以从头读到尾。

横向是广度，纵向是深度。同一个仓库里，有人在同时做两件事。

为什么这值得记住？

我们常说「学习 AI」或者「学习设计」，但很少有人把两者放在同一个框架里。这个仓库在做的是：用代码同时表达「知识」和「审美」。

当你打开 Bloomberg Terminal 的演示，你不只是在看一个配色方案，你在体验一种信息密度的哲学。当你打开 Tufte 的演示，你不只是在看字体大小，你在感受一种「数据应该自己说话」的信仰。

这二十五种风格，二十五种世界观。代码成了承载世界观的容器。这个思路本身，比任何单个技术点都更值得扩散。

字数：约 2300 字

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