Skip to content

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 or Claude Design 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