Oink：蒸馏 Anthropic 官网风格

国庆假期老冯我忙着到处蹬车，本来没打算写文章。加上前两天刚好碰上两组重置卡（x6）到期，连着三天每天烧六个订阅，实在是抽不出空。不过昨天发了篇吐槽 Claude 账号被封的短文后，觉得有些意犹未尽，今天索性抽点时间，趁着热乎劲儿，聊聊俺搞的另一个项目 —— Oink 1.2 版本的更新，是如何 “白嫖” Anthropic 的官网主题的。

公司烂，但产品是真好

昨天那篇文章发出去后，很多朋友深有同感。Anthropic 这家公司现在真的是太不做人了，各种阴间封号操作层出不穷。因为他们的 Logo 刚好是个 A\（A 加上一个除号），所以大家私底下经常亲切地称呼它为 “A 畜”。我觉得这外号真的蛮贴切。

但虽然 Anthropic 是一家非常不做人的公司，可有一说一，产品做得是真的好。Claude 模型本身的强大自不必说，Claude Code 这个 Harness 工具也极其顺手。而除了这些硬核产品外，他们还有一个做得非常出色、但常被技术人员忽略的东西——官方文档站点。

Claude 的官网审美很好，排版看着非常舒服。老冯我不是学设计的，憋不出什么高级的专业名词，所以我干脆让 Claude 自己去分析了一下它自家的官网到底是个什么设计流派。

它给自己的概括是：充满人文与出版物气质的温暖的“编辑式极简主义”。

背景不那么冷，留白比较舒展，标题和正文有自己的节奏。颜色、边框、装饰都比较克制，没什么东西跳出来跟文字抢戏。

老冯越看越觉得舒服，越看越觉得：这么好的风格，只给你一家用，是不是有点浪费？

拿来吧你，编辑式极简主义

老冯扒了一下它的前端资产，发现 Claude 官网竟然用了一套定制的商业字体。这玩意儿有版权，作为开源项目那是绝对碰不得的。但是，它大面上的设计理念、留白比例和排版框架，这种属于思想层面的“视觉风格”，是不受知识产权保护限制的。

既然你封我的号，那我就用魔法打败魔法：把你这套引以为傲的文档风格给“像素级复刻”过来，做成 Oink 的专属主题。

于是，我给 Claude 布置了一个任务：把你爸爸的官网风格蒸馏一下，给我提炼成一个开源文档主题。

这便是 Oink 1.2 这次更新的起点。它哐哧哐哧忙了一两个小时，还真给做出来了。这套风格，我给它起名叫 Paper（纸）。

名字很直白：就是想让屏幕上的文档，多一点纸质出版物的感觉。毕竟当年哪怕是搞数据密集型的硬核技术书汉化，我也深知好的排版对技术人的阅读体验有多重要。

在实现上，Paper 使用了 IBM Plex Sans，中文回落到系统字体，代码继续使用等宽字体。字体随主题本地分发，不需要为了这套外观再去请求一个远程字体服务，干脆利落。

什么，你问 Oink 是什么？这是老冯之前给自己做的一个文档框架。它跟各种 Vibe coding 糊出来的 AI Slop 不一样的是，俺真的会 eat my dog food，我所有的网站现在都已经迁移到这个主题上去了，而且已经开始有了一些外部用户。 

我喜欢，不等于所有人都得跟着换

一开始，我想得很简单：既然新的更好看，那就把原来的全换掉。后来想想，不对。

Oink 已经不只是我自己的站点在用了，也有外部项目接了进来。人家可能刚调好自己的首页和品牌配色，我这边心血来潮，一脚油门升级，整个网站突然换了张脸，这不合适。

而且，原来的风格并不是不好。我同样让 Claude 概括了一下旧版 Oink 的气质，它给的说法是：带有工业气质的技术极简主义。

确实挺准确。原来的设计融合了 Cloudflare 的控制台、Fumadocs，也有一点 Anthropic 的影子，但整体更偏冷静、利落的工程工具感。

