# UI Design Prompts - Ready to Use

**Purpose:** Copy-paste prompts for UI design LLMs (v0.dev, Midjourney, etc.)  
**Date:** October 12, 2025

---

## 🎨 Base Prompt Template

```
Design a modern dark-themed web application interface for a tabletop RPG storytelling platform.

Visual Style:
- Dark theme with purple gradient accents (#667eea to #764ba2)
- Card-based layout with rounded corners (8-12px radius)
- Smooth shadows for depth and elevation
- Clean, modern sans-serif typography
- RPG fantasy aesthetic with subtle magical elements

Color Palette:
- Background: Deep dark blue (#1a1a2e, #16213e)
- Surface: Dark slate (#2d3748)
- Primary: Purple gradient (#667eea to #764ba2)
- Text: White/light gray (#ffffff, #e2e8f0)
- Accent: Bright purple (#667eea)

Design Principles:
- Clear visual hierarchy
- Generous white space
- Accessible contrast ratios
- Smooth animations and transitions
- Mobile-responsive design
```

---

## 📄 Prompt 1: Session Setup / Landing Page

```
Create a modern dark-themed landing page for an RPG storytelling web app called "Storyteller RPG"

Page Components:
1. Header Section:
   - Large app title with dice emoji (🎭 Storyteller RPG)
   - Subtitle: "Private character-storyteller interactions"
   - Centered layout

2. Demo Session Card:
   - Title: "🎲 Demo Session - The Cursed Tavern"
   - Short description text
   - Three horizontally arranged buttons:
     * "🎲 Join as Storyteller" (primary gradient button)
     * "⚔️ Play as Bargin (Dwarf Warrior)" (character button)
     * "🏹 Play as Willow (Elf Ranger)" (character button)
   - Gradient background (gold #ffd89b to teal #19547b)
   - Rounded corners with padding

3. Divider:
   - Horizontal line with centered text "OR CREATE YOUR OWN"

4. Create Session Section:
   - White card with shadow
   - Title: "Create New Session"
   - Description: "Start a new game as the storyteller"
   - Text input field for session name
   - Full-width primary button: "Create Session"

5. Divider:
   - Horizontal line with "OR"

6. Join Session Section:
   - White card with shadow
   - Title: "Join Existing Session"
   - Form with inputs:
     * Session ID field
     * Character name field
     * Character description textarea
     * Personality textarea (optional)
     * Model selector dropdown
   - Large gradient button: "✨ Create Character (Wizard)"
   - Secondary toggle: "↓ Quick Create"

Visual Style:
- Purple gradient background for page
- White content cards with soft shadows
- Centered layout, max-width 600px
- Generous padding and spacing
- Modern, clean, inviting design
```

---

## 📄 Prompt 2: Character View (Player Interface)

```
Design a dark-themed character view interface for a player in an RPG session

Layout Structure:
- Full-height application with header, scrollable content, and fixed message composer

Components:

1. Character Header (Dark gradient #2d3748):
   - Left side:
     * Character name (large, white)
     * Character description (gray text)
     * Personality trait with emoji (🎭)
     * Three profile badges: Race | Class | Personality
       (Pills with purple accent color)
   - Right side:
     * Export button (📥 Export) with subtle purple background
     * Connection status indicator:
       - Green dot "● Connected" when active
       - Gray dot "○ Disconnected" when offline

2. Current Scene Card (if active):
   - Highlighted card with scene icon (📜)
   - Title: "Current Scene"
   - Scene description text
   - Distinct background color from messages

3. Two-Column Content Area:
   
   Left Column - Public Messages Feed:
   - Title: "📢 Public Actions (All Players See)"
   - Message cards with:
     * Sender name/icon
     * Message content
     * Timestamp
     * Light background with left purple border accent
   
   Right Column - Private Conversation:
   - Title: "💬 Private Conversation with Storyteller"
   - Chat-style message bubbles:
     * Character messages: Right-aligned, purple gradient
     * Storyteller messages: Left-aligned, darker color
     * Timestamps below each message
   - Auto-scroll to bottom

4. Message Composer (Fixed Bottom):
   - Visibility dropdown selector (Private | Public | Mixed)
   - For "Mixed" mode:
     * Two textareas stacked:
       - "Public action (all players see)..."
       - "Private action (only storyteller sees)..."
     * "Send Mixed Message" button
   - For simple mode:
     * Single input field (placeholder changes by visibility)
     * "Send" button
   - Elevated shadow, dark background

Visual Style:
- Dark theme throughout
- Purple accent colors for character messages
- Clear visual separation between public and private
- Smooth scrolling
- Professional messaging interface aesthetic
```

