Communitygithub.com

maverickmaltin/minimal-graphics

用简单的形状、移动的圆点和干净的动画解释任何想法,输出 1080x1920 的 MP4 文件。适用于 /minimal-graphics 配合一个想法或问题,或任何需要极简解释动画的请求。

minimal-graphics 是什么?

这是一个用于生成极简解释动画的 AI 助手技能,它能够将用户的抽象概念(如“想法如何传播”、“水循环”、“注意力流向”)转化为 5-7 秒的无声 MP4 动画。该技能支持多种视觉模式(传播、流程、循环、汇聚、对比),每种模式适用于特定类型的概念表达。用户只需提供一个想法或问题,AI 便会自动选择最合适的动画模式,编写 JSON 规范文件,渲染关键帧以供检查,最后生成完整的动画视频。该技能特别适合需要快速、直观地传达复杂概念的场景,如教育、演示或社交媒体内容制作。它可以在本地开发环境(如 Claude Code)中运行,依赖 Python、Playwright 和 ffmpeg 等工具。如果无法使用浏览器渲染,技能还支持生成 HTML 页面作为备选方案。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/maverickmaltin/claude-animate-skills/tree/HEAD/skills/minimal-graphics

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

/minimal-graphics:用形状和移动的圆点解释一个想法

用户提供一个想法(如“想法如何像病毒般传播”、“法案如何成为法律”、“水循环”、“你的注意力去哪里了”)。你选择最能展示它的运动模式,编写一个小规范,检查一帧画面,渲染视频,然后交出一个无声 MP4 文件(5-7 秒)。

${CLAUDE_SKILL_DIR} 以下是此技能的文件夹(即此 SKILL.md 所在的文件夹)。如果你的环境没有填充它,请使用该文件夹的路径。将所有内容保存到用户当前文件夹或他们指定的文件夹中。

0. 设置检查

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check

这需要几秒钟;如果你不确定这台电脑是否已设置好,请运行它。"ready": true 表示可以继续。否则,运行它列在 "fix" 下的命令,并告诉用户这是一次性安装:python3 -m pip install playwright(浏览器驱动),python3 -m playwright install chromium(仅当未安装 Google Chrome 或 Edge 时,约 150 MB),以及 python3 -m pip install imageio-ffmpeg(仅当缺少 ffmpeg 时)。如果 pip 拒绝并提示“外部管理环境”,请创建一次私有环境,并对其 Python 使用所有命令: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg,然后根据需要 ~/.animate-skills/bin/python -m playwright install chromium。在 Windows 上,使用 py 代替 python3。 此处无法使用浏览器(例如 Claude 应用的沙箱)?请参阅此文件末尾。

1. 选择模式

模式展示内容适用于字段
spread一个圆点到达 2-4 个其他圆点,每个圆点再到达更多,一圈一圈扩散病毒式传播的想法、口碑、连锁反应、推荐、会翻倍的事物branches(2-4,默认 3),depth(2-5,默认 4),sequence(可选,每圈的简短标签,例如 ["1","3","9","27","81"] 或 ["$1k","$2k","$4k"],当每圈亮起时显示在标题下方的行中;每个标签几个字符)
flow按顺序编号的形状,一个圆点从每个形状移动到下一个,然后形成稳定的流动某物如何工作、一个流程、一条管道、一个配方steps:2-6 个简短标签;shapes(形状是装饰:["circle"] 使它们都是圆形)
cycle循环中的步骤,带有一个持续环绕的圆点水循环、习惯循环、反馈回路、季节、睡眠周期steps:3-6 个简短标签;center:中间的一个词
converge许多圆点流入一个逐渐增大的圆圈(或 "direction": "out":一个圆圈将圆点发送到多个方向)你的注意力、时间或金钱流向何处;多个输入汇聚成一个结果sources:2-6 个标签(可选);weights:每个获得的圆点数量;center:圆圈中的词;count:圆点数量(默认约 40)
compare并排显示两个或三个数量,以圆点(每个单位一个)或按比例大小的圆圈表示“X 对比 Y”的数量:糖、成本、时间、卡路里groups:[{"label": "...", "value": n, "unit": "..."}];highlight:要着色的索引

如果没有完全合适的模式,请使用最接近的一个,并用一行说明;不要强行使用会产生误导的画面。模式展示的是想法的形状;takeaway 行用文字说明要点。关于两种力量平衡的想法(供需平衡、工作与生活平衡)没有自己的模式:将其显示为一个能稳定它们的 cycle,或者直接说明这一点。

2. 编写规范

保存 minimal-<主题>.json:

{
  "title": "想法如何像病毒般传播",
  "pattern": "spread",
  "branches": 3,
  "depth": 4,
  "takeaway": "每个人再告诉三个人",
  "theme": "coral"
}

常见字段:title(想法,作为简短标题或问题,最多约 40 个字符),subtitle(可选,标题下方的小字行),takeaway(一句话要点;动画完成时显示在标题下方,长文本会自动缩小以适应),theme(默认 coral,ink 黑色,paper 米白色,blue 蓝色,mint 薄荷色),size(默认 "1080x1920","1080x1080","1920x1080"),duration(秒;默认 5-6,有 takeaway 会更长;更长的时长只会延长结束画面的停留时间),speed(0.7 = 所有动作慢 30%,1.3 = 更快),fps(默认 30)。

编写规则:

  • 标签要短小:每个最多 4 个词(序列标签:几个字符)。避免行话。
  • 数字必须真实。如果想法需要你不确定的数据,请省略它们或说明它们仅供示意。
  • 每个视频只包含一个想法。如果用户的想法包含两个部分,请制作两个视频(两个规范)。

examples/ 中的示例:idea-goes-viral.json(传播)、bill-becomes-law.json(流程)、water-cycle.json(循环)、where-attention-goes.json(汇聚)、soda-vs-apple.json(对比)。

3. 检查两帧画面

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<主题>.json --still 2 --out minimal-<主题>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<主题>.json --still end --out minimal-<主题>-check2.png

--still 接受秒数或 end。查看它们:标签清晰可读且未被裁剪,画面是否表达了想法?如果没有,调整后再次检查。

4. 渲染视频

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<主题>.json --out minimal-<主题>.mp4

大约需要 10-25 秒。删除检查图片。

5. 交付

将 MP4 文件的路径提供给用户(如果你的环境可以显示文件,请展示它)。它没有声音,准备好用于配乐或配音。提供一个变体(另一种模式或主题)。

没有浏览器?

如果设置检查无法运行浏览器,请将动画写成一个页面: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<主题>.json --html minimal-<主题>.html。该页面可在任何浏览器中播放(如果可以,请作为 artifact 展示)。告诉用户 MP4 需要在计算机上使用 Claude Code,或者对该页面进行屏幕录制。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能