Nano Banana Pro Visual Integration

OPTIONAL SKILL - AID works without this.

Setup

ENABLE_NANO_BANANA=true
NANO_BANANA_PROVIDER=google
GOOGLE_AI_API_KEY=your-key

When to Use

Quick Start

User Flow

const result = await client.generateFromText(`
Create user flow for checkout:
1. Cart Review
2. Shipping
3. Payment
4. Confirmation

Style: Clean, modern
`);

Architecture

const result = await client.generateFromText(`
Create microservices diagram:
- Frontend: React
- API Gateway: Kong
- Services: User, Order, Payment
- Database: PostgreSQL, Redis
`);

Screen Mockup

const builder = new WireframePromptBuilder({
  designSystem: 'material3',
  primaryColor: '#3B82F6',
});

const prompt = builder.generateScreen({
  name: 'Dashboard',
  components: [
    { type: 'header', position: 'top' },
    { type: 'card', description: 'Stats' },
    { type: 'list', description: 'Activity' },
  ],
});

File Organization

docs/visuals/
  discovery/stakeholder-map.png
  prd/user-flow.png
  tech-spec/architecture.png
  design/mockup.png

API Methods

Options