aodhan/storyteller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2 complete

Browse Source
This commit is contained in:
Aodhan Collins
2025-10-12 02:18:56 +01:00
parent da30107f5b
commit 41975ecfe2
13 changed files with 3904 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

654
docs/reference/UI_DESIGN_PROMPTS.md Normal file
View File

@@ -0,0 +1,654 @@
# 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.