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

# Quickstart

> This guide shows you how to build and deploy your first website or web application in Same.new using a prompt. No coding experience needed.

Working with Same is easy. Just talk to Same - describe what you want, share reference, or ask for suggestions. Still, to spark inspiration and make your experience even smoother, we’ve created this quick guide.

<Icon icon="sparkles" /> **Let's get started:**

## 1. Create a project

Same lets you start your project effortlessly - whether you have a design in hand, just an idea, or you're looking to explore. Choose one of the options below to begin:

<AccordionGroup>
  <Accordion title="Start from a design you love">
    If you have an existing design you want to replicate:

    1. **Paste a URL** into the input field. Same will visit the website and generate a clone.
    2. Or, **upload an image** (screenshot or mockup). Same will analyze the image and build the project accordingly.
  </Accordion>

  <Accordion title="Describe what you have in mind">
    If you're starting from scratch or a concept:

    1. **Type a description** of the project you want to build into the input field.
    2. Be as specific or as vague as you want, you can iterate after the initial version is complete.
  </Accordion>

  <Accordion title="Browse ideas to spark your project">
    If you're looking to explore new ideas:

    1. **Browse the gallery** to discover community projects
    2. Pick one you like and click the <Icon icon="shuffle" /> **Remix**
    3. Tweak and refine it to match your idea
  </Accordion>
</AccordionGroup>

## 2. Refine your project

You can view and interact with your project directly in the <Icon icon="app-window" /> **App tab** . Same provides you the flexibility to edit specific elements, or add new functions as needed.

<AccordionGroup>
  <Accordion title="Select and edit specific elements">
    You can quickly make changes to any part of your page by:

    1. Click the <Icon icon="pointer" iconType="regular" /> **Select** to start
    2. Click on the text, image, or whatever elements you want to change
    3. **Edit it directly** in the panel, the changes will be reflected realtime
    4. Or **describe the changes** you'd like to apply and send it to Same

    <Tip>
      You can not only adjust the look of the selected elements, but also any function and logic related. For example, try:

      ```md theme={null}
      Disable the button when the verification failed
      ```

      ```md theme={null}
      Add the product to the cart when clicking it
      ```
    </Tip>
  </Accordion>

  <Accordion title="Add new functions with natural language">
    Describe what you want to add - like "Add multi-language support", "Add authentication integration" - and Same will build it for you automatically.

    <Tip>
      To have better control of the result, give Same smaller, sequential instructions.
    </Tip>
  </Accordion>

  <Accordion title="Ask Same for suggestions">
    When you feel unsure about what to do next, simply ask Same for recommendations during your workflow. For example, try:

    ```md theme={null}
    How to send emails to my potential clients filled the form?
    ```
  </Accordion>
</AccordionGroup>

## 3. Deploy your project

When you deploy, your project goes live for the world to see. We encourage frequent deployments to test early, collect feedback, and iterate quickly. While you can wait until everything is perfect, remember — only live projects can grow and evolve.

You can click the **Deploy** button in the upper right corner of your workspace or simply tell Same to deploy:

```md theme={null}
Deploy my project
```

## 4. Continue your journey

Now that you have completed the initial setup, here are a few things you can try next to improve your project:

<CardGroup cols={2}>
  <Card title="Build basics" href="/essentials/prompting" icon="terminal">
    Understand how to give instructions and provide context effectively.
  </Card>

  <Card title="Version control" href="/essentials/version-control" icon="git-branch">
    See how project history is saved and how to revert changes.
  </Card>

  <Card title="Deploy" href="/essentials/deploying" icon="rocket">
    Learn how to publish your project and manage it.
  </Card>

  <Card title="Maximizing performance" href="/performance/maximizing-performance" icon="lightbulb">
    Best practices for efficient development with Same.
  </Card>
</CardGroup>