新的像纸，旧的像石板。于是，旧风格就叫 Slate。

这也让问题变得简单了：不要用我的审美替所有人做决定，把它做成一个配置项。喜欢新风格，就用 Paper；习惯原来那套，就继续用 Slate。

既然能配，为什么不多来两套？

做到这里，老冯又想：既然已经把外观做成可配置的预设，那为什么只给两个选项？

于是，这次换 Codex 来出方案。它给了四种新风格的方向，我挑了其中两个比较有代表性的：Ink（墨水风） 和 Terminal（终端风），然后让 Opus 5.5 去落地。最后的效果，我觉得都还不错。

现在这四套风格，大致可以这么理解：

•Paper：像一本认真排过版的技术出版物。暖色纸面、细分隔线、克制的阴影，整体更柔和，适合长时间阅读。它也是这次的新默认值。•Slate：像一个顺手的工程工具。保留原来的冷色技术气质、圆角和网格感。已经习惯 Oink 旧外观的，继续用它就好。•Ink：像一份态度鲜明的刊物。黑白为主，红色点缀，标题更有分量，线条和方形面板也更干脆。相比 Paper，它不是温温和和地请你坐下，而是把重点直接拍到你面前。

•Terminal：把终端的气质搬进文档站。标题和控件使用等宽字体，搭配青绿色链接、琥珀色点缀，以及更紧凑的导航。但正文和表格没有硬塞成满屏等宽字，长文章还是得照顾阅读体验。

其中，Terminal 我觉得特别有意思。看起来很有点 Omarchy 那种桌面风格的味道，拿来给 CLI 工具或者开发者向的开源项目做官网，还真挺搭。

当然，这里不是简单给同一个背景换四种颜色。字体、标题、边框、组件形态，都在一起参与塑造气质。底下还是同一套内容和导航，不需要为每种风格维护一份网站。

而且，每个 Style 其实还都要做两种：亮色模式和暗色模式，所以实际上就是 8 种不同的风格了。

对我来说，这才是做成主题的意义：不是我自己截一张好看的图，而是别人拿回去，也能无缝用到自己的项目上。

怎么用？一个按钮的事

已经使用 Oink 的站点，可以先把主题升级到 1.2.0。在站点的 hugo.yaml 中，将 ui.preset 修改为 paper 就可以使用了。

不过后来我想了一下，这不就是几个 CSS 样式吗？与其在网站构建编译的时候定死，我直接给做个在线配置按钮不就得了？

于是，原来亮暗主题切换的那个按钮，现在承载了新的功能：它不仅可以切换亮色和暗色，现在也能直接在四种不同的颜色和风格里无缝切换了。

至于说你没用过，想知道怎么用？太简单不过了。告诉你的 Codex / Claude ：现在我想要做个网站，用 Hugo + Oink 主题。内容如下：xxx  —— 就完事了。我已经用这种方法做了一大堆网站了。

比如今天 Token 过剩，还给我爹做了个数字陈列馆，也就是一句话的事儿。

骂归骂，好东西照样拿来

说到底，老冯是真的讨厌 Anthropic 这家公司。

但我也是真的觉得，它家的模型、工具和网站设计里，有不少好东西。没必要因为讨厌一家公司，就硬着头皮说它什么都不行；同样，也没必要因为产品好用，就替它那些不做人的操作找补。

该骂的骂，该学的学，该拿来用的拿来用。

写篇文章无能狂怒一下，除了让自己顺口气，对它大概也没什么影响。但把我欣赏的设计思路，重新实现成一套大家都能用的开源主题，至少能留下点有用的东西。

本来只是想给自己的文档换个样式，最后做出了四套可选风格。自己用得舒服，别人也能拿去用，这事就不算白忙。

你封你的号，我开我的源。A 社的好审美，老冯替它共产一下。

本文 AI 含量：30%