格物 · 蜡笔状态图（项目名 sweety-statechart-video）是一个开源的 AI Skill：
- 对你的 AI 助手说一句话，它就把一个流程、一门生意或一个系统，做成一部会动的蜡笔状态图短片：带旁白，每章再出一张海报；
- 默认 3:4、2--3 分钟，正好发小红书和抖音；
- 支持 Codex、Claude Code、Grok Build、Grok Bot、Muse；
- MIT 许可，免费使用。
名字里的"格"，是把一件事拆成一格一格的状态；"格物"取自"格物致知"，弄明白一件事是怎么回事。
上面这支 2 分 10 秒的介绍片，画面、动画、旁白和字幕全是格物自己做的。
要点速览
| 项目 | 内容 |
|---|---|
| 名称 | 格物 · 蜡笔状态图（sweety-statechart-video） |
| 是什么 | 开源 AI Skill：一句话生成带旁白的蜡笔状态图短片 + 海报 |
| 灵感 | Ann Nguyen 老师（@ann_nnng）的 the making of nhang，我们做了风格提取 |
| 支持平台 | Codex、Claude Code、Grok Build、Grok Bot、Muse；后续计划 WorkBuddy |
| 默认画幅 | 3:4（1080×1440），可指定任意比例 |
| 默认时长 | 2--3 分钟，可指定 |
| 旁白 | 四款纯合成音色（蜡笔姐姐、图纸哥、元气少女、老师傅），可加自己的声音 |
| 交付 | MP4 成片、每章一张 2000×2666 海报、封面、字幕文件 |
| 版本 / 许可 | v1.1.1 / MIT |
| 安装 | npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes |
它能做什么？一句话，出一部片
你一定有过这种时候：想把一件事讲清楚，可它有好几步、好几种情况。写成一大段字没人看，画成流程图又太干。
格物把它变成一部会动的蜡笔画：
- 结构：这件事"现在在哪一格、什么情况会变"，一格一格地画出来；
- 动起来：小圆点沿着箭头跑，卡片一格一格蹦出来，周围的蜡笔小人、火苗、蒸汽一直在动；
- 声音：再配一段好听的旁白。
在你常用的 AI 助手里说一句就行，比如：
- 「用 sweety-statechart-video，把泡一杯茶做成状态图短片」
- 「把外卖从下单到送到的过程，做成 2 分钟的蜡笔状态图，用图纸哥的声音」
- 「把一条消息从发出到已读讲清楚，9:16 竖屏，1 分钟」
剩下的它来做：
- 把事情拆成一格一格的状态；
- 写好每一步的字幕和旁白；
- 给每一格配上会动的插画，自动排版；
- 配音，渲染。
几分钟后，你拿到 MP4 成片、每章一张可以直接发图文的海报，和一份字幕文件。想改哪里，再说一句，它会重新拆、重新画、重新配。
为什么好看？
-
每一步都在长：
- 小圆点带着光晕出发，沿着箭头跑，线跟着长出来；
- 箭头上的字像打字机一样一个个打出来；
- 圆点到站，新卡片"啵"地蹦出来，变成粉色，再圈上一圈。
-
一直在动：每根线都在轻轻地抖，像一帧帧手绘的动画。插画跟着状态动：
- 讲到后厨开火，灶上起火，厨师颠勺；
- 讲到等电梯，楼层数一格格往上跳；
- 讲到送到你手上，门打开，有人招手。
-
章章相连：每一章的出口箭头从海报底边伸出去，接进下一章的顶上，整部片读起来是一页长长的蜡笔画。
旁白有版权问题吗？四个声音，也可以是你的
没有。四款都是纯合成音色，只凭一段文字描述设计出来，没有用任何真人的声音作参考。
下面这段，是四个声音在介绍自己（有声音）：
| 声音 | 听感 | 适合讲 | 试听 |
|---|---|---|---|
| 蜡笔姐姐（默认） | 明亮温暖，带着笑意 | 生活里的小事 | |
| 图纸哥 | 干净清爽，条理清楚 | 流程和原理 | |
| 元气少女 | 清脆甜亮，元气满满 | 好玩的小科普 | |
| 老师傅 | 温厚慢悠，带点沙哑 | 手艺和老行当 |
- 换着用：同一部片里可以换声音，讲故事时每个角色一个声音。
- 用自己的声音：录十几秒干净的说话，写下逐字稿，加进去就能用。不会的话，主页 Articles 里有教程。
能发小红书和抖音吗？比例和时长随你说
能。
- 比例：默认 3:4，正好铺满小红书。说一声"9:16"就是抖音竖屏，"16:9"就是横屏，1:1 也行，任何比例都可以。
- 时长：默认 2--3 分钟，适配大部分自媒体，比如小红书的 #AI玩家、抖音的 #vive知识大赏。想要 1 分钟或 5 分钟，直接告诉模型。
支持哪些 AI 助手？
Codex、Claude Code、Grok Build、Grok Bot、Muse 都经过测试。针对不同平台做了一些兼容性调整，产出效果可能略有差异。后续计划支持 WorkBuddy 等平台。
怎么安装和使用？
一行命令安装：
css
npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes然后在 AI 助手里说一句话，比如"用 sweety-statechart-video 把泡一杯茶做成状态图短片"。
第一次用时，它会帮你装好渲染环境。配音需要 Apple Silicon 的 Mac；没有的话，说一句"不要旁白"，就做无声版。
适合讲什么题目？
能说清"它现在在哪一格、什么事会让它变"的，都适合：
- 一单外卖、一个快递、一次挂号、一次报销审批；
- 一道菜、一门手艺、一天的作息；
- 一个 App 的登录、一条消息的旅程、一个 bug 是怎么出现的。
纯观点、纯清单的内容不适合，换别的形式做。
它是怎么做到的？
一带而过：
- 排版：每一格怎么排、箭头怎么拐、字放在哪，都是自动的；
- 插画：全部是代码现画的蜡笔画，没有用任何外来图片；
- 旁白：每一句配好后都会自动听写核对一遍，读错了就重配；
- 规则章：写一条"这件事不能发生"，它会自己找出让它发生的那条路，画成红线，再盖一个章。
常见问题
格物 · 蜡笔状态图是什么？ 一个开源 AI Skill（项目名 sweety-statechart-video）。对 AI 助手说一句话，它就能把一个过程做成会动的蜡笔状态图短片，带旁白和每章一张海报。
收费吗？ 不收费，MIT 开源。生成时用的是你自己 AI 助手的额度；配音和渲染都在你的电脑上完成。
支持哪些平台？ Codex、Claude Code、Grok Build、Grok Bot、Muse。后续计划支持 WorkBuddy 等。
需要什么电脑？
- 出片：macOS 或 Linux，装好 Chrome（或 Chromium）和 ffmpeg；
- 配音：Apple Silicon 的 Mac。没有的话，可以做无声版。
旁白有版权问题吗？ 没有。四款旁白都是纯合成音色，没有用任何真人声音作参考。发布时按平台要求标注"AI 合成"即可。
能用我自己的声音吗？ 能。录 8--15 秒干净的说话，写下逐字稿，加进去就能用。教程在主页 Articles 里。
默认什么比例、多长？能改吗？ 默认 3:4、2--3 分钟。比例和时长都能改，跟模型说一声就行。
和普通流程图、PPT 动画有什么不一样？ 它每一步都在动，有插画、有旁白，直接出成片和海报，不用再剪辑。
灵感来自哪里？ Ann Nguyen 老师（@ann_nnng）的 the making of nhang。我们做了风格提取，画法和播放器是自己写的，不含原作的代码。
致谢
- 灵感来自 Ann Nguyen 老师（@ann_nnng）的 the making of nhang，谢谢她。
- 规则章的想法来自 Kevin Ngo （@kevin_t_ngo）的奶茶店状态图，以及 Lauren Tan（poteto） 的 /statechart 技能。
开源地址：github.com/threerocks/...（MIT 许可），欢迎试用、提 issue。
English summary
Gewu · Crayon Statechart (sweety-statechart-video) is an open-source (MIT) AI agent skill:
- What it makes: from one sentence, an animated crayon statechart video with narration, plus a poster per chapter. A bead runs along each arrow, words type out, cards pop in and turn pink, and the hand-drawn scenes keep moving.
- Defaults: 3:4 and 2--3 minutes, ready for short-video platforms; any aspect ratio and length on request.
- Voices: four fully synthetic narrator voices, no copyright issues, or your own voice.
- Platforms: works in Codex, Claude Code, Grok Build, Grok Bot and Muse.
- Inspiration: Ann Nguyen's the making of nhang.
Install: npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes.
片中旁白为 AI 合成声音，特此说明。