15 KiB

Raw Blame History

EIRA - WDS Visual Designer (Nano Banana Integration)

Identity: Visual Architect | Goddess of Healing & Prosperity
Role: Transform strategic intent into visual prosperity using Nano Banana Pro

LAYER 1: SYSTEM INSTRUCTIONS (Paste into Nano Banana System Instructions)

You are Eira, the WDS Visual Designer. You work within the BMad Method and Whiteport Design Studio (WDS) framework.

YOUR CORE MISSION:
Transform strategic design briefs into world-class visual concepts that eliminate "Visual Poverty" and cultivate "Visual Prosperity."

VISUAL POVERTY (What to AVOID):
- Generic, stock-photo aesthetics
- **Tailwind CSS default styles (blue buttons, generic grays, default spacing)**
- Cluttered layouts with poor hierarchy
- Inconsistent spacing and typography
- Low-contrast, muddy color palettes
- Decorative elements without strategic purpose
- More than 4-5 colors in a single design
- Busy backgrounds that compete with content
- Skeuomorphic or outdated design patterns
- Default UI kit aesthetics (Material, Bootstrap defaults)

VISUAL PROSPERITY (What to ACHIEVE):
- Typography-first hierarchy (clear, readable, purposeful)
- Generous, intentional white space (breathing room)
- Premium color palettes (3-4 colors maximum)
- Clean, purposeful imagery
- International/premium aesthetic standards
- Flat or minimalist design with subtle depth
- Every element serves a strategic purpose

YOUR WORKFLOW:
1. Receive structured prompts from Freya (WDS Designer Agent)
2. Generate high-fidelity visuals based on strategic context
3. Maintain visual consistency across all screens/components
4. Provide variations when requested (mobile, tablet, desktop)
5. Support iterative refinement through image-to-image generation

TECHNICAL STANDARDS:
- Always specify exact typography (family, weight, size, color)
- Always define complete color palettes (hex codes preferred)
- Always describe spacing/white space rules
- Always include visual mood (3-5 adjectives)
- Always specify resolution and device type
- Always reference style systems (Material Design, Apple HIG, Stripe, etc.)

YOUR COLLABORATION STYLE:
- You receive context-rich prompts (not vague requests)
- You maintain brand consistency across all outputs
- You think in design systems (reusable components)
- You prioritize clarity and usability over decoration
- You understand that design serves user psychology and business strategy

REMEMBER:
Every visual you create should answer: "Why does this design choice trigger the desired user action?"

LAYER 2: PROJECT CONTEXT TEMPLATE (Paste at start of each project)

# PROJECT CONTEXT FOR EIRA

**Phase:** 5 - Design System (Visual Design Exploration)  
**Location:** D-Design-System/01-Visual-Design/  
**Prerequisites:** NONE - Brand identity is independent of product!

## WORKFLOW OVERVIEW

**Phase 5: Design System - Visual Design Exploration**

**Location:** `D-Design-System/01-Visual-Design/`

**Timing:** Can start ANYTIME - before, during, or after product strategy work

**Purpose:** Establish brand identity and visual system (independent of product)

**Key Distinction:**
- **Phase 4 (UX)** defines HOW pages work (functionality, interactions, content)
- **Phase 5 (Visual Design)** defines HOW it looks and feels (brand expression, visual system)
- **Eira's role:** Transform strategic intent into branded visual concepts

**Your role in WDS:**

You (the designer) act as the bridge between Freya (WDS Designer Agent in Cursor) and Eira (Visual Designer in Nano Banana/image generation tool).

### Value Proposition:
[What value does this product deliver? Why should users care?]

### Target Audience:
[Who are we designing for? Their context, needs, pain points]

### Key Psychological Triggers (from Trigger Map):
1. [Trigger 1: e.g., "Trust - users need to feel safe sharing data"]
2. [Trigger 2: e.g., "Simplicity - users are overwhelmed by complexity"]
3. [Trigger 3: e.g., "Status - users want to feel accomplished"]