---

## 📄 Prompt 3: Character Creation Wizard

```
Design a beautiful multi-step character creation wizard modal for an RPG application

Modal Structure:
- Full-screen dark overlay (semi-transparent)
- Centered wizard container (max 800px wide)
- Dark gradient background (#1a1a2e to #16213e)
- Rounded corners with border

Components:

1. Wizard Header:
   - Large title: "Create Your Character"
   - Progress indicator: 6 step pills arranged horizontally
     * "1. Basic Info" | "2. Description" | "3. Race & Class" | "4. Personality" | "5. AI Model" | "6. Review"
     * Active step: Purple gradient background, white text
     * Inactive steps: Muted gray background, gray text
     * Completed steps: Dimmed purple
   - Steps wrap on mobile

2. Content Area (Changes per step):

   Step 1 - Basic Info:
   - Text input: "Character Name" (with autofocus glow)
   - Dropdown: "Gender" (Male, Female, Non-binary, Custom)
   - Import section:
     * Light text: "💡 Have an existing character?"
     * Button: "📥 Import from JSON" (outlined style)

   Step 3 - Race & Class (example):
   - Grid of 5 selection cards (2-3 columns responsive)
   - Each card:
     * Race/Class name (bold white)
     * Short description (gray)
     * Unselected: Dark background, light border
     * Selected: Purple gradient background, bright border, slight shadow
     * Hover: Lift effect with shadow
   - Two sections: Race cards, then Class cards

   Step 6 - Review:
   - Preview card with sections:
     * Basic Information (list of key-value pairs)
     * Description (paragraph)
     * Background (if provided)
     * AI Model
   - Summary box at bottom:
     * Purple gradient background
     * "Character Summary" heading
     * Natural language sentence about the character

3. Wizard Footer:
   - Left: "Cancel" button (secondary)
   - Right: Navigation buttons
     * "← Back" (secondary, only shows steps 2-6)
     * "Next →" (primary purple gradient, steps 1-5)
     * "✨ Create Character" (primary gradient, step 6)

Animations:
- Step content fades in with slight upward movement
- Card selection: Scale transform + glow
- Progress indicator: Smooth transitions
- Button hovers: Elevation effect

Visual Style:
- Dark, immersive wizard experience
- Purple accent throughout
- Clear visual hierarchy
- Smooth, modern interactions
- Feels guided and professional
```

---

## 📄 Prompt 4: Storyteller View Dashboard

```
Design a comprehensive storyteller dashboard for managing an RPG game session

Layout:
- Sidebar + main content area (grid layout)
- Dark theme with purple accents

Components:

1. Header Bar:
   - Session name (large white text)
   - Session ID with copy button
   - "Generate Contextual Response" button (purple gradient)
   - Connection status indicator

2. Left Sidebar - Character List:
   - Title: "Characters in Session"
   - Scrollable character cards (one per character):
     * Character name (white)
     * Small profile badges (Race | Class | Personality)
     * "Needs Response" red indicator (if pending)
     * Hover: Light background
     * Selected: Purple left border + highlighted background
   - Empty state: "No characters yet" with muted text

3. Main Content Area - Tabs:
   
   Tab 1 - Public Actions Feed:
   - Title: "📢 Recent Public Actions"
   - Timeline/feed of public messages:
     * Character avatar/icon
     * Character name
     * Action text
     * Timestamp
     * Compact card style with left accent

   Tab 2 - Character Conversation (selected character):
   - Character header showing their profile
   - Message thread (scrollable):
     * Character messages (left-aligned)
     * Storyteller responses (right-aligned, purple)
     * Timestamps
   - Response composer section:
     * Large textarea "Write your response..."
     * "✨ AI Suggest" button (secondary)
     * "Send Private Response" button (primary)

   Tab 3 - Scene Narration:
   - Title: "📜 Broadcast Scene to All Players"
   - Large textarea for scene description
   - Context options:
     * Character selection checkboxes
     * Additional context input
   - "Generate with AI" button (secondary)
   - "Broadcast Scene" button (primary, large)

4. AI Suggestion Panel (conditional):
   - Appears when "AI Suggest" clicked
   - Green accent background
   - Title: "AI-Generated Suggestion"
   - Editable textarea with generated response
   - Model indicator (small text)
   - Action buttons:
     * "Use This Response" (success green)
     * "Regenerate" (secondary)
     * "Cancel" (text button)

Visual Style:
- Dark command center aesthetic
- Clear information hierarchy
- Easy to scan character list
- Comfortable reading for long text
- Purple highlights for storyteller actions
- Green highlights for AI features
```

