mcpField
G
generative-illustration

generative-illustration

github.com/iart-ai创意与媒体7616 次安装17 周前更新
代码仓库

关于 generative-illustration

generative-illustration 是面向设计师的技能，用 AI 生成独立插画素材，再通过代码制作动态平面作品。其核心方法是按时间确定性渲染并逐帧导出视频。

主要功能

  1. 01分别生成独立插画元素
  2. 02去除背景并制作透明素材
  3. 03按时间确定性控制动画
  4. 04使用 Playwright 与 ffmpeg 导出
  5. 05可生成并混合音乐

适用场景

  1. 01制作动态插画或视觉隐喻
  2. 02创作短篇品牌或艺术作品
  3. 03为插画动画添加定制音乐

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/iart-ai/generative-illustration-skills --skill generative-illustration

安装后在 Claude Code 中输入/generative-illustration确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
asset-pipeline.md
craft.md
render-harness.md

详细介绍

生成式插画

将 AI 生成的插画素材 与 代码驱动的动态效果 结合，创作富有表现力、以概念为核心的作品。这就是设计师所说的动态平面 / motion graphic design——以 Agent 原生的方式构建：由 AI 创作视觉元素，再由代码赋予它们生命和意义。

适用场景

  • 动态插画、诗意 / 氛围感的“动态诗”，或视觉隐喻。
  • 简短的品牌或艺术作品，其中优美的插画场景会有意图地动起来。
  • 任何“AI 创作视觉元素 + 代码动态效果”的混合创作。
  • 不适用于：数据可视化 → 使用 chart-animation；纯标题文字 → 使用 kinetic-typography；3D / GLSL / 大型粒子系统 → 使用 webgl-animation。

设置 / 先决条件

  • 渲染无需 API 密钥——Node + playwright-core（自动获取 Chromium）+ ffmpeg，全部在本地运行且免费。这就涵盖了合成 + 动画 + 导出的核心流程。
  • AI 生成（素材 + 音乐）需要一个 API 密钥。 最简单的方式是使用单个 OpenRouter 密钥——设置 OPENROUTER_API_KEY——因为这一个密钥就能满足此技能使用的三个生成器：
    • 矢量图 → recraft/recraft-v4.1-vector
    • 绘画质感 → google/gemini-2.5-flash-image
    • 音乐 → google/lyria-3-clip-preview（音频需要 stream: true）
  • 可选替代方案： 使用 REPLICATE_API_KEY 获取更便宜的 Recraft（recraft-ai/recraft-v4.1-svg，约 $0.04，而非 $0.08/张）；使用 Google AI Studio 的 GEMINI_KEY 直接调用 Lyria。
  • 也可以使用自己的素材 / 音乐（手绘，或使用任意 AI 工具生成），完全跳过生成步骤——动态效果 + 制作工艺的核心流程完全不需要密钥。

避免 90% 失败的关键规则

绝不要尝试让一整张 AI 生成的大型插画动起来。应生成许多彼此独立的小元素，再让代码将每个元素作为完整单元进行动画处理。

AI 图像 / 矢量模型输出的是一堆扁平、未分组的路径——没有 <g>、没有 id，也不会标明“这是手臂 / 这些是花瓣”。你无法为其中的某个部分绑定骨骼。于是会出现两种失败方式：

  • 将整张图片当作静态图，再做交叉淡化 → 看起来像 PowerPoint。
  • 根据路径间的距离自动聚类，再让每组路径扭动 → 诡异（动作毫无意图，所有东西都在晃动）。

结构存在于素材之间，而非单张图片内部。 每个元素都是独立的干净文件；代码让它整体移动。（这正是专业动态插画师的工作方式——分别设计各个元素，再由代码进行组织和呈现。）

流程

  1. 构思——聚焦一个隐喻，毫不妥协地克制。
  2. 分别生成每个元素，使用 AI 在纯色背景上单独生成。
  3. 去除背景 → 透明精灵图。
  4. 编写动态效果代码——在 <canvas> 上构建确定性的时间轴控制器；放置并为精灵图 + 文字 + 颗粒效果添加动画。
  5. 渲染——逐帧抓取画面 → ffmpeg → MP4。
  6. 音乐——生成自定义曲目（Lyria），并将其混入视频。

1 · 生成素材

  • 清晰的矢量元素（花朵、图标、生物）→ Recraft v4.1 SVG。
  • 绘画质感纹理（水彩晕染、纸张纹理）→ 图像模型（Gemini "nano-banana"）。
  • 具体明确更胜一筹。 描述真实、有个性的主题——泛泛的提示词只会生成泛泛的图像：
提示词结果
a single delicate wildflower, soft petals…扁平、普通、卡通化
a single **elegant poppy** on a **tall slender curved stem**, soft coral-red petals with a **delicate dark center**, one leaf, refined minimal flat vector, single isolated element, plain solid white background一朵优雅、易于辨认的罂粟花——瞬间就有了“设计感”
  • 始终添加 no text——AI 会把文字弄得一团糟。需要的文字请在代码中添加（这样才能准确且可编辑）。
  • 提示生成**“single isolated element, plain solid white background”**，这样就能轻松抠图。
  • 移除背景路径。 Recraft 会将覆盖整个画布的白色矩形作为路径 #0 绘制。找到边界框覆盖约整个 viewBox 的路径并删除 → 得到透明精灵图：
