[分享创造] 我用 AI 逐像素画了一个宠物生成器，还能自动做骨骼动画

[分享创造] 我用 AI 逐像素画了一个宠物生成器，还能自动做骨骼动画

网址：aipet.dev

起因是我想做一个自己的 Codex 桌宠，找了一圈没有"你说一句话就能生成像素宠物"的工具，于是搓了一个。

怎么玩的

输入一句话描述，比如"一只戴墨镜的橘猫"，AI 会用 LLM 逐像素"画"出一个 32×32 的 chibi 像素角色。

自动提取骨骼关键点，生成 8 种动画状态（ idle / running / waving / jumping 等），组装成完整的 sprite sheet 。

技术细节

• 前端：Next.js 16 + React 19 + TailwindCSS 4 ，Canvas 实时渲染像素 + 动画播放
• 后端：Cloudflare Pages + D1 (SQLite) + R2 存储
• AI 生成：LLM 直接输出 palette + grid 格式的 JSON ，前端解析后逐像素绘制
• 动画引擎：纯 Canvas 像素引擎，零 native 依赖，从 32×32 放大到 640×640 sprite sheet （ 8×9 grid ），支持骨骼关键点提取 + 自动帧插值
• 部署：Cloudflare Pages ，全球 CDN ，免费额度完全够用

一些设计决策

1. 为什么用 LLM 画像素而不是用扩散模型？ 32×32 = 1024 个像素，刚好在 LLM 的 JSON 输出能力范围内，而且生成过程可以实时流式展示，视觉体验比等图片生成好
2. 骨骼动画怎么做的？ 分析像素画的人体比例（头、眼、腿位置），提取关键点后对原始帧做仿射变换生成动画帧
3. 内容安全：生成前会过一轮安全检查，防止生成不合规内容

截图

Codex 使用我们生成的宠物：

首页 输入描述直接生成：

展廊 可以看到所有人生成的宠物：

免费开放

不需要注册就能玩，访客每小时 5 次，GitHub 登录 10 次。生成的宠物可以下载 sprite sheet ZIP ，解压后导入 Codex 等 Agent 客户端。

欢迎来玩，也欢迎提建议！

网址：aipet.dev