claude-office: Skill for Claude Code

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