1. 震撼首发 ｜ 格物 · 蜡笔状态图 Skill，一句话，做一部会动的状态图

[!abstract] 速览

• 定位：开源（MIT）AI Skill，项目名 sweety-statechart-video。
• 产出：带旁白的蜡笔状态图短片，外加每章一张海报、封面与字幕文件。
• 默认 3:4（1080×1440）、2–3 分钟，比例与时长可指定。
• 旁白为四款纯合成音色，也可换成自己的录音。
• 已测平台：Codex、Claude Code、Grok Build、Grok Bot、Muse。

格物 · 蜡笔状态图（项目名 sweety-statechart-video）是一个开源的 AI Skill：

• 对你的 AI 助手说一句话，它就把一个流程、一门生意或一个系统，做成一部会动的蜡笔状态图短片：带旁白，每章再出一张海报；
• 默认 3:4、2–3 分钟，正好发小红书和抖音；
• 支持 Codex、Claude Code、Grok Build、Grok Bot、Muse；
• MIT 许可，免费使用。

名字里的“格”，是把一件事拆成一格一格的状态；“格物”取自“格物致知”，弄明白一件事是怎么回事。

[!note] 状态图
一件事会有若干个“格”，也就是状态；说明“现在在哪一格”“什么条件会让它跳到下一格”，就是一张状态图。格物把每一格画成一张卡片，格与格之间用箭头连起来。

上面这支 2 分 10 秒的介绍片，画面、动画、旁白和字幕全是格物自己做的。

1.1. 要点速览

1.2. 它能做什么？一句话，出一部片

你一定有过这种时候：想把一件事讲清楚，可它有好几步、好几种情况。写成一大段字没人看，画成流程图又太干。

格物把它变成一部会动的蜡笔画：

• 结构：这件事“现在在哪一格、什么情况会变”，一格一格地画出来；
• 动起来：小圆点沿着箭头跑，卡片一格一格蹦出来，周围的蜡笔小人、火苗、蒸汽一直在动；
• 声音：再配一段好听的旁白。

在你常用的 AI 助手里说一句就行，比如：

• “用 sweety-statechart-video，把泡一杯茶做成状态图短片”
• “把外卖从下单到送到的过程，做成 2 分钟的蜡笔状态图，用图纸哥的声音”
• “把一条消息从发出到已读讲清楚，9:16 竖屏，1 分钟”

剩下的它来做：

1. 把事情拆成一格一格的状态；
2. 写好每一步的字幕和旁白；
3. 给每一格配上会动的插画，自动排版；
4. 配音，渲染。

几分钟后，你拿到 MP4 成片、每章一张可以直接发图文的海报，和一份字幕文件。想改哪里，再说一句，它会重新拆、重新画、重新配。

1.3. 为什么好看？

• 每一步都在长：小圆点带着光晕出发，沿着箭头跑，线跟着长出来；箭头上的字像打字机一样一个个打出来；圆点到站，新卡片“啵”地蹦出来，变成粉色，再圈上一圈。
• 一直在动：每根线都在轻轻地抖，像一帧帧手绘的动画。插画跟着状态动：讲到后厨开火，灶上起火，厨师颠勺；讲到等电梯，楼层数一格格往上跳；讲到送到你手上，门打开，有人招手。
• 章章相连：每一章的出口箭头从海报底边伸出去，接进下一章的顶上，整部片读起来是一页长长的蜡笔画。

（0:06）

（0:06）

1.4. 旁白有版权问题吗？四个声音，也可以是你的

没有。四款都是纯合成音色，仅凭一段文字描述设计而成，没有用任何真人的声音作参考。

下面这段，是四个声音在介绍自己（有声音）：

• 换着用：同一部片里可以换声音，讲故事时每个角色一个声音。
• 用自己的声音：录 8–15 秒干净的说话声，写下逐字稿，加进去就能用。不会的话，主页 Articles 里有教程。

1.5. 能发小红书和抖音吗？比例和时长随你说

能。