---

## 📄 Prompt 5: Gamemaster Control Panel

```
Design a powerful gamemaster control panel for managing RPG game sessions

Layout:
- Command center dashboard style
- Sidebar navigation + main content panels
- Dark theme with multiple accent colors

Components:

1. Header:
   - Title: "Gamemaster Control Panel"
   - Current game indicator (pill badge)
   - Quick action buttons:
     * "Create New Game" (purple gradient)
     * "Load Game" (secondary)
     * "Save Game" (secondary)

2. Left Navigation:
   - Vertical menu with icons:
     * Dashboard (overview icon)
     * Games (list icon)
     * Players (users icon)
     * Settings (gear icon)
   - Active item: Purple left border + highlight

3. Main Content - Game Creation Wizard:
   
   Step 2 - Player Slots:
   - Grid of player slot cards (2-3 columns):
     * Slot number badge (top-right)
     * Type toggle: Human | AI (switch component)
     * If Human:
       - User selector dropdown
       - Character assignment
     * If AI:
       - AI model dropdown
       - Personality/behavior settings
     * Drag handle (for reordering)
   - "Add Slot" button at end
   
   Each slot card:
   - Dark background with border
   - Assigned: Green accent border
   - Empty: Dashed border
   - Hover: Lift effect

4. Main Content - Game Overview Dashboard:
   - Metric cards row (4 cards):
     * Active Players (number + icon)
     * Total Messages (number + icon)
     * Session Duration (time + icon)
     * AI Usage Cost ($ + icon)
   - Current scene card (large, highlighted)
   - Recent activity feed
   - Quick actions panel

5. Role Assignment Interface:
   - Drag-and-drop layout:
     * Left: Available players list (cards)
     * Right: Game slots (drop zones)
     * Visual feedback during drag
   - Each player card:
     * Avatar/icon
     * Username
     * Online status
     * Drag handle

Visual Style:
- Professional dashboard aesthetic
- Multiple status colors (green=good, red=alert, yellow=warning)
- Clear data visualization
- Interactive drag-and-drop
- Elevated cards with shadows
- Purple primary, green success, red danger
```

---

## 📄 Prompt 6: Admin Dashboard

```
Design a comprehensive system administration dashboard for monitoring and management

Layout:
- Full-width dashboard with sidebar navigation
- Dark theme with data visualization focus

Components:

1. Top Header:
   - Title: "System Administration"
   - System status indicators (colored dots):
     * API Status (green/red)
     * Database (green/red)
     * WebSocket (green/red)
   - Global stats (small numbers):
     * Active Games: 12
     * Active Users: 48
     * API Calls Today: 1,234

2. Sidebar Navigation:
   - Vertical menu items:
     * Dashboard (home icon)
     * Games (controller icon)
     * Users (people icon)
     * LLM Config (brain icon)
     * Analytics (chart icon)
     * Costs (dollar icon)
     * Logs (terminal icon)
   - Active: Purple background + white icon

3. Dashboard Overview:
   - 4 metric cards (top row):
     * Total Games (number, trend arrow, sparkline)
     * Total Users (number, trend arrow, sparkline)
     * Today's Cost ($, trend arrow)
     * System Health (percentage, circular progress)
   
   - Charts section:
     * Line chart: "Games Created Over Time" (7 days)
     * Bar chart: "Model Usage Distribution"
     * Pie chart: "Cost Breakdown by Model"
   
   - Recent Activity Feed:
     * Timeline of recent events
     * Color-coded by type (create, error, warning)
     * Timestamps
     * Quick action buttons

4. Games Management Table:
   - Data table with columns:
     * ID | Name | GM | Players | Status | Created | Actions
   - Features:
     * Sort arrows in headers
     * Search bar (top-right)
     * Filter chips (by status)
     * Pagination controls (bottom)
   - Row actions:
     * View (eye icon)
     * Edit (pencil icon)
     * Delete (trash icon)
   - Status badges (colored):
     * Active (green)
     * Paused (yellow)
     * Completed (gray)

5. Cost Analytics View:
   - Summary cards (top):
     * This Month ($)
     * Per Game Average ($)
     * Most Expensive Model (name + $)
   - Cost breakdown table:
     * Model | Calls | Total Cost | Avg Per Call
     * Sortable columns
   - Date range picker (top-right)
   - Export CSV button

Visual Style:
- Professional admin interface
- Data-focused with clear metrics
- Color-coded status indicators
- Clean tables with good readability
- Charts with tooltips
- Responsive grid layouts
```

