Run any Skill in Manus with one click

$pwd:

character-sprite

Name: Character Sprite
Author: paulrobello

// Generate complete character sprite sheets for the Claude Office Visualizer agents. Creates all animation frames (idle, walking, typing, handoff, coffee) with consistent character design across all sheets. Uses iterative approval workflow and reference-based generation for consistency.

Run Skill in Manus

$ git log --oneline --stat

stars:400

forks:79

updated:January 22, 2026 at 15:57

SKILL.md

readonly

related-skills.json

same repository

desk-accessory.md

from "paulrobello/claude-office"

Generate desk accessories for the Claude Office Visualizer. Creates small office items (mugs, staplers, plants, etc.) that sit on agent desks. Items are made grayscale/white by default so they can be tinted different colors for variety.

2026-01-22400

office-sprite.md

from "paulrobello/claude-office"

Generate game-ready sprites for the Claude Office Visualizer using Nano Banana MCP and ImageMagick. Uses 45-degree front/top-down perspective (NOT isometric) with retro 16-bit pixel art style. Includes validation step before processing and helper scripts for background removal.

2026-01-22400

package.json

"author": "paulrobello"

"repository": "paulrobello/claude-office"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Software DevelopersComputer and Mathematical Occupations15-1252L4

Run any Skill with one click

name	character-sprite
description	Generate complete character sprite sheets for the Claude Office Visualizer agents. Creates all animation frames (idle, walking, typing, handoff, coffee) with consistent character design across all sheets. Uses iterative approval workflow and reference-based generation for consistency.
triggers	["create agent sprite","create character sprite","new office character","generate agent animations","make character for office"]

Character Sprite Generator

Create complete, animated character sprite sheets for Claude Office Visualizer agents using Nano Banana MCP and ImageMagick.

Project Context

Characters are office workers rendered in retro 16-bit pixel art style. Each character requires multiple animation sprite sheets for different actions and directions.

Art Style: Retro 16-bit pixel art (SNES/Genesis era), clean pixels, limited colors.

CRITICAL - NO ANTI-ALIASING: All sprites must have sharp, crisp pixel edges with NO anti-aliasing, NO smoothing, NO blending between pixels. Each pixel should be a solid color with hard edges. Anti-aliased sprites look blurry and muddy in the game.

Character Constraints:

Max width: 60px (matches current agent radius × 2)
Max height: 75px (25% taller than width allowed)
Magenta (#FF00FF) chroma key background

Sprite Sheet Technical Specifications

CRITICAL: Grid Layout Requirements

The game engine parses sprite sheets by dividing the total image into a fixed grid. All cells must be uniform with ZERO padding/spacing between them.

┌──────────────────────────────────────────────────────────────────────────────┐
│  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)  │
└──────────────────────────────────────────────────────────────────────────────┘

DO NOT:

Add visible grid lines or cell borders
Add padding or spacing between cells
Use inconsistent cell sizes
Leave empty cells (fill with magenta background)

Sheet Dimensions & Frame Specifications

Sheet Type	Total Size	Grid	Cell Size	Frames
Idle	928 × 1152 px	8 cols × 8 rows	116 × 144 px	64 total
Walking	928 × 1152 px	8 cols × 8 rows	116 × 144 px	64 total
Typing	928 × 144 px	8 cols × 1 row	116 × 144 px	8 frames
Handoff	928 × 1152 px	4 cols × 1 row	232 × 411 px*	4 frames
Coffee	928 × 1152 px	4 cols × 1 row	232 × 699 px*	4 frames

*Handoff/coffee sheets have content offset - see Frame Location Map below.

Frame Location Map

Grid Sheets (Idle/Walk) - 8 columns × 8 rows:

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

Strip Sheets (Single row):

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)

Animation Requirements

