重构美学：探索 Claude Docs 风格的博客设计

做个人博客这件事，我想了很久。

一开始，我对博客的期待其实很简单：有一个地方，能把自己平时学到的东西、做过的项目、踩过的坑、偶尔冒出来的想法记录下来。

但真正开始做之后，我才发现，博客不只是一个“放文章的地方”。

它更像一个人的数字房间。

你怎么排版，怎么留白，怎么组织文字，怎么处理颜色和层级，其实都会影响读者对你的第一印象，也会影响你自己愿不愿意长期写下去。

这次重构，我想做的不是一个很炫的博客，而是一个更安静、更克制、更适合阅读和思考的博客。

我给它找的参考对象，是 Claude Docs 那种风格。

不是完全照抄，而是学习它背后的感觉：清晰、克制、留白充足、文字优先，有一点学术感，也有一点现代科技产品的冷静气质。

为什么不是做一个“很酷”的博客？

现在很多个人网站都很酷。

动效很多，渐变很多，卡片很多，首屏很大，滚动起来很有冲击力。

这些设计当然有它们的价值，尤其适合作品集、品牌官网、产品发布页。

但我越来越觉得，博客不一定需要这样。

博客最重要的东西，还是文字。

如果页面太热闹，读者的注意力很容易被界面本身抢走。按钮、背景、动画、视觉装饰都在说话，反而文章本身变得不重要了。

我希望这个博客给人的第一感觉不是“哇，好炫”，而是：

这里可以安静地读点东西。

这也是我喜欢 Claude Docs 风格的原因。

它没有强行制造高级感，而是通过字体、间距、灰度、边框、层级，把阅读体验做得非常稳。你不会被界面打扰，但你会感觉它是经过认真设计的。

这种“不打扰”的设计，反而更耐看。

我理解的 Claude Docs 风格

我理解的 Claude Docs 风格，并不是某一种固定模板，而是一套设计气质。

它大概有几个特点。

第一，文字是主角。

页面不会用过度强烈的视觉元素压过内容。标题、正文、引用、代码块、列表之间的层级清楚，但不会浮夸。

第二，留白很重要。

留白不是浪费空间，而是给信息呼吸的地方。尤其是长文阅读，如果内容挤在一起，读者会很累。适当的行高、段落间距和页面宽度，会让文章变得更容易读完。

第三，颜色很克制。

整体颜色不会太多，通常以黑、白、灰为基础，再用少量强调色做点缀。这样页面不会显得廉价，也不会因为颜色太杂而破坏整体感。

第四，有一点“文档感”。

这种文档感不是简陋，而是让人感觉这里的内容是可以沉淀、可以反复查阅的。它不像信息流，也不像短内容平台，而更像一本持续更新的个人手册。

这几点，正好符合我对个人博客的期待。

我不想把博客做成一个每天追热点的内容机器。我更希望它像一个慢慢积累的知识库，记录我对 AI、产品、编程、跨境和个人成长的真实实践。

为什么选择 Astro？

这次博客我选择用 Astro 来做，原因也比较直接。

我不想把博客做得太重。

博客本质上是内容站，最重要的是加载快、结构清楚、SEO 友好、维护简单。Astro 很适合这种场景。

它的核心优势是：默认更偏静态内容，页面可以很轻，性能表现也比较好。对于个人博客来说，这比复杂的后台系统和花哨的前端交互更重要。

我希望自己写文章的时候，关注点是内容本身，而不是每次都被一堆工程复杂度拖住。

用 Markdown 或 MDX 写文章，用组件处理页面结构，用 Tailwind 快速调整样式，这样整体心智负担会低很多。

博客如果维护成本太高，最后很容易荒废。

所以对我来说，技术选型不是为了显得高级，而是为了降低长期写作的阻力。

这次重构主要改了什么？

这次重构，我主要围绕三个方向调整。

1. 首页更像一个个人入口

首页不再只是机械地列文章，而是先告诉读者：我是谁，我关注什么，这个博客会写什么。

我现在给自己的定位是：

做一个务实的 AI 学习者。

这句话对我挺重要。

