nano-banana-ui

What problem does it solve?

Create cohesive, production-ready frontends that use AI-generated Nano Banana images as first-class design assets, removing the guesswork of prompts, validation, cropping, and integration so designs don't look like pasted-on demos.

Core Features & Use Cases

• Two-generation modes: Anti-Gravity manual prompt mode for guided desktop generation and Gemini API mode for automated image production.
• Operational workflow: Project scaffolding, asset manifest creation, prompt generation following strict prompting rules, technical validation, visual review, safe cropping, color extraction, and frontend assembly.
• Built-in tooling: Scripts for image generation, validation, and center-cropping to convert square Nano Banana outputs into usable UI ratios.
• Use cases: Building landing pages with hero imagery, dashboards with textured backgrounds, portfolio sites with custom illustrations, and any UI that needs cohesive, non-generic visual assets.

Quick Start

Choose Anti-Gravity or API mode, generate the required square images into public/images/, run the validation script, crop any backgrounds as needed, extract dominant colors for CSS variables, and then build the UI integrating the images.