格物 · 蜡笔状态图（项目名 sweety-statechart-video）是一个开源的 AI Skill：
- 对你的 AI 助手说一句话，它就把一个流程、一门生意或一个系统，做成一部会动的蜡笔状态图短片：带旁白，每章再出一张海报；
- 默认 3:4、2–3 分钟，正好发小红书和抖音；
- 支持 Codex、Claude Code、Grok Build、Grok Bot、Muse；
- MIT 许可，免费使用。
名字里的“格”，是把一件事拆成一格一格的状态；“格物”取自“格物致知”，弄明白一件事是怎么回事。
上面这支 2 分 10 秒的介绍片，画面、动画、旁白和字幕全是格物自己做的。
要点速览
它能做什么？一句话，出一部片
你一定有过这种时候：想把一件事讲清楚，可它有好几步、好几种情况。写成一大段字没人看，画成流程图又太干。
格物把它变成一部会动的蜡笔画：
- 结构：这件事“现在在哪一格、什么情况会变”，一格一格地画出来；
- 动起来：小圆点沿着箭头跑，卡片一格一格蹦出来，周围的蜡笔小人、火苗、蒸汽一直在动；
- 声音：再配一段好听的旁白。
在你常用的 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 等平台。
怎么安装和使用？
一行命令安装：
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 合成声音，特此说明。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
• Crayons (project name Sweety-statechart-video) is an open source AI Skill:
- Say one word to your AI assistant, it makes a process, a business, or a system, a moving crayon-state image: with a confidant, a poster for each chapter;
- Default 3:4, 2–3 minutes, corresponding to REDnote and Douyin;
- Support for Codex, Claude Code, Grok Build, Grok Bot, Muse;
- MIT license, free of charge.
The word “gang” in the name is to break one thing into a single state; the word “gang” is taken from “gone to know” to figure out what is going on.
This 2-minute, 10-second presentation, images, animations, bystanders, and subtitle are all made by the grid itself.
Point Snippet
What can it do? One word, one film.
You must have had a time when you wanted to make one thing clear, but it had several steps and several situations. It's too dry to be a flow chart.
It was turned into a moving crayon painting:
- Structure: this is “what is going to change and what is going to change” and it is done in one frame;
- Moved: small dots running along arrows, cards popping out in one cell, with crayons, fire and steam moving around;
- Sound: And a good whisper.
Just say it in your usual AI assistant, like:
- "Sweety-statechart-video, make a short picture of a cup of tea."
- "The process of taking delivery from the order to the delivery, making a two-minute crayon chart, with the sound of the drawing brother."
- "From dispatch to read, 9:16 vertical, 1 minute."
The rest of it does:
- Breaking things down to one level;
- Write every step of subtitle and bystanders;
- A moving illustration of each cell, automatically printed;
- voiceover, rendering.
A few minutes later, you get MP4 in a piece, a poster in each chapter that can send a text directly, and a subtitle file. Where it wants to be changed, and again, it'll be dismantled, redrawn and recomposed.
Why do you look good?
- Every step is long:
- Small dots go with light, run along arrows, and the line grows;
- Words on arrows are typed like typewriters;
- The dot to the station, the new card pops out, turns pink, and circles again.
- Always moving: every line is shaking gently, like a hand-drawn animation. The illustration follows the state:
- Speaking of post-cooking fire, fire on the stove, and chefs;
- With regard to waiting elevators, the number of rooms on the floor is up;
- Speaking of getting to you, open the door, somebody waved.
- The chapter is linked: the exit arrow for each chapter is reached from the bottom of the poster, and it is attached to the top of the next chapter, which is read as a long page of crayons.
Is there a copyright problem? Four voices, maybe yours.
Nothing. All four paragraphs are pure synthetic voice and are designed with a single text description without reference to any real person ' s voice.
Here's four voices introducing themselves:
- In exchange: a voice can be changed in the same film, a voice for each character.
- Use your own voice: make a clean speech for a few seconds, write down the script and add it. No, there's a tutorial on the home page Articles.
Can you send REDnote and Douyin? The scale and the time.
Yes.
- Ratio: Default 3:4, right over REDnote. Say "9:16" is the Douyin vertical screen, and "16:9" is the screen, too, 1:1, any ratio.
- Length: Default 2-3 minutes, mostly for the media, such as REDnote #AI player, Douyin #vive knowledge reward. Wants a minute or five minutes to tell the model.
Which AI assistants are supported?
Codex, Claude Code, Grok Build, Grok Bot, Muse have all been tested. Compatibility adjustments have been made for different platforms, and output effects may vary slightly. Follow-up plans support platforms such as WorkBuddy.
How is it installed and used?
Installation of a single line of command:
npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes
Then I said to an AI assistant, like, "With a sweety-statechart-video, make a short picture of the state of a cup of tea."
When it's first used, it'll help you refill the environment. voiceover needs Apple Silicon's Mac; if not, say “no verbs”, make a silent version.
What's the topic?
It's all right to say, "What is it at?"
- One take-out, one delivery, one registration, one reimbursement approval;
- One dish, one trade, one day's work;
- An App's login, a message's trip, a bug's show.
The content of the pure view, the pure list, is not appropriate, in a different form.
How did it do that?
Across:
- Layout: each of the cells is arranged, the arrows are turned, the word is placed, and it is automatic;
- Artefacts: all of them are crayons with the current code, without any external pictures;
- Narrator: each line is automatically checked and rewritten when read wrong;
- Ruler: Write "This cannot happen" and it will find itself the path that makes it happen, draw it into red lines and stamp it.
Common problems
What's the crayon chart? An open source AI Skyll (project name Sweety-statechart-video). One word for AI's assistant, it can make a process into a moving crayon profile, with a confidant and a poster for each chapter.
No charges, MIT open source. The generation was done on your computer with your own AI assistant's quota; voiceover and rendering.
What platforms are supported? Follow-up program supports WorkBuddy etc.
What computer do you need?
- Output: MacOS or Linux, loaded with Chrome (or Chromium) and ffmpeg;
- voiceover: Apple Silicon's Mac. If not, do a silent version.
Is there a copyright problem? The four bywords were pure synthetic voice, without reference to any real voice. publish is sufficient to mark "AI synthesis" as required by the platform.
Can I use my own voice? Record 8-15 seconds of clean speech, write down the script, add it in. The tutorial is on the home page Articles.
Default on what scale, how long? Can you change it? Default 3:4, 2-3 minutes. The scale and duration can be changed, just tell the model.
What's the difference between normal flow charts and PPT animations? It moves at every step, with illustrations and narrations, directly into films and posters, without editing.
Ann Nguyen's teacher's making the bang. We did the style extraction, the drawings and the player were written by ourselves, not the original code.
Acknowledgement
- The making of Nanang from Ann Nguyen. Thank you.
- The idea of a rule book comes from Kevin Ngo (@kevin t ngo) milk and tea shop status maps, and Lauren Tan (poto)/statechart skills.
Open source address: Github.com/therelocks/... (MIT permission), welcome to trial, to 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.
This is illustrated by the fact that the adverb is an AI synthesis sound.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.