mesh-avatar-studio Skill 技能

技能简介

mesh-avatar-studio（Mesh Avatar Studio）是一款面向 VTuber / 虚拟主播 / 数字人开发的 Claude Code / Codex 工作流工具，能把任意一张正面半身 PNG 插画转换成会眨眼、张嘴、转头、呼吸、飘动头发的可动画 2D mesh 头像。整套流程由 Claude Code 或 Codex 编码 Agent 协作完成关键步骤，用户在本地编辑器里通过拖拽精细调整、即时预览，无需 Blender 或 Live2D 等专业动画软件。这是一款典型的「AI Agent + 本地编辑器」协同工具，让不会动画设计的开发者也能在几小时内做出 Live2D 级别的 mesh avatar。

核心能力

1. 一张图变可动画头像：输入一张正面、半身、透明背景的 PNG，输出会眨眼、说话（5 个元音口型）、转头、呼吸、头发飘动的 mesh 头像。
2. Agent 主导的 4 步工作流：步骤 1 和 4 由 Claude Code / Codex 编码 Agent 完成（坐标读取、layer 切割、眼睛/嘴巴素材生成），步骤 2 和 3 在本地编辑器里完成用户手动微调。
3. 本地可视化编辑器：基于 Node.js 22.17+ 的 Web 编辑器，左侧部件列表、中间可拖拽 dots、右侧实时预览，零编译热重载，所见即所得。
4. Pose 测试 + Lip Sync：编辑器内置 Pose test（转头、闭眼）和 Lip sync（元音口型）验证模式，确保头部和口部动画流畅自然。
5. 图层自动切割：调整眼睛、嘴巴、头部、头发轮廓后，点击「Save and rebuild layers」自动重新切片，几秒内完成。
6. AI 生成的眼睛和嘴巴：Codex 自带图像生成能力，可自动绘制闭眼和 5 个元音口型素材，比单纯 mesh 变形自然得多；Claude Code 用户可生成提示词后手动喂给图像生成工具。
7. 完整项目管理：每个 avatar 项目存在 projects//（不入 git），可独立打开、修改、版本管理。
8. MIT 许可证 + 跨平台：MIT License 开源，支持 Linux / macOS / Windows / Android (Termux)。

安装配置

1. 环境要求：Node.js 22.17 及以上；推荐使用 git clone 完整仓库（避免 ZIP 解压时的权限问题）。
2. 克隆与安装：执行 git clone https://github.com/shinshin86/mesh-avatar-studio && cd mesh-avatar-studio && npm install。
3. 创建项目目录：在用户主目录下创建 projects/ 文件夹（Windows 上要注意权限继承，建议先建好再让 Agent 操作）。
4. 启动编辑器：执行 npm run dev，终端会打印访问 URL（如 http://127.0.0.1:5173/），浏览器打开即可。

使用步骤

1. 在仓库根目录打开 Claude Code 或 Codex 编码 Agent。
2. 对 Agent 下指令：「Create an avatar from this image following docs/agent-guide.md: /path/to/your-image.png」。
3. Agent 按 agent-guide.md 流程走：先校验坐标读取精度 → 在放大网格上放置骨骼 → 切图层 → 在固定姿势下自审 → 保存到 projects//。
4. 启动 npm run dev 编辑器，点击「Open project」打开刚刚生成的项目。
5. 用 Pose test 转头/闭眼，用 Lip sync 检查元音口型。
6. 在左侧部件列表选中某个部位（如眼睛、嘴、头部），拖拽图像上的 dots 微调位置，右侧预览即时更新。
7. 修改轮廓后点击「Save and rebuild layers」重新切片。
8. 在「Drawn variants」勾选 Eyes / Mouth，复制消息到 Codex 仓库目录，让 Codex 用图像生成能力绘制闭眼和元音口型，编辑器自动重载。

适用场景

1. VTuber / 虚拟主播形象制作：快速把 OC（原创角色）画师绘制的插画变成可在 OBS / VTube Studio 中使用的 mesh 头像。
2. 直播虚拟形象：用在 Bilibili、YouTube、Twitch 等直播平台的虚拟形象。
3. 数字人客服 / 数字员工：给企业数字人客服、知识助手提供会说话的可动画头像。
4. 游戏角色肖像动画：独立游戏开发者给 2D 角色添加表情动画，无需 Live2D 许可证。
5. 社交媒体虚拟形象：把社交账号头像变成可动的小动画形象（表情包、动态头像）。
6. 教育内容创作：教育博主给讲师的卡通形象增加口型和表情同步。

适用人群

• VTuber / 虚拟主播创作者
• 直播行业从业者（虚拟主播运营）
• 数字人 / AI 客服产品经理与开发者
• 独立游戏开发者（2D 角色动画）
• 插画师（想把静态 OC 卖出动画版本的衍生品）
• AI Agent 开发者（学习 Claude Code / Codex 协作工作流）

工作原理

mesh-avatar-studio 的核心数据结构是 rig.json，描述头像的部件（眼睛、嘴、头、头发等）、每个部件的顶点坐标（dots）、层切分规则（layer rules）。Agent 通过图像识别在放大网格上放置骨骼，再用 PNG 切割算法按 rig 规则切出独立图层，编辑器用 WebGL 实时 mesh 变形实现转头、闭眼、口型变化。Codex 的图像生成能力用于绘制闭眼和 5 个元音口型贴图，比单纯 mesh 变形更接近 Live2D 真实感。整个 pipeline 不需要 Blender / Live2D 等专业 DCC 软件，普通开发者用 Claude Code / Codex 即可在数小时内完成一个完整 mesh 头像。

官方链接

• GitHub 仓库：https://github.com/shinshin86/mesh-avatar-studio
• Agent Guide（Agent 协作流程）：仓库内 docs/agent-guide.md
• Reference（编辑器全部控件）：仓库内 docs/reference.md
• Rig Fields（rig.json 字段说明）：仓库内 docs/rig-fields.md
• 许可证：MIT License