3.5 Generating Pages and Components

Pages and components define the user interface structure of your application. They map out the screens users will see and the reusable UI elements that make up those screens. In VibeMap, pages and components are automatically generated based on your features and user stories.

What Are Pages and Components?

Pages

Pages represent the main screens or routes in your application:

  • User-facing screens - What users see when they navigate your app

  • Navigation structure - How users move between different areas

  • User flows - The path users take to accomplish tasks

  • Route definitions - Technical URLs and page organization

Components

Components are reusable UI elements used across multiple pages:

  • Form elements - Input fields, buttons, validation messages

  • Data displays - Tables, cards, lists, charts

  • Navigation elements - Menus, breadcrumbs, pagination

  • Interactive elements - Modals, dropdowns, tooltips

Prerequisites

Before generating pages and components, you need:

  • Project features - Pages are derived from your feature functionality

  • User stories - Components are based on user interaction patterns

  • Clear user flows - Helps determine page structure and navigation

Note: Pages and components are automatically generated when you create a project, but you can regenerate or add more from the Pages & Components section.

How to Generate Pages and Components

Automatic Generation (Recommended)

Pages and components are created automatically during project creation. VibeMap analyzes your features and user stories to generate a comprehensive UI structure.

Manual Generation

To generate additional pages and components or regenerate existing ones:

  1. Navigate to Pages & Components: Click the "Pages & Components" tab in your project sidebar

  2. Click "Generate Pages & Components": Creates comprehensive UI structure

  3. Wait for Processing: Takes 2-3 minutes for complex projects

  4. Review Results: Pages and components appear in a hierarchical structure

Generating Additional Pages and Components

If you need more pages or components:

  1. Click "Generate Additional Pages & Components": Creates new items without duplicates

  2. AI analyzes existing structure: Avoids repetition and identifies gaps

  3. Focuses on missing functionality: Covers areas you might have missed

  4. Adds supporting pages: Creates pages for edge cases and admin functions

What You'll Get

Page Structure

Pages are organized by functional areas and include:

  • 🏠 Core Pages - Home, dashboard, profile, settings

  • 🔐 Authentication - Login, register, password reset

  • 📊 Feature Pages - Main functionality areas

  • ⚙️ Admin Pages - Management and configuration

  • ❓ Support Pages - Help, FAQ, contact

Component Categories

Components are organized by type and include:

  • 📝 Form Components - Inputs, buttons, validation

  • 📊 Data Components - Tables, cards, charts, lists

  • 🧭 Navigation Components - Menus, breadcrumbs, pagination

  • 💬 Interactive Components - Modals, tooltips, dropdowns

  • 🎨 Layout Components - Headers, footers, sidebars

Example Page Structure

Dashboard
├── Navigation Header
├── Sidebar Menu
├── Main Content Area
│   ├── Stats Cards
│   ├── Recent Activity List
│   └── Quick Actions Panel
└── Footer

User Profile
├── Navigation Header
├── Profile Card
├── Edit Form
│   ├── Text Inputs
│   ├── File Upload
│   └── Save Button
└── Footer

Navigation Relationships

Pages are connected by navigation links showing:

  • Primary navigation - Main menu items

  • Secondary navigation - Sub-pages and related content

  • User flow connections - How users move through the application

  • Breadcrumb paths - Where users are in the app hierarchy

Managing Your Pages and Components

Viewing Page Details

Click on any page to see:

  • Complete page description and purpose

  • List of components used on that page

  • Navigation relationships to other pages

  • User stories that relate to this page

Editing Pages

  • Click "Edit" on any page

  • Modify name, description, or navigation

  • Add or remove components

  • Save changes to update the page

Adding New Pages

  1. Click "Add Page" button

  2. Enter page details (name, description, route)

  3. Assign components that will be used

  4. Set navigation relationships

  5. Save to add to your project

Managing Components

  • View component details including usage across pages

  • Edit component descriptions and specifications

  • Add new components for specific functionality

  • Delete unused components to keep structure clean

Expected Outcomes

Typical Generation Results

  • 15-30 pages for most applications (varies by complexity)

  • 20-40 components covering common UI patterns

  • Clear navigation structure with logical page relationships

  • Reusable components that appear across multiple pages

Quality Indicators

Good pages and components will have:

  • ✅ Logical page organization and navigation

  • ✅ Reusable components that make sense

  • ✅ Clear relationships between pages

  • ✅ Comprehensive coverage of user flows

  • ✅ Realistic and achievable UI structure

Best Practices

Writing Effective Features for UI Generation

To get better pages and components, ensure your features include:

  • User workflows - How users accomplish tasks

  • Navigation requirements - How users move through the app

  • Data display needs - What information users need to see

  • Interaction patterns - How users interact with the interface

Example Good Feature for UI Generation:

Task Management Dashboard
Description: Central dashboard where users can view all their tasks, filter by status and priority, create new tasks, and manage existing ones. Includes real-time updates, drag-and-drop task organization, and quick action buttons for common operations.

This generates:
- Dashboard page with task list, filters, and quick actions
- Task card component for displaying individual tasks
- Filter panel component for status and priority selection
- Task creation modal component
- Drag-and-drop interface components

Troubleshooting

Common Issues

Too Few Pages Generated:

  • Add more detail about user workflows in your features

  • Include specific user journeys and navigation needs

  • Try the "Generate Additional Pages & Components" button

Pages Don't Match Your Vision:

  • Edit generated pages to align with your design approach

  • Add custom pages for unique functionality

  • Modify navigation relationships to match your user flows

Components Too Generic:

  • Include specific UI requirements in your feature descriptions

  • Reference similar applications or design patterns

  • Edit generated components to add domain-specific elements

Navigation Seems Wrong:

  • Edit page relationships to match your intended user flows

  • Add missing navigation connections

  • Consider user journey mapping for better structure

Next Steps

After generating pages and components:

  1. Review page structure to ensure it matches your vision

  2. Validate navigation flows with your design team

  3. Generate database schema - pages help determine data needs

  4. Plan component development using the generated component list

  5. Create wireframes based on the page and component structure

Pages and components provide the foundation for your application's user interface. A well-structured UI plan leads to better user experience, more efficient development, and clearer design requirements.

Previous3.4 Generating Acceptance CriteriaNext3.6 Generating the Database Schema

Last updated

Was this helpful?