In this guide, you’ll learn how to:

  • Start a project using a written idea.
  • Use a Figma design to generate a project.
  • Upload an image to visually guide Rocket and kickstart your build.

​
Before you begin

You’ll need:
  • You’re in – just sign into Rocket and you’re ready to build.

​
Project Visibility: Public vs Private

  • Free users:
    All projects are automatically Public. These public projects are listed under the Built with Rocket tab on the landing page, making them openly accessible for anyone to browse and explore. If you want to make a project Private, you’ll need to upgrade to a paid plan.

    Built with Rocket navigation on homepage

  • Paid users:
    All new projects are Private by default. You can choose to make them Public at any time if you’d like to share them more broadly.

How to change project visibility:
There are two easy ways to switch between Public and Private:

  • Before starting a project:
    On the Rocket homepage, right above the input field or project-type chips, you’ll see a toggle. Paid users can choose their preferred visibility setting here.

    Visibility dropdown before starting a project (on landing page)

  • Inside an existing project:
    Once your project is open, look at the top bar next to your app’s name. Click the visibility icon to open a dropdown - you can change your project’s visibility right from there.

    Visibility dropdown inside an existing project

​
Let’s build your first project!

Choose the creation method that works best for your workflow.

​
Method 1: Start from an idea

1

Go to Rocket

Head to rocket.new and sign in.

Landing page before project creation

2

Tell Rocket what you want to create

Choose your app type from the homepage or jump straight into describing your idea.

Option 1: Click what you want to build
Tap a selectable chip like:

  • Web App
  • Mobile App
  • Internal Tool
  • Website
  • Dashboard
  • Landing Page

Not sure what to select?
Explore how use cases guide Rocket to generate the right layout and flow for your project.

When you select a chip, it opens a focused chat window right in the box. Rocket uses your selection to automatically detect the platform.

Web App option selected

Option 2: Describe your idea
Type your app’s idea in the chat prompt (e.g.: Users share one thing they’re grateful for each day and “link” it to other’s entries in a visual chain. Display entries as a growing timeline with soft color-coded links.).

Chat prompt idea input

3

Choose platform manually (if not already selected or mentioned)

If you type your idea without selecting a project type or specifying it in your text, Rocket will ask whether you’re building for mobile or web.

Platform selection after typing idea manually

4

Select your framework

Based on your selected platform, Rocket will recommend a framework setup and you can customize it if needed.

If you selected Web App:
Rocket uses a default stack to get things moving fast:

  • React
  • JavaScript
  • Tailwind CSS

You’ll see this recommendation before building starts. You can either:

  • Use default framework to proceed as-is

    Default web app framework

  • Or click Customize framework to adjust the stack to your needs.

    Web framework customization screen

If you selected Mobile App:
Rocket will build it using Flutter, which is currently the only supported option for mobile.

5

Customize screen generation

Rocket shows you a list of suggested screens. Deselect any that you don’t need.

Screen selection UI

Success check: Click Confirm to begin generation.

6

Rocket prepares and builds in real time

Rocket now generates your app, showing progress on each screen.

Status icons indicate:

  • = Completed
  • = In progress
  • = Failed

Live screen generation status

Need to retry a failed screen?
Click Retry next to Failed to generate the screen.

​
Method 2: Import from Figma

Turn your designs into production-ready code fast. With Rocket, it’s simple to convert your Figma designs into working apps.

Just follow our step-by-step guides for web and mobile to go from design to live code in minutes.

Create mobile applications with Figma

Create web applications with Figma

​
Method 3: Upload an attachment

Want to guide Rocket visually? Upload an image alongside your idea—or let the image speak for itself.

Use this method to:

  • Add visual context to your prompt.
  • Start from a screenshot and say: “Create an app like this”.
Note:
  • Only image files (like .png, .jpg or .jpeg) are supported for uploads.
  • This works best with clear UI screenshots or design mockups.
1

Attach your image

Click Attach at the bottom left of the input box to upload an image (e.g. a UI mockup, wireframe, or screenshot).

You can also drag and drop or paste an image directly into the chat box.

Just make sure the file is under 5MB - Rocket moves fast, and lighter files help keep things smooth.

Click attach to upload an image

2

Describe what you want to build

Type your instructions in the chat box. You can keep it simple:

  • Create an app like the uploaded image.
  • Use this layout to build a signup form.

Example: Upload a dashboard screenshot and say: “Clone this layout as a responsive web app.”

3

Let Rocket build it

Hit Enter, and Rocket will begin generating your app based on the image and prompt.

From this point on, the process continues just like Method 1, starting at Step 3 - you’ll select a framework, customize your screens, and watch Rocket build your app in real time.

​
Method 4: Use a template

1

Browse templates by category

Go to the Templates tab from the top navigation.

Landing page with Tempaltes navigation

You’ll find templates grouped by real-world categories:

  • Landing Page
  • Web App
  • Dashboard
  • Mobile App
  • Internal Tool
  • …and more

Template browser with category filter

2

Hover to preview or click to learn more

Each card gives you a quick overview. Hover to see the Use this template and Learn more actions. Click Learn more for full screenshots, page details, and descriptions.

Hovered template showing 'Use this template' and 'Learn more' options

3

View template details

When you click Learn more, Rocket shows you a detailed preview of the template including included pages and layout screenshots.

Template details screen with screenshot and page list

4

Click 'Use this template' to start

When you click Use this template, Rocket takes you directly into the app generation flow - starting directly with code and preview, no extra steps.

Success check: You’ll land in the chat window with your template loaded.

Note: Using a template does not consume any tokens. It’s the fastest and easiest way to launch a production-ready app.

Stay in the flow – we’ll ping you when it’s ready.
If your project takes more than a few moments to complete, Rocket has you covered. You’ll hear a notification sound when your preview is ready - no need to keep the tab active.

You did it!

Your Rocket project is live – created from your idea or design.

Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.