6.8 KiB
6.8 KiB
🧭 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
{
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
- Start: AI Chat → Define vision through conversation
- Vision Phase: Review and refine extracted insights
- Design Phase: Generate core screens with v0
- Marketing Phase: Craft messaging and launch plan
- Build Phase: Create MVP scope and track progress
- 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
- Product-First: Strategy before execution
- Phase-Based: Clear workflow progression
- Collaborative: Each role has their space
- AI-Enhanced: AI assistance throughout
- Consistent: Unified design language
- Scalable: Easy to extend
For implementation details, see:
components/layout/page-template.tsx- Reusable page layoutcomponents/layout/PAGE_TEMPLATE_GUIDE.md- Usage guidecomponents/layout/left-rail.tsx- Main navigation