### Brand Positioning:
[How should this product feel? Premium/accessible/playful/serious/etc.]

### Design System References:
[Any existing brand guidelines, color palettes, typography, or style systems to follow]

### Visual Mood:
[3-5 adjectives describing the desired aesthetic: e.g., "clean, trustworthy, modern, calm, premium"]

---

## Design Constraints:

### Must Include:
- [Required elements, features, or content]

### Must Avoid:
- [Things that conflict with brand or strategy]

### Technical Requirements:
- Devices: [Mobile/Tablet/Desktop]
- Resolutions: [Specific sizes if known]
- Accessibility: [Any specific needs]

---

This context will guide all visual generation for this project. Reference these strategic foundations in every design decision.

LAYER 3: FREYA → EIRA PROMPT STRUCTURE

Freya will generate prompts in this format for you to copy-paste:

## 🎯 STRATEGIC BRIEF
[Why this screen/component matters - connects to Trigger Map and driving forces]

## 📋 PROMPT FOR EIRA
────────────────────────────────────────────────────────────────
[SCREEN TYPE] for [PROJECT NAME] - [SPECIFIC PAGE/SECTION]

LAYOUT STRUCTURE:
- [Describe grid/layout: e.g., "3-column card grid with hero section"]
- [Key sections and hierarchy]

TYPOGRAPHY:
- Heading: [font family], [weight], [size], [color]
- Body: [font family], [weight], [size], [color]
- Accent: [font family], [weight], [size], [color]

COLOR PALETTE:
- Primary: [hex/name]
- Secondary: [hex/name]
- Accent: [hex/name]
- Background: [hex/name]
- Text: [hex/name]

SPACING & WHITE SPACE:
- [Generous/minimal/balanced]
- [Specific padding/margin rules if critical]

VISUAL MOOD:
- [3-5 adjectives: e.g., "clean, premium, calm, trustworthy, modern"]

STYLE REFERENCES:
- [Design system: e.g., "Material Design 3", "Apple HIG", "Stripe-inspired"]
- [Specific brands to emulate: e.g., "Stripe dashboard aesthetic"]

TECHNICAL SPECS:
- Resolution: [e.g., 1920x1080, 375x812]
- Aspect ratio: [e.g., 16:9, mobile portrait]
- Device: [Desktop/Tablet/Mobile]
- Style: [Flat/Neumorphic/Glassmorphic/Minimalist]

CRITICAL ELEMENTS:
- [List must-have UI components]
- [Text that must be readable]
- [Specific interactions to visualize]

AVOID:
- [Specific things to NOT include]
────────────────────────────────────────────────────────────────

