> ## 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.

# AutoCoder.cc How-To Tutorials & Step-by-Step Guides

> Browse step-by-step AutoCoder.cc tutorials covering prompting, app generation, custom domains, source-code export, and earning credits — a how-to library for builders learning the AI development platform end-to-end.

<CardGroup cols={2}>
  <Card title="Tutorial #10 — Build a Local Business Website from a Google Maps Link" href="/docs/blog/nail-salon-website-google-maps" img="https://mintcdn.com/aigcode/NROje_JeZFK_zNIy/images/blog/nail-salon-website-google-maps/cover.png?fit=max&auto=format&n=NROje_JeZFK_zNIy&q=85&s=733954e57f5ee0b44e7a58d3e4da8d72" width="1467" height="822" data-path="images/blog/nail-salon-website-google-maps/cover.png">
    Turn a Google Maps link into a complete nail salon website with AutoCoder.cc — services, pricing, portfolio, reviews, booking, and an admin dashboard.
  </Card>

  <Card title="Tutorial #9 — How to Design User Flows with AutoCoder" href="/docs/blog/design-user-flows" img="https://mintcdn.com/aigcode/YcrN_d7LMrK0Vwo9/images/blog/design-user-flows/cover.png?fit=max&auto=format&n=YcrN_d7LMrK0Vwo9&q=85&s=adea2f98f0a098753c845ab85e016232" width="1467" height="822" data-path="images/blog/design-user-flows/cover.png">
    Design complete user flows with AutoCoder.cc — connect screens, interactions, data states, and business logic around your user's real journey.
  </Card>

  <Card title="Upload an AutoCoder Project to GitHub on Mac" href="/docs/blog/upload-autocoder-to-github-mac" img="https://mintcdn.com/aigcode/Ti4zDcuKnpLPjXbm/images/blog/upload-autocoder-to-github-mac/cover.png?fit=max&auto=format&n=Ti4zDcuKnpLPjXbm&q=85&s=97312960e99daba709ef38fa8e6ab5fa" width="1672" height="941" data-path="images/blog/upload-autocoder-to-github-mac/cover.png">
    A simple, beginner-friendly guide to uploading an AutoCoder project from your Mac to GitHub — no Git experience needed.
  </Card>

  <Card title="Tutorial #8 — Add Login and Payments to Your App" href="/docs/blog/add-login-and-payments" img="https://mintcdn.com/aigcode/Ek21_VnDEc8zHrXh/images/blog/add-login-and-payments/cover.png?fit=max&auto=format&n=Ek21_VnDEc8zHrXh&q=85&s=750dfc40c72fdd052dcc74411751472b" width="1467" height="822" data-path="images/blog/add-login-and-payments/cover.png">
    Add Google Login, payments, order tracking, and analytics to an AI-generated app — turn a website into a business-ready product with AutoCoder.cc.
  </Card>

  <Card title="Tutorial #7 — Progressive Build: See. Edit. Build." href="/docs/blog/progressive-build-tutorial" img="https://mintcdn.com/aigcode/Ek21_VnDEc8zHrXh/images/blog/progressive-build-tutorial/cover.png?fit=max&auto=format&n=Ek21_VnDEc8zHrXh&q=85&s=f7f3e9d605cf9ac7c4cfd116adac92ea" width="1467" height="822" data-path="images/blog/progressive-build-tutorial/cover.png">
    Review and edit your app across three stages — Draft, Requirements, and Full Project — with AutoCoder.cc's transparent Progressive Build workflow.
  </Card>

  <Card title="Tutorial #6 — Better Prompts, Better Products" href="/docs/blog/better-prompts-better-products" img="https://mintcdn.com/aigcode/Fs3Z11kghaxIlSVV/images/blog/better-prompts-better-products/cover.png?fit=max&auto=format&n=Fs3Z11kghaxIlSVV&q=85&s=bc43796ea160b51efd641f3e2a575d4a" width="1467" height="822" data-path="images/blog/better-prompts-better-products/cover.png">
    See how prompt quality shapes product outcomes in AutoCoder.cc — compare a simple vs optimized prompt building a wedding planning platform.
  </Card>

  <Card title="AutoCoder Visual User Flow: Why Blueprint-First Beats Prompt-to-Code" href="/docs/blog/visual-user-flow-blueprint-first" img="https://mintcdn.com/aigcode/sJH5t6GV2zemtp47/images/blog/visual-user-flow-blueprint-first/cover.png?fit=max&auto=format&n=sJH5t6GV2zemtp47&q=85&s=291405757849fb813b05e34d7fefd74a" width="1999" height="1079" data-path="images/blog/visual-user-flow-blueprint-first/cover.png">
    AutoCoder's Visual User Flow adds a planning layer between prompt and code: review an interactive map of your user journey before any code is generated.
  </Card>

  <Card title="Tutorial #5 — Multi-Role Systems: One App, Multiple Experiences" href="/docs/blog/multi-role-systems" img="https://mintcdn.com/aigcode/9vTqTYoLGIf64quY/images/blog/multi-role-systems/cover.png?fit=max&auto=format&n=9vTqTYoLGIf64quY&q=85&s=91617712a4aff0074d6bace3f13a52ce" width="1467" height="822" data-path="images/blog/multi-role-systems/cover.png">
    Learn how AutoCoder.cc builds multi-role systems — give clients, trainers, nutritionists, and admins dashboards, permissions, and workflows in one app.
  </Card>

  <Card title="Tutorial #4 — SparkVibe: Discover, Remix, and Build Faster" href="/docs/blog/sparkvibe-community-hub" img="https://mintcdn.com/aigcode/lZesaKbbh3jHnya8/images/blog/sparkvibe-community-hub/cover.png?fit=max&auto=format&n=lZesaKbbh3jHnya8&q=85&s=ffaeefacca152f07fccadfc0b31d529c" width="1467" height="822" data-path="images/blog/sparkvibe-community-hub/cover.png">
    Explore SparkVibe, the AutoCoder.cc community hub — browse live demos, remix community projects, and turn other builders' ideas into your own apps.
  </Card>

  <Card title="Tutorial #3 — Easy Editing & Updates" href="/docs/blog/easy-editing-and-updates" img="https://mintcdn.com/aigcode/3RoZjyX3ihffVPRw/images/blog/easy-editing-and-updates/cover.png?fit=max&auto=format&n=3RoZjyX3ihffVPRw&q=85&s=ae7a2408fc9cb3df96b60a7df31a09bb" width="1467" height="822" data-path="images/blog/easy-editing-and-updates/cover.png">
    Turn a simple idea into a real, editable app on AutoCoder.cc — generate a working demo, then refine it with chat instructions, visual editing, and version history.
  </Card>

  <Card title="Tutorial #2 — How to Get Free Credits & Explore Plans" href="/docs/blog/get-free-credits" img="https://mintcdn.com/aigcode/F5o1Dl1cu_bPJRem/images/blog/get-free-credits/cover.png?fit=max&auto=format&n=F5o1Dl1cu_bPJRem&q=85&s=3ec041cd4803ee452eb9687df70d25b9" width="978" height="548" data-path="images/blog/get-free-credits/cover.png">
    Start free on AutoCoder.cc, understand the plans, and unlock more credits through simple daily and beginner tasks.
  </Card>

  <Card title="Tutorial #1 — Build Your First App" href="/docs/blog/build-your-first-app" img="https://mintcdn.com/aigcode/F5o1Dl1cu_bPJRem/images/blog/build-your-first-app/cover.png?fit=max&auto=format&n=F5o1Dl1cu_bPJRem&q=85&s=f96897dce0520846325e6c859f72ed5c" width="978" height="548" data-path="images/blog/build-your-first-app/cover.png">
    A complete video walkthrough of building a website or mobile app with AutoCoder.cc — from idea to launch.
  </Card>

  <Card title="How to Prompt AutoCoder.cc" href="/docs/blog/how-to-prompt-autocoder" img="https://mintcdn.com/aigcode/J6ih219OpQeBJddu/images/blog/how-to-prompt-autocoder/bg.png?fit=max&auto=format&n=J6ih219OpQeBJddu&q=85&s=28497aa25d2c2e163354254e48e52d2f" width="976" height="548" data-path="images/blog/how-to-prompt-autocoder/bg.png">
    Learn how to write effective prompts to get the most out of AutoCoder's AI-powered development platform.
  </Card>
</CardGroup>