为什么重写

旧站点的样式散落在二十多个 CSS 文件里，同一个按钮有四种圆角。与其继续打补丁，不如先把品牌契约抽出来，再让组件从令牌里长出来。

做法

第一步是把颜色、字阶、圆角收敛成一组 CSS 变量，再映射到 Tailwind 的主题令牌。这样组件里只允许出现 bg-surface、text-fg 这类语义类名，禁止出现裸的十六进制颜色。

<article className="rounded-card bg-surface p-4">
  <h3 className="text-h3 text-fg">{article.title}</h3>
</article>

第二步是垂直切片：先打通一篇卡片的完整链路，再横向铺开。这比"先把 API 层写完"要稳得多，因为每一刀都是可运行的。

先让一条最细的链路跑通，再让它变宽。

结果

  • 首屏没有外部字体请求
  • 所有页面的强调色不超过两处
  • 组件测试覆盖了卡片、搜索框和无限滚动

还没做的

真实封面图、后端搜索接口和 AI 总结都还是占位实现。等接口就绪，只需要替换 lib/api.ts 这一层。