Animation	Frames	Duration	Looped	Notes
Idle	8 frames × 8 directions	2000ms	Yes	Subtle breathing/weight shift
Walking	8 frames × 8 directions	800ms	Yes	Full walk cycle with arm swing
Typing	8 frames	400ms	Yes	Back view, hands on keyboard
Handoff	4 frames	600ms	No	Side view, handing folder
Coffee	4 frames	400ms	Yes	Front view, drinking motion

8 Directions (row order): S, SW, W, NW, N, NE, E, SE

Workflow

Step 1: Generate Base Character Design

Create a front-facing idle pose to establish the character's look:

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"
}'

Prompt Variables:

[CHARACTER DESCRIPTION]: e.g., "male office worker", "female developer", "robot assistant"
[CLOTHING DESCRIPTION]: e.g., "wearing blue dress shirt and tie, brown pants, black shoes, short brown hair"
[NAME]: Character identifier (e.g., "agent1", "agent2", "boss")

Step 2: VALIDATE AND ITERATE

CRITICAL: Get user approval before generating all sprite sheets.

Copy the generated image:

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

View the image using the Read tool and present to user
Ask user to validate:
- Character design matches their vision
- Art style is correct (16-bit pixel art)
- Proportions work for the game
- Colors and details are acceptable
If rejected: Regenerate with adjusted prompt based on feedback
If approved: Proceed to Step 3

Step 3: Generate All Sprite Sheets

Use BOTH reference images for each generation:

Reference 1: The approved character design (for consistent appearance)
Reference 2: Existing Agent #1 sprite sheet (for consistent frame layout)

3a. Idle Animation Sheet

Technical Requirements:

Total size: 928 × 1152 pixels
Grid: 8 columns × 8 rows (64 cells total)
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells
Frames must fill entire cell area

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. Walking Animation Sheet

Technical Requirements:

Total size: 928 × 1152 pixels
Grid: 8 columns × 8 rows (64 cells total)
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells

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. Typing Animation Sheet

Technical Requirements:

Total size: 928 × 144 pixels (single row)
Grid: 8 columns × 1 row
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells
CHARACTER ONLY - no desk, chair, or keyboard (those are separate game assets)

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. Folder Handoff Animation Sheet

Technical Requirements:

Total size: 928 × 1120 pixels (but content in one row)
Grid: 4 columns × 1 row (usable content area)
Cell size: 232 × 411 pixels each
Content starts at y=343 (vertical offset)
NO borders, padding, or spacing between cells

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. Coffee Drinking Animation Sheet

Technical Requirements:

Total size: 928 × 1120 pixels (but content in one row)
Grid: 4 columns × 1 row (usable content area)
Cell size: 232 × 699 pixels each
Content starts at y=0
NO borders, padding, or spacing between cells

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"
}'

Step 4: Validate Each Generated Sheet

CRITICAL: After generating each sprite sheet:

Copy to sprites folder:

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

Verify dimensions match specifications:

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

View using Read tool to verify:
- Character matches approved design
- All frames are present and properly arranged
- Animation progression looks correct
- Magenta background is solid
- NO visible grid lines or cell borders
- NO padding/spacing between cells
- SHARP pixel edges with NO anti-aliasing (zoom in to check)
- For directional sheets (idle/walk): Verify direction order is correct:
  - Row 0: South (facing camera)
  - Row 1: South-West
  - Row 2: West (left profile)
  - Row 3: North-West
  - Row 4: North (back view)
  - Row 5: North-East
  - Row 6: East (right profile)
  - Row 7: South-East
Check for common issues:
- If grid lines visible: Regenerate with stronger "no grid lines" emphasis
- If wrong cell count: Regenerate with correct column/row specification
- If inconsistent cell sizes: Regenerate with exact pixel dimensions in prompt
- If edges look soft/blurry (anti-aliased): Regenerate with stronger "NO ANTI-ALIASING" emphasis
- If directions are in wrong order: Regenerate with explicit "ROW 0 south, ROW 1 south-west..." sequence
If issues found, regenerate that specific sheet

Step 5: Process All Sprite Sheets