• 比例：默认 3:4，正好铺满小红书。说一声“9:16”就是抖音竖屏，“16:9”就是横屏，1:1 也行，任何比例都可以。
• 时长：默认 2–3 分钟，适配大部分自媒体账号，比如小红书的 #AI玩家、抖音的 #vive知识大赏。想要 1 分钟或 5 分钟，直接告诉模型。

1.6. 支持哪些 AI 助手？

Codex、Claude Code、Grok Build、Grok Bot、Muse 都经过测试。针对不同平台做了一些兼容性调整，产出效果可能略有差异。后续计划支持 WorkBuddy 等平台。

1.7. 怎么安装和使用？

一行命令安装：

npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes

然后在 AI 助手里说一句话，比如“用 sweety-statechart-video，把泡一杯茶做成状态图短片。”

第一次用时，它会帮你装好渲染环境。

[!warning] 环境限制
配音走本地合成，需要 Apple Silicon 的 Mac；其他机器说一句“不要旁白”，只能做无声版。

1.8. 适合讲什么题目？

能说清“它现在在哪一格、什么事会让它变”的，都适合：

• 一单外卖、一个快递、一次挂号、一次报销审批；
• 一道菜、一门手艺、一天的作息；
• 一个 App 的登录、一条消息的旅程、一个 bug 是怎么出现的。

[!tip] 挑题标准
只看有没有“格”和“跳格条件”：有状态流转的流程都适合；纯观点、纯清单没有格子可走，换个形式更好。

1.9. 它是怎么做到的？

一带而过：

• 排版：每一格怎么排、箭头怎么拐、字放在哪，都是自动的；
• 插画：全部是代码现画的蜡笔画，没有用任何外来图片；
• 旁白：每一句配好后都会自动听写核对一遍，读错了就重配；
• 规则章：写一条“这件事不能发生”，它会自己找出让它发生的那条路，画成红线，再盖一个章。

1.10. 常见问题

1.10.1. 格物 · 蜡笔状态图是什么？

一个开源 AI Skill（项目名 sweety-statechart-video）。对 AI 助手说一句话，它就能把一个过程做成会动的蜡笔状态图短片，带旁白和每章一张海报。

1.10.2. 收费吗？

不收费，MIT 开源。生成时用的是你自己 AI 助手的额度；配音和渲染都在你的电脑上完成。

1.10.3. 支持哪些平台？

Codex、Claude Code、Grok Build、Grok Bot、Muse。后续计划支持 WorkBuddy 等。

1.10.4. 需要什么电脑？

• 出片：macOS 或 Linux，装好 Chrome（或 Chromium）和 ffmpeg；
• 配音：Apple Silicon 的 Mac。没有的话，可以做无声版。

1.10.5. 旁白有版权问题吗？

没有。四款旁白都是纯合成音色，没有用任何真人声音作参考。发布时按平台要求标注“AI 合成”即可。

1.10.6. 能用我自己的声音吗？

能。录 8–15 秒干净的说话声，写下逐字稿，加进去就能用。教程在主页 Articles 里。

1.10.7. 默认什么比例、多长？能改吗？

默认 3:4、2–3 分钟。比例和时长都能改，跟模型说一声就行。

1.10.8. 和普通流程图、PPT 动画有什么不一样？

它每一步都在动，有插画、有旁白，直接出成片和海报，不用再剪辑。

1.10.9. 灵感来自哪里？

Ann Nguyen 老师（@ann_nnng）的 the making of nhang。我们做了风格提取，画法和播放器是自己写的，不含原作的代码。

1.11. 致谢

• 灵感来自 Ann Nguyen 老师（@ann_nnng）的 the making of nhang，谢谢她。
• 规则章的想法来自 Kevin Ngo（@kevin_t_ngo）的奶茶店状态图，以及 Lauren Tan（poteto） 的 /statechart 技能。

开源地址：threerocks/sweety-statechart-video（MIT 许可），欢迎试用、提 issue。

1.12. 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 合成声音，特此说明。