喜欢一个网站的排版，我把它拆成了自己的主题

前几天看到一个网站，是做 AI 播客的，站名叫 Next Token，域名 nexttoken.tv。我点开的是它一期节目的文字稿页。

滑了两屏，内容还没看进去，先记住了它长什么样：米白底，纯黑字，橙红色只出现在章节编号上，段落之间不靠框线分隔，靠留白和一根细细的黑线。哇，好看(♥∀♥)。

我手里那几处地方，排版全不挨着

看完页面，我回头看了看自己手里这几样东西。

公众号用的是编辑器默认样式，标题多大、行距多宽，全看模板，跟别人撞脸。博客是几年前搭的 Hexo，套的现成主题，深色侧栏配圆角色块，还压着一层淡阴影，看着就不像这两年做的东西。自己写的那个本地网页工作台（VaultDesk，开源在 GitHub 上）更早，当初的界面想法就是“能用就行”，配色是随手挑的。

三处东西，三种风格，谁也不像谁。

抄页面没用，得抄规则

我把链接丢给 AI 助手，让它把那个站的样式表扒下来，顺便回答几个问题。底色、文字色、强调色分别是哪个，分隔线怎么用，标题和正文的字号行高是多少。

回来的是这几条：

• 纸白底 #f1eee5，近黑 #111，橙红 #ff4b18，次要文字用灰 #635f58

• 橙红只允许出现在三个位置：章节编号、当前选中项、关键数字

• 结构全靠线分，重要的分隔一根纯黑 1px，次要的调淡到两成黑

• 标题用一款叫 League Spartan 的粗黑字体，正文行高拉到 1.9

就这么几条。那个页面看着舒服，靠的是它守得住这几条。圆角一律没有，阴影一律没有，颜色一共用四个。

看明白这点，我改了做法。不拷人家的样式表，那文件五万多字节，一大半跟观感无关，混在一起反而不知道哪条在起作用。指使 AI 写了一份自己的主题文件，两百来行，八个颜色变量加上十几类组件的写法，注释里写清每类怎么用。

三处接上去，最别扭的是公众号

博客最省事。Hexo 的主题都留了自定义样式的入口，把主题文件往那儿一放，再打开一行配置，样式就编进去了。原来深色的侧栏换成米白加一根黑线，文章之间的圆角卡片去掉，改成一条黑线接着一条黑线。

改前改后对比

自建的那个网页工作台也好办。新写一个样式文件，在页面里多引一行，颜色和线全按上面那几条走，原来那些圆角、阴影、深色侧栏一次全清掉。要紧的一点是原样式文件一个字没改，哪天看不顺眼，把多引的那一行删了，就回到原样。

公众号最别扭。它的正文编辑器只认自己那一套：外部样式表、<style> 标签、外链字体、脚本，一律剥掉，flex、grid 这些排版写法也一概不认。上面那几条规矩，它只认一半。

米白底能留，橙红能留，细细的黑线能留。那款粗黑字体留不了，微信只给你系统字体，所以标题改成加粗、收紧字距来补那个劲。原本想让三个关键数字横着并排，也做不了，最后用表格替代。

抄之前的三条约定

• 只抄观感，不搬内容。站名、标志、文章、图片，一个字不动，我拿的是它的配色和排版规矩来管自己的东西。

• 先看字体的授权。League Spartan 是开源字体，协议允许自由使用和分发，能放心往自己站上装，要是碰上收费字体，就跳到下一步。

• 每处改动留回退口。博客和自建应用都只是多引了一个样式文件，删一行就回去。

改完怎么知道成没成

我没有靠眼睛看。改完让 AI 用无头浏览器跑了一遍比对，把页面上每个文字元素的颜色，跟它背后真实的背景色算一遍对比度：

• 博客首页和文章页各跑一遍，不达标的 0 处

• 全站圆角、阴影的残留项 0 处

• 两档窗口宽度（1280 和 430 像素）都没有横向溢出

公众号那一版没法这么验，只能核颜色值，底色、章节号、强调块的底色，都跟我设定的值对得上。另外说句实话，播客托管平台上的那些页面是改不了的，平台只留给你一张封面图和一段节目简介，观感只能靠这两样往后延续。

给想动手的人

不用先学一遍 CSS 再动手，把链接交给 AI 助手就够了。一句可以直接复制的话：

打开这个网址，把它的设计语言总结出来：底色、文字色、强调色、分隔线的用法、标题和正文的字号与行高、有没有圆角或阴影。然后用这些规则写一份可复用的 CSS 主题文件，注释里写清每一类组件的用法。

丑话说在前头：先拿你自己的博客或者本地项目练手，别在正在用的东西上试；另外每改一处，都留一个删一行就还原的口子。

结论

现在公众号、博客、那个自建网页，用的是同一套规矩：米白底、纯黑标题、橙色只做指路用、结构靠细线分。好处很实在，写文章不用挑模板，以后想换配色，改的是那几个变量，几处一起跟着变。

今天就能试一步：找一个你看得顺眼的页面，让 AI 把它拆成一份主题文件，先只改自己的博客试一次。