character-sprite

角色精灵图生成器

使用 Nano Banana MCP 和 ImageMagick，为 Claude Office Visualizer Agent 创建完整的动画角色精灵表。

项目背景

角色是以复古 16 位像素艺术风格绘制的办公室职员。每个角色都需要多个用于不同动作和朝向的动画精灵表。

美术风格：复古 16 位像素艺术（SNES/Genesis 时代），像素清晰，色彩有限。

重要——禁止抗锯齿：所有精灵都必须有锐利、清晰的像素边缘，禁止抗锯齿、平滑处理或像素间混色。每个像素都应是边缘清晰的纯色。带抗锯齿的精灵在游戏中会显得模糊、浑浊。

角色限制：

• 最大宽度：60px（与当前 Agent 半径 × 2 相符）
• 最大高度：75px（允许比宽度高 25%）
• 洋红色（#FF00FF）色键背景

精灵表技术规格

重要：网格布局要求

游戏引擎通过将整张图像划分为固定网格来解析精灵表。所有单元格必须大小一致，且单元格之间不得有任何内边距或间距。

┌──────────────────────────────────────────────────────────────────────────────┐
│  NO gaps, borders, or padding between cells. Cells are calculated as:       │
│  cell_width = sheet_width / columns                                          │
│  cell_height = sheet_height / rows                                           │
│  Frame at (col, row) starts at pixel (col × cell_width, row × cell_height)  │
└──────────────────────────────────────────────────────────────────────────────┘

禁止：

• 添加可见网格线或单元格边框
• 在单元格之间添加内边距或间距
• 使用大小不一致的单元格
• 留空单元格（用洋红色背景填充）

精灵表尺寸与帧规格

精灵表类型	总尺寸	网格	单元格尺寸	帧数
待机	928 × 1152 px	8 列 × 8 行	116 × 144 px	共 64 帧
行走	928 × 1152 px	8 列 × 8 行	116 × 144 px	共 64 帧
打字	928 × 144 px	8 列 × 1 行	116 × 144 px	8 帧
递交	928 × 1152 px	4 列 × 1 行	232 × 411 px*	4 帧
喝咖啡	928 × 1152 px	4 列 × 1 行	232 × 699 px*	4 帧

*递交/喝咖啡精灵表的内容有偏移——请参阅下方的帧位置图。

帧位置图

网格精灵表（待机/行走）——8 列 × 8 行：

Row 0 (y=0-143):    South (front-facing)     - Frames 0-7 at x: 0, 116, 232, 348, 464, 580, 696, 812
Row 1 (y=144-287):  South-West               - Frames 0-7
Row 2 (y=288-431):  West (left profile)      - Frames 0-7
Row 3 (y=432-575):  North-West               - Frames 0-7
Row 4 (y=576-719):  North (back view)        - Frames 0-7
Row 5 (y=720-863):  North-East               - Frames 0-7
Row 6 (y=864-1007): East (right profile)     - Frames 0-7
Row 7 (y=1008-1151): South-East              - Frames 0-7

条带精灵表（单行）：

Typing:  Row 0, 8 frames at x: 0, 116, 232, 348, 464, 580, 696, 812 (y=0-143)
Handoff: Row 0, 4 frames at x: 0, 232, 464, 696 (content y=343-753)
Coffee:  Row 0, 4 frames at x: 0, 232, 464, 696 (content y=0-698)

动画要求

动画	帧数	时长	循环播放	备注
待机	8 帧 × 8 个朝向	2000ms	是	轻微呼吸/重心转移
行走	8 帧 × 8 个朝向	800ms	是	完整行走循环，手臂摆动
打字	8 帧	400ms	是	背面视角，双手放在键盘上
递交	4 帧	600ms	否	侧面视角，递出文件夹
喝咖啡	4 帧	400ms	是	正面视角，做出喝咖啡的动作

8 个朝向（行顺序）：S、SW、W、NW、N、NE、E、SE

工作流程

步骤 1：生成基础角色设计

创建一个面向正面的待机姿势，以确定角色外观：

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art game sprite of a [CHARACTER DESCRIPTION], front view facing camera, [CLOTHING DESCRIPTION], simple friendly face, small character suitable for top-down office game, retro SNES/Genesis style pixel art, standing idle pose with arms at sides, isolated on solid magenta background #FF00FF, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, centered composition, no text, no shadows on background, 64x80 pixels scale",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "model_tier": "pro"
}'

提示词变量：

• [CHARACTER DESCRIPTION]：例如，“male office worker”（男性办公室职员）、“female developer”（女性开发者）、“robot assistant”（机器人助手）
• [CLOTHING DESCRIPTION]：例如，“wearing blue dress shirt and tie, brown pants, black shoes, short brown hair”（穿蓝色正装衬衫和领带、棕色裤子、黑色鞋子，留棕色短发）
• [NAME]：角色标识符（例如，“agent1”、“agent2”、“boss”）