因为我不想把自己包装成什么专家，也不想天天喊宏大的概念。我更在意的是，看到一个东西之后，能不能真的理解它、用起来、做出点东西。

AI、产品、编程、跨境、副业，这些方向看起来有点杂，但背后其实是同一件事：用技术和产品能力，去解决现实问题，去探索新的可能性。

所以首页要先把这个气质表达出来。

不是“欢迎来到我的高端博客”，而是“这里记录一个普通人持续学习和折腾的过程”。

2. 文章页更适合长时间阅读

文章页是博客的核心。

我希望它有一种接近纸质阅读的节奏：标题清楚，正文宽度适中，段落之间有呼吸感，代码块和引用块不要太刺眼。

在排版上，我会更关注这些细节：

• 正文不能太宽，否则眼睛横向移动太累。
• 行高要足够，中文阅读尤其需要空间。
• 标题层级要明显，但不要过度装饰。
• 深色文字不要用纯黑，稍微柔和一点会更舒服。
• 边框和分割线要淡，不要抢内容。
• 代码块要清楚，但不要像贴了一个厚重的黑盒子。

这些细节单独看都不大，但组合在一起，读者会明显感觉页面更舒服。

一个博客能不能长期被阅读，很多时候就取决于这些小地方。

3. 视觉风格更克制

我以前也容易被一些很炫的设计吸引。

比如大渐变、大阴影、大卡片、大圆角、大动效。

但后来发现，这些东西用多了之后，页面很容易过时。

真正耐看的设计，往往不是靠某一个特别强的视觉元素，而是靠整体比例、间距、层级和一致性。

这次我希望博客的视觉更接近这样一种状态：

安静，但不简陋。

克制，但不冷淡。

有设计感，但不抢文字。

这也是我理解的“重构美学”。

不是把页面装饰得更复杂，而是删掉多余的东西，让真正重要的内容浮出来。

Tailwind 在这里的作用

Tailwind 对我来说，不只是一个 CSS 工具。

它更像一种快速调整设计细节的方式。

比如我想调整文章容器宽度、段落间距、字体大小、颜色透明度、边框层级，都可以很快完成。

这对个人博客很重要。

因为个人博客不是一次性项目，而是一个会持续生长的东西。

今天你可能想加一个文章目录，明天想优化移动端，后天想加标签页，再后面可能想加搜索和订阅。

如果样式系统太散，后面维护就会越来越痛苦。

用 Tailwind 的好处是，很多视觉规则可以保持统一，调整起来也比较直接。

当然，Tailwind 也容易写乱。

所以我的原则是：不要为了写 class 而写 class。能抽成组件的地方，就抽成组件；重复出现的样式，要尽量收敛。

博客看起来简单，但简单不代表随便。

个人博客最重要的是长期主义

这次重构之后，我对博客的理解也有一些变化。

以前我可能会想：博客要不要很高级？要不要看起来像大佬？要不要一打开就让人觉得很厉害？

现在我觉得没那么重要。

个人博客最重要的，是你愿不愿意持续写。

如果一个设计让你有表达欲，让你愿意把文章放进去，让你觉得这是自己的地方，那它就是一个好设计。

我不希望这个博客只是一个摆设。

它应该成为我的长期记录系统。

记录我学 AI 的过程，记录我做产品的思考，记录我写代码的坑，记录我做跨境和副业的真实反馈，也记录一些阶段性的迷茫和复盘。

很多东西当下看很普通，但几年后回头看，可能就是一条清晰的成长轨迹。

博客的价值，不一定在第一篇文章就体现出来。

它是慢慢长出来的。

写在最后

这次重构，我没有追求复杂。

相反，我是在不断做减法。

少一点装饰，多一点阅读。

少一点炫技，多一点内容。

少一点模板感，多一点自己的气质。

Claude Docs 给我的启发，不是让我复制它的外观，而是让我意识到：真正好的内容产品，往往不需要很吵。

它只需要清楚、稳定、可信、耐看。

这也是我希望这个博客未来呈现出来的样子。

一个安静的地方。

一个持续记录的地方。