How Plan Mode Works
1
Research
Before asking questions, the AI automatically researches:
- Components from the 21st.dev library
- Your favorite apps from the community screens section Bookmark apps at https://21st.dev/community/screens so the AI understands which apps inspire you.
2
Study Your Project
The AI analyzes your codebase to understand your patterns, components, and architecture.
3
Ask Clarifying Questions
The AI asks questions to better understand your requirements and preferences.
4
Create Multiple Plans
The AI generates several implementation plans, each with a different approach or variation.
5
Review and Approve
Review the plans and select which ones you want to implement.
6
Create Branches
For each approved plan, the AI creates a new branch (frame) in your canvas, each implementing a different variation of the feature.
When to Use Plan Mode
Explore Approaches
When you want to see multiple ways to implement a feature
Product Decisions
When you need to compare different UX or architectural approaches
Learn from Others
When you want the AI to research how other apps solve similar problems
A/B Testing
When you want to create multiple variations to test
Setting Up Favorite Apps
To help the AI understand your design preferences:- Browse screens at 21st.dev/community/screens
- Bookmark apps that inspire you or match your style
- The AI will reference these when researching solutions in Plan mode
Example Workflow
Imagine you need to add a user profile page. Here’s how Plan mode helps:- You request: “Add a user profile page”
- AI researches: It looks at components from 21st.dev, studies your bookmarked apps (maybe Linear’s clean profiles, Stripe’s detailed views, Vercel’s minimal approach), and analyzes how similar products handle user profiles.
- AI asks: “Should it include an activity feed? What information is most important to your users?”
- AI creates 3 plans:
- Plan A: Minimal profile with key stats (inspired by Vercel’s approach)
- Plan B: Full profile with activity timeline (similar to Linear)
- Plan C: Card-based layout with tabs (more traditional, easier to scan)
- You approve Plans A and C — you want to compare minimal vs. detailed
- AI creates 2 branches — each with working code implementing a different approach
- You compare visually in the canvas, see which feels right, and merge the best parts