从一个头像开始，
我用 AI 做出了会动的小易

这次做了什么

原本只是给公众号和网站做个头像。形象确定后，我又往前试了一步：让它能动，再放进真正使用的地方。下面把这次做出来的结果、提过的需求和验收过程拆开。

先放结果。这就是现在的小易，黑发、圆眼镜、蓝色连帽衫，会眨眼，也会挥手：

这套形象已经用到了三个地方。进度也先列清楚，后面看截图时更容易对上：

我主要做的是给参考、提需求、看结果，再补充下一步要求。角色和动作由 AI 生成，拆帧、对齐、组装、校验以及程序接入，也由 AI 借助工具完成。

这次使用 Pets 插件组织角色制作，内置 ImageGen 生成美术，脚本整理素材。下面的提示词是按实际要求整理的中文版本；原始提示词、原图、动图和返工素材都保留在文末配套资料里。你可以照这个顺序，换成自己的角色试一遍。

一、先给参考图，把形象定下来

起点是上面这张参考板。头像、动作、对话气泡、图标都画在了一起，角色的方向已经比较明确。我把它交给 AI，起手要求很短：「参考这个」。

这里先留意一个细节：图上写着 logo.svg、character.svg，但实际拿到的是一张 PNG。文件名只是画在图上的文字，对应的矢量文件和可播放动画还需要继续制作。

所以，先用它定长相：黑发、圆眼镜、蓝色连帽衫、黑色裤子和鞋。参考图越明确，后面越容易判断 AI 有没有画偏。

这一步怎么验

准备好你想保留的角色特征，再让 AI 生成。检查时也看这几个地方：脸、发型、眼镜、衣服和头身比例。

二、先做全身基础图，后面的动作都参考它

接下来先要一张完整全身图。参考板里的电脑、杯子和大背景都先拿掉，让小易单独站在那里。后续每组动作继续附上这张基础图，脸型、眼镜和衣服就有了统一参照。

这次用纯绿色背景，是因为小易主要是深蓝和黑色，方便后续分离背景。如果你的角色本身穿绿色衣服，就要换一种底色。选底色时让 AI 根据角色颜色判断，比固定写“必须绿幕”稳妥。

参考我提供的人物图，制作同一个 Q 版全身角色：蓬松黑发、圆框眼镜、蓝色连帽衫、黑色裤子和鞋，亲切、清爽、轮廓清楚。
保留脸型、发型、眼镜和服装比例。不要电脑、杯子、文字、Logo 或场景。
完整展示头顶到鞋底，四周留出安全边距。使用与角色颜色明显区分的纯色背景，便于后续提取。

拿到图先看头顶和鞋底是否完整，缩小后还能不能认出人物，眼镜和衣服有没有变。确认这一版，再继续动作制作。如果基础形象都没定下来，后面每一组动作都得跟着返工。

三、按动作分组生成，每组先检查再继续

小易这次需要九类动画和十六个注视方向。制作时按动作拆开：先待机和向右走，确认角色一致、步态能看懂，再补其他状态。每组都有自己的帧数和用途：

上面这一排是实际生成的向右行走动作条，有八个姿势。提需求时，把方向、数量、角色一致性和画面边界一起说清楚。下面这段可以直接替换角色名使用：

以已确认的小易基础图为身份参考，生成一排 8 帧向右行走动作。
每帧都是同一个小易，头身比例、眼镜、发型、服装和描边保持一致。人物完整，间隔清楚，不重叠、不裁切。
方向始终朝右，左右腿有可读的交替步态。保持角色大小和地面基线稳定。
纯绿色背景，不要速度线、灰尘、阴影、文字或边框。

每组出来后就检查：是不是同一个人？方向对不对？脚步有没有交替？有没有少手、少鞋或裁掉头顶？发现问题就改这一组，其他已经通过的动作保留下来。

这一步值得多看几眼。后面的脚本可以清背景、排版和缩放；人物本身画错了，还是得回到生成环节修正。

四、整理素材：拆帧、去背景、对齐

