office-sprite
Generate and process 16-bit pixel art office assets for the Claude Office Visualizer using Nano Banana MCP and multi-pass ImageMagick workflows.
Introduction
The office-sprite skill provides an automated pipeline for creating game-ready pixel art assets for the Claude Office Visualizer, a real-time simulation environment. This tool targets developers and creative users who need consistent, retro-styled furniture and object sprites that align with the visualizer's specific 45-degree front/top-down perspective. By leveraging the Nano Banana MCP for AI image generation and a specialized ImageMagick multi-pass post-processing script, users can transform raw AI-generated outputs into clean, transparent PNG files suitable for immediate integration into the PixiJS frontend.
-
Automated generation using Nano Banana MCP with tailored prompts for 16-bit, front-view, non-isometric pixel art styles.
-
Integrated validation workflow to ensure perspective accuracy and proper centering before image processing.
-
Advanced multi-pass background removal script using FFmpeg and ImageMagick to eliminate magenta (#FF00FF) backgrounds and anti-aliased purple edge fringing.
-
Support for custom object descriptions to generate specific office furniture like desks, chairs, and water coolers.
-
Standardized output paths and naming conventions compatible with the Claude Office codebase structure.
-
Ensure the generated perspective is explicitly set to 45-degree front/top-down to match the simulation's aesthetic, avoiding the default isometric view often produced by AI models.
-
Follow the multi-pass processing workflow—using FFmpeg for raw hue removal followed by specific ImageMagick fuzz-based transparency application—to ensure sprites remain clean at their edges.
-
Verify final sprite transparency and scale factors before updating the React components or the OfficeGameV2.tsx logic.
-
The output sprites are designed to work seamlessly with the PixiJS asset loader system, allowing for programmatic instantiation of furniture within the virtual office layout.
-
Use this tool to maintain visual consistency across all custom sprites added to the simulation, ensuring they blend correctly with the existing environment's pixel-art color palette and clean edge requirements.
Repository Stats
- Stars
- 318
- Forks
- 64
- Open Issues
- 6
- Language
- TypeScript
- Default Branch
- main
- Sync Status
- Idle
- Last Synced
- May 3, 2026, 10:04 PM