步骤 2：验证并迭代

重要：在生成所有精灵表之前，先征得用户批准。

1. 复制生成的图像：

   cp "/Users/probello/nanobanana-images/[FILENAME].png" \
      "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png"
   

2. 使用 Read 工具查看图像并展示给用户

3. 请用户确认：

   • 角色设计符合预期
   • 美术风格正确（16 位像素艺术）
   • 比例适用于游戏
   • 色彩和细节可以接受

4. 如果未通过：根据反馈调整提示词并重新生成

5. 如果通过：继续步骤 3

步骤 3：生成所有精灵表

每次生成时都使用两张参考图像：

• 参考图 1：已获批准的角色设计（确保外观一致）
• 参考图 2：现有的 Agent #1 精灵表（确保帧布局一致）

3a. 待机动画精灵表

技术要求：

• 总尺寸：928 × 1152 像素
• 网格：8 列 × 8 行（共 64 个单元格）
• 单元格尺寸：每个 116 × 144 像素
• 单元格之间不得有边框、内边距或间距
• 帧必须填满整个单元格区域

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet, EXACTLY 928x1152 pixels total, divided into 8 columns and 8 rows grid, each cell is EXACTLY 116x144 pixels with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), 8 DIRECTIONS IN EXACT ORDER from top to bottom: ROW 0 south facing toward camera, ROW 1 south-west diagonal, ROW 2 west facing left profile, ROW 3 north-west diagonal, ROW 4 north facing away back view, ROW 5 north-east diagonal, ROW 6 east facing right profile, ROW 7 south-east diagonal, each row has 8 frames of subtle idle breathing animation, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character in every cell matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_idle_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_idle_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "4:5",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, grid lines, cell borders, padding between frames, gaps between cells"
}'

3b. 行走动画精灵表

技术要求：

• 总尺寸：928 × 1152 像素
• 网格：8 列 × 8 行（共 64 个单元格）
• 单元格尺寸：每个 116 × 144 像素
• 单元格之间不得有边框、内边距或间距

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for WALKING animation, EXACTLY 928x1152 pixels total, divided into 8 columns and 8 rows grid, each cell is EXACTLY 116x144 pixels with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), 8 DIRECTIONS IN EXACT ORDER from top to bottom: ROW 0 walking south toward camera, ROW 1 walking south-west diagonal, ROW 2 walking west left profile, ROW 3 walking north-west diagonal, ROW 4 walking north away back view, ROW 5 walking north-east diagonal, ROW 6 walking east right profile, ROW 7 walking south-east diagonal, each row has 8 frames of walk cycle with alternating legs and natural arm swing, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character in every cell matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_walk_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_walk_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "4:5",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, standing still, static pose, grid lines, cell borders, padding between frames, gaps between cells"
}'

3c. 打字动画精灵表

技术要求：

• 总尺寸：928 × 144 像素（单行）
• 网格：8 列 × 1 行
• 单元格尺寸：每个 116 × 144 像素
• 单元格之间不得有边框、内边距或间距
• 仅包含角色——不包含桌子、椅子或键盘（这些是独立的游戏素材）

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for TYPING animation, EXACTLY 928x144 pixels total, horizontal strip with 8 equal cells of EXACTLY 116x144 pixels each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from behind (back view) in seated typing pose with arms extended forward making typing motions, CHARACTER ONLY no desk no chair no keyboard no furniture, 8 frame typing animation showing hands and arms making typing movements, frames show subtle arm position changes as if typing, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 8 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_typing_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_typing_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, front view, standing, grid lines, cell borders, padding between frames, gaps between cells, desk, chair, keyboard, furniture, computer, monitor"
}'

3d. 文件夹交接动画精灵表

技术要求：

• 总尺寸：928 × 1120 像素（但内容位于一行）
• 网格：4 列 × 1 行（可用内容区域）
• 单元格尺寸：每个 232 × 411 像素
• 内容从 y=343 开始（垂直偏移量）
• 单元格之间不得有边框、内边距或间距

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for HANDING FOLDER animation, EXACTLY 928 pixels wide, horizontal strip with 4 equal cells of EXACTLY 232 pixels wide each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from side profile holding and handing over a manila folder document, 4 frame animation sequence: frame 1 holding folder at waist, frame 2 extending arm with folder, frame 3 arm fully extended offering folder, frame 4 releasing folder hand open, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 4 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_handoff_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_handoff_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, back view, grid lines, cell borders, padding between frames, gaps between cells"
}'

3e. 喝咖啡动画精灵表

技术要求：

• 总尺寸：928 × 1120 像素（但内容位于一行）
• 网格：4 列 × 1 行（可用内容区域）
• 单元格尺寸：每个 232 × 699 像素
• 内容从 y=0 开始
• 单元格之间不得有边框、内边距或间距