动作条有了，还不能直接当动画用。接下来让 AI 运行脚本，把每个完整人物提取出来，清掉背景，统一缩放后放进固定尺寸的画格。

这一段有两个地方要特别交代：人物在原图里未必等宽等距，平均切八刀可能会切到胳膊；每帧分别放大到铺满画格，又会让角色播放时忽大忽小。

按实际人物轮廓提取完整帧，保留原有顺序，不要机械平均切图。
同一组动作共用缩放比例，站立和行走对齐落脚位置。跳跃保留原本的腾空位移。
整理后给我静态检查图，以及“待机 → 跳跃 → 待机”的循环动图。检查裁切、大小变化、边缘残色和落地衔接；发现问题先修正，再继续组装。

检查记录里，这次跳跃抬升约 40 像素，落地与原基线相差 1 像素。数字可以核对位移；动图则要实际看一遍，确认大小稳定、起跳和落地不突兀。

这一步怎么验

交付时让 AI 同时给静态图和动图。静态图方便找缺手、裁切和身份变化，动图方便找抖动、变大变小和动作衔接问题。

五、方向会画偏，返工也要留记录

十六个注视方向是这次比较费心的一段。从向上开始，每 22.5° 一个姿态，最后要连成一圈。制作时先确认上、右、下、左，再补中间方向。

小易戴着圆眼镜，转头时眼镜透视、鼻尖和耳朵遮挡都要跟着变。身体尽量稳定，不能把整个角色旋转一下，就当成看向了另一个方向。

下面是保留下来的返工版本。部分方向不够明确，修订时重新检查了整排姿态和前后衔接。把旧版本留下来，之后复盘才知道具体改了哪里。

最终结构校验、方向复核和 Pets 预检通过了。部分相邻斜向差别仍比较细，检查记录里保留了说明。能用的版本先交付，后续优化也有依据。

六、组装图集，保留程序和人各自要看的文件

所有动作整理好以后，再放进统一图集。这次采用 Pets 的 v2 布局：1536 × 2288 像素，8 列、11 行，每格 192 × 208。其中 57 帧用于九类动画，16 帧用于注视方向，总计 73 帧。

上面是便于阅读的检查表，下面才是供程序使用的透明原始图集。程序只需按状态，依次显示对应行的指定画格，就能播放动作。

这里的尺寸是本次小易采用的 v2 格式。Pets 的不同入口、版本可能有不同上传要求；复现时要以你当前入口的检查结果为准，不要把一套参数当成所有版本的通用答案。

动起来以后，九种状态长这样：

最后至少保留三份东西：透明图集、动作 GIF、制作记录。图集给程序播放，GIF给自己验收，记录里留参考图、提示词、原始动作条和修改说明。以后换网站、做桌面端，都可以从这里接着做。

七、接到 ChatGPT Pets，先跑通一个使用场景

第一站是 ChatGPT Pets。图集通过检查以后，完成上传和创建，再核对角色名与创建结果。这次「小易」已经成为自定义宠物；要显示它，还需要在自己的宠物选择器里选中。

复现时可以按这条顺序走：找到 Pets 的创建入口 → 提供参考图与要求 → 确认基础形象 → 制作动作与图集 → 检查预览 → 创建并选中。具体菜单和支持格式，以当前入口为准。

官方 OpenAI Docs 列出了 Pets 的工作中、需要输入、已完成、遇到错误等状态。[1]前面制作的等待、专注、检查和失落动作，就有了相应的表达用途。

它的日常动画来自预先做好的一组图。需要理解和回答问题时，由应用背后的能力处理；眨眼、挥手、跑动本身，只是在播放对应画格。

八、放到网站，再把热点资讯接进来

形象满意后，我继续提了一个要求：「能更新到我的小易AI实践项目上吗？」网站已有角色交互，就让 AI 换成这一套小易素材，再检查原来的拖动、行走和气泡是否正常。

网站里使用同一套图集，转成无损 WebP 便于分发，再用 SVG 视口显示当前帧。拖动、行走、情绪和气泡继续由原来的交互模块驱动。