---

## 🎯 Specialized Component Prompts

### Prompt: Message Bubble Component

```
Design a modern chat message bubble component for a dark-themed RPG interface

Requirements:
- Two variants: Character (sent) and Storyteller (received)
- Character messages:
  * Right-aligned
  * Purple gradient background (#667eea to #764ba2)
  * White text
  * Rounded corners (more rounded on left side)
  * Small shadow
- Storyteller messages:
  * Left-aligned
  * Dark gray background (#374151)
  * Light gray text
  * Rounded corners (more rounded on right side)
  * Subtle border
- Both include:
  * Message content (wrapped text)
  * Timestamp (small, muted, below bubble)
  * Sender name (optional, above bubble)
- Smooth entry animation (fade + slide)
- Hover: Slight shadow increase
```

### Prompt: Selection Card Component

```
Design an interactive selection card for character race/class/personality selection

States:
1. Default:
   - Dark background (#2d3748)
   - Light border (rgba(255,255,255,0.1))
   - Rounded corners (10px)
   - Padding: 20px
   - Content:
     * Title (bold, white, 16px)
     * Description (gray, 13px)

2. Hover:
   - Background: Slightly lighter
   - Border: Purple tint
   - Transform: translateY(-2px)
   - Shadow: Elevated

3. Selected:
   - Background: Purple gradient (subtle)
   - Border: Bright purple (#667eea)
   - Shadow: Purple glow
   - Checkmark icon (top-right corner)

Animation:
- Smooth transition on all state changes
- Scale slightly on click
- Ripple effect on selection

Size:
- Min width: 200px
- Flexible height based on content
- Grid-friendly
```

### Prompt: Progress Indicator Component

```
Design a multi-step progress indicator for a wizard interface

Components:
- 6 steps arranged horizontally
- Each step:
  * Number or icon
  * Label text below
  * Connecting line to next step

States per step:
1. Completed:
   - Checkmark icon (white)
   - Purple filled circle
   - Purple line to next
   - Label: Purple, smaller

2. Active/Current:
   - Number in white
   - Purple gradient circle (larger)
   - Pulsing glow animation
   - Label: White, bold

3. Upcoming:
   - Number in gray
   - Gray outlined circle
   - Gray dashed line to next
   - Label: Gray, normal

Responsive:
- Desktop: Horizontal line
- Mobile: Vertical or wrapped

Visual Style:
- Modern, clean
- Clear current position
- Motivating progress visualization
```

---

## 📱 Mobile-Specific Prompts

### Prompt: Mobile Navigation

```
Design a mobile-friendly bottom navigation bar for the RPG app

Requirements:
- Fixed to bottom of screen
- Dark background with slight transparency
- 4-5 navigation items:
  * Home/Session (house icon)
  * Character (person icon)
  * Messages (chat icon)
  * More (dots icon)
- Active item:
  * Purple icon color
  * Label text (white)
  * Indicator line on top
- Inactive items:
  * Gray icon
  * Small label (optional)
- Badge notifications (red dot on icons)
- Safe area insets for iOS
- Subtle shadow on top edge
```

---

## 🎨 Using These Prompts

### With v0.dev (Vercel):
```
Copy base template + specific page prompt
Add: "Generate React/Next.js components with Tailwind CSS"
Review generated code and iterate
```

### With Midjourney/DALL-E:
```
Copy prompt
Add: "UI mockup, high fidelity, Figma style"
Generate multiple variations
Use as design reference
```

### With Claude/GPT:
```
Copy prompt
Add: "Generate HTML/CSS code for this design"
or "Create a React component for this"
Iterate on the implementation
```

---

**All prompts are ready to copy and use!** Customize colors, spacing, or specific elements as needed.