在日常与代码之间，
留一页纸给时间。

这次改造最终落在两个层面：仓库有了用于沉淀 SKILL.md 和设计知识的 skills/ 目录；博客则从原有的 VitePress 视觉样式，迁移为一套以留白、纸张感、克制色彩和长文阅读为核心的 Yohaku 风格主题。

它不是一次简单的“换颜色”。改动覆盖了设计令牌、字体职责、首页信息层级、文章元数据、阅读时间、正文宽度、左右导航、归档列表、代码块、深色模式和移动端布局。文章详情页还参考了 Yohaku Demo Post 的内容节奏，并使用仓库内 skills/design-system/ 的设计契约约束最终实现。

最终目标只有一个：让界面退到内容之后，让文章成为页面里最重要的东西。

一、先建立可复用的 Skills 入口 ​

仓库根目录新增了 skills/，用于放置可以被人和 AI 同时阅读的技能说明、设计规范、参考资料与检查脚本。

当前的 skills/design-system/ 已经不只是一个说明文件，而是一套相对完整的 Yohaku 设计资产：

• SKILL.md：描述适用场景、工作流程和必须遵守的约束；
• CHEATSHEET.md：提供颜色、排版、组件和常见组合的速查表；
• references/：详细说明令牌、字体、组件和反模式；
• src/tokens.css：保存设计系统的静态设计令牌；
• templates/ 与 showcase/：提供可直接观察和复用的页面样例；
• scripts/check.ts：检查禁用色阶、硬编码字体和令牌漂移。

这让“Yohaku 风格”不再依赖模糊的视觉印象，而是变成一份可以执行的设计合同。博客主题中的颜色、字体、阴影和组件状态，都可以追溯到这份合同。

二、Yohaku 设计语言如何落到博客里 ​

Yohaku 的核心不是日式装饰，而是做减法。设计系统用一句话概括就是：

一种主色，三档中性层级，剩下都是留白。

1. 纸张、暖灰与梅红 ​

主题在 docs/.vitepress/theme/styles/vars.scss 中建立了一套新的语义令牌：

| 角色 | 令牌或颜色 | 用途 | |