# Screen Generation Prompts

Templates for generating consistent UI screens with Nano Banana Pro.

---

## Base Prompt Template

```
Professional UI design mockup for {PRODUCT_NAME}, a {PRODUCT_DESCRIPTION}.

Screen: {SCREEN_NAME}
Purpose: {SCREEN_PURPOSE}

Layout:
{LAYOUT_DESCRIPTION}

Key UI Elements:
{ELEMENTS_LIST}

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Background: {BG_COLOR}
- Typography: {FONT_NAME}
- Style: {STYLE_DESCRIPTION}
- Border radius: {RADIUS}px
- Shadows: {SHADOW_STYLE}

Requirements:
- Production-ready UI, not wireframe
- Pixel-perfect, polished design
- Consistent with modern SaaS standards
- Desktop view at 1440x900 resolution
```

---

## Screen-Specific Templates

### Landing Page / Hero

```
Professional landing page hero section for {PRODUCT_NAME}, a {PRODUCT_DESCRIPTION}.

Layout:
- Clean navigation bar at top with logo, nav links, and CTA button
- Large hero section with compelling headline
- Supporting subheadline explaining the value proposition
- Primary CTA button prominently placed
- Secondary visual (product screenshot, illustration, or abstract graphic)
- Social proof section (logos, testimonials, or stats)

Design Specifications:
- Primary color: {PRIMARY_HEX} (for CTAs and accents)
- Secondary color: {SECONDARY_HEX} (for supporting elements)
- Background: White or very light gray
- Typography: {FONT_NAME}, bold headlines, readable body text
- Style: Modern, clean, trustworthy
- Ample whitespace, clear visual hierarchy

Make it look like a successful SaaS product landing page.
Desktop view, 1440x900 resolution.
```

### Dashboard

```
Professional dashboard interface for {PRODUCT_NAME}.

Screen: Main Dashboard
Purpose: {USER_GOAL}

Layout:
- Left sidebar with navigation (icon + text menu items)
- Top bar with search, notifications, user avatar
- Main content area with:
  - Welcome/summary section
  - Key metrics cards (3-4 cards in a row)
  - Primary action area
  - Recent activity or data table

Key Elements:
{SPECIFIC_ELEMENTS}

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Background: #F9FAFB (light gray)
- Cards: White with subtle shadow
- Typography: {FONT_NAME}
- Style: Clean, data-focused, professional

Desktop dashboard view, 1440x900 resolution.
Production-ready design, not a wireframe.
```

### Form / Settings

```
Professional settings or form page for {PRODUCT_NAME}.

Screen: {SCREEN_NAME}
Purpose: {PURPOSE}

Layout:
- Standard app layout with sidebar navigation
- Main content area with:
  - Page title and description
  - Form sections with clear labels
  - Input fields (text, select, toggle switches)
  - Save/Cancel buttons at bottom

Form Sections:
{SECTIONS_LIST}

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Background: Light gray (#F9FAFB)
- Form container: White card
- Input fields: Bordered, rounded corners
- Typography: {FONT_NAME}
- Style: Clean, easy to scan

Desktop view, 1440x900 resolution.
```

### Data Table / List View

```
Professional data table view for {PRODUCT_NAME}.

Screen: {SCREEN_NAME}
Purpose: Display and manage {DATA_TYPE}

Layout:
- Standard app layout with sidebar
- Top section with:
  - Page title
  - Search bar
  - Filter buttons
  - "Add New" button
- Data table with:
  - Column headers
  - 5-8 sample rows
  - Action buttons per row
  - Pagination at bottom

Table Columns:
{COLUMNS_LIST}

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Background: Light gray
- Table: White background, subtle row hover
- Typography: {FONT_NAME}
- Style: Clean, scannable, professional

Desktop view, 1440x900 resolution.
```

### Detail / Profile View

```
Professional detail view for {PRODUCT_NAME}.

Screen: {ITEM_TYPE} Detail
Purpose: View and edit {ITEM_TYPE} information

Layout:
- Standard app layout with sidebar
- Main content split into:
  - Header with {ITEM_TYPE} name, status, actions
  - Two-column layout:
    - Left: Primary information
    - Right: Secondary info or related items
  - Activity/history section at bottom

Key Sections:
{SECTIONS_LIST}

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Background: Light gray
- Cards: White with subtle shadow
- Typography: {FONT_NAME}
- Status badges: Color-coded

Desktop view, 1440x900 resolution.
```

### Authentication (Login/Signup)

```
Professional authentication page for {PRODUCT_NAME}.

Screen: {LOGIN_OR_SIGNUP}
Purpose: User authentication

Layout:
- Split screen or centered card design
- Left/Background: Brand visual or gradient
- Right/Center: Auth form with:
  - Logo
  - Welcome text
  - Email input
  - Password input
  - {ADDITIONAL_FIELDS}
  - Primary action button
  - Social login options (Google, etc.)
  - Link to alternate action (login/signup)

Design Specifications:
- Primary color: {PRIMARY_HEX}
- Secondary color: {SECONDARY_HEX}
- Form background: White
- Typography: {FONT_NAME}
- Style: Clean, trustworthy, minimal

Desktop view, 1440x900 resolution.
```

---

## Consistency Checklist

Before generating each screen, ensure:

- [ ] Same primary/secondary colors as other screens
- [ ] Same typography (font name)
- [ ] Same border radius (e.g., 8px)
- [ ] Same shadow style (e.g., subtle drop shadow)
- [ ] Same sidebar/navigation style
- [ ] Same button styles
- [ ] Same spacing system
- [ ] Same background colors

---

## Example Generation Command

```bash
NANO_DIR="/home/aria/.nvm/versions/node/v24.13.0/lib/node_modules/openclaw/skills/nano-banana-pro"
OUTPUT_DIR="/home/aria/projects/clinic-manager/agency/artifacts/design/screens"

uv run $NANO_DIR/scripts/generate_image.py \
  --prompt "Professional dashboard interface for ClinicManager, a dental clinic management system.

Screen: Home Dashboard
Purpose: Show today's appointments, key stats, and quick actions

Layout:
- Left sidebar with navigation (Dashboard, Appointments, Patients, Settings)
- Top bar with search, notifications, user avatar
- Main content area with:
  - Today's summary cards (Appointments today, Patients seen, Revenue)
  - Upcoming appointments list
  - Quick action buttons

Design Specifications:
- Primary color: #0EA5E9 (sky blue)
- Secondary color: #22C55E (green)
- Background: #F9FAFB
- Typography: Inter
- Style: Clean, medical/professional, rounded corners
- Modern SaaS dashboard aesthetic

Desktop view, 1440x900 resolution.
Production-ready design, polished and pixel-perfect." \
  --filename "$OUTPUT_DIR/S001-dashboard.png" \
  --resolution 2K
```

---

## Troubleshooting

### Inconsistent styles between screens
- Regenerate with more explicit style instructions
- Reference "same style as [previous screen]" in prompt
- Include exact hex codes, not color names

### Too wireframe-like
- Add "Production-ready, not wireframe"
- Add "Polished, pixel-perfect design"
- Specify "Realistic sample data"

### Wrong resolution
- Always specify "Desktop view, 1440x900 resolution"
- Use `--resolution 2K` for higher quality
