322 lines
6.8 KiB
Markdown
322 lines
6.8 KiB
Markdown
# 🧭 Navigation Structure - Product-Centric Workflow
|
|
|
|
**Last Updated:** November 19, 2025
|
|
|
|
## Overview
|
|
|
|
The navigation is structured around a **phased workflow** that guides solo founders and small teams from idea to launch.
|
|
|
|
---
|
|
|
|
## 📱 Main Navigation (Left Rail)
|
|
|
|
### **Always Visible**
|
|
```
|
|
💬 AI Chat - AI interview assistant
|
|
🏠 Home - Project dashboard & overview
|
|
📖 Knowledge - Context (docs, repos, chats)
|
|
```
|
|
|
|
### **Phase 1: DEFINE** ✨
|
|
```
|
|
🎯 Vision - Product strategy & vision
|
|
🎨 Design - UI/UX screens & flows
|
|
📣 Marketing - Messaging & launch strategy
|
|
```
|
|
|
|
### **Phase 2: BUILD** 🔨
|
|
```
|
|
📋 Build Plan - MVP scope, backlog, milestones
|
|
💻 Development - Codebase, architecture, deployment
|
|
```
|
|
|
|
---
|
|
|
|
## 📄 Page Structures
|
|
|
|
### 1. **Vision** (`/vision`)
|
|
**Purpose:** Define what you're building and why
|
|
|
|
**Sidebar Navigation:**
|
|
- Product Overview
|
|
- Problems We Solve
|
|
- Target Users
|
|
- Success Metrics
|
|
- Competitive Landscape
|
|
|
|
**Content:**
|
|
- Product name, one-liner, vision statement
|
|
- Problem cards with descriptions
|
|
- User persona cards
|
|
- Key metrics with targets
|
|
- Competitor analysis
|
|
|
|
**Key Actions:**
|
|
- Edit Vision
|
|
- Add Problem
|
|
- Add User Type
|
|
- Add Competitor
|
|
|
|
---
|
|
|
|
### 2. **Design** (`/design`)
|
|
**Purpose:** Create and manage UI/UX
|
|
|
|
**Sidebar Navigation:**
|
|
- Core Screens (tree view)
|
|
- User Flows (auth, onboarding)
|
|
- Style Guide
|
|
- Brand Assets
|
|
|
|
**Content:**
|
|
- Tree view of product screens
|
|
- AI-suggested screens
|
|
- v0 integration for screen generation
|
|
- Version history
|
|
- Comments & feedback
|
|
|
|
**Key Actions:**
|
|
- Generate Screen
|
|
- Connect GitHub
|
|
- Sync Repository
|
|
- Create Flow
|
|
|
|
**Individual Screen View:** `/design/[pageSlug]`
|
|
- Live preview
|
|
- v0-style chat interface
|
|
- Design Mode (click to target elements)
|
|
- Version history
|
|
- Push to Cursor
|
|
|
|
---
|
|
|
|
### 3. **Marketing** (`/marketing`)
|
|
**Purpose:** Define messaging and launch strategy
|
|
|
|
**Sidebar Navigation:**
|
|
- Value Proposition
|
|
- Messaging Framework
|
|
- Website Copy
|
|
- Launch Strategy
|
|
- Target Channels
|
|
|
|
**Content:**
|
|
- Headline & subheadline
|
|
- Key benefits
|
|
- Primary messaging
|
|
- Positioning statements
|
|
- Website copy sections (hero, features, social proof)
|
|
- Launch timeline
|
|
- Target channel cards
|
|
|
|
**Key Actions:**
|
|
- Generate with AI
|
|
- Edit Content
|
|
- Add Channel
|
|
|
|
---
|
|
|
|
### 4. **Build Plan** (`/build-plan`)
|
|
**Purpose:** Track what needs to be built
|
|
|
|
**Sidebar Navigation:**
|
|
- MVP Scope
|
|
- Backlog
|
|
- Milestones
|
|
- Progress
|
|
|
|
**Content:**
|
|
- Progress overview (completed, in progress, to do)
|
|
- MVP feature list with status
|
|
- Backlog items with priority
|
|
- Milestone cards (alpha, beta, public launch)
|
|
|
|
**Key Actions:**
|
|
- Generate Tasks (AI)
|
|
- Add Feature
|
|
- Add to Backlog
|
|
- Move to MVP
|
|
|
|
**Features:**
|
|
- Status tracking (completed, in progress, todo)
|
|
- Priority levels (high, medium, low)
|
|
- Progress percentage
|
|
- Milestone dates
|
|
|
|
---
|
|
|
|
### 5. **Development** (`/code`)
|
|
**Purpose:** Browse and manage codebase
|
|
|
|
**Current Implementation:**
|
|
- GitHub integration
|
|
- File tree browser
|
|
- File content viewer with syntax highlighting
|
|
- Search functionality
|
|
|
|
**Future Sidebar Navigation:**
|
|
- Browse Code
|
|
- Architecture
|
|
- API Documentation
|
|
- Deployment
|
|
|
|
---
|
|
|
|
### 6. **Home/Overview** (`/overview`)
|
|
**Purpose:** Project dashboard
|
|
|
|
**Content:**
|
|
- Project header (name, vision, workspace)
|
|
- Session linking (if unassociated sessions found)
|
|
- Stats cards (sessions, time, cost, tokens)
|
|
- Quick action cards
|
|
- Getting started guide
|
|
|
|
---
|
|
|
|
### 7. **Knowledge** (`/context`)
|
|
**Purpose:** Manage all project context
|
|
|
|
**Content:**
|
|
- Upload documents
|
|
- Connect GitHub repos
|
|
- Import AI chat transcripts
|
|
- View summaries
|
|
- Knowledge items list
|
|
|
|
---
|
|
|
|
## 🎨 Design System
|
|
|
|
All pages use the **PageTemplate** system for consistency:
|
|
|
|
### PageTemplate Props
|
|
```typescript
|
|
{
|
|
sidebar?: {
|
|
title: string;
|
|
description?: string;
|
|
items: NavItem[];
|
|
footer?: ReactNode;
|
|
};
|
|
hero?: {
|
|
icon?: LucideIcon;
|
|
title: string;
|
|
description?: string;
|
|
actions?: ActionButton[];
|
|
};
|
|
containerWidth?: "default" | "wide" | "full";
|
|
}
|
|
```
|
|
|
|
### Utility Components
|
|
- **PageSection** - Organized content sections
|
|
- **PageCard** - Styled cards with hover effects
|
|
- **PageGrid** - Responsive grids (1-4 columns)
|
|
- **PageEmptyState** - Empty state displays
|
|
|
|
---
|
|
|
|
## 🔄 User Flow
|
|
|
|
### Solo Founder Journey
|
|
1. **Start:** AI Chat → Define vision through conversation
|
|
2. **Vision Phase:** Review and refine extracted insights
|
|
3. **Design Phase:** Generate core screens with v0
|
|
4. **Marketing Phase:** Craft messaging and launch plan
|
|
5. **Build Phase:** Create MVP scope and track progress
|
|
6. **Development Phase:** Browse code, manage architecture
|
|
|
|
### Collaboration Flow
|
|
- **Founder:** Manages Vision, Marketing, Build Plan
|
|
- **Designer:** Works in Design section
|
|
- **Developer:** Works in Development section
|
|
- **All:** Access Knowledge Base and Home dashboard
|
|
|
|
---
|
|
|
|
## 🎯 Key Features
|
|
|
|
### Phase Separation
|
|
- Clear visual distinction between DEFINE and BUILD phases
|
|
- Separators and labels in navigation
|
|
- Guided workflow from strategy to execution
|
|
|
|
### Consistency
|
|
- All pages use PageTemplate
|
|
- Uniform sidebar structure
|
|
- Consistent action buttons
|
|
- Standard icon usage (Lucide)
|
|
|
|
### Scalability
|
|
- Easy to add new pages
|
|
- Reusable components
|
|
- Type-safe navigation
|
|
- Responsive design
|
|
|
|
---
|
|
|
|
## 🚀 Next Steps
|
|
|
|
### Immediate
|
|
- [ ] Wire Vision page to extraction data
|
|
- [ ] Wire Marketing page to AI generation
|
|
- [ ] Connect Build Plan to actual task management
|
|
- [ ] Add Architecture subsection to Development
|
|
|
|
### Future
|
|
- [ ] Real-time collaboration indicators
|
|
- [ ] Phase completion badges
|
|
- [ ] Animated transitions between phases
|
|
- [ ] Progress tracking across all phases
|
|
- [ ] Team member assignments
|
|
- [ ] Comments & feedback system
|
|
|
|
---
|
|
|
|
## 📊 Navigation Stats
|
|
|
|
- **Total Top-Level Items:** 7 (Chat, Home, Knowledge + 2 phases)
|
|
- **Phase 1 (Define):** 3 items (Vision, Design, Marketing)
|
|
- **Phase 2 (Build):** 2 items (Build Plan, Development)
|
|
- **Total Pages Created:** 5 new pages + 2 existing
|
|
|
|
---
|
|
|
|
## 🎨 Visual Hierarchy
|
|
|
|
```
|
|
Left Rail (60px wide)
|
|
├── Logo
|
|
├── AI Chat (always visible)
|
|
├── Home (when project selected)
|
|
├── Knowledge (when project selected)
|
|
├── ───────────────── [DEFINE]
|
|
├── Vision
|
|
├── Design
|
|
├── Marketing
|
|
├── ───────────────── [BUILD]
|
|
├── Build Plan
|
|
├── Development
|
|
└── Settings (bottom)
|
|
```
|
|
|
|
---
|
|
|
|
## 💡 Design Principles
|
|
|
|
1. **Product-First:** Strategy before execution
|
|
2. **Phase-Based:** Clear workflow progression
|
|
3. **Collaborative:** Each role has their space
|
|
4. **AI-Enhanced:** AI assistance throughout
|
|
5. **Consistent:** Unified design language
|
|
6. **Scalable:** Easy to extend
|
|
|
|
---
|
|
|
|
**For implementation details, see:**
|
|
- `components/layout/page-template.tsx` - Reusable page layout
|
|
- `components/layout/PAGE_TEMPLATE_GUIDE.md` - Usage guide
|
|
- `components/layout/left-rail.tsx` - Main navigation
|
|
|