office-sprite（办公室精灵）

Office Sprite Generator

Create game-ready sprites for the Claude Office Visualizer using Nano Banana MCP and ImageMagick.

Project Context

The Claude Office Visualizer uses a 45-degree front/top-down perspective (NOT isometric). This means:

• Objects are viewed primarily from the front
• Slight top-down angle shows a bit of the top surface
• You do NOT see multiple side faces like in isometric views
• Similar to classic 2D RPGs or top-down office games

Art Style: Retro 16-bit pixel art with clean edges and limited anti-aliasing.

Workflow

Step 1: Generate with Nano Banana

Use mcpl to call Nano Banana with this prompt template:

mcpl call nanobanana generate_image '{
  "prompt": "[OBJECT DESCRIPTION], front view with slight top-down angle, NOT isometric, pixel art style, retro 16-bit game sprite, isolated on solid magenta background #FF00FF, clean edges, no shadows on background, game sprite asset, centered composition, no text, no watermarks, simple design",
  "output_path": "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_raw.png"
}'

Prompt Variables:

• [OBJECT DESCRIPTION]: Detailed description of the object (e.g., "Office water cooler dispenser with blue water bottle jug on top of white dispenser stand with hot and cold taps")
• [NAME]: Sprite filename (e.g., "watercooler", "desk", "plant")

Step 2: VALIDATE THE IMAGE

CRITICAL: Before proceeding with ImageMagick processing, you MUST:

1. Copy the generated image to the raw location: cp "/Users/probello/nanobanana-images/temp_images/[UUID].png" \ "/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_raw.png"
2. View the image using the Read tool to verify:

- Perspective is correct (front view, NOT isometric/3D cube view) - Subject is centered and fully visible - Background is solid magenta (may have black letterboxing on sides) - Art style matches retro pixel art aesthetic

1. If the image is NOT correct:

- Regenerate with adjusted prompt - Do NOT proceed to ImageMagick processing - Common issues: - Isometric view: Add "NOT isometric, front facing view" more emphatically - Wrong style: Specify "16-bit pixel art, retro game sprite" more clearly - Cut off subject: Add "full object visible, not cropped"

Step 3: Process with ImageMagick

Only after validation passes, remove the magenta background using the helper script:

# Using the helper script (recommended)
/Users/probello/Repos/claude-office/.claude/skills/office-sprite/scripts/process_sprite.sh \
  /Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_raw.png \
  /Users/probello/Repos/claude-office/frontend/public/sprites/[NAME].png

The script uses a multi-pass workflow combining FFmpeg and ImageMagick:

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

For legacy flood-fill method (faster but may leave pink edges):

process_sprite.sh input.png output.png --legacy

Manual multi-pass workflow (if script unavailable):

INPUT="/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME]_raw.png"
OUTPUT="/Users/probello/Repos/claude-office/frontend/public/sprites/[NAME].png"

# Step 1: FFmpeg - remove purple hue pixels (R≈B, G low)
ffmpeg -y -i "$INPUT" \
  -vf "geq=r='r(X,Y)':g='g(X,Y)':b='b(X,Y)':a='if(between(r(X,Y)-b(X,Y),-60,60)*lt(g(X,Y),r(X,Y)*0.7)*lt(g(X,Y),b(X,Y)*0.7)*gt(r(X,Y)+b(X,Y),100),0,alpha(X,Y))'" \
  -update 1 -frames:v 1 /tmp/step1.png

# Step 2: ImageMagick - remove bright magenta shades
magick /tmp/step1.png -alpha set -channel RGBA \
  -fuzz 20% -transparent "magenta" \
  -fuzz 15% -transparent "#CC00CC" \
  -fuzz 15% -transparent "#880088" \
  -fuzz 15% -transparent "#660066" \
  /tmp/step2.png

# Step 3: ImageMagick - remove dark purple edge pixels
magick /tmp/step2.png \
  -fuzz 8% -fill none \
  -opaque "rgb(32,0,31)" \
  -opaque "rgb(34,0,31)" \
  -trim +repage -strip \
  "$OUTPUT"

# Verify transparency
magick "$OUTPUT" -format "Size: %wx%h, Opaque: %[opaque]" info:

Why multi-pass? AI-generated images often have anti-aliased edges that blend the subject with the magenta background. Single-pass removal leaves pink/purple fringing. The multi-pass approach targets different shades of magenta/purple for thorough cleanup

Step 4: Verify Final Sprite

View the processed sprite with the Read tool to confirm:

• Clean transparency (no magenta fringing)
• Sprite edges are intact (not eroded)
• Correct dimensions for game use

Step 5: Update Game Code

In OfficeGameV2.tsx, sprites are loaded and displayed like this:

// Add texture state
const [spriteTexture, setSpriteTexture] = useState<Texture | null>(null);

// Load texture in useEffect
useEffect(() => {
  const loadTextures = async () => {
    try {
      const texture = await Assets.load("/sprites/[NAME].png");
      setSpriteTexture(texture);
    } catch (e) {
      console.warn("Failed to load sprite:", e);
    }
  };
  loadTextures();
}, []);

// Render sprite with fallback to placeholder
<pixiContainer x={X_POS} y={Y_POS}>
  {spriteTexture ? (
    <pixiSprite
      texture={spriteTexture}
      anchor={0.5}
      scale={SCALE_FACTOR}
    />
  ) : (
    <pixiGraphics draw={drawPlaceholder} />
  )}
</pixiContainer>

Scale Calculation:

• Target display width / Sprite actual width = scale factor
• Example: For 50px display width with 189px sprite: scale={50/189} or scale={0.26}

Furniture Reference

Current furniture sizes from furnitureManager.ts:

Additional elements from OfficeGameV2.tsx:

Output Location

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

• [name]_raw.png - Original generated image (keep for reference)
• [name].png - Processed sprite with transparency

Anti-Patterns

DO NOT:

• Skip the validation step - always view the raw image first
• Use -transparent instead of flood fill - it removes ALL matching pixels
• Proceed with isometric/wrong perspective images - regenerate instead
• Use white or black as chroma key - they appear in subjects
• Forget to trim - wastes texture memory

DO:

• Always validate before processing
• Use flood fill from corners for clean background removal
• Keep raw images as backup
• Verify final sprite has transparency (Opaque: False)
• Test sprite in game before moving to next asset