Remove magenta backgrounds from all sheets using the improved multi-pass workflow:

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

The multi-pass workflow:

FFmpeg geq filter: Removes pixels where R≈B and G is low (purple/magenta hues)
ImageMagick multi-pass: Catches remaining bright magenta shades
ImageMagick dark purple cleanup: Removes dark edge pixels like rgb(32,0,31)

Also process the base character sprite:

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

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

Fallback (if script unavailable):

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

Step 6: Final Verification

View each processed sprite sheet to confirm:

NO pink/magenta fringing around character edges (zoom in to check)
Clean transparency throughout
Character edges intact (not eroded by transparency removal)
All frames visible

If pink edges remain after processing:

Try increasing fuzz value: -fuzz 45% or -fuzz 50% (but watch for character edge erosion above 50%)
If that erodes character edges, reduce fuzz and manually check the raw image
Raw images with anti-aliased edges against magenta will always have fringing issues - regenerate the raw image with stronger "NO ANTI-ALIASING" emphasis

Reference Sprite Sheets

The following Agent #1 sprite sheets serve as layout references:

Sheet	Location
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`

Output Location

All sprites go to: /Users/probello/Repos/claude-office/frontend/public/sprites/

[name]_front_idle_raw.png - Original character design (keep as reference)
[name]_front_idle.png - Processed character design with transparency
[name]_[type]_sheet_raw.png - Raw sprite sheets (keep as backup)
[name]_[type]_sheet.png - Processed sprite sheets ready for game

Character Ideas

Example character descriptions for variety:

Character	Description
Agent 2	Female developer with purple blouse, black pants, glasses, ponytail
Agent 3	Male senior dev with gray sweater, khakis, beard, receding hairline
Agent 4	Non-binary intern with green hoodie, jeans, colorful hair
Boss/Claude	Distinguished figure with orange/tan color scheme (matches Claude branding)

Anti-Patterns & Common Issues

Grid Layout Issues (CRITICAL)

DO NOT:

Add visible grid lines or borders between cells
Add padding/margin/spacing between cells
Generate sheets with inconsistent cell sizes
Use wrong row/column counts (must be 8×8 for grid sheets, see specs above)
Include desk, chair, keyboard in typing sprites (they're separate game assets)

Common Generation Mistakes to Reject:

Grid lines visible between cells → regenerate with emphasis on "no grid lines"
Cells have varying sizes → regenerate with exact pixel dimensions
Empty/missing cells → regenerate with all cells filled
Character includes furniture → regenerate with "CHARACTER ONLY" emphasis

Anti-Aliasing Issues (CRITICAL)

DO NOT:

Accept sprites with soft/blurry edges
Accept sprites with color blending between pixels
Accept sprites with smooth gradients at edges

How to Detect Anti-Aliasing:

Zoom in on character edges - each pixel should be a single solid color
Look for "halo" or "fringe" colors around the character outline
Check if edges look smooth instead of jagged/stepped

Common Anti-Aliasing Mistakes to Reject:

Soft edges around character outline → regenerate with stronger "NO ANTI-ALIASING" emphasis
Color gradients at pixel boundaries → regenerate, emphasize "each pixel is a solid color"
Blurry/muddy appearance → regenerate with "SHARP CRISP PIXEL EDGES"

Workflow Anti-Patterns

DO NOT:

Skip the initial design approval - iterate until user is happy
Generate sprite sheets without both reference images
Skip validation of each generated sheet
Use flood-fill for background removal (use -transparent for sprite sheets)
Proceed with inconsistent character designs across sheets

DO:

Always get user approval on base design first
Use character reference + layout reference for each sheet
Validate each sheet after generation before proceeding
Keep raw images as backup
Process all sheets in batch after validation complete
Verify cell dimensions match specs after generation

name	character-sprite
description	Generate complete character sprite sheets for the Claude Office Visualizer agents. Creates all animation frames (idle, walking, typing, handoff, coffee) with consistent character design across all sheets. Uses iterative approval workflow and reference-based generation for consistency.
triggers	["create agent sprite","create character sprite","new office character","generate agent animations","make character for office"]

Character Sprite Generator

Create complete, animated character sprite sheets for Claude Office Visualizer agents using Nano Banana MCP and ImageMagick.

Project Context

Characters are office workers rendered in retro 16-bit pixel art style. Each character requires multiple animation sprite sheets for different actions and directions.

Art Style: Retro 16-bit pixel art (SNES/Genesis era), clean pixels, limited colors.

Character Constraints:

Max width: 60px (matches current agent radius × 2)
Max height: 75px (25% taller than width allowed)
Magenta (#FF00FF) chroma key background

Sprite Sheet Technical Specifications

CRITICAL: Grid Layout Requirements

The game engine parses sprite sheets by dividing the total image into a fixed grid. All cells must be uniform with ZERO padding/spacing between them.

┌──────────────────────────────────────────────────────────────────────────────┐
│  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)  │
└──────────────────────────────────────────────────────────────────────────────┘

DO NOT:

Add visible grid lines or cell borders
Add padding or spacing between cells
Use inconsistent cell sizes
Leave empty cells (fill with magenta background)

Sheet Dimensions & Frame Specifications

Sheet Type	Total Size	Grid	Cell Size	Frames
Idle	928 × 1152 px	8 cols × 8 rows	116 × 144 px	64 total
Walking	928 × 1152 px	8 cols × 8 rows	116 × 144 px	64 total
Typing	928 × 144 px	8 cols × 1 row	116 × 144 px	8 frames
Handoff	928 × 1152 px	4 cols × 1 row	232 × 411 px*	4 frames
Coffee	928 × 1152 px	4 cols × 1 row	232 × 699 px*	4 frames

*Handoff/coffee sheets have content offset - see Frame Location Map below.

Frame Location Map

Grid Sheets (Idle/Walk) - 8 columns × 8 rows:

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

Strip Sheets (Single row):

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)

Animation Requirements

Animation	Frames	Duration	Looped	Notes
Idle	8 frames × 8 directions	2000ms	Yes	Subtle breathing/weight shift
Walking	8 frames × 8 directions	800ms	Yes	Full walk cycle with arm swing
Typing	8 frames	400ms	Yes	Back view, hands on keyboard
Handoff	4 frames	600ms	No	Side view, handing folder
Coffee	4 frames	400ms	Yes	Front view, drinking motion

8 Directions (row order): S, SW, W, NW, N, NE, E, SE

Workflow

Step 1: Generate Base Character Design

Create a front-facing idle pose to establish the character's look:

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"
}'

Prompt Variables:

[CHARACTER DESCRIPTION]: e.g., "male office worker", "female developer", "robot assistant"
[CLOTHING DESCRIPTION]: e.g., "wearing blue dress shirt and tie, brown pants, black shoes, short brown hair"
[NAME]: Character identifier (e.g., "agent1", "agent2", "boss")

Step 2: VALIDATE AND ITERATE

CRITICAL: Get user approval before generating all sprite sheets.

Copy the generated image:

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

View the image using the Read tool and present to user
Ask user to validate:
- Character design matches their vision
- Art style is correct (16-bit pixel art)
- Proportions work for the game
- Colors and details are acceptable
If rejected: Regenerate with adjusted prompt based on feedback
If approved: Proceed to Step 3

Step 3: Generate All Sprite Sheets

Use BOTH reference images for each generation:

Reference 1: The approved character design (for consistent appearance)
Reference 2: Existing Agent #1 sprite sheet (for consistent frame layout)

3a. Idle Animation Sheet

Technical Requirements:

Total size: 928 × 1152 pixels
Grid: 8 columns × 8 rows (64 cells total)
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells
Frames must fill entire cell area

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. Walking Animation Sheet

Technical Requirements:

Total size: 928 × 1152 pixels
Grid: 8 columns × 8 rows (64 cells total)
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells

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. Typing Animation Sheet

Technical Requirements:

Total size: 928 × 144 pixels (single row)
Grid: 8 columns × 1 row
Cell size: 116 × 144 pixels each
NO borders, padding, or spacing between cells
CHARACTER ONLY - no desk, chair, or keyboard (those are separate game assets)

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. Folder Handoff Animation Sheet

Technical Requirements:

Total size: 928 × 1120 pixels (but content in one row)
Grid: 4 columns × 1 row (usable content area)
Cell size: 232 × 411 pixels each
Content starts at y=343 (vertical offset)
NO borders, padding, or spacing between cells

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. Coffee Drinking Animation Sheet

Technical Requirements:

Total size: 928 × 1120 pixels (but content in one row)
Grid: 4 columns × 1 row (usable content area)
Cell size: 232 × 699 pixels each
Content starts at y=0
NO borders, padding, or spacing between cells

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"
}'

Step 4: Validate Each Generated Sheet

CRITICAL: After generating each sprite sheet:

Copy to sprites folder:

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

Verify dimensions match specifications:

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

View using Read tool to verify:
- Character matches approved design
- All frames are present and properly arranged
- Animation progression looks correct
- Magenta background is solid
- NO visible grid lines or cell borders
- NO padding/spacing between cells
- SHARP pixel edges with NO anti-aliasing (zoom in to check)
- For directional sheets (idle/walk): Verify direction order is correct:
  - Row 0: South (facing camera)
  - Row 1: South-West
  - Row 2: West (left profile)
  - Row 3: North-West
  - Row 4: North (back view)
  - Row 5: North-East
  - Row 6: East (right profile)
  - Row 7: South-East
Check for common issues:
- If grid lines visible: Regenerate with stronger "no grid lines" emphasis
- If wrong cell count: Regenerate with correct column/row specification
- If inconsistent cell sizes: Regenerate with exact pixel dimensions in prompt
- If edges look soft/blurry (anti-aliased): Regenerate with stronger "NO ANTI-ALIASING" emphasis
- If directions are in wrong order: Regenerate with explicit "ROW 0 south, ROW 1 south-west..." sequence
If issues found, regenerate that specific sheet

Step 5: Process All Sprite Sheets

Remove magenta backgrounds from all sheets using the improved multi-pass workflow:

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

The multi-pass workflow:

FFmpeg geq filter: Removes pixels where R≈B and G is low (purple/magenta hues)
ImageMagick multi-pass: Catches remaining bright magenta shades
ImageMagick dark purple cleanup: Removes dark edge pixels like rgb(32,0,31)

Also process the base character sprite:

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

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

Fallback (if script unavailable):

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

Step 6: Final Verification

View each processed sprite sheet to confirm:

NO pink/magenta fringing around character edges (zoom in to check)
Clean transparency throughout
Character edges intact (not eroded by transparency removal)
All frames visible

If pink edges remain after processing:

Try increasing fuzz value: -fuzz 45% or -fuzz 50% (but watch for character edge erosion above 50%)
If that erodes character edges, reduce fuzz and manually check the raw image
Raw images with anti-aliased edges against magenta will always have fringing issues - regenerate the raw image with stronger "NO ANTI-ALIASING" emphasis

Reference Sprite Sheets

The following Agent #1 sprite sheets serve as layout references:

Sheet	Location
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`

