关于「把博客改得像 Claude」这件事

朋友逛了一圈我的博客，说了句话我记到现在：

你这个博客有点太用力了。

我第一反应是不服气——侧边栏、卡片、渐变、动效，哪样不是精心设计的？

但他说得更具体：

你去看看 Claude 的界面，再看看你的。

我去看了一眼。

Claude 那个界面，几乎什么都没有。白底、细线、几个按钮、大片留白。没有渐变，没有卡片阴影，没有入场动画。看起来像是“默认样式”，但你盯着看很久会觉得舒服。

然后我回头看自己的博客——

首页 Hero 下面有统计条，再下面三个高亮卡片，每个卡片有图标框、标题、两行说明。再下面标签云，再下面社交链接。往下一滚，又是文章网格，每张卡片有日期、分类、标题、摘要、标签、“阅读全文”加箭头。

每一块都是“有用的”。加在一起就是“吵”。

我改了什么

花了两天，主要动了三处。

一、把卡片去掉了

原来高亮区块是三张带边框的卡片。我把它们改成了一段文字加三个图标：

小而清晰，先把每一次打开做好
统一的版式、克制的配色、能按步骤复现的内容 —— 其余的交给速度。

📝 写作 / 教程     把踩过的坑整理成能按步骤复现的教程…
🛠 自部署 / 服务   维护自托管服务与 Macro / API 接口…
⚡ 边缘 / CDN 优选  Cloudflare、EdgeOne 优选与边缘部署…

边框没了。视觉重量一下子降下来。

二、把翠绿从“到处点缀”改成“只在关键处”

这是我觉得最有价值的一个改动。

我原来把翠绿用在：链接 hover、图标 hover、各种小圆点、标签、数字。到处点缀的结果是——它一点都不显眼，因为它到处都是。

现在只在三个地方用：

• 品牌名后面那个小圆点
• 主按钮的底色
• 进度条

其他地方全是灰。

三、把字调小了、留白调多了

原来是 16px 正文、48px 大标题。现在是 15px 正文、34px 标题。

字一大就觉得“在喊你”，字小一点才像在说话。留白同理——我把区块间距统一成一套刻度，最大 48px，最小 8px，不再随手写 28px、35px 这种值。

最难的不是配色

前两条都不难。第三条难。

我最初想的是改 font-size，结果发现真正的问题在于注意力管理。

具体来说，我的博客有三个地方在同时抢注意力：

1. 侧边栏的“折叠侧栏”按钮
2. 右下角的命令面板唤起按钮
3. 每个文章标题旁边的复制/分享按钮

它们都是“可交互”的提示，都用灰色，都在小尺寸下闪一眼。三个一起就是噪音。

我的处理是把它们全部改成默认半透明，悬停才完全显形：

opacity: 0.55;
transition: opacity 0.15s ease;

同时给它们加了标题提示（title 属性），鼠标停上去会显示“复制链接”“折叠侧栏”。

这样默认状态下，页面上就只剩下内容本身了。

一个意外的收获

改完之后，我顺手跑了个对比度检查，发现了一个真问题：

翠绿 #3ecf8e 在白底上的对比度只有 1.96:1。

WCAG AA 对正文的要求是 4.5:1。也就是说，我这个“品牌色”用在文字上的时候，几乎看不清。

修法不是换品牌色，而是区分用法：

• 填充（按钮底色、状态点）：用原来的翠绿，1.96:1 满足非文本的 1.3 要求
• 文字（链接、强调）：用深一档的 #0e7a51，5.26:1 达标

改完全站 51 处。现在 30 项对比度检查全部通过。

这件事有点讽刺——我花了那么多时间调“清爽感”，却没发现最基本的可读性问题。好看和能用，是两件事。

最后

现在的博客还是“设计过的”，不是“默认的”。但它学会了闭嘴：

• 不在每个区块之间画线
• 不在每张卡片上加阴影
• 不用翠绿提醒你“这里可以点”

Claude 的界面给人的感觉是“它知道自己不需要证明什么”。我觉得我现在大概理解了这句话的意思——

不是做得少，是知道自己不需要证明。

包括不需要证明“我支持暗色模式”（虽然支持了）、“我有动效”（虽然有）、“我的代码很干净”（虽然还在慢慢重构）。

就是安静地把内容放那儿。

---

顺带一提，这篇文章的标题我改了三遍。第一遍叫“我的博客设计反思”，太虚；第二遍叫“如何把博客改得像 Claude”，太像教程；第三遍就是现在这个。

第三遍我承认了一件事：我花了很久在调，但最开始的问题根本不是“调得不够好”，而是“东西太多了”。

这个认知，比任何一条设计技巧都值钱。