Skip to main content
Prototype mode helps you explore different ways to build a feature. The AI researches how other products solve similar problems, asks clarifying questions, then generates multiple prototype variations — each with a different approach. Choose how many variations you want, describe what you need, and the AI creates them all at once so you can compare side by side.

​
How Prototype Mode Works

1

Choose Number of Variations

Select how many prototype variations you want to generate (e.g., 2, 3, or 4).
2

Describe What You Need

Write your request — what feature, component, or page you want to build.
3

Answer Clarifying Questions

The AI asks questions to better understand your requirements and preferences.
4

Generation

The AI automatically generates all variations. Each becomes a separate prototype (frame) on your canvas.

​
When to Use Prototype Mode

Explore Approaches

When you want to see multiple ways to build a feature

Design Decisions

When you need to compare different UX approaches

Learn from Others

When you want the AI to research how other apps solve similar problems

Quick Variations

When you want to create multiple versions to compare

​
Setting Up Favorite Apps

To help the AI understand your design preferences:
  1. Browse screens at 21st.dev/community/screens
  2. Bookmark apps that inspire you or match your style
  3. The AI will reference these when generating prototypes
The more apps you bookmark, the better the AI understands your taste and can suggest solutions that match your preferences.

​
Example Workflow

Imagine you want to prototype a user profile page:
  1. Select 3 variations in the chat
  2. You request: “Create a user profile page”
  3. AI researches: It looks at components from 21st.dev and your bookmarked apps
  4. AI asks: “Should it include an activity feed? What information is most important?”
  5. AI generates 3 prototypes:
    • Variation A: Minimal profile with key stats
    • Variation B: Full profile with activity timeline
    • Variation C: Card-based layout with tabs
  6. You compare visually in the canvas, see which feels right
You get working code for each approach. Copy the code or prompt to use in your own project.
After Prototype mode creates variations, you can use Agent mode to refine each one or merge ideas from different prototypes.