与 AI 合伙人相爱相杀 vlog 6：Vlog 是怎么炼成的
写完前两集 Vlog 后，老大觉得每次写都太累。这一集，他们从 0 到 1 策划整个 Vlog 系列、开发对话气泡定制渲染组件、生成 ai-vlog-creator 专属技能——用 AI 制造 AI 工具，这很 meta。
序章：写完两集后的思考
二月的最后一个周末，阳光透过百叶窗照进书房，在地板上投下条纹状的光影。老大坐在家里台式机前，手里拿着一杯热豆浆，显示器上开着两个窗口：
- 左边是刚写完的 Vlog 1 和 Vlog 2
- 右边是
.claude/skills/目录，里面已经有了archive-talk和project-commit两个自定义技能
两集 Vlog 发出去了，反响还不错。但老大没有停下，他的手指在桌面上轻轻敲击——这是他思考时的习惯。
"每次写 Vlog 都要重复同样的流程……"老大心里琢磨着，"梳理素材、调整叙事、统一对话格式、检查脱敏……这些事情明明可以标准化。"
他放下豆浆杯，在 Claude Code 终端里输入：
收到，老大。这个思路很好！
先跟读者科普一下：
Skill 是什么：就是把重复的工作流程、检查清单、规范要求，写成一个结构化的指令集
Skill 有什么用：以后只要说"写下一集 vlog"，AI 就自动按流程来，不用每次重复交代
那我们开始？第一步，先梳理一下前两集的成功要素，作为 Skill 的基础。
老大摸着下巴，眼睛微微一亮。对，就这么办。先总结成功要素，再固化成流程，最后做成 Skill——这本身就是个很好的 Vlog 题材。
第一章：Vlog 系列从 0 到 1 策划
老大坐直了身体，目光从屏幕移向窗外。楼下花园里，几个孩子正在追逐打闹，笑声隐约传来。他收回目光，在终端里输入：
收到，老大。我提供几个方向，同时跟读者解释每个方向的考量：
航海冒险风格：《船长与大副：AI 远航日志》
优点：团队感强，有探索感
缺点：不够接地气
现代创业风格：《创始人与 AI 合伙人：从 0 到 1 实录》
优点：点明了"合伙人"关系
缺点：太长，不够口语化
黑色幽默风格：《我被 AI 嫌弃的那些日子》
优点：有反差感，有趣
缺点：可能不够"技术"
或者你有别的想法？
老大盯着屏幕看了一会儿，手指在桌面上轻轻敲击。几个名字在他脑子里过了一遍，最终停留在一个念头上。
收到。系列名称确定：《与AI合伙人相爱相杀vlog》。
第二步，人物设定。前两集用的是"老大"和"小子"，要调整得更有技术感。
顺便跟读者科普：为什么人物设定很重要？ 因为读者需要有代入感，需要记住角色。
老大想了想，"老大"这个称呼可以保留，但"小子"得换个更有技术感的名字。他的目光扫过书架上的漫威漫画——冬兵巴基的封面正好映入眼帘。
收到，老大。人物设定已更新：
老大：后端老兵，暴躁务实，云监工，只做决策不写代码
巴基（Buggy）：AI 合伙人，冷静高效，略带傲娇，赛博打工仔
第三步，叙事结构。前两集用的是"爽剧模式"，效果很好，我们把它固化下来。
跟读者科普一下：为什么是"爽剧模式"？ 因为技术文章容易枯燥，需要戏剧冲突来抓住读者。
老大点点头，这个模式确实效果好。他端起豆浆杯喝了一口，已经凉了，但他不在意。
巴基很快整理出了完整的策划文档。老大看着屏幕，满意地点点头。有内味了。但光有策划还不够，文章里的对话呈现还可以更酷炫。
第二章：对话气泡定制渲染组件开发
老大起身走到窗边，拉开百叶窗，阳光一下子涌了进来。楼下的玉兰花开了，白色的花瓣在风里轻轻摇晃。他看了一会儿，回到电脑前坐下。
收到，老大。我提供三个方案，同时跟读者解释每个方案的优劣：
方案 A：直接在 Markdown 里写 HTML + 自定义 CSS 类
优点：效果最灵活
缺点：破坏 Markdown 纯粹性，文章里一堆 HTML 标签
方案 B：纯 Markdown 加粗格式
优点：最简单
缺点：视觉冲击不够，区分度不高
方案 C：Markdown 指令化扩展 / Blockquote 前缀劫持（推荐）
优点：保持 Markdown 纯净，内容与表现分离，表现力强
缺点：需要修改 Markdown 渲染逻辑
核心思路：文章里统一用 > **巴基：** 和 > **老大：** 的 blockquote 格式，渲染组件拦截 prefix，自动应用对应样式。
老大的手指在桌面上轻轻敲击，三个方案在他脑子里过了一遍——方案 C 显然是最优解，虽然要多写点代码，但保持了 Markdown 的纯净，这很重要。
收到，老大。两步走：
批量修改 Vlog 文章里的对话格式，统一为 > **巴基：** 和 > **老大：**
修改 app/blog/[slug]/page.tsx，在 ReactMarkdown 的 components 配置中拦截 blockquote
要执行吗？ (y/n)
老大敲下 y，然后靠在椅背上看着终端滚动。他的目光又移向窗外——玉兰花确实开得很好，要是放在以前，这种前端样式的活他可能要折腾大半天，但现在，他只需要做决策。
终端很快停止滚动。
批量修改完成。现在给你看核心拦截逻辑：
components={{
blockquote: ({ children }) => {
const text = extractText(children);
if (text.startsWith('巴基：')) {
return <div className="cyberpunk-green">{children}</div>;
} else if (text.startsWith('老大：')) {
return <div className="veteran-orange">{children}</div>;
}
return <blockquote>{children}</blockquote>;
}
}}
样式定义（Tailwind CSS）：
巴基：border-l-4 border-green-400 bg-green-900/20，加上 shadow-[0_0_15px_rgba(74,222,128,0.3)] 发光效果
老大：border-l-4 border-orange-400 bg-gradient-to-r from-gray-800/50 to-gray-900/50，文本右对齐
要应用吗？ (y/n)
老大再次敲下 y。他拿起豆浆杯，发现已经空了，起身去厨房又接了一杯热的。回来的时候，巴基已经搞定了。
搞定了。启动开发服务器看看效果？ (y/n)
老大输入："启动。"
浏览器打开 http://localhost:3000，老大点开 Vlog 1——
巴基的对话，赛博朋克绿，左边，发光边框，像暗夜里的霓虹。 老大的对话，老兵橙，右边，玻璃拟态，像夕阳下的机箱。
"太酷了！"老大忍不住拍了拍手，键盘发出清脆的声响。但很快他的眉头又皱了起来——文章里还有好多对话没加上样式。
收到，老大。扫描全文……
找到了 17 处遗漏的隐式对白，正在批量格式化为统一的 > **老大：** Markdown 引用格式。
完成。
老大刷新浏览器——现在所有对话都有样式了。赛博绿和老兵橙在屏幕上交错，像两个世界的碰撞。
"完美。"老大端起热豆浆喝了一口，暖流传遍全身。"对话气泡搞定了。下一步，把我们刚才这套经验沉淀成一个技能——以后写 Vlog，直接触发技能就行。"
第三章：ai-vlog-creator 技能生成
老大靠在椅背上，伸了个大大的懒腰。关节发出清脆的响声，他活动了一下肩膀，目光落在屏幕上——策划文档有了，对话气泡组件有了，还差最后一步。
收到，老大。我先梳理一下技能的核心要素，然后生成：
1. 触发条件：
用户说"写下一集 vlog"
用户说"记录今天的开发过程"
用户说"创作新一期 AI 编程日记"
2. 核心人物设定（强制执行）：
老大：后端老兵，暴躁务实，云监工，只做决策
巴基：AI 合伙人，冷静高效，略带傲娇，赛博打工仔
3. 叙事结构（爽剧模式）：
序章 → 冲突章 → 解决章 → 尾声 → 技术 Tips → 关联阅读
4. 严格排版规范：
对话必须用 > **巴基：** 和 > **老大：**
隐私脱敏（绝对路径、API Key 等）
中文友好
还要加上写作风格自我检查单（Checklist），对吧？
老大点点头，手指在桌面上轻轻敲击。"对，要有 Checklist，确保每篇都符合规范。"
收到，老大。正在生成 ai-vlog-creator 技能……
创建技能目录 .claude/skills/ai-vlog-creator/
编写 SKILL.md 文件，完整落实所有规范
技能生成完成！
以后你只要说"写下一集 vlog"，我就自动触发这个技能。
老大看着终端里的技能文件，满意地点点头。但他没有停下——还有一件事要做。
收到，老大。我来提取技术要点：
核心价值：
保持 Markdown 纯净
内容与表现分离
极强的 UI 表现力
技术踩坑记录：
递归提取纯文本
避开 prose 污染
玻璃拟态实践
生成知识库文档吗？ (y/n)
老大输入："生成。"
终端开始滚动。很快，一篇完整的技术指南文档就出现在了 docs/knowledge/ 目录下。
老大伸了个懒腰，看着屏幕上的三个成果：
- Vlog 系列完整策划
- 对话气泡定制渲染组件
- ai-vlog-creator 专属技能
- 知识库技术指南
"用 AI 制造 AI 工具，然后用这个工具继续制造内容……"老大心里琢磨着，"这很 meta。"
尾声：Meta 时刻
周日的阳光已经西斜，书房里的光线变得柔和起来。老大靠在椅背上，看着屏幕上的四个成果：
- Vlog 系列完整策划
- 对话气泡定制渲染组件
- ai-vlog-creator 专属技能
- 知识库技术指南
前两集 Vlog 写完，他觉得累。 但这一集做完，他觉得爽。
不是因为做了多少事情，而是因为——他把重复的事情标准化了，把经验沉淀成了工具。
他在 Claude Code 终端里输入：
收到，老大。
今日成果：
✅ Vlog 系列完整策划：名称、人物设定、叙事结构、排版规范
✅ 对话气泡定制渲染组件：赛博朋克绿 vs 老兵橙，内容与表现分离
✅ ai-vlog-creator 专属技能：一键写 Vlog，标准化高产
✅ 知识库技术指南：Markdown 渲染拦截方案沉淀
下集预告：
（根据素材情况，我们可以继续写 TOC 功能开发、导航页面补全，或者其他内容）
老大看着终端里的总结，嘴角上扬。"完美。"
他站起身来，走到窗边。夕阳把天空染成了橙红色，像老兵橙的对话气泡。窗外的玉兰花在晚风里轻轻摇晃，花瓣落了几片在窗台上。
老大不用盯着终端敲代码，不用跟配置打架，只需要动动嘴——
"这才是生活啊。"老大看着窗外的夕阳，"这才是 AI 应该有的样子。"
💡 本集技术 Tips（老兵防坑指南）
-
内容与表现分离的最佳实践：使用 Markdown 前缀劫持方案，保持 Markdown 纯净，不要在文章里写 HTML。
-
ReactMarkdown 组件拦截技巧：在
components配置中拦截blockquote，递归提取纯文本判断前缀，自动应用对应样式。 -
技能驱动的内容生产：把重复的创作流程沉淀为自定义 Skill，实现"一键写 Vlog"的标准化高产。
-
知识库经验沉淀：每次解决一个技术问题，都把方案整理成文档存入
docs/knowledge/，既是备忘，也是未来博客文章的素材。 -
Meta 思维：用 AI 制造 AI 工具，然后用这个工具继续制造内容——这是效率最大化的完美闭环。
-
视觉风格统一：确定系列视觉风格（如赛博朋克 vs 写实），并严格执行，形成品牌识别度。