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.
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.
Create desk accessories for the Claude Office Visualizer using Nano Banana MCP for AI image generation and ImageMagick for transparency and tinting preparation.
Philosophy: Tintable Variety
Desk accessories should be grayscale or white so they can be tinted with different colors at runtime. This allows a single sprite to represent many color variations across different desks, adding visual variety without generating multiple sprites.
Before generating, ask:
Is this a unique item (one-of-a-kind) or a common item (appears on multiple desks)?
If common: make it WHITE/GRAYSCALE for tinting
If unique: colors can be baked in
Key Principle: White for Tinting
CRITICAL: Unless the item is unique (only appears once), generate it as WHITE or GRAYSCALE so it can be tinted programmatically.
Why this matters:
A white coffee mug can become blue, pink, green, gold via tinting
A red stapler can ONLY be red - no variety
Tinting multiplies the sprite's colors with the tint color
White (0xFFFFFF) × any tint = that tint color
Gray gives shaded/dimensional tinting results
Key Principle: Facing Direction
CRITICAL: All desk items should face (away from the viewer). The game uses a top-down perspective where the user views characters and items from behind/above. Items should be oriented so their "front" faces away from the camera toward the top-left of the screen.
NORTH-WEST
Prompt Templates
Scaling Guidance
IMPORTANT: Generated images (1024px) are scaled down to ~128px for use in the game. Include guidance in your prompts to ensure details survive scaling:
Request thick lines and bold shapes
Ask for chunky pixel art style
Avoid fine details that will disappear at small sizes
Add explicit note: "this will be scaled down significantly, use thick prominent features"
Common Desk Items (Tintable - WHITE/GRAYSCALE)
Pixel art [ITEM], 16-bit retro game style, WHITE colored, simple clean design,
facing north-west, on solid magenta background #FF00FF, game sprite asset,
centered composition, no shadows on background, clean edges,
chunky pixel art with thick lines and bold shapes, this will be scaled down significantly so use thick prominent features
Tintable item examples:
Coffee mug (white ceramic)
Stapler (white/gray body)
Tape dispenser (white/gray)
Pencil cup (white ceramic)
Small plant pot (white ceramic)
Desk lamp (white/gray)
Paper tray (white/gray)
Unique Desk Items (Full Color OK)
Pixel art [ITEM], 16-bit retro game style, [SPECIFIC COLORS], simple clean design,
facing north-west, on solid magenta background #FF00FF, game sprite asset,
centered composition, no shadows on background, clean edges,
chunky pixel art with thick lines and bold shapes, this will be scaled down significantly so use thick prominent features
Unique item examples (color OK):
Globe (blue/green earth colors)
Family photo frame (wood frame, photo inside)
Award trophy (gold)
Specific branded items
Processing Workflow
Step 1: Generate with Nano Banana
Use mcpl to call the nanobanana generate_image tool. Always use model_tier: "pro" and resolution: "1k":
mcpl call nanobanana generate_image '{"prompt": "Pixel art white coffee mug, 16-bit retro game style, WHITE colored ceramic, simple clean design, facing north-west, on solid magenta background #FF00FF, game sprite asset, centered composition, no shadows on background, chunky pixel art with thick lines and bold shapes, this will be scaled down significantly so use thick prominent features", "model_tier": "pro", "resolution": "1k"}'
Why these settings:
model_tier: "pro": Best quality generation
resolution: "1k": Smallest output (1024px) since we're scaling down anyway - saves processing time
Prompt includes scaling guidance so the AI uses thick, prominent features that survive downscaling
Step 2: Process for Transparency + Grayscale + Scaling
For tintable items, use the helper script:
# Default: scales to 128px max dimension (ideal for desk accessories)
.claude/skills/desk-accessory/scripts/process_tintable.sh input.png output.png
# Custom size for larger/more detailed items
.claude/skills/desk-accessory/scripts/process_tintable.sh input.png output.png 15 140 192
# Skip scaling (keep original ~1024px size)
.claude/skills/desk-accessory/scripts/process_tintable.sh input.png output.png 15 140 0
-filter Point: Nearest-neighbor interpolation (preserves pixel art crispness)
-resize "128x128>": Scale down to max 128px, only if larger (the > suffix)
-type TrueColorAlpha: Ensure RGBA format for PixiJS compatibility
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 3: Verify Result
# Check has transparency and correct format
magick "$OUTPUT" -format "Size: %wx%h, Channels: %[channels], Transparent: %[opaque]" info:
# Expected: Channels: srgba 4.0, Transparent: False
Step 4: Place in Project
mv"$OUTPUT" frontend/public/sprites/
Integration with OfficeGameV2
Desk accessories are rendered in DeskSurfaces component with tinting:
// Define tint colors arrayconst accessoryTints = [
0xffffff, // White (no tint)0x87ceeb, // Sky blue0x98fb98, // Pale green0xffb6c1, // Light pink0xffd700, // Gold0xdda0dd, // Plum0xf0e68c, // Khaki0xadd8e6, // Light blue
];
// Apply tint based on desk index<pixiSpritetexture={accessoryTexture}tint={accessoryTints[deskIndex % accessoryTints.length]}
...
/>
# 1. Generate white/grayscale item - use pro model at 1k resolution
mcpl call nanobanana generate_image '{"prompt": "Pixel art white [ITEM], 16-bit retro game style, WHITE colored, simple clean design, facing north-west, on solid magenta background #FF00FF, game sprite asset, centered composition, clean edges, chunky pixel art with thick lines and bold shapes, this will be scaled down significantly so use thick prominent features", "model_tier": "pro", "resolution": "1k"}'# 2. Process for tinting (default: scales to 128px, grayscale, transparent background)
.claude/skills/desk-accessory/scripts/process_tintable.sh /path/to/generated.png frontend/public/sprites/item-name.png
# 2b. For larger/more detailed items, use a larger target size
.claude/skills/desk-accessory/scripts/process_tintable.sh /path/to/generated.png frontend/public/sprites/item-name.png 15 140 192
# 3. Verify
magick frontend/public/sprites/item-name.png -format "%wx%h %[channels] %[opaque]" info:
# Should show: ~128x128 (or smaller) srgba 4.0 False
Anti-Patterns
❌ Generating colored common items
Why: Can't be tinted to other colors effectively.
Better: Generate white/grayscale, tint at runtime.
❌ Using flood fill for items with holes
Why: Flood fill from corners won't reach enclosed areas (like mug handles).
Better: Use global -transparent for items with enclosed spaces.
❌ Forgetting -type TrueColorAlpha
Why: Grayscale conversion creates 2-channel images that may not render correctly.
Better: Always convert back to RGBA after desaturation.
❌ Making items too detailed
Why: Small desk items are rendered at tiny scales (~0.025-0.03).
Better: Simple, bold shapes that read well at small sizes.
Existing Accessories
Item
File
Tintable
Notes
Coffee Mug
coffee-mug.png
Yes
White ceramic, no steam
Stapler
stapler.png
Yes
Grayscale, brightened
Desk Lamp
desk-lamp.png
Yes
Adjustable lamp, facing NW
Remember
Common items = WHITE/GRAYSCALE for tinting variety
Process with -modulate X,0,100 to desaturate
Always use -type TrueColorAlpha for PixiJS compatibility
Test tinting looks good with multiple colors before committing