从一张参考图，到可播放的 SVG 绘画过程

从一张参考图，到可播放的 SVG 绘画过程

作者：土豆嘀嗒

0. 最终成果

参考原图

SVG 重绘结果

成品包含 269 个矢量元素、297 个绘制步骤，标准播放约 74 秒。

1. 这个动画如何生成？

使用 Codex 桌面版，模型为 gpt-6-astra，推理强度 medium。AI 读取参考图后，用 Python 组织图形数据，生成 SVG；用 HTML、CSS、JavaScript 制作播放器，再通过 Playwright 驱动 Edge 浏览器截图检查。没有调用专门的生图模型。

核心提示词可概括为：

参考 reference.png，用可编辑的原生 SVG 元素重绘，尽量还原构图、人物、配色和遮挡关系。禁止嵌入参考图片或用 Canvas 冒充矢量。制作 HTML 播放器，按“草稿→大色块→五官服装→阴影→高光细节”逐步绘制。绘画数据与播放逻辑分离，分阶段截图对比，最多整体修改五轮，实际交付 HTML 和独立 SVG。

完整提示词请下载文章尾部的附件后查看

按本地会话日志：首次制作 19 分 19 秒，上下布局调整 2 分 7 秒，两次执行合计约 21 分 27 秒，不含中间等待。

这两次任务累计 1,701,538 Token：输入 1,668,177，其中缓存输入 1,592,960；输出 33,361。总量包含多轮重复上下文，并非生成了170万 Token 的代码，也不能直接当作费用。