655 lines
17 KiB
Markdown
655 lines
17 KiB
Markdown
# 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.
|