UI Prototype

Purpose

Establishes your design system and visual language for consistent UI/UX implementation.

Input

• prd.md from previous step
• app-sitemap.md from previous step

Steps

1. UI Concept Exploration

Given the features below, suggest multiple UI approaches (e.g., minimalistic, colorful, modern). Briefly describe the layouts for each.

Features:
`INSERT YOUR FEATURES`

Please provide:
- 3-4 distinct visual approaches
- Layout descriptions for key pages
- Pros and cons of each approach
- Recommended approach based on target users

2. Wireframe Generation

Use a tool like UX Pilot to generate wireframes based on your layout descriptions. This allows for the quick creation of various screens.

Generate wireframes for the homepage based on this description:

`Insert UI description`

Consider:
- Layout structure
- Component placement
- Navigation elements
- Key user interactions
- Responsive design considerations

Output

• Wireframes or page images

Optional

• UI Prototype Development

Utilize Lovable to create a functional UI prototype from your wireframes.

Using this wireframe: `Insert image`, create the UI. Keep it minimalistic.

Please include:
- Component specifications
- Color scheme
- Typography
- Spacing guidelines
- Interactive elements

You can also use SnapPrompt to turn a screenshot into ready-to-use prompt to recreate the UI.

Next Steps

• Proceed to Design Spec using your prd.md, tech-stack.md, app-sitemap.md and wireframes as input