[分享创造] 我用 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 ，免费额度完全够用
一些设计决策
- 为什么用 LLM 画像素而不是用扩散模型？ 32×32 = 1024 个像素，刚好在 LLM 的 JSON 输出能力范围内，而且生成过程可以实时流式展示，视觉体验比等图片生成好
- 骨骼动画怎么做的？ 分析像素画的人体比例（头、眼、腿位置），提取关键点后对原始帧做仿射变换生成动画帧
- 内容安全：生成前会过一轮安全检查，防止生成不合规内容
截图
Codex 使用我们生成的宠物：
首页 — 输入描述直接生成：
展廊 — 可以看到所有人生成的宠物：
免费开放
不需要注册就能玩，访客每小时 5 次，GitHub 登录 10 次。生成的宠物可以下载 sprite sheet ZIP ，解压后导入 Codex 等 Agent 客户端。
欢迎来玩，也欢迎提建议！
Select Language