mcpl call nanobanana generate_image '{
  "prompt": "16-bit pixel art sprite sheet for DRINKING COFFEE animation, EXACTLY 928 pixels wide, horizontal strip with 4 equal cells of EXACTLY 232 pixels wide each with NO borders NO padding NO gaps between cells, character is [CHARACTER DESCRIPTION] (EXACTLY as shown in first reference image), character seen from front holding and drinking from a coffee cup mug, 4 frame animation sequence: frame 1 holding coffee cup at chest, frame 2 raising cup toward face, frame 3 cup at lips drinking, frame 4 lowering cup with satisfied expression, cells touch edge-to-edge with no visible grid lines, retro SNES Genesis 16-bit pixel art, SHARP CRISP PIXEL EDGES WITH ABSOLUTELY NO ANTI-ALIASING NO SMOOTHING NO BLENDING, each pixel is a solid color with hard edges, consistent character across all 4 frames matching reference, solid magenta #FF00FF background fills all empty space in each cell, game sprite sheet asset, no text no watermarks",
  "input_image_path_1": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_front_idle_raw.png",
  "input_image_path_2": "/Users/probello/Repos/claude-office/frontend/public/sprites/agent1_coffee_sheet.png",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_coffee_sheet_raw.png",
  "model_tier": "pro",
  "aspect_ratio": "21:9",
  "negative_prompt": "blurry, 3D, realistic, anti-aliasing, anti-aliased edges, smoothing, blending, soft edges, gradients, shadows on background, inconsistent character, different characters, text, watermark, back view, sitting, grid lines, cell borders, padding between frames, gaps between cells"
}'

步骤 4：验证每个生成的精灵表

重要：生成每个精灵表后：

1. 复制到精灵文件夹：

   cp "/Users/probello/nanobanana-images/[FILENAME].png" \
      "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_[TYPE]_sheet_raw.png"
   

2. 确认尺寸符合规格：

   cd /Users/probello/Repos/claude-office/frontend/public/sprites
   
   # Check sheet dimensions
   magick "[NAME]_[TYPE]_sheet_raw.png" -format "Size: %wx%h" info:
   
   # Expected dimensions:
   # idle/walk sheets: 928x1152
   # typing sheet: 928x144 (after cropping) or 928x1152 (full generation)
   # handoff/coffee sheets: 928x1152
   

3. 使用 Read 工具查看并确认：

   • 角色与已批准的设计一致
   • 所有帧均已生成且排列正确
   • 动画变化过程看起来正确
   • 洋红色背景为纯色
   • 没有可见的网格线或单元格边框
   • 单元格之间没有内边距或间距
   • 像素边缘清晰锐利，没有抗锯齿（放大检查）
   • 对于方向精灵表（待机/行走）：确认方向顺序正确：
     • 第 0 行：南（面向镜头）
     • 第 1 行：西南
     • 第 2 行：西（左侧面）
     • 第 3 行：西北
     • 第 4 行：北（背面）
     • 第 5 行：东北
     • 第 6 行：东（右侧面）
     • 第 7 行：东南

4. 检查常见问题：

   • 如果能看到网格线：加强“不得有网格线”的要求后重新生成
   • 如果单元格数量错误：按照正确的列数和行数重新生成
   • 如果单元格尺寸不一致：在提示词中指定确切的像素尺寸后重新生成
   • 如果边缘看起来柔和或模糊（有抗锯齿）：加强“不得有抗锯齿”的要求后重新生成
   • 如果方向顺序错误：明确指定“第 0 行南向、第 1 行西南向……”的顺序后重新生成

5. 如果发现问题，重新生成对应的精灵表

步骤 5：处理所有精灵表

使用改进的多阶段工作流移除所有精灵表的洋红色背景：

cd /Users/probello/Repos/claude-office/frontend/public/sprites

# Process all sheets using the shared script
SCRIPT="/Users/probello/Repos/claude-office/.claude/skills/shared/scripts/remove_magenta.sh"

for sheet in [NAME]_idle_sheet [NAME]_walk_sheet [NAME]_typing_sheet [NAME]_handoff_sheet [NAME]_coffee_sheet; do
  INPUT="${sheet}_raw.png"
  OUTPUT="${sheet}.png"

  # Use multi-pass removal (--skip-trim preserves sprite sheet dimensions)
  "$SCRIPT" "$INPUT" "$OUTPUT" --skip-trim

  echo "Processed: $OUTPUT"
  magick "$OUTPUT" -format "  Size: %wx%h, Opaque: %[opaque]" info:
done

多阶段工作流：

