> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Go from idea to a live app in 10 minutes with Rocket.new Build.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

This walkthrough takes you from a blank canvas to a live app. You will create a Build task, describe what you want, watch Rocket generate it, preview the result, make changes, and launch.

<Note>
  You need a Rocket account to follow along. If you have not signed up yet, [create an account](/getting-started/create-an-account) first.
</Note>

## Build and launch your first app

<Steps>
  <Step title="Create a Build task">
    Go to **[rocket.new](https://rocket.new)** and sign in. From the home screen or any project, click **New task** and select **Build**.

    You can also type your idea directly into the chat field on the home screen and Rocket will create a Build task for you automatically.
  </Step>

  <Step title="Describe your idea">
    Type what you want to build in plain language. Be specific about the app type, key features, and any design preferences.

    Here is an example prompt to try:

    ```plaintext wrap theme={null}
    Build a task management web app with a dashboard showing tasks in a kanban board. Include columns for To Do, In Progress, and Done. Users can create tasks with a title, description, and priority level. Add a sidebar with project navigation and a dark mode toggle.
    ```

    Press **Enter** or click **Send** to submit.
  </Step>

  <Step title="Answer follow-up questions (if any)">
    If your prompt is clear and detailed, Rocket skips this step and begins building immediately.

    If anything is ambiguous, prompt intelligence asks a short set of follow-up questions first. Answer them and generation starts right away.
  </Step>

  <Step title="Watch code generation">
    Rocket builds your app in real time. You will see inline progress as each file is created and finalized.

    Most apps generate in one to three minutes depending on complexity.
  </Step>

  <Step title="Preview your app">
    Once generation completes, your app appears in the live preview panel. Interact with it just like a real user - click buttons, navigate between pages, fill out forms, and test the full experience.

    For mobile apps, the preview renders inside a device simulator so you can see how it looks on a phone screen.
  </Step>

  <Step title="Make changes">
    Use any of these methods to iterate:

    * **Chat** - Type natural language instructions like "Change the header background to dark blue" or "Add a settings page with profile editing."
    * **Visual edit** - Click **Edit** in the preview toolbar, then click any element to change its text, style, spacing, or image directly. See [Visual edit](/build/editor/visual-edit).
    * **Code** - Open the code editor to modify source files directly. See [Code](/build/editor/code).

    Rocket tasks have no change limit. Keep iterating until you are happy with the result.
  </Step>

  <Step title="Launch">
    When your app is ready, click **Launch** in the top-right corner. Your app goes live instantly with a shareable URL. You can also:

    * [Connect a custom domain](/build/launch-web/custom-domain) (paid plan required)
    * [Download the source code](/build/editor/code) (paid plan required)
    * [Submit to app stores](/build/launch-mobile/google-play) (for mobile apps)
  </Step>
</Steps>

## Tips for a great first prompt

<AccordionGroup>
  <Accordion title="Name the app type explicitly">
    Start with what you are building: "Build a web app for..." or "Create a mobile app that..." This helps Rocket select the right patterns immediately.
  </Accordion>

  <Accordion title="List 3 to 5 key features">
    Pick the most important features and list them clearly. You can always add more through chat after the initial build.

    **Good:** "Include user authentication, a dashboard with charts, and a settings page."

    **Too vague:** "Make it full-featured with everything a user would need."
  </Accordion>

  <Accordion title="Mention design preferences">
    If you have a visual direction in mind, say so. "Modern and minimal with a dark theme" or "Colorful and playful, inspired by Notion" gives Rocket much better starting context than leaving design open-ended.
  </Accordion>

  <Accordion title="Specify the audience">
    "A CRM for freelance photographers" produces a more tailored result than "a CRM app." Context about who will use the app shapes feature decisions, copy, and design.
  </Accordion>

  <Accordion title="Start lean, then iterate">
    Begin with fewer screens and core features. Generate the foundation, then add complexity through chat. Asking for 20 screens in your first prompt often produces messier output than building 5 screens and expanding from there.
  </Accordion>
</AccordionGroup>

## Example prompts to try

| What you are building | Prompt                                                                                                                                  |
| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
| SaaS dashboard        | `Build a project management web app with team workspaces, a kanban board, and user roles. Include a Pro plan upgrade page.`             |
| Mobile fitness app    | `Create a workout tracker mobile app with exercise logging, progress charts, and a calendar view. Support both iOS and Android.`        |
| Landing page          | `Build a landing page for an AI writing tool with a hero section, feature highlights, pricing table, testimonials, and a signup form.`  |
| E-commerce store      | `Create an online store for handmade jewelry with product pages, category filters, a shopping cart, and checkout flow.`                 |
| Portfolio site        | `Build a portfolio website for a UX designer with a project gallery, about page, resume section, and contact form. Minimal and modern.` |

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Visual edit" icon="arrow-pointer" href="/build/editor/visual-edit">
    Click any element to change it directly - text, colors, layout, spacing.
  </Card>

  <Card title="Connectors" icon="grid-2" href="/build/connectors/overview">
    Add payments, databases, AI models, email, and more.
  </Card>

  <Card title="Best practices" icon="star" href="/build/best-practices">
    Prompt patterns, iteration strategies, and tips for complex apps.
  </Card>

  <Card title="Launch your app" icon="desktop" href="/build/launch-web/launch-your-site">
    Publish your app with one click and connect a custom domain.
  </Card>
</CardGroup>