344 lines
8.5 KiB
Markdown
344 lines
8.5 KiB
Markdown
# UI Design Quick Reference
|
|
|
|
**TL;DR guide for getting UI designs quickly**
|
|
|
|
---
|
|
|
|
## 🎯 Priority Order
|
|
|
|
### Phase 2 (Current - Already Built)
|
|
✅ Session Setup Page
|
|
✅ Character View
|
|
✅ Character Creation Wizard
|
|
✅ Storyteller View
|
|
|
|
### Phase 3 (Next - Need Designs)
|
|
🎨 Gamemaster Control Panel
|
|
🎨 Game Creation Wizard
|
|
🎨 Role Assignment Interface
|
|
|
|
### Phase 4+ (Future)
|
|
⏳ Admin Dashboard
|
|
⏳ Analytics Views
|
|
|
|
---
|
|
|
|
## 📄 6 Core Pages Summary
|
|
|
|
| Page | Purpose | Complexity | Priority |
|
|
|------|---------|------------|----------|
|
|
| **Session Setup** | Landing, join/create | Low | ✅ Built |
|
|
| **Character View** | Player interface | Medium | ✅ Built |
|
|
| **Character Wizard** | Character creation | Medium | ✅ Built |
|
|
| **Storyteller View** | GM interface | High | ✅ Built |
|
|
| **Gamemaster Panel** | Game management | High | 🎨 Next |
|
|
| **Admin Dashboard** | System admin | High | ⏳ Future |
|
|
|
|
---
|
|
|
|
## 🎨 Design Files Location
|
|
|
|
All design documentation in `/docs/reference/`:
|
|
- **UI_ELEMENTS_INVENTORY.md** - Complete element list by page (15,000+ words)
|
|
- **UI_DESIGN_PROMPTS.md** - Copy-paste prompts for LLMs
|
|
- **UI_QUICK_REFERENCE.md** - This file
|
|
|
|
---
|
|
|
|
## ⚡ Quick Start
|
|
|
|
### To Get Designs Fast:
|
|
|
|
1. **Read the prompts file:**
|
|
- `/docs/reference/UI_DESIGN_PROMPTS.md`
|
|
- Find the page you need
|
|
- Copy the full prompt
|
|
|
|
2. **Choose your tool:**
|
|
- **v0.dev** (Vercel) - Best for React/Tailwind code
|
|
- **Midjourney/DALL-E** - Best for visual mockups
|
|
- **Claude/GPT-4** - Best for HTML/CSS implementation
|
|
|
|
3. **Generate:**
|
|
- Paste prompt
|
|
- Add tool-specific instructions
|
|
- Generate multiple variations
|
|
- Iterate and refine
|
|
|
|
---
|
|
|
|
## 🎨 Current Design System (Already Implemented)
|
|
|
|
### Colors
|
|
```css
|
|
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--bg-dark: #1a1a2e;
|
|
--surface-dark: #2d3748;
|
|
--text-light: #ffffff;
|
|
--accent-purple: #667eea;
|
|
```
|
|
|
|
### Components We Have
|
|
- ✅ Buttons (primary, secondary, icon)
|
|
- ✅ Input fields (text, textarea, dropdown)
|
|
- ✅ Cards (base, interactive, info)
|
|
- ✅ Badges/Pills
|
|
- ✅ Message bubbles
|
|
- ✅ Selection cards (wizard)
|
|
- ✅ Progress indicator
|
|
- ✅ Form layouts
|
|
- ✅ Modal overlays
|
|
|
|
### Components We Need
|
|
- 🎨 Data tables
|
|
- 🎨 Drag-and-drop cards
|
|
- 🎨 Charts (line, bar, pie)
|
|
- 🎨 Timeline/activity feed
|
|
- 🎨 Tabs component
|
|
- 🎨 Metric cards with trends
|
|
- 🎨 Role assignment slots
|
|
|
|
---
|
|
|
|
## 📋 Example: Getting Gamemaster Panel Design
|
|
|
|
### Option 1: v0.dev (Code + Design)
|
|
```
|
|
Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
|
|
Add: "Generate as Next.js components with Tailwind CSS and shadcn/ui"
|
|
Output: Working React code + visual preview
|
|
```
|
|
|
|
### Option 2: Midjourney (Mockup)
|
|
```
|
|
Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
|
|
Add: "UI mockup, high fidelity, Figma style, dark theme, 4k"
|
|
Output: Visual design to reference
|
|
```
|
|
|
|
### Option 3: Manual Implementation
|
|
```
|
|
1. Read element list in UI_ELEMENTS_INVENTORY.md
|
|
2. Sketch/wireframe layout
|
|
3. Build components one by one
|
|
4. Match existing design system colors/spacing
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Common Customizations
|
|
|
|
### To Match Different Styles:
|
|
|
|
**Sci-Fi Theme:**
|
|
```
|
|
Change gradient to: #00d9ff to #0099ff (cyan)
|
|
Add: Glowing borders, neon accents
|
|
Fonts: Orbitron or Exo 2
|
|
```
|
|
|
|
**Fantasy Theme:**
|
|
```
|
|
Keep purple gradient
|
|
Add: Texture overlays, paper-like cards
|
|
Fonts: Cinzel or IM Fell
|
|
Decorative borders
|
|
```
|
|
|
|
**Minimal Theme:**
|
|
```
|
|
Change to monochrome: #000000 to #ffffff
|
|
Remove: Gradients, decorative elements
|
|
Fonts: Inter or System UI
|
|
Flat design
|
|
```
|
|
|
|
---
|
|
|
|
## 📐 Layout Templates
|
|
|
|
### Dashboard Layout (Gamemaster/Admin)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Header (Global Actions) │
|
|
├──────┬──────────────────────────┤
|
|
│ Nav │ Main Content Area │
|
|
│ Bar │ │
|
|
│ │ ┌────────┬────────┐ │
|
|
│ │ │ Card │ Card │ │
|
|
│ │ └────────┴────────┘ │
|
|
│ │ │
|
|
│ │ [Tables/Charts/Forms] │
|
|
└──────┴──────────────────────────┘
|
|
|
|
Sidebar: 240px
|
|
Content: flex-1
|
|
Gap: 24px
|
|
```
|
|
|
|
### Chat Layout (Character/Storyteller)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Header (Info + Actions) │
|
|
├─────────────────────────────────┤
|
|
│ │
|
|
│ Scrollable Message Area │
|
|
│ (Messages stacked vertically) │
|
|
│ │
|
|
├─────────────────────────────────┤
|
|
│ Fixed Composer (Bottom) │
|
|
└─────────────────────────────────┘
|
|
|
|
Header: Auto height
|
|
Messages: flex-1, overflow-auto
|
|
Composer: Auto height, fixed position
|
|
```
|
|
|
|
### Wizard Layout
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ Wizard Header + Progress │
|
|
├─────────────────────────────────┤
|
|
│ │
|
|
│ │
|
|
│ Step Content (Centered) │
|
|
│ Max Width: 600px │
|
|
│ │
|
|
│ │
|
|
├─────────────────────────────────┤
|
|
│ Footer (Cancel | Back | Next) │
|
|
└─────────────────────────────────┘
|
|
|
|
Modal: Max 800px width, centered
|
|
Content: Vertical padding 48px
|
|
Footer: Sticky bottom
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Phase 3 Design Priorities
|
|
|
|
### Must Have First:
|
|
1. **Gamemaster Dashboard** - Overview/home screen
|
|
2. **Game Creation Form** - Simple version
|
|
3. **Player Slot Cards** - Assignment interface
|
|
|
|
### Can Wait:
|
|
4. Role drag-and-drop (use simple assignment first)
|
|
5. Advanced analytics
|
|
6. Detailed configuration screens
|
|
|
|
---
|
|
|
|
## 💡 Tips for Design Consistency
|
|
|
|
### When Designing New Pages:
|
|
|
|
1. **Reuse existing components**
|
|
- Check what's already built
|
|
- Extend rather than recreate
|
|
|
|
2. **Match spacing**
|
|
- Use 8px grid system
|
|
- Common gaps: 16px, 24px, 32px
|
|
|
|
3. **Follow color usage**
|
|
- Purple for primary actions
|
|
- Dark backgrounds (#2d3748)
|
|
- White/light text
|
|
|
|
4. **Keep hierarchy clear**
|
|
- Largest: Page titles (2rem)
|
|
- Medium: Section titles (1.5rem)
|
|
- Normal: Body text (1rem)
|
|
|
|
5. **Maintain card style**
|
|
- Rounded 8-12px
|
|
- Subtle shadows
|
|
- Padding 1-2rem
|
|
|
|
---
|
|
|
|
## 📱 Responsive Breakpoints
|
|
|
|
```css
|
|
/* Mobile First */
|
|
.container {
|
|
width: 100%;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Tablet - 768px */
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
padding: 24px;
|
|
}
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Desktop - 1024px */
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Workflow Recommendation
|
|
|
|
### For Phase 3 Implementation:
|
|
|
|
**Week 1:** Design Phase
|
|
- Day 1: Generate Gamemaster dashboard mockups
|
|
- Day 2: Review and refine designs
|
|
- Day 3: Generate component mockups
|
|
- Day 4: Finalize design system updates
|
|
- Day 5: Create component specifications
|
|
|
|
**Week 2-3:** Implementation
|
|
- Build reusable components
|
|
- Implement layouts
|
|
- Connect to backend
|
|
- Test responsive behavior
|
|
- Polish animations
|
|
|
|
**Week 4:** Polish
|
|
- Fix edge cases
|
|
- Accessibility improvements
|
|
- Performance optimization
|
|
- User testing
|
|
|
|
---
|
|
|
|
## 📚 Resources
|
|
|
|
### Design Tools
|
|
- **v0.dev** - https://v0.dev (AI code generation)
|
|
- **Figma** - https://figma.com (Design/prototype)
|
|
- **Tailwind UI** - https://tailwindui.com (Component library)
|
|
- **shadcn/ui** - https://ui.shadcn.com (React components)
|
|
|
|
### Inspiration
|
|
- **Dribbble** - Search "RPG dashboard dark theme"
|
|
- **Behance** - Search "game master interface"
|
|
- **Awwwards** - Dark themed web apps
|
|
|
|
### Color Tools
|
|
- **Coolors** - Generate palette variations
|
|
- **Color Hunt** - Find complementary palettes
|
|
- **Contrast Checker** - Ensure accessibility
|
|
|
|
---
|
|
|
|
**Everything you need to get UI designs for Phase 3 is ready!** 🎨✨
|
|
|
|
Start with the Gamemaster Control Panel - that's the biggest design challenge for Phase 3.
|