1. FFmpeg geq filter：移除 R≈B 且 G 较低的像素（紫色/洋红色色调）
2. ImageMagick 多阶段处理：清除剩余的亮洋红色
3. ImageMagick 深紫色清理：移除类似 rgb(32,0,31) 的深色边缘像素

同时处理基础角色精灵：

INPUT="[NAME]_front_idle_raw.png"
OUTPUT="[NAME]_front_idle.png"

"$SCRIPT" "$INPUT" "$OUTPUT"

备用方案（如果脚本不可用）：

magick "$INPUT" \
  -fuzz 40% -transparent "#FF00FF" \
  -fuzz 15% -transparent "#CC00CC" \
  -fuzz 15% -transparent "#880088" \
  -strip \
  "$OUTPUT"

步骤 6：最终验证

查看每个处理后的精灵表，确认：

• 角色边缘没有粉色/洋红色杂边（放大检查）
• 整体透明效果干净
• 角色边缘完整（未因移除背景色而受损）
• 所有帧均清晰可见

如果处理后仍有粉色边缘：

1. 尝试增大容差值：-fuzz 45% 或 -fuzz 50%（但请注意，超过 50% 可能会侵蚀角色边缘）
2. 如果这会侵蚀角色边缘，请降低容差，并手动检查原始图像
3. 原始图像若带有抗锯齿边缘且以洋红色为背景，始终会出现杂边问题——加强“不得有抗锯齿”的要求后重新生成原始图像

参考精灵表

以下 Agent #1 精灵表可用作布局参考：

精灵表	位置
Idle	/frontend/public/sprites/agent1_idle_sheet.png
Walking	/frontend/public/sprites/agent1_walk_sheet.png
Typing	/frontend/public/sprites/agent1_typing_sheet.png
Handoff	/frontend/public/sprites/agent1_handoff_sheet.png
Coffee	/frontend/public/sprites/agent1_coffee_sheet.png

输出位置

所有精灵图均放在：/Users/probello/Repos/claude-office/frontend/public/sprites/

• [name]_front_idle_raw.png - 原始角色设计（保留作参考）
• [name]_front_idle.png - 处理后的透明背景角色设计
• [name]_[type]_sheet_raw.png - 原始精灵表（保留作备份）
• [name]_[type]_sheet.png - 可用于游戏的处理后精灵表

角色构想

多样化角色描述示例：

角色	描述
Agent 2	女性开发者，穿紫色上衣、黑色裤子，戴眼镜，扎马尾
Agent 3	男性资深开发者，穿灰色毛衣、卡其裤，留胡子，发际线后移
Agent 4	非二元性别实习生，穿绿色连帽衫、牛仔裤，头发颜色鲜艳
Boss/Claude	气质不凡的人物，采用橙色／棕褐色色系（与 Claude 品牌形象一致）

反模式与常见问题

网格布局问题（严重）

不要：

• 在单元格之间添加可见网格线或边框
• 在单元格之间添加内边距／外边距／间距
• 生成单元格尺寸不一致的精灵表
• 使用错误的行列数（网格精灵表必须为 8×8，详见上文规格）
• 在打字精灵图中加入桌子、椅子、键盘（它们是单独的游戏素材）

常见生成错误（应拒绝）：

• 单元格之间可见网格线 → 重新生成，并强调“不要网格线”
• 单元格尺寸不一 → 按精确像素尺寸重新生成
• 单元格为空／缺失 → 重新生成，填满所有单元格
• 角色包含家具 → 重新生成，并强调“仅角色”

抗锯齿问题（严重）

不要：

• 接受边缘柔和／模糊的精灵图
• 接受像素之间存在颜色混合的精灵图
• 接受边缘带有平滑渐变的精灵图

如何检测抗锯齿：

• 放大查看角色边缘——每个像素都应是单一纯色
• 检查角色轮廓周围是否有“光晕”或“边缘杂色”
• 检查边缘是否显得平滑，而非锯齿状／阶梯状

常见抗锯齿错误（应拒绝）：

• 角色轮廓边缘柔和 → 重新生成，并更强调“不要抗锯齿”
• 像素边界存在颜色渐变 → 重新生成，并强调“每个像素都是纯色”
• 外观模糊／浑浊 → 重新生成，并强调“边缘清晰锐利的像素风格”

工作流反模式

不要：

• 跳过初始设计审批——持续迭代，直到用户满意
• 缺少两张参考图就生成精灵表
• 跳过对每张生成精灵表的验证
• 使用泛洪填充移除背景（精灵表请使用 -transparent）
• 在不同精灵表中使用不一致的角色设计

应该：

• 始终先获得用户对基础设计的认可
• 为每张精灵表使用角色参考图和布局参考图
• 生成后先验证每张精灵表，再继续下一步
• 保留原始图像作备份
• 验证全部完成后，再批量处理所有精灵表
• 生成后确认单元格尺寸符合规格