Skip to main content
Get up and running with Canvas quickly. No setup required — just start building.

​
Create Your First Prototype

1

Create a Project

Open Canvas and create a new project. No need to connect anything — you can start with a blank canvas.
2

Create Your First Prototype

Click New Prototype or press N to create a new frame on your canvas.
3

Choose Prototype Mode

Select Prototype mode in the chat. Choose how many variations you want to generate.
4

Describe What You Need

Tell the AI what you want to build:
  • “Create a pricing page with 3 tiers”
  • “Build a user profile card component”
  • “Design a dashboard with analytics widgets”
Answer any clarifying questions, and the AI will generate your prototypes.
5

Copy Your Code

Compare the variations, pick your favorite, and copy the code or prompt to use in your own project.

​
Which Mode Should I Use?

ModeBest for
PrototypeGenerating multiple variations to compare
AgentDirect edits and quick changes to a single prototype
For detailed explanations of each mode:

​
Tips

Generate multiple variations — In Prototype mode, create 2-4 variations to see different approaches side by side.
Bookmark favorite apps — At 21st.dev/community/screens, bookmark apps that inspire you so the AI understands your style.
Multiple chats per prototype — Create multiple chats for the same prototype using the + button. Work on different aspects in separate conversations.

​
Advanced: Connect Your Repository

Want to prototype with your existing codebase? Connect your GitHub repository to:
  • Use your actual components and design system
  • Share live previews with your team
  • Get feedback before writing any code yourself
See GitHub Integration for setup instructions.

​
Next Steps

Prototype Mode

Generate multiple variations at once

Agent Mode

Direct editing for quick changes

Context Management

Add context to improve AI responses

Getting Your Code

Export options for your prototypes