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

# Getting Started — Build Your First AutoCoder App

> A quick start for AutoCoder.cc — the basic steps for creating your first application from a natural-language prompt, signing in, generating the project structure, and previewing the live demo before you deploy.

<Steps>
  <Step title="Sign in to AutoCoder.cc">
    Register and log in to your AutoCoder.cc account. You can use Google login for quick access. Once logged in, you can:

    * **Create** new projects
    * **Edit** generated applications
    * **Browse** community projects
    * **Manage** projects in the **Workspace**

    <Frame>
      <img src="https://mintcdn.com/aigc-c52a7338/gTIotFODpBewRkfQ/images/image-47.png?fit=max&auto=format&n=gTIotFODpBewRkfQ&q=85&s=6ed8fa95bfbdfd11cc64c36320216a3f" alt="Image" width="3840" height="1986" data-path="images/image-47.png" />
    </Frame>
  </Step>

  <Step title="Describe your idea">
    After logging in, you will enter the AutoCoder.cc homepage. In the input box, describe the application you want to create. For example:

    * "Create a restaurant website"
    * "Build a landing page for a product"
    * "Create a task management app"

    AutoCoder.cc will analyze your requirements and generate the application structure.

    <Frame>
      <img src="https://mintcdn.com/aigc-c52a7338/rfTmzsC-PWu3bctN/images/image-50.png?fit=max&auto=format&n=rfTmzsC-PWu3bctN&q=85&s=e587a810ce118a11304fbe6dbbd21d24" alt="Image" width="1280" height="662" data-path="images/image-50.png" />
    </Frame>
  </Step>

  <Step title="Generate your first project">
    Click **Generate**, and AutoCoder.cc will automatically create the application demo. The demo is built accurately based on your **Requirement List**. If you need to adjust the requirements, simply tell the AI in the input box.

    <Frame>
      <img src="https://mintcdn.com/aigc-c52a7338/rfTmzsC-PWu3bctN/images/image-53.png?fit=max&auto=format&n=rfTmzsC-PWu3bctN&q=85&s=18ac7aee165ff42802e2d1e371adf9ca" alt="Image" width="1280" height="662" data-path="images/image-53.png" />
    </Frame>

    The generated content typically includes:

    * Page structure
    * UI layout
    * Basic functional logic

    Within minutes, you will see your application prototype.

    <Frame>
      <img src="https://mintcdn.com/aigc-c52a7338/rfTmzsC-PWu3bctN/images/image-55.png?fit=max&auto=format&n=rfTmzsC-PWu3bctN&q=85&s=1937d2aeb358941c9ebd7170f51bbecf" alt="Image" width="1280" height="662" data-path="images/image-55.png" />
    </Frame>
  </Step>

  <Step title="Refine your project">
    After generating the project, continue to optimize your application through AI chat. You can:

    * **Add** new pages
    * **Modify** page structures
    * **Update** functional logic
    * **Optimize** content and layouts

    AutoCoder.cc will update the project in real-time based on your instructions.

    <Frame>
      <img src="https://mintcdn.com/aigc-c52a7338/rfTmzsC-PWu3bctN/images/image-56.png?fit=max&auto=format&n=rfTmzsC-PWu3bctN&q=85&s=72ced0983699f0be52ee905ccebd4bc4" alt="Image" width="1280" height="662" data-path="images/image-56.png" />
    </Frame>
  </Step>

  <Step title="Continue building">
    Once your project is generated, explore more features:

    * **Edit** page components
    * **Modify** page content
    * **Browse** **SparkVibe** community projects
    * **Publish** your applications

    These functions are introduced in detail in the **Features** section.
  </Step>
</Steps>

***

## What to read next

If you have completed your first project, you can continue exploring:

<CardGroup cols={2}>
  <Card title="Features" icon="list-check" href="/build">
    Explore AutoCoder.cc's full capabilities to learn how to edit and optimize your applications.
  </Card>

  <Card title="FAQ" icon="circle-question" href="/faq">
    Find answers to common questions and troubleshooting solutions.
  </Card>
</CardGroup>