> ## Documentation Index
> Fetch the complete documentation index at: https://docs.koudingvip.com/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/aigcode/HWHyuMFvMwYdtABB/images/image-47.png?fit=max&auto=format&n=HWHyuMFvMwYdtABB&q=85&s=ba866b2207442ae79ed8f44fc58744d7" 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/aigcode/HWHyuMFvMwYdtABB/images/image-50.png?fit=max&auto=format&n=HWHyuMFvMwYdtABB&q=85&s=d55e90be4f03ca4cde2f653a791412c4" 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/aigcode/HWHyuMFvMwYdtABB/images/image-53.png?fit=max&auto=format&n=HWHyuMFvMwYdtABB&q=85&s=c76c9194e34fd7a86cccbf65389e0f89" 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/aigcode/HWHyuMFvMwYdtABB/images/image-55.png?fit=max&auto=format&n=HWHyuMFvMwYdtABB&q=85&s=30ab4a25f1c8daf7bf6d10eba2e39030" 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/aigcode/HWHyuMFvMwYdtABB/images/image-56.png?fit=max&auto=format&n=HWHyuMFvMwYdtABB&q=85&s=3d3960963ee5c346e0e847dc23b21f63" 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="/docs/build">
    Explore AutoCoder.cc's full capabilities to learn how to edit and optimize your applications.
  </Card>

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