一个不起眼但很影响体验的问题是：角色周围有透明留白，点击那里不应该挡住网页。网站版从每帧透明度中提取了命中轮廓，让鼠标更接近“点到小易才算点中”。

然后才有了下一个想法：把「小易热点」里的精选资讯，通过小易的气泡展示出来，文字可以短一点。这个要求是继续用的过程中加上的，起初做头像时并没有规划。

实现方式也比较直接：读现有精选数据，按发布时间排序、过滤过期内容、去重，再节选原始标题。角色动画和标题轮播都由程序执行，浏览时不需要为每次冒泡调用大模型。

实际使用后，我觉得新闻弹出的机会偏少，又提了一个很直接的要求：点一下小易，就换下一条。最后的交互是：点击角色切换资讯，点击气泡打开当前资讯；自动播报间隔调整为 25 秒，每条保留 9 秒，并在用户输入、拖动或对话时让位。

这一段的验收很具体：点角色有没有换一条，点气泡有没有打开当前原文，拖动会不会误触，输入时会不会被打断。让 AI 写完以后，我关注的也是这些实际动作。

九、做桌面原型，把提醒的方向留到下一步

网页版本用起来以后，我又想到钉钉消息和提醒：能不能做一个桌面小易，消息到了就挥手冒泡？这次先确定实施计划，项目单独放在 D:\AI\pets，和网站分开。

桌面原型采用 Electron、TypeScript 和 Vite，继续使用这套小易图集。透明窗口承载角色，托盘负责隐藏、恢复和退出，消息中心负责保存本轮未读与详情。

截至这篇文章整理时，桌面版已经有 0.1.0 的 Windows 便携原型：能待机、散步、挥手、看向不同方向，也能演示普通消息、提醒和资讯的排队展示。

这里的提醒和资讯仍是本地模拟数据。真实定时提醒、真实热点和钉钉尚未接入，完整的 Windows 点击穿透、多屏与锁屏行为也还要继续实机回归。现在看到的是一个可体验的起点。

桌面端新增的工作主要在窗口层：透明部分能不能点穿、气泡会不会抢输入焦点、跨屏后角色能不能找回。原有形象可以直接复用，窗口行为需要另做验证。

下一步的方向已经明确：先完成可靠的本地提醒，再接入钉钉应用机器人，让授权范围内的消息到来时，由小易挥手和冒泡提醒。

十、自己做一遍，可以照这份顺序和验收单

把上面的过程缩成一条顺序，就是：参考图 → 全身基础图 → 动作条 → 拆帧与图集 → 播放检查 → 应用接入。每一步先交一份看得见的结果，再继续。

AI 交付以后，可以直接照下面几条看。先别急着上线，把角色本身和实际交互分开验：

这次最有意思的地方，是每做成一小步，才想到下一步。先有头像，再有动作；网站用起来以后加了热点，最后又试着做桌面客户端。前面那套素材一直在复用，新的需求也更容易说清楚。

如果你也想试，可以先选一个角色、一个使用场景。让它在自己的网页或桌面上出现，再看看还缺什么。做到哪一步，就验收到哪一步。

后面我会继续记录桌面小易的提醒与钉钉接入。如果你也在做类似的小角色，或者卡在动作生成、图集整理这一步，欢迎到反馈区交流。

十一、配套素材：原图、动图、图集和提示词

这次保存的参考图、AI 原始动作条、拆帧、检查图、返工版本、GIF、MP4 和应用截图，都整理进了完整图册。图册按内容去重，共 257 个媒体文件，来源记录保留。

透明原始图集 PNG · 全状态 GIF · 全状态 MP4

1. 先固定角色：基础图确认以后，持续作为动作生成参考。
2. 逐组检查：每组动作先验方向、完整性和比例，再组装。
3. 看实际使用：图集能播放以后，还要验证目标程序里的点击、拖动和消息。

参考：OpenAI Docs / Pets；Pets 安装与格式版本。图集参数来自本次 v2 素材与实际检查，具体支持以当前入口及版本为准。

WECHAT OFFICIAL ACCOUNT

小易AI实践
持续更新：一个人 + AI 能做出什么

扫码关注 ↗