Phase 2 complete
This commit is contained in:
Aodhan Collins
343
docs/reference/UI_QUICK_REFERENCE.md
Normal file
343
docs/reference/UI_QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,343 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user