​
Overview

Rapidly prototype user interfaces for your applications using the best component libraries and AI-powered tools.

​
Using v0 for Initial Design Iterations

Before diving deep into component-level development, use v0.dev to quickly iterate on your design concepts:

  • Visual-first approach: Generate complete UI designs through simple prompts
  • Quick iterations: Refine designs through conversation without writing code
  • Export-ready code: Get production-ready code for your designs
  • Design exploration: Easily try multiple design directions to find what works best
  • Design-driven development: Feed your UI/UX design documentation from the MVP Development process directly into v0 prompts

Start with broad concepts and refine through conversation - it’s like having a UI designer and developer in one tool.

1

Initial Design Exploration with v0

  1. Start a new project on v0.dev
  2. Use the UI/UX design documentation generated during the MVP development process as your starting point
  3. Iterate through conversation until you have a solid design direction
2

Build the Landing Page

  1. Follow the Designing the Landing Page guide for building high-converting landing pages
  2. Use v0.dev to generate initial landing page designs based on inspiration and your landing page copy documentation
  3. Reference the output file from your MVP development Cursor chats about the best landing page design for your product (including copy)
3

Design the Main App

  1. Browse the Finding Inspiration section
  2. Reference the UI/UX design documentation from your MVP development process about the most intuitive app design for your specific product (core app screens and components)
  3. Use v0.dev to prototype:
    • Create new project
    • Upload your UI/UX design documentation
    • Share inspiration/mockups
    • Refine through conversation
    • Export generated code
4

Customize Components

Continue to further customise as you see fit, iterating with v0 or Cursor and using any of the components in the More Cool Libraries section if needed.

​
Finding Inspiration

You may not initially know what your UI should look like. Use these resources to get ideas:

  • Layers - UI design inspiration gallery
  • UnCoverLabs - Figma website templates and user journeys
  • Dribbble - Discover world-class design inspiration
  • Behance - Leading platform for showcasing creative work

​
Designing the Landing Page

Designing a landing pages just got 10x easier.

Use the following images and resources with Cursor to help you generate the highest converting landing pages for your product.

Use 21stDev as your main components for the landing page. All components can be copy/pasted into your project.

Anything else can be found in the More Cool Libraries section to further customise and enhance your UI.

​
General Products

​
AI Products

​
Design Tips

​
Templates & Components

  • NextFramer - Daily landing page templates built in public
  • Sprrrint - 300+ Figma components and gradients, updated daily

​
More Cool UI Libraries

Stop building components from scratch. Use these pre-built libraries:

  • nsUI - Shadcn/UI Marketing Blocks with responsive, pre-built UI blocks for marketing websites
  • Motion Primitives - Beautiful, animated components
  • LnDev UI - Clean library of motion components
  • Bundui - Beautifully designed motion components, copy-paste ready
  • Fancy Components - Fun react components for micro-interactions
  • Prism UI - Customizable component library built on top of shadcn/ui
  • UILabs - Modern UI components
  • Style UI - Customizable components
  • UIVerse - Component marketplace
  • Kokonut - Modern, interactive UI components built with shadcn & TailwindCSS
  • HeadlessUI - Accessible UI primitives for Tailwind CSS
  • Catalyst - Premium Tailwind CSS components

​
Useful Tools & Resources