skills.rest
leadmind-ai
leadmind-aiOFFICIAL
Explore all skills by this author →
GitHub

nano-banana-ui

Generate Nano Banana images and scaffold frontend interfaces with asset validation.

Updated Mar 25, 2026
Search Tags:#automation#design#ui#images#assets#generate#prompting
One-click install
npx skills add https://github.com/leadmind-ai/leadmind-ai-website --skill nano-banana-ui-leadmind-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nano-banana-ui
Source: https://github.com/leadmind-ai/leadmind-ai-website/tree/main/.claude/skills/designer/nano-banana-ui
Command: npx skills add https://github.com/leadmind-ai/leadmind-ai-website --skill nano-banana-ui-leadmind-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, Pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Ce skill facilite la génération d'images IA via Nano Banana et l'intégration de ces assets visuels dans des interfaces frontend prêtes à l'emploi.

Core Features & Use Cases

  • Génération d'images IA via Nano Banana et intégration directe dans une UI production-ready.
  • Supporte deux modes — Anti-Gravity (gratuit) et API Gemini (automatisé) — pour des workflows flexibles.
  • Validation et cohérence visuelle avec les designs existants (DESIGN.md) et pipelines de design.
  • Utilisation dans des cas comme hero images, textures, éléments 3D, illustrations et textures de fond.

Quick Start

Générez des images avec Nano Banana et intégrez-les dans une interface frontend prête à déployer.

Frequently Asked Questions about nano-banana-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate AI images and integrate them into a frontend UI?▼

Generate AI images and integrate them into a frontend UI by using Nano Banana to create targeted visual assets and scaffolding a production-ready interface around them. This workflow validates assets and aligns visuals with existing designs.

Does the Gemini API support automated image generation for frontend assets?▼

Yes, the Gemini API supports automated image generation for frontend assets. The skill offers an automated Gemini API mode alongside a free Anti-Gravity mode, providing flexible workflows for generating and validating visual elements.

What is the best way to align generated AI visuals with an existing design system?▼

The best way to align generated AI visuals with an existing design system is using palette alignment with DESIGN.md. The skill applies asset validation workflows to ensure generated hero images, textures, and illustrations match your established visual guidelines.

Can I use this workflow to generate specific UI assets like hero images and background textures?▼

Yes, you can use this workflow to generate specific UI assets like hero images, background textures, 3D elements, and illustrations. It applies deterministic prompts to create targeted visual assets required for production-ready frontend interfaces.

Do I need Pillow and Google GenAI to build interfaces around generated images?▼

Yes, you need Pillow and Google GenAI dependencies to build interfaces around generated images. These libraries facilitate the automated Gemini API workflows and image processing required for asset validation and visual consistency.

Why does my generated UI asset not match my existing color palette?▼

Your generated UI asset might not match your existing color palette if DESIGN.md is unavailable or not referenced. The skill relies on palette alignment with DESIGN.md and an asset validation workflow to ensure visual consistency.

Related Skills

Explore More Design & Creative Skills→
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
Nero-kkNero-kk

frontend-design

Create production-ready HTML/CSS/JS or framework components with refined typography and CSS variables.

Community
Advanced
hoanghd218hoanghd218
1

kdp-image-reviewer

Review coloring book images for KDP compliance and quality.

Community
Intermediate
Svenja-devSvenja-dev
38

gemini-image-gen

Generate branded images from prompts using Google's Gemini API.

Community
Intermediate