# keep every path EXCEPT the one whose bbox spans the whole canvas
def is_bg(path, VBW):
    nums = [float(n) for n in re.findall(r'-?\d+\.?\d*', d_of(path))]
    xs, ys = nums[0::2], nums[1::2]
    return xs and (max(xs)-min(xs)) > VBW*0.92 and (max(ys)-min(ys)) > VBW*0.92
  • Recraft v4.1 SVG 格式：<path …></path>（不能自闭合）、viewBox="0 0 2048 2048"、transform="translate(x,y)"、绝对坐标。

2 · 确定性 seek 测试框架（实现干净渲染的关键）

每个可见值都是时间 t 的纯函数——绝不使用 requestAnimationFrame 循环或 CSS 过渡（它们会与帧抓取器不同步并产生闪烁）。

window.__T = totalSeconds;                 // total duration
window.__seek = (t) => render(t);          // bar width, x/y, opacity, scale — all derived from t
// on load: render the frame named in the URL
window.__seek(parseFloat(new URLSearchParams(location.search).get('t')) || 0);

使用单浏览器 Playwright 循环，以 t = 0, 1/30, 2/30 … 的顺序跳转，每次都截图，然后用 ffmpeg 合成（使用偶数尺寸和 yuv420p）。对于有状态的模拟（如粒子），使用带种子的 RNG，以确定性的方式推进模拟，确保每次渲染结果都一致。

3 · 制作精灵图动画

  • 将每个素材加载为 Image（使用内联 base64 data-URI，让 HTML 自包含）；在每个实例的 save/translate/rotate/scale/restore 中调用 drawImage。
  • 将每个精灵图的锚点设在运动枢轴处（底部／中心／角落——根据运动需要选择）。例如，要让它从一条线升起：先 translate(x, baseY)，再在 (-w/2, -h) 处绘制。
  • 让入场方式与表达意图相符，不要本能地只用“放大”：数字递增、分裂／倍增、滑入、涌现、骤然出现、从 0 缩放——每种方式表达的意思都不同。静止时也要有生命感：用轻柔的 sin(t) 漂移。
  • 添加颗粒叠加层（带种子的噪声），营造手工制作的 Softcore 质感。
  • 捕获时，等待所有图像解码完毕后再通过 window.__ready() 标志继续。

4 · 制作 — 如何让作品真正出色，而不只是动起来

  • 让概念决定视觉表现——不要总是默认使用某一种手法。 动效语言必须从这个想法本身推导出来，而不是照搬：复利增长 → 一个圆点不断翻倍，直至铺满屏幕（而不是植物）；空白页 → 第一个词冲破文字堤坝（而不是嫩芽）；信息过载 → 标签页／窗口不断增多，最终化作噪声。在无关的概念中反复使用同一种手法——“有东西从地面生长出来”——是这类作品变得陈旧、平庸的头号原因。 如果你第二次想到“有什么东西在生长”，就停下来，想想这个概念实际呈现出来是什么样子。（原花园作品中的植物生长之所以有效，只是因为这个概念本身就与植物有关。）
  • 因果关系。 让原因 → 结果在字面上紧密相连（输入落下 → 某件事就在那个位置发生）。松散相关的平行事件看起来只会像随机噪声。
  • 克制。 动效需要的元素比静态设计更少——元素太多，动起来就会显得嘈杂。只保留核心内容；不要过度设计。
  • 突出主角。 当某个元素最重要（那个“促成成功”的元素）时，让其余部分变暗，再让它凸显出来——可以加光晕、放大，或改变颜色。
  • 节奏：收束 → 静止一拍 → 回望。 收尾语句是回望式的陈述；只有动作停止后，它才会产生效果。让动效结束，停顿一拍，然后再展示标语——结尾绝不要与仍在运动的内容重叠。
  • 缓动。 观众需要阅读的内容，绝不要使用线性变化。要缓动的是数值变化，不只是透明度。小幅弹出可使用过冲；生长过程则使用缓慢的缓出。
  • 语义——别搬起石头砸自己的脚。 如果作品描绘的是失败／枯萎，不要用自家产品的功能为其标注（这会让人觉得“我们的产品连核心工作都做不好”）。请改用中性语言或描述过程的措辞。

5 · 音乐

使用 Lyria 3（OpenRouter google/lyria-3-clip-preview）生成定制曲目。它由 AI 生成，因此免版税。音频输出需要设置 stream: true——音频块会以 base64 格式出现在 delta.audio.data 中；将它们拼接起来并解码为 MP3。使用 ffmpeg 混音：裁剪至所需时长、添加淡入／淡出，并在任何旁白下方将音量降低（约 0.5）。

6 · 验证循环（不要跳过）

渲染作品，生成一张覆盖完整时长的联系表（在整个时间线上采样帧，而不只是开头几秒），然后亲自检查：是否有空白帧？是否有行重叠？概念是否真正清晰易懂？修复问题并重新渲染。这个交付并验证的循环，正是“能运行”和“做得好”之间的区别。

references/

  • asset-pipeline.md — 素材提示词、背景移除代码、Recraft/Gemini 格式说明
  • render-harness.md — 完整的 seek-harness HTML + Playwright 捕获 + ffmpeg 配方
  • craft.md — 因果关系、节奏、克制、突出主角，附有示例

iart.ai 背后的制作理念。成本参考：一个 Recraft SVG ≈ $0.04，一首 Lyria 曲目 ≈ 几美分——完成一部作品的总成本不到 $1。

评论

支持 Markdown