GitHub 上最近有个项目涨星特别快大家习惯叫它“画图 skill”作用就是让支持 skill 机制的 AI Agent 根据中文一句话直接产出可播放的 SVG 动图。目前 Star 数已经冲到 1.1 万这个热度在 Agent 技能插件这个细分领域里相当罕见。我自己的第一反应是这不就是把“让 AI 画图”这件事的最后一公里补上了吗之前我让 AI 出图要么是位图要么是静态 SVG想要个会动的东西还得自己再补一段动画代码。现在这个 skill 相当于把“动画化”也包圆了。我花了一个多小时把它完整跑了一遍这篇就把它的原理、安装过程、实测效果和一些避坑经验都整理出来想复现的朋友可以直接照着来。1. 项目概述1.1万Star的画图skill到底是怎么个玩法1.1 先搞清楚“skill”是什么想用这个项目得先理解 skill 这个东西是干嘛的。近两年 Claude Code、Codex 这类 AI Agent 火起来之后大家慢慢发现一个问题同一个模型在不同的任务里表现差很多因为它没有一份“岗位说明书”。你直接问它“写个动画”它能写但经常写得自由发挥、结构混乱、格式不统一。skill 就是来解决这个问题的。简单说一个 skill 就是一个装在 Agent 指定目录下的“技能包”里面通常有一个 SKILL.md 说明文件外加一些参考模板、示例代码、校验脚本。Agent 加载这个 skill 之后相当于被注入了一套专门针对某个场景的工作规范。用大白话类比模型本来是个什么都懂一点的实习生skill 就是一份上级写好的 SOP告诉他“接单之后先干什么、输出格式是什么、有哪些红线不能碰”。画图 skill 能火本质上就是因为大家都需要一个把“画图”这个任务标准化下来的 SOP。1.2 这个画图skill和普通prompt有什么不一样不少人都试过直接对 AI 说“给我生成一个 SVG 动图”结果往往不理想。我自己踩过很多次尺寸是随机的动画是摆设或者生成一个看似是 SVG 但其实在浏览器里打开根本不动。问题不在于模型能力而在于提示词里没有把“输出规范”讲清楚。画图 skill 之所以不一样是因为它把散落在提示词里的要求固化成了一套模板。它通常会在内部规定好画布尺寸、viewBox 坐标系、动画实现方式是用 SMIL 还是 CSS animation、元素命名规则、默认的动效时长和循环次数。用户那边只需要说一句中文需求skill 就会把它翻译成结构化的 SVG 代码。我实测下来的感受是同一个模型加载 skill 前后的输出质量差别非常明显加载之后基本上不会再出现“size 随手写一个”或者“动画写了一半就断掉”的问题。1.3 为什么偏偏是SVG动图火这里有个问题值得想一下为什么火的是 SVG不是 GIF也不是 Canvas我的理解是SVG 实在太适合 AI 来生成了。SVG 本质是 XML 文本文档而语言模型最擅长的就是生成结构化的文本代码再加上 SVG 体积小、缩放不糊、可以用 CSS 和 SMIL 做动画在网页里可以直接嵌入在文档和 PPT 里也能当常规图片用。相比之下GIF 是位图格式AI 模型直接生成 GIF 的成功率低得多尺寸也难控制。从需求端看SVG 动图的适用场景很广前端开发做空状态占位图、微信公众号做动态封面、做 PPT 的人想要一个简单交互动画、技术文档里需要一段动态示意图……这些场景以前都要人工用专业软件做现在一句话就能出个初稿吸引力自然大。2. 核心原理拆解AI怎么把一句话翻译成会动的SVG2.1 SVG动图的三种实现姿势要理解 skill 的厉害之处得先知道 SVG 动画有哪几种做法。最基础的是 SMIL 动画也就是 SVG 原生的animate、animateTransform、animateMotion这些标签。这种做法的好处是只要浏览器支持 SVG它就能动不依赖任何外部脚本和样式文件。缺点是写法比较繁琐一个简单的位移动画就要写三五行标签元素一多就容易乱。第二种是用 CSS 动画。在 SVG 内部嵌一段style用keyframes定义动画再用 class 挂到图形元素上。这种做法灵活度高代码可读性好也是现在 AI 生成 SVG 动图时很常用的一种方式。从模型的角度看CSS keyframes 是它见过大量文本语料写起来比 SMIL 更顺手。第三种是用 JavaScript 驱动动画。这个适合做复杂交互比如鼠标拖拽、动态数据刷新。但缺点是必须在支持脚本的环境里运行而且“一句话出 SVG 动图”这种需求通常不需要那么复杂所以 skill 在生成普通动图时一般不会推荐 JS 方案。我查了下这个项目里展示的示例绝大多数用的都是 SMIL 和 CSS animation 两种偶尔有结合 transform 的简单动画。2.2 Skill内部常做了什么提示词编排这部分是最值得学习的。一个画图 skill 的内部说白了就是一套很细的提示词工程再加上一些参考文件。它的说明文件一般会包含几个关键要素首先定义输出目标必须是语法合法的 SVG必须包含动画效果其次规定画布参数常见的是默认 800x600 或者 400x300然后是坐标体系说明比如 transform-origin 默认值、旋转中心怎么计算最后是动画规范比如默认时长 3 到 4 秒、无限循环、运动曲线用 ease-in-out 之类的值。举个例子如果直接让模型画一只“摇尾巴的猫”它可能把尾巴画成一个矩形然后随便加个 transform 了事。如果 skill 里写清楚了“动画主体要在命名上和元素 ID 对应”“transform-origin 必须设置到尾巴根部”模型生成出来的动画就会精准很多。这类细节在 skill 里被规范化之后即使换一个模型来跑输出质量也不至于滑坡。2.3 为什么用文本生成SVG比“AI画图”更适合动态场景现在很多人已经习惯了“文生图”模型比如画一张风景图、画一个头像都是位图输出。但位图模型有一个硬伤没有图层概念、不能精确控制某个元素的运动也没法对局部做参数修改。你想要尾巴摆动它只能给你整幅图重新生成一遍很难定点调整。而文本生成 SVG 是另一条路线。语言模型不需要“想象”像素它只需要生成描述图形的代码。这意味着每个元素都是独立的对象可以单独加动画、改颜色、调位置。更关键的是SVG 是矢量格式放大缩小不变形后续修改成本极低。从这个角度看“一句话生成 SVG 动图”其实不是要替代插画师或设计师而是要解决那些“只要一个能动的示意图”的轻量需求。这个定位踩得非常准。3. 实操复现从零到一跑通中文一句话SVG动图3.1 准备Agent环境以Claude Code/Codex为例动手之前先搞定 Agent 环境。目前用得比较多的是 Claude Code 和 Codex两个都支持安装 skill 这类自定义技能包。安装过程不复杂基本就是先装好 CLI 工具然后完成登录或者配置 API Key。我这里以 Claude Code 为例安装完成后可以在终端输入claude进入对话界面Codex 的话就是安装官方 CLI然后进入codex命令。电脑上最好已经有 Node.js 或 Python 的环境虽然不是硬性要求但后面做校验、转格式的时候会方便很多。这里要提醒一句不同版本的 Agent 对 skill 的目录名和加载方式要求略有不同。如果你打开的 Agent 没有自动识别 skill不要急着怀疑是项目问题先去看看对应版本的用户文档里怎么写。大多数情况下就是新建一个目录、放一个说明文件的事。3.2 安装画图skill目录结构与加载方式这个画图 skill 的安装路径有两个主流位置。Claude Code 会读取~/.claude/skills目录Codex 社区通常约定在~/.codex/skills。具体做法是进入对应目录新建一个子目录目录名一般是英文比如svg-animator然后把项目里的SKILL.md以及相关的模板文件放进去。这个 SKILL.md 是全套机制的核心文件里面用 Markdown 和 YAML 头信息写了这个 skill 的名称、用途、适用场景、输出规范。我实际安装时注意到它的目录里还有几个示例文件比如examples/flower.svg、examples/wave.svg之类的这些小样本非常有用。模型在读 skill 的时候如果只读文字描述理解起来还是有点抽象一旦有了示例文件它就能精确模仿里面的写法和风格。这也是好的 skill 和普通提示词的一个区别它不仅告诉你“要画什么”还直接给你看“怎么画”。装好之后重启一下 Agent 或者新开一个会话让 skill 被重新加载。验证是否生效的方法很简单直接问一句“看看你有没有安装 SVG 动画相关的 skill”如果生效Agent 通常会在回答里提到对应的 skill 名称或者表现出明显不同的输出风格。3.3 我的实测Prompt和生成效果记录我在本地实测时用的中文 Prompt 是这个“画一只橘猫蹲在窗台上尾巴有节奏地左右摆动窗外有雨滴不断下落整体配色温暖保持画面简洁。”第一次生成的结果说实话有点惊喜。Agent 自动定了 600x400 的 viewBox猫的身体用了一组椭圆和圆做组合尾巴单独画成一个path并且加了 SMIL 的animateTransform来做绕根部的旋转。雨滴是几根斜线用透明度渐变的动画模拟下落效果整体节奏还挺协调的。唯一的问题是猫尾巴摆动的幅度稍微有点大看起来不像是尾巴摆动更像是尾巴要断了。我调整了一下 Prompt加了三个约束一是“尾巴幅度控制在 15 度以内”二是“动画时长 3 秒循环播放”三是“雨滴数量不要超过 10 个”。第二次生成就正常多了。这说明这个 skill 对约束条件的解析能力很强你想要的细节只要在中文里说清楚它基本都能映射到对应的 SVG 参数上去。3.4 本地预览、转GIF与嵌入页面生成出 SVG 文件之后第一个动作是先拖到浏览器里看看效果。Chrome、Edge、Firefox 都支持 SVG 动画Windows 下的资源管理器自带预览可能看不到动画效果所以别用系统自带看图工具判断它是不是真动起来了。如果要在 VS Code 里看可以装一个叫 SVG Preview 的插件比较轻量。macOS 用户可以直接在 Finder 里空格预览多数情况下也能播放动画。这些都属于“SVG 本地查看工具”的范畴选一个顺手的就行。我在测试阶段用的是浏览器因为有开发者工具可以直接选中元素看动画属性排查问题方便很多。如果想拿去做 PPT 或者发到社交平台SVG 不是所有软件都认通常还得转成 GIF 或 MP4。这里有个常见的坑直接拿 ImageMagick 之类工具转 GIF很多 SMIL 动画会被当成静态图处理转出来一动不动。我的做法是先用浏览器打开 SVG再用录屏工具或者 Playwright 这类自动化工具逐帧截图最后合成 GIF。专格式专用这样处理后的动图才能完整保留原始效果。如果只是用在网页里那直接内嵌svg或者用img引用文件就行不需要额外转格式。4. 避坑指南让Skill稳定出图的关键细节4.1 生成的是“假动图”怎么办这是我最开始使用这个 skill 时遇到的最大问题打开 SVG画面是一张静态图动都不动。后来检查发现Agent 在生成时完全没写animate或者keyframes只画了一个静态图形组合。原因是模型有时候会把“动图”理解成“动态构图”或“生动的画面”而不是“带动画效果的 SVG”。解决办法是在 Prompt 里直接点明技术实现比如“请用 CSS keyframes 实现动画”或者“请使用 SMIL animate 标签”。这个 skill 的描述文件里其实有相关规范但现实情况是有时候模型没读到那么细或者被用户上下文带偏了。遇到这种情况最有效的做法是让模型重写并给一个动画骨架示例。4.2 中文文本在SVG里的显示问题如果让 skill 在 SVG 里加入文字踩坑概率会直线上升。最常见的是中文变成方框或者乱码。原因是 SVG 渲染时依赖系统字体如果代码里没有指定一个普遍可用的字体族浏览器可能找不到对应中文字体。即使在 Chrome 里显示正常换到别的操作系统或者导到其他软件里也可能出现字体不一致。我的解决思路有两个。第一在 Prompt 里要求“文字用通用字体比如 sans-serif”这样浏览器会自己去找系统中文字体。第二如果文字不多且特别重要可以让它把文字轮廓转成 path这样就是纯图形了到哪都不会乱码。缺点是文件会变大而且没法再编辑文字内容。二选一看场景需求。4.3 坐标、尺寸与动画中心点错乱做 SVG 动图时最恼人的问题之一就是元素跑到了画布外面或者旋转的时候中心点不在预想位置。这通常和两个因素有关一个是 viewBox 和实际坐标没对齐另一个是 transform-origin 设置出错。SVG 的默认旋转中心是原点也就是 (0,0) 点但实际使用中我们希望元素围绕自己某个位置旋转比如尾巴根部、车轮中心。模型如果忘了写 transform-origin生成出来的动画就会以画面左上角为圆心视觉效果完全不对。这类问题靠肉眼盯着改效率太低。我习惯在 Prompt 里一次性把约束说全比如“画布固定 800x600动画中心的坐标要单独声明”同时让 skill 自动使用 CSS 的transform-box: fill-box; transform-origin: center来兜底这样大部分旋转动画都能落在正确位置上。4.4 Agent沙箱限制与文件输出路径市面上这些 Agent 很多都加了权限控制尤其当你让它自动写文件的时候可能弹出一个权限确认或者默认禁止写入。如果你说了半天让它“生成一个 demo.svg”最后发现 Agent 只在回答里贴了一大段代码没有实际落地成文件多半就是沙箱限制在起作用。解决思路不难要么在 Agent 配置里把当前目录的写权限放开要么干脆用输出重定向。我在命令行模式下会直接让 Agent 把完整代码打印出来然后自己复制到本地文件。这个办法笨一点但最稳妥尤其适合想拿生成结果进一步修改的情况。4.5 从GitHub拉取skill时的小波折GitHub 偶尔访问慢或者下载中断这个是老问题估计不少朋友都遇到过。我第一次尝试下载这个项目时进度条卡到一半就断了第二次重试才成功。我的经验是不用急着找什么特殊手段先刷新页面多试几次或者等一段时间再用。如果仓库体积不大直接进入仓库页面逐个复制文件也行skill 本体通常不大没必要非得下整个压缩包。另外如果你只是想要 SKILL.md 这个核心文件GitHub 的网页端提供了 raw 查看方式把内容复制下来保存成本地文件也是一个可行的备选方案。重点是别因为下载失败就放弃这个项目的实际体量很小网络稍微稳定一点就能搞定。4.6 好用的SVG本地查看工具还能这样选选 SVG 查看工具这件事看起来不起眼但对调试效率影响很大。Windows 用户可以先装一个 VS Code 的 SVG Preview 插件轻量、开箱即用也有一些人推荐 Inkscape它是比较完整的矢量编辑软件适合需要手工改 SVG 的场景。macOS 用户更省事Finder 空格预览基本都能搞定如果是批量预览直接用 Chrome 打开本地 HTML 页面把所有 SVG 文件用img标签列出来一次看全。我在工作流里会把“浏览器调试”和“VS Code 编辑”组合起来。浏览器负责看动画效果VS Code 负责改代码来回切换效率最高。5. 延伸玩法拿到SVG动图之后能做什么5.1 网页嵌入与动态Banner既然生成的是 SVG网页嵌入是最自然的用法。你可以把生成结果直接内联到 HTML 里或用img srcxxx.svg引用不过内联有一个额外好处可以让你后期用外部 CSS 再控制它的某些样式比如换配色、调整动画速度。做活动页的时候临时需要一个动态 Banner 又没时间等设计出图这个 skill 能顶上一阵子。5.2 转成GIF/MP4用于社交平台社交平台和办公软件对 SVG 支持很有限所以得转成 GIF 或 MP4。我前面也说过直接命令行转 GIF 经常会丢动画所以可靠路径是浏览器录屏。传到公众号、小红书、抖音或者朋友圈基本都够用。注意 GIF 的颜色数有限如果生成的是渐变色特别复杂的 SVG转出来可能会出现色带建议在 Prompt 里减少渐变色阶或者直接改用 MP4 导出。5.3 文档、PPT与信息图里的动态示意PPT 和文档里放一段动态示意图会让整个表达清晰很多。以前想做这种小动画得开 AE 或者 PPT 自带动画步骤繁琐。现在用 skill 生成 SVG再转成 GIF 往文档里一插几十秒就能搞定。比如流程图里的箭头流动、饼图里某个扇区的强调弹出都是很适合 SVG 动图的场景。5.4 从地图JSON到SVG动图的想象空间顺着热词里“地图JSON转SVG地图”这个方向想这类型 skill 以后大概率会往数据可视化延伸。现在很多地图数据是以 GeoJSON 格式存在如果 skill 能把 GeoJSON 解析成 SVG 路径再叠加一些动画比如航线动态、区域高亮做出来的效果在数据大屏里非常实用。目前已经有人在尝试类似方向只不过这个画图 skill 先一步把“一句话出 SVG 动图”的心智占领了。后续如果加入更多结构化数据输入想象空间会更大。5.5 Agent Skill生态正在变成一个“应用商店”最后聊一点趋势上的观察。现在 GitHub 上各种 agent skill 越来越多有处理研究的、有写代码的、有画图的、有生成文案的都快变成一个新的“应用商店”了。这个画图 skill 的火爆其实是整个生态的一个缩影大家不再满足于“模型什么都能干”而是要“模型在特定事情上稳定地干好”。Skill 就是干这个的。如果你也想跟进这个方向可以先从这个画图 skill 开始拆解看看它的 SKILL.md 结构、示例文件和提示词设计照葫芦画瓢完全可以做出属于自己领域的小工具。6. 常见问题速查表问题可能原因处理思路生成的 SVG 在浏览器里不动缺少 SMIL 或 CSS 动画定义在 Prompt 里明确要求用 keyframes 或 animate 标签中文文字变成方块系统没有匹配字体设置 font-family 为 sans-serif或把文字转 path旋转动画中心点不对transform-origin 缺失或设置错误加上 transform-box: fill-box; transform-origin: center元素跑出画布viewBox 和坐标没有对齐固定画布尺寸先规划主体位置再画装饰Windows 下预览不动系统看图工具不支持 SVG 动画用浏览器或 VS Code 插件查看skill 没有被加载目录结构或文件名不对检查 SKILL.md 是否在正确的 skill 目录下Agent 无法写文件沙箱权限限制放开当前目录写权限或手动复制代码保存转 GIF 后动画消失工具不支持 SMIL/CSS 动画用浏览器录屏或逐帧截图再合成下载项目时频繁中断GitHub 网络不稳定重试、选择网络空闲时段、逐个复制文件生成画面元素太少或太简单提示词描述过于笼统在 Prompt 里补充具体元素数量、配色和构图要求我实测下来最顺手的组合是在 Agent 里固定一个输出目录让 skill 每次把 SVG 写到同一个文件夹然后用一个本地 HTML 页面批量预览。Prompt 里只要加一句“保持 600x400动画 3 秒循环”出片率就会高很多。另外一个小习惯不要让它一次画太多元素第一版只画主体第二版再加背景和装饰这样定位问题快得多。这个思路也适合你自己去改造别的 skill——说到底skill 本质上是一套精心编排的提示词文件夹改一改就能变成你的专属工具。