_{发布短片，77 秒。每一帧画面、每一个声音，都是用 anidoodle 以代码制作的。}

anidoodle

手绘的艺术，用代码写成。

插画、绘画延时视频、影片、讲解视频和互动网页艺术，32 种风格任你挑选。
每一笔都是一个函数，每一个音符都是一次算术运算，于是同一份源码
在任何机器、任何尺寸下，都会重新画出同一张画，永远如此。

_{支持 Claude Code · Codex · Grok Build · 以及任何能读取技能的智能体。}

English · 日本語 · 简体中文 · 한국어 · Français · Español

风格 · 作画影片 · 音乐 · 你能做出什么 · 它自带了什么 · 动态效果 · 开始使用

` 元素，无需框架；也支持减少动态效果和键盘操作。给定导致当前状态的输入，每一帧都是确定的。 ## 用代码画出你的产品发布片 本页顶部的影片就是用 anidoodle 做的，做它的那套工具也一起附带。`launch.mjs new <名称>` 会给你一份待填写的规格：你的产品名、用户会输入的提示、对应的回答（一幅画出来的图、你自己产品的界面，或一段影片）、几个词和你的安装命令。它会踩着节拍剪出一支发布片：自己打字的聊天界面、像墨迹一样绽开的回答、整屏的手写字，以及一张把安装命令停留足够久、方便复制的结尾卡。 - **四种画幅，一条时间线：** 16:9、1:1、4:5 和 9:16，每种画幅都重新构图，文字在手机上也清晰可读。 - **把你的产品搬上屏幕：** 由数据画出的界面，元素从修改前的状态弹跳到修改后的状态。 - **声音来自画面：** 每一次按键、点击和落地都有自己的音效，出现在屏幕上发生的位置，下面是为这支片子作曲的配乐。 - **可以直接发布：** `launch.mjs ship <名称>` 渲染每种画幅，写出封面帧和字幕（.srt 与 .vtt），在交付的文件上检查音画同步和峰值电平，并让任何边缘切到文字的帧不通过。 两种外观（手绘墨迹，或为以界面为主的产品准备的简洁外观），30 或 60 fps，运动模糊按每一帧的速度调整。 这些规则来自我们自己发布片的四次剪辑，以及优秀发布片的手艺：五秒内说清它是什么，文字永远不压在画面上，在强拍上切换，把第一帧做成缩略图。 → [`launch-video.md`](skills/anidoodle/references/workflows/launch-video.md) · [工具包](skills/anidoodle/references/workflows/launch-video-kit.md) ## 带上你自己的图片 - **匹配画风。** 给它看一张你喜欢的画，它会研究笔触、边缘、配色和纸张，再用同样的画风创作新画。借用的是风格，不是原画。 - **重画照片。** 照片可以变成刮画、木刻或单线雕版：系统会测量明暗，以及毛发或布料的方向，每道可见笔触都由代码绘制。 - **保持角色一致。** 角色只需创建一次，不论镜头、姿势或从木刻到玩具积木的画风如何变化，始终是同一个角色。 ## 学着画画

观看带字幕的完整课程 (mp4, 95 秒)

问它怎么画一样东西，或者带来自己的画，anidoodle 就会把它重新拆成一堂课：分步图和带字幕的延时视频，每一步都说明该观察什么、怎样动笔，以及常见的错误。 ## 你能做出什么 | 用途 | 你能得到什么 | |---|---| | **官网** | 一张主视觉插画，每个功能点一张点缀小图，空状态和 404 页面，全部出自同一双手。同一份源码可以导出任意尺寸的透明 PNG，视网膜屏和印刷都不在话下。 | | **说明图和报告** | 原理图、剖视图和动态信息图，配上手绘风格的标注文字。严肃一点的话题，粉笔黑板、蓝图和圆珠笔风格都很合适。一个想法也能变成一台会运转、会自己拆开再装回去的机器，用任何风格来画。 | | **品牌** | 一个会自己画出来的 Logo，一段片头动画，一套每次发帖都保持品牌调性的社交卡片模板。 | | **社交和聊天** | 无限循环的动图、GIF，以及适配信息流尺寸的透明动态贴纸。 | | **幻灯片和文档** | 一个程序生成一整套章节插画。换个种子，就能得到风格相同的姊妹图。 | | **故事** | 分镜和动态预览，一步步长成一部任意时长、配有原创配乐的完整影片。 | | **你自己的图片** | 带来一张画，就能用它的风格画新主题；带来一张照片，就能用 32 种画风中的任意一种重新创作，每一笔都由代码绘制。 | | **网页** | 会追随光标、响应点击和表单，或随着页面滚动自行绘制的互动插画。还有放在标题旁的主视觉和小插图，贴合你页面的底色和品牌，浅色深色都行。 | | **学习** | 用分步图和延时视频教你一幅画如何完成，还会指出该看什么、常见错误有哪些。 | | **角色** | 一个角色只需构建一次，在不同镜头、姿势和风格中始终保持一致。 | | **你的发布** | 用模板为你的产品做一支发布片：你的提示、你的画面、你的文字和安装命令，配着音乐剪好。 | 用大白话说出你的需求就行，比如 *“给我们的招聘页面画一张孔版印刷风格的灯塔，1600×900”*，或者 *“用粉笔黑板风格画一张解释我们定价方案的说明图”*，anidoodle 会自动把它路由到合适的工作流和风格配方，只有在你没说清楚的地方才会追问。 ## 它自带了什么 引擎只是简单的那一半。真正的功夫，是 anidoodle 替你背下来的六条心得，每一条都是先画砸了一次才换来的经验，写下来是为了让你从上一个项目结束的地方接着开始： - **故事**，让每件作品都有一个重点。一张静态图只讲一个想法、聚焦一个主体；一部短片只有一次转变、一个高潮，和一个反复出现的意象。→ [`storytelling.md`](skills/anidoodle/references/storytelling.md) - **写实感**，来自把它说清楚。解剖结构、观察视角，以及你参考过的资料，都要交代明白，这样一只蝴蝶读起来才像是一个有身体、有翅脉的真实生物。→ [`realism-and-craft.md`](skills/anidoodle/references/realism-and-craft.md) - **风格**，活在笔触里。32 套完整配方，外加一份按场合挑风格的指南，以及自创风格的步骤。→ [`styles.md`](skills/anidoodle/references/styles.md) - **音乐**，依照某种曲风的词汇为每件作品作曲，再由代码合成：21 种曲风、完整的乐队和管弦乐团、所有大小调、每个段落各自的情绪，以及能适配任意时长的主题旋律。→ [`music/README.md`](skills/anidoodle/references/music/README.md) - **确定性**，是这套系统的承诺。纯函数加上带种子的随机数，任何人拿到源码都能重建出一模一样的作品。→ [`determinism-and-contract.md`](skills/anidoodle/references/determinism-and-contract.md) - **方法**，让你保持速度。先用一张静态图验证效果，再一路做到底，把审批环节留给那些出错代价高的地方。→ [`working-method.md`](skills/anidoodle/references/working-method.md) 每种格式都出自同一份源码：PNG、带配乐的 MP4、GIF、透明的 WebM 和动态 PNG，还有一个自包含的 HTML 文件。→ [`formats.md`](skills/anidoodle/references/formats.md) ## 先画，后动

每一笔都是真的画出来的，顺序和手绘时一模一样。	蓝图在水彩中苏醒，振翅飞向自己的草地。

**▶ 完整的 47 秒短片**，记得开声音。1080×1080，配有原创配乐，每一帧、每一个音频采样都是代码生成的： https://github.com/user-attachments/assets/019d46d3-536a-4843-9f68-8e8f5f5c3401 一个纯函数负责画出每一帧，所以一张成品插画，就是这个函数被调用了一次；一枚贴纸，是同一个函数循环调用；一部短片，则是这个函数配上一个故事和一段配乐。三者背后，是同一套保证。 ## 画一次，管一辈子 图像模型每渲染一帧都要烧掉 token 和算力，而且每次画出来的都不一样。代码只花这份钱一次。这部 47 秒的短片就是一个程序：写一次，就能在任何机器、任何尺寸下渲染出全部 1,410 帧画面和一整段立体声配乐，而且每次运行都是免费的。折算下来，第一遍大约每帧只花六十个 token 的代码量，之后每一遍都是零成本。一张静态插画不过几百行代码，一整个系列的图像，也不过是一份种子列表。 ## 开始使用 **Claude Code:** ```bash /plugin marketplace add alexgreensh/anidoodle /plugin install anidoodle@alexgreensh-anidoodle ``` **Codex:** ```bash codex plugin marketplace add alexgreensh/anidoodle ``` 然后在 Codex 的 TUI 中输入 `/plugins`，安装 anidoodle。 **Grok Build：** ```bash grok plugin marketplace add alexgreensh/anidoodle grok plugin install anidoodle --trust ``` `--trust` 用于确认安装；不加它，Grok 会列出插件可以运行的内容，然后停下。也可以在 `/plugins` 的 Marketplace 标签页里安装。 **其他智能体：** anidoodle 是标准的 skill 文件夹（`skills/anidoodle/SKILL.md`），可以复制到任何能读取 skill 的运行环境。 然后直接说出你想要什么就行，比如 *“给我们的菜谱页面画一个铅笔加水彩风格的梨”*。如果你想亲自操作引擎： ```bash node /engine/tools/scaffold.mjs ~/art --still hero --film intro --format 9x16 --duration 60 cd ~/art && npm install && npx playwright-core install chromium node tools/still.mjs hero --out out/hero.png --scale 2 # a finished illustration, print size node tools/render.mjs intro --out out/intro.gif # a loop; also .mp4 with score, .webm with alpha node tools/emit.mjs intro --out out/intro.html # the whole piece as one offline file node tools/gate.mjs hero # determinism, contract and dead air in one pass node tools/verify-export.mjs intro --file out/intro.mp4 # the file you ship, decoded and checked node tools/music.mjs check score.ts#myScore # your score: key, loudness, balance, novelty node tools/launch.mjs new myLaunch # a launch film spec; then: launch.mjs ship myLaunch ``` 需要 Node 20 及以上版本。静态图只需要上面那个浏览器；只要涉及动态效果，就还会用到 `ffmpeg`。 `emit` 会输出一个大约 100 KB 的 HTML 文件，双击就能离线播放，声音也在里面。它带着完整的配方，每次打开都会从头重新画一遍。把它作为邮件附件发出去，你就等于交付了一整个工作室。 四个后端共用同一个绘图核心，而这个核心压根不在乎是谁在画：`playwright`、`html-player`、`remotion`、`hyperframes`。 ## 示例短片 `skills/anidoodle/example/` 目录里放着**机械鳞翅目**（Mechanical Lepidoptera）：1,410 帧，47 秒，一只机械蝴蝶自己画出自己的图纸，在水彩中苏醒过来，又把蓝图留在了草丛里。这一部作品，就是整个引擎的缩影：控制点是按照真实解剖结构手工摆放的，缓存键记录了每个像素依赖的每一个输入，配乐专为它创作，从画成到活过来，是一气呵成的一个动作。风格样图和引擎放在一起，都在 `skills/anidoodle/engine/src/canvas-core/` 里，每一张的顶部都写着自己的配方。随便打开一个，改一个数字，看看会发生什么变化。 ## 诚实是设计出来的 声音和动态效果，靠的是拿实打实的证据说话。每一句关于配乐或动作的描述，背后都有一次测量或一双人眼验证过，绿色对勾也只有在重新跑过之后才算数。正是这份较真，让同一件作品无论在哪台机器上、跑多少次，都能分毫不差地重现。 --- 基于 [Apache License 2.0](LICENSE) 协议开源。版权所有 2026 Alex Greenshpun。 _{由 anidoodle 绘制，它的全部本事，都是老老实实画了几遍蝴蝶换来的。}