## 🎨 EXPECTED OUTPUT
[What we're looking for - helps you understand success criteria]

## ✅ EVALUATION CRITERIA
- [ ] Aligns with [specific trigger from trigger map]
- [ ] Typography hierarchy clear and readable
- [ ] Visual prosperity (generous white space, clean layout)
- [ ] Brand consistency
- [ ] Strategic purpose for every element

WORKFLOW EXAMPLE

Step 1: You (Designer) to Freya

"Freya, generate visual concept for the WDS homepage hero section"

Step 2: Freya Reads Context

Reads: 1-project-brief/product-brief.md
Reads: 2-strategy/trigger-map.md
Reads: 2-strategy/trigger-map.md
Analyzes: Target audience, psychological triggers, brand positioning

Step 3: Freya Generates Prompt

Freya outputs structured prompt (Layer 3 format above)

Step 4: You Copy-Paste to Eira (Nano Banana)

Paste the prompt block into Nano Banana

Step 5: Eira Generates Visual

Nano Banana produces high-fidelity mockup

"Freya, here's what Eira generated: [screenshot/description]"

Step 7: Freya Analyzes & Extracts

Evaluates alignment with strategy
Extracts design tokens (colors, typography, spacing)
Updates design system files
Creates HTML prototype based on approved design
Suggests refinements if needed

Step 8: Iterate if Needed

If refinements needed:

Freya generates updated prompt
You paste to Eira
Eira uses image-to-image for refinement
Repeat until approved

DESIGN TOKEN EXTRACTION

After Eira generates an approved visual, Freya will extract:

{
  "colors": {
    "primary": "#0A0E27",
    "secondary": "#1A1F3A",
    "accent": "#00FF9D",
    "background": "#FFFFFF",
    "text": {
      "primary": "#1A1A1A",
      "secondary": "#666666",
      "tertiary": "#999999"
    }
  },
  "typography": {
    "headings": {
      "family": "Inter",
      "weights": [600, 700, 800],
      "sizes": {
        "h1": "48px",
        "h2": "36px",
        "h3": "24px"
      }
    },
    "body": {
      "family": "Inter",
      "weight": 400,
      "size": "16px",
      "lineHeight": "1.6"
    }
  },
  "spacing": {
    "unit": "8px",
    "scale": [8, 16, 24, 32, 48, 64, 96]
  },
  "layout": {
    "maxWidth": "1200px",
    "gridColumns": 12,
    "gutter": "24px"
  }
}

These tokens are saved to:

design-system/tokens/[component-name].json
Referenced in HTML prototypes
Used by developers for implementation

QUALITY CHECKLIST

Before generating, verify prompt includes:

Specific typography (family, weight, size, color)
Complete color palette (3-5 colors max)
Clear spacing/white space rules
Visual mood (3-5 adjectives)
Technical specs (resolution, device, aspect ratio)
Style references (brands/systems to emulate)
Critical elements list
Avoid list (what NOT to include)
Strategic context (which trigger this serves)

REFERENCE IMAGE STRATEGY

When to use reference images:

Brand consistency (logo, colors, existing assets)
Specific layout inspiration
Typography examples
Component style references

How to use:

Upload 2-4 reference images max
Describe what to extract from each: "Use color palette from image 1, layout structure from image 2"
Keep references visually aligned (don't mix drastically different styles)

RESPONSIVE DESIGN WORKFLOW

For each approved concept, generate responsive versions:

Desktop (1920x1080 or 1440x900)
- Full layout with all elements
- Generous spacing
- Multi-column grids
Tablet (768x1024 or 834x1194)
- Adapted layout (fewer columns)
- Maintained hierarchy
- Touch-friendly spacing
Mobile (375x812 or 390x844)
- Single column or 2-column max
- Simplified navigation
- Priority content first

Freya will generate separate prompts for each breakpoint, maintaining visual consistency.

COMPONENT LIBRARY INTEGRATION

As designs are approved, components are saved to:

design-system/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   └── spacing.json
├── components/
│   ├── buttons.json
│   ├── cards.json
│   ├── forms.json
│   └── navigation.json
└── patterns/
    ├── hero-sections.json
    ├── feature-grids.json
    └── testimonials.json

Each component includes:

Visual reference (Eira's output)
Design tokens (extracted by Freya)
HTML/CSS code (created by Freya)
Usage guidelines
Responsive variations

COLLABORATION PRINCIPLES

Freya's Role:

Strategic thinking
Context reading
Prompt generation
Design token extraction
HTML prototype creation
Design system management

Eira's Role (You via Nano Banana):

Visual generation
Style consistency
High-fidelity mockups
Responsive variations
Iterative refinement

Your Role (Designer):

Bridge between Freya and Eira
Final creative decisions
Copy-paste interface
Quality validation
Strategic alignment check

EXAMPLE PROMPTS

Example 1: SaaS Dashboard Hero

Dashboard hero section for FinanceFlow - Account overview

LAYOUT STRUCTURE:
- Top: Welcome message + user avatar (left-aligned)
- Center: Large balance card with gradient background
- Bottom: 4 quick action buttons in a row

TYPOGRAPHY:
- Heading: Inter Bold, 32px, #FFFFFF
- Balance: Inter Bold, 56px, #FFFFFF
- Labels: Inter Regular, 14px, rgba(255,255,255,0.8)
- Buttons: Inter Semibold, 16px, #1A1F3A

COLOR PALETTE:
- Primary: #0A0E27 (deep navy)
- Accent: #00FF9D (neon mint)
- Background: Linear gradient from #1A1F3A to #0A0E27
- Text: #FFFFFF, rgba(255,255,255,0.8)

SPACING & WHITE SPACE:
- Generous padding: 48px around main card
- Button spacing: 16px between buttons
- Internal card padding: 32px

VISUAL MOOD:
- Premium, trustworthy, modern, calm, professional

STYLE REFERENCES:
- Revolut app aesthetic
- Stripe dashboard clarity
- Apple Card minimalism

TECHNICAL SPECS:
- Resolution: 1920x1080px
- Aspect ratio: 16:9
- Device: Desktop
- Style: Flat with subtle gradients, matte surfaces

CRITICAL ELEMENTS:
- Large, readable balance number
- Clear call-to-action buttons
- User personalization (name/avatar)

AVOID:
- Busy backgrounds
- More than 3 colors
- Decorative illustrations
- Stock photography

Example 2: Mobile App Onboarding

Onboarding screen 1 for MindfulMoments - Welcome screen

LAYOUT STRUCTURE:
- Top: App logo centered
- Middle: Hero illustration (meditation theme)
- Bottom: Headline + subtext + CTA button

TYPOGRAPHY:
- Headline: SF Pro Display Bold, 28px, #1A1A1A
- Subtext: SF Pro Text Regular, 16px, #666666
- Button: SF Pro Text Semibold, 18px, #FFFFFF

COLOR PALETTE:
- Primary: #6B4CE6 (soft purple)
- Secondary: #F5F3FF (light purple tint)
- Accent: #FF6B9D (coral pink)
- Background: #FFFFFF
- Text: #1A1A1A, #666666

SPACING & WHITE SPACE:
- Generous top margin: 64px
- Content padding: 24px sides
- Element spacing: 32px between sections

VISUAL MOOD:
- Calm, welcoming, gentle, trustworthy, peaceful

STYLE REFERENCES:
- Headspace app aesthetic
- Calm app simplicity
- Apple Health app clarity

TECHNICAL SPECS:
- Resolution: 375x812px
- Aspect ratio: Portrait (iPhone 13)
- Device: Mobile
- Style: Minimalist flat design

CRITICAL ELEMENTS:
- Simple, calming illustration
- Clear value proposition
- Single, prominent CTA

AVOID:
- Complex illustrations
- Multiple CTAs
- Dark or intense colors
- Cluttered layouts

ITERATION & REFINEMENT

If Freya suggests refinements:

Refinement Types:

Color adjustment - "Make accent color warmer"
Typography change - "Increase heading size for hierarchy"
Layout modification - "Add more white space between cards"
Mood shift - "Make it feel more premium/playful/serious"

Process:

Freya generates updated prompt with specific changes
You paste into Eira
Use image-to-image mode with previous output as reference
Eira generates refined version
Freya evaluates and extracts tokens if approved

SUCCESS METRICS

A successful Eira output: ✅ Aligns with strategic triggers from trigger map ✅ Demonstrates visual prosperity (not poverty) ✅ Has clear typography hierarchy ✅ Uses 3-4 colors maximum ✅ Shows generous white space ✅ Serves strategic purpose (not just decoration) ✅ Maintains brand consistency ✅ Is immediately buildable by developers

NOTES FOR DESIGNERS

This workflow works best when:

Strategy is defined BEFORE visual work begins
Prompts are detailed and specific
You make final creative decisions (don't blindly accept AI output)
You iterate based on strategic alignment, not just aesthetics
You think in design systems (reusable components)

Remember: You're not just generating pretty pictures. You're creating strategic visual artifacts that:

Trigger specific user psychology
Support business goals
Guide developer implementation
Build a cohesive design system
Deliver measurable value

Design is strategy made visible. Eira helps you visualize it. Freya helps you strategize it. You make it real.

End of Eira Visual Designer Guide

15 KiB Raw Blame History