/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,或者对该页面进行屏幕录制。