Output Location

All sprites go to: /Users/probello/Repos/claude-office/frontend/public/sprites/

[name]_front_idle_raw.png - Original character design (keep as reference)
[name]_front_idle.png - Processed character design with transparency
[name]_[type]_sheet_raw.png - Raw sprite sheets (keep as backup)
[name]_[type]_sheet.png - Processed sprite sheets ready for game

Character Ideas

Example character descriptions for variety:

Character	Description
Agent 2	Female developer with purple blouse, black pants, glasses, ponytail
Agent 3	Male senior dev with gray sweater, khakis, beard, receding hairline
Agent 4	Non-binary intern with green hoodie, jeans, colorful hair
Boss/Claude	Distinguished figure with orange/tan color scheme (matches Claude branding)

Anti-Patterns & Common Issues

Grid Layout Issues (CRITICAL)

DO NOT:

Add visible grid lines or borders between cells
Add padding/margin/spacing between cells
Generate sheets with inconsistent cell sizes
Use wrong row/column counts (must be 8×8 for grid sheets, see specs above)
Include desk, chair, keyboard in typing sprites (they're separate game assets)

Common Generation Mistakes to Reject:

Grid lines visible between cells → regenerate with emphasis on "no grid lines"
Cells have varying sizes → regenerate with exact pixel dimensions
Empty/missing cells → regenerate with all cells filled
Character includes furniture → regenerate with "CHARACTER ONLY" emphasis

Anti-Aliasing Issues (CRITICAL)

DO NOT:

Accept sprites with soft/blurry edges
Accept sprites with color blending between pixels
Accept sprites with smooth gradients at edges

How to Detect Anti-Aliasing:

Zoom in on character edges - each pixel should be a single solid color
Look for "halo" or "fringe" colors around the character outline
Check if edges look smooth instead of jagged/stepped

Common Anti-Aliasing Mistakes to Reject:

Soft edges around character outline → regenerate with stronger "NO ANTI-ALIASING" emphasis
Color gradients at pixel boundaries → regenerate, emphasize "each pixel is a solid color"
Blurry/muddy appearance → regenerate with "SHARP CRISP PIXEL EDGES"

Workflow Anti-Patterns

DO NOT:

Skip the initial design approval - iterate until user is happy
Generate sprite sheets without both reference images
Skip validation of each generated sheet
Use flood-fill for background removal (use -transparent for sprite sheets)
Proceed with inconsistent character designs across sheets

DO:

Always get user approval on base design first
Use character reference + layout reference for each sheet
Validate each sheet after generation before proceeding
Keep raw images as backup
Process all sheets in batch after validation complete
Verify cell dimensions match specs after generation

character-sprite

More from this repository

More from this repository

Character Sprite Generator

Project Context

Sprite Sheet Technical Specifications

CRITICAL: Grid Layout Requirements

Sheet Dimensions & Frame Specifications

Frame Location Map

Animation Requirements

Workflow

Step 1: Generate Base Character Design

Step 2: VALIDATE AND ITERATE

Step 3: Generate All Sprite Sheets

3a. Idle Animation Sheet

3b. Walking Animation Sheet

3c. Typing Animation Sheet

3d. Folder Handoff Animation Sheet

3e. Coffee Drinking Animation Sheet

Step 4: Validate Each Generated Sheet

Step 5: Process All Sprite Sheets

Step 6: Final Verification

Reference Sprite Sheets

Output Location

Character Ideas

Anti-Patterns & Common Issues

Grid Layout Issues (CRITICAL)

Anti-Aliasing Issues (CRITICAL)

Workflow Anti-Patterns

Character Sprite Generator

Project Context

Sprite Sheet Technical Specifications

CRITICAL: Grid Layout Requirements

Sheet Dimensions & Frame Specifications

Frame Location Map

Animation Requirements

Workflow

Step 1: Generate Base Character Design

Step 2: VALIDATE AND ITERATE

Step 3: Generate All Sprite Sheets

3a. Idle Animation Sheet

3b. Walking Animation Sheet

3c. Typing Animation Sheet

3d. Folder Handoff Animation Sheet

3e. Coffee Drinking Animation Sheet

Step 4: Validate Each Generated Sheet

Step 5: Process All Sprite Sheets

Step 6: Final Verification

Reference Sprite Sheets

Output Location

Character Ideas

Anti-Patterns & Common Issues

Grid Layout Issues (CRITICAL)

Anti-Aliasing Issues (CRITICAL)

Workflow Anti-Patterns