和Kimi一起工作的一天：修网站、做视频、学新东西

今天是一次典型的高密度开发日。
我同时推进了多个项目，从博客系统的生产故障修复，到视频渲染管线的迭代，再到各类 AI 技技的整理与升级。
以下是从早上7点到晚上10点的完整记录。

说到这个：技能整理和项目回顾

清理旧技能比加新更重要

早上的第一件事是对技能库做一次整理。
我扫了一眼当前所有的 Kimi 技能，发现 md-poster 已经过时了，直接删掉。
然后检查了 jianfei-blog v3.1.0 的 CLI 命令表、环境变量配置、自动部署 watcher，全都跑得好好的。

技能管理是 AI 工作流的基础。
当技能数量超过60个时，定期清理过期技能比添加新技能更重要。

跨平台会话同步真香

接着加载了 Claude 的历史会话，回看前一天在博客系统上的工作。
这种跨 AI 的会话同步让我能快速接手未完成的任务，省下好多重复沟通的时间。

回到正题：sikaoa.com 博客系统 —— 生产故障紧急修复

这是今天最急的一件事。
sikaoa.com 是 Next.js 16 + Sanity CMS 搭建的，文章已经到了 3573 篇，构建出的 posts.json 约 26MB。
昨晚部署后出了两个大问题，必须马上修。

Guide 页面报错 502？不是服务器挂了，是 payload 太大了

现象：访问 /guide/ 返回 502 BAD_GATEWAY，错误码是 FALLBACK_BODY_TOO_LARGE。

根因：Next.js 的 RSC 在服务端渲染时，会把组件 props 序列化传给客户端。
GuidePageClient 接收的 categories 参数里包含了完整的 Post[] 数组——每篇文章都有 content 字段（全文 Markdown）。
3573 篇文章的内容堆起来，RSC payload 超过了 20MB，Vercel 直接拒绝响应。

修复方案：

• 把 GuidePageClient 的 props 改成只带 id、date、title、excerpt 的轻量对象
• 同样处理 PostsPageClient，它之前 payload 达到 29MB
• 在 Vercel 设置里加个 VERCEL_BYPASS_FALLBACK_OVERSIZED_ERROR=1 当兜底

效果：页面恢复访问，首字节时间从超时降到毫秒级。

Wiki 页面 404？中文路径没对上

现象：/wiki/人生规划/ 这类中文路径返回 404。

根因：generateStaticParams 返回的 slug 用了 encodeURIComponent，比如 %E4%BA%BA%E7%94%9F...，
但 Next.js 静态生成匹配时用的是解码后的路径（人生规划），编码不一致导致找不到文件。

修复方案：

• 把 slugify() 函数改回返回原始中文字符串
• getWikiConceptBySlug() 加多格式匹配逻辑，兼容 URL 编码和原始中文两种形式
• generateStaticParams 直接返回中文 slug

效果：所有 Wiki 页面都能正常打开。

用户体验优化也顺手做了

在修 bug 的时候，顺便搞了几项小优化：

下午：jianfei-ppt-video 视频渲染管线 —— 用户反馈驱动重构

jianfei-ppt-video 是把 Markdown/SRT 转成竖屏短视频的统一管线。
今天重点修用户反馈的问题，尤其是交互细节。

反馈系统终于能用了

上周上线了 /feedback-center，但操作不够顺手。
今天改了几个关键点：

• ESC 关闭弹窗：表单支持键盘 ESC 一键关闭
• 提交后自动清空：成功提交后输入框清空，防重复提交
• 精简按钮：去掉“复制”和“清空”，只留“取消”和“提交”
• 状态同步修复：之前“标记已处理”和实际修复不同步，现在改成“先验证修复，再打标记”
• 反馈中心页面：支持 pending/done 状态筛选、详情展开、分类标签

预览布局彻底重构

原来上下结构太挤了，笔记本上看很吃力。
现在变成左右分栏：

• 左侧：内容编辑区 + 主题/BGM 选择器 + 生成按钮 + 操作说明
• 右侧：视频预览区（手机框架，9:16 比例，响应式缩放，垂直居中）

渲染链路也修好了：

• 静态文件处理器的 pathname 增加 decodeURIComponent，修复中文 URL 404
• 视频标签加了 playsinline，iOS 不会自动全屏
• #previewContent 的 sizing 逻辑重写，防止预览窗口溢出

主题和 BGM 扩展了，还能选配色

• 主题列表：从 37 个扩展到 81 个（html-ppt 主题 + fs-* 预设），用 <optgroup> 分亮暗模式
• BGM 选择器：右侧面板新增下拉框，支持 30 首音乐，选择后通过 /api/regenerate 和 /api/render 传到渲染管线
• 配色方案：检查了 make-video.mjs 中的 PALETTE_PRESETS，确认 UI 展示的只是默认子集，后续可以全部暴露出来

晚上：jianfei-hyper 测试 HyperFrames 批量渲染

jianfei-hyper 是基于 HyperFrames 的自动化视频渲染工具。
今天测了 7 个 landscape（横屏）模板的批量渲染能力。

测试环境简单粗暴

• 源视频：1920×1080，25fps，8.72 秒
• 字幕：SRT 格式，2 个片段（0.08-3.98s，3.98-7.83s）
• 模板：warm-grain、play-mode、swiss-grid、kinetic-type、decision-tree、product-promo、nyt-graph
• 硬件：10 核 CPU，GPU 编码启用

结果喜忧参半

根因：部分模板还在用老占位符，且 staticDuration 计算不对。
计划统一替换占位符、修正 sub-composition 的 element ID、增加 staticDuration 回退逻辑。

最后一小时：新技能探索和安装

安装 Andrej Karpathy 的 guidelines skill

从 GitHub 下载了 andrej-karpathy-skills，里面有个 karpathy-guidelines 技能。
这是一套行为准则，专门用来减少 LLM 编码时常见的坑——比如过度复杂化、不做假设验证、缺少可验证的成功标准等。
后续准备整合进自己的工作流。

frontend-design 技能试用

下载并测试了 frontend-design 技能，用它设计了一个粗野主义（Brutalism）杂志风网页 PPT 主题，再通过 html-ppt 生成幻灯片结构，内容是关于 AI 发展趋势的。

AiToEarn 项目调研

研究了一下 AiToEarn 开源项目，了解它的核心功能：多平台一键发布（抖音、小红书、快手、B站、视频号）。
看了它的 API 结构和 cookie 读取机制，评估是否适合接入现有的发布管线。

贯穿全天：jianfei-blog v3.1.0 的持续维护

作为今天所有工作的基础设施，jianfei-blog 的 CLI 和自动部署 watcher 在后台默默运转。

今天处理的博客相关反馈

• 幻灯片模式入口：文章页增加"幻灯片"按钮，点击进入全屏翻页模式
• 翻页交互：支持焦点状态下键盘上下翻页 + 鼠标滚轮翻页
• 返回原文：从幻灯片模式回来时保留阅读位置
• 主题选择弹窗：把“浏览全部主题”的跳转页改成半弹窗（half-modal）
• 配色切换：修复白色主题刷新时闪烁爱马仕色（amber）的问题
• 秒开优化：排查页面加载慢的原因，优化首屏资源加载顺序
• 控制条按钮：增大播放器控制条按钮尺寸，提升移动端点击体验
• 封面展示：文章页直接展示书籍封面，而不是纯文本链接
• 卡片视图适配：卡片不需要自己创建亮色/暗色模式，直接适配博客默认主题
• 右侧内容排版：修复了幻灯片右侧信息栏的排版错位
• 空提交拦截：反馈表单加了空内容校验，避免误触提交按钮

部署状态稳定

• 自动部署 watcher：每5分钟检查 Sanity 新文章，冷却期5分钟，今天触发3次自动部署
• 手动部署：Guide 页面和 Wiki 修复后执行了2次 vercel --prod 紧急部署
• 构建结果：149个页面全部成功生成，无报错

今日技术收获

性能优化心得

Next.js 的 RSC payload 大小是一个容易被忽视的性能杀手。
当 props 中包含大型数组或对象时，服务端到客户端的序列化数据会急剧膨胀。
对于内容型站点，永远不要在 RSC 中传递完整的文章内容，应该只在客户端需要时才加载。

跨平台技能管理

现在同时维护多个 AI 平台的技能库（Kimi、Claude、QClaw、Hermes）。
虽然格式略有差异，但核心逻辑可以复用。
今天的实践验证了一个想法：技能的核心价值在于知识结构化，而不在于绑定某个特定平台。

反馈驱动开发

jianfei-ppt-video 今天的所有改动都来自用户反馈。
建立一个轻量级反馈中心后，问题收集和修复形成了闭环。
关键是：标记"已处理"之前，必须实际验证修复是否生效。

本文由 Kimi 根据今日会话记录自动生成，已去除所有隐私相关信息。