博客的前端样式已经好几年没有大动过了：白底黑字、一个黄色点缀，简洁是简洁，但页面信息量低、缺少层次。一直想改版，又总觉得「调样式」是个磨人的活儿，迟迟没动手。

这次我尝试把整件事交给了 AI：接入 Kimi K3，只提了一段需求加几张现有页面的截图，让它完成整站页面的重设计。结果超出预期，全程没有手动改过代码。

工具组合：Kimi K3 + Codex

选 Kimi K3 来做这件事，主要看中的是它在前端任务上的口碑：审美好，生成的界面不是「能看」而是「好看」。这次实测下来确实如此，下面具体说。

在 Harness（承载模型的 Agent 工具）方面，通过 cc-switch 将 Kimi K3 接入到 Codex 中，可同时获得 Codex 成熟的 Agent 工作流（读码、规划、执行、自验）与 K3 的模型能力。

我提的需求

非常口语化的一段话，附上四张现有页面截图（首页/文章列表、文章详情、专栏列表、专栏详情）：

截图是博客当前的页面效果，请帮我重新设计博客，重点是文章和专栏相关的面向访客的页面。可参照原有的风格进行设计。目前首页直接使用了文章列表，如有必要可设计一个专门的首页。

「参照原有风格」这个约束它听进去了，这是我觉得第一个值得说的点。

亮点一：延续原有风格，但质感提升了一个档次

AI 没有把博客推倒重做成一个「网红模板风」的页面，而是先读了代码库，找到了全局样式里的品牌黄（#ffc725），然后围绕「黑白 + 品牌黄」的既有基调做精细化：

• 顶部导航改为吸顶毛玻璃样式，当前所在栏目有黄色下划线指示；
• 搜索框从生硬的描边矩形变成圆角填充式输入框；
• 全局补充了选区高亮（黄色）、键盘焦点可见性等细节样式；
• 正文的链接、引用块统一用品牌黄做点缀，深色模式全部适配。

最终效果是：还是那个博客，但处处更精致了。这种「克制」恰恰是审美好的体现——知道什么该保留，比知道该加什么更难得。

亮点二：新增了真正的首页

原来的首页就是文章列表。新首页是我这次最满意的部分：

• 顶部是品牌区：博客名配黄色下划线装饰、一句话简介、右侧点阵纹理；
• 紧跟一组站点数据：文章数、专栏数、开博年份（数字来自数据库实时统计）；
• 然后是「最新文章」和「精选专栏」两个版块，各带「查看全部」入口。

整个首页的排版节奏——留白、字号层级、分隔线的使用——已经是一个有设计感的编辑风格页面，而不是组件的堆砌。

亮点三：文章与专栏页面的系统性升级

文章列表：每条文章左侧是独立的日期块（月-日 + 年份），标题下方是摘要和「约 X 分钟」的阅读时长，整行可点击，悬停时右侧出现箭头引导。

文章详情：

• 标题下是完整的元信息行：发布日期、更新日期、阅读时长；
• 右侧目录从「一个边框盒子」改成了更轻盈的细线列表，并且支持滚动跟随高亮（scroll-spy）；
• 文末新增「上一篇 / 下一篇」导航卡片；
• 「本文收录于专栏」从纯文本行升级为专栏卡片。

专栏列表：从横排条目改成三列卡片网格，每张卡片包含封面、标题、简介，以及文章数量和更新时间——值得一提的是，文章数量在原来的列表接口里并不存在，这是它自己在 service 层加的聚合查询。

专栏详情：文章按专栏的策展顺序（后台拖拽排序的 index）输出，并编号成「01、02、03……」的章节列表，专栏真正有了「连载」的感觉。封面插画采用画框式完整展示，避免了通栏裁切破坏构图。

亮点四：不只是改样式，它读懂了项目架构

项目里有 AGENTS.md 约定了严格的分层：组件和 API 路由禁止直接访问数据库，必须经过 services 层；数据校验必须用 Zod 等等。

它所有的改动都遵守了这些约定：

• 专栏卡片需要的「文章数统计」，是在 services/collections.ts 里用 Drizzle 聚合查询实现的；
• 文章详情的「上一篇/下一篇」，是在 services/posts.ts 里新增的轻量查询，并接入了既有的 unstable_cache 缓存体系；
• 阅读时长是按中文阅读习惯（约 400 字/分钟）估算的工具函数，放在 utils 里复用。

它做的不是「页面美化」，而是一次前后端贯通的完整功能改造，并且没有破坏项目里任何一条规矩。

亮点五：自己验收，自己修 bug

改完之后它并没有直接宣布完工，而是自己跑了一串验证：TypeScript 类型检查、ESLint、单元测试全部通过，然后启动本地服务、用浏览器逐页截图检查视觉效果。

这个过程还真抓到一个 bug：文章详情页空白，报错 value.toISOString is not a function。它定位到原因是 Next.js 的 unstable_cache 会把缓存结果序列化为 JSON，Date 对象取出来时已经变成了字符串，直接传给 Drizzle 查询就会报错——随后在 service 层加了日期复原逻辑修复。

整个「发现 → 定位 → 修复 → 复验」的闭环是它自己完成的，我只负责看结果。

最终交付的改动清单

一次会话完成的所有改动：

• 新增：独立首页（品牌区 + 数据统计 + 最新文章 + 精选专栏）
• 重写：全局导航/页脚、文章列表条目、分页器、文章详情页、专栏列表页、专栏详情页
• 新增组件：HomePage、CollectionCard（首页与列表页复用）
• service 层：专栏文章数聚合、专栏文章按策展顺序输出、相邻文章查询
• 工具函数：阅读时长估算
• 全局样式：选区/焦点样式、正文排版精修
• 修复：缓存序列化导致的日期类型问题

tsc、eslint、vitest 全绿，五个核心页面截图验收通过。

总结

Kimi K3 的前端审美确实在线，尤其是在「延续原有风格」这种约束下依然能做出质的提升，比自由发挥更能看出功力；并且它的工程能力非常优秀，让产出物可以直接合入主干，而不是需要二次加工的「演示代码」。

如果你的项目也有一件「一直想做但懒得动手」的事，值得试试把它完整地交给 AI 做一次。