一开始我把首页当成一张海报：哪里看起来不对，就直接改那几行 HTML。页面越来越漂亮，但也越来越难继续修改。

先问每一块负责什么

我把首页拆成四种责任：页面负责组合，组件负责显示，collection 负责数据，CSS 负责视觉。只要一块同时做了两件以上的事，就先停下来问它能不能拆开。

例如文章卡片不应该知道首页有几个区块，它只需要拿到一篇文章，显示标题、状态、日期和标签。

组件不是越小越好

把每一行都拆成组件不会让代码更清晰。真正值得复用的边界通常来自重复的视觉和稳定的数据形状，而不是来自文件长度。

所以我保留了页面级的 section，让它负责节奏；只把 PostCard、Header 这类会重复出现的东西提出来。

用一次改动验证边界

我把卡片的元数据从“阅读时间”改成“学习状态 + 技术栈”。如果首页、列表页和详情页都能只改自己的显示逻辑，说明数据边界还算健康。

这类小改动比一开始就搭一个复杂设计系统更适合学习：每次变化都能告诉我，原来的拆分哪里合理，哪里只是想象。

下一步

下一步是补键盘操作和焦点样式。可验证不只意味着代码能构建，也意味着真实的人可以顺利使用它。