Productivity
office-sprite avatar

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
View on GitHub