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

# 创建您的第一个应用

> 逐步创建您的第一个项目、修复问题，并完成发布

## **如何使用 CodeBanana**

CodeBanana 是一个由 AI 驱动的个人应用与网站构建平台。您无需具备编码或技术背景，只需描述您想要创建的内容，CodeBanana 将完成剩余工作。

<Card title="Agent" icon="robot">
  专注于生成新项目和构建复杂功能，是 CodeBanana 的核心功能。
</Card>

Agent 作为一名 **自主式虚拟开发者**，能够深度理解项目上下文、规划架构逻辑，并执行全栈工程任务——将自然语言需求直接转化为可投入生产的应用。

<Card title="您可以在 CodeBanana 上构建的内容示例">
  * [为新的商业想法制作原型](https://610d4b83-888f-44a0-ab34-8f504327cc12.codebanana.app/)
  * [休闲小游戏](https://typing-rain-d44fe89d.codebanana.app/)打发时间
  * 一个吐槽工作的论坛
  * [创建个人待办清单](https://todo-calendar-app.codebanana.app/)
  * 精美制作的 PPT
  * [个人博客](https://cce1de98-7364-49aa-ad03-e361fd52059e.codebanana.app/)
</Card>

按照以下步骤，使用 CodeBanana 构建您的第一个应用，并持续优化，直到它符合您的理想设计。

<Card title="准备开始了吗？" icon="arrow-right" href="https://codebanana.com/">
  立即开始构建您的应用
</Card>

*<u>「预计耗时：7 分钟」</u>*

<img src="https://mintcdn.com/gen-d40df51d/gptI4s88cSsrzk-w/images/homepage.png?fit=max&auto=format&n=gptI4s88cSsrzk-w&q=85&s=7f1ca8ce33c2492aab95cf6a8fe77a54" alt="Homepage" className="mx-auto" title="Homepage" width="2294" height="1264" data-path="images/homepage.png" />

<Steps>
  <Step title="新建项目" titleSize="p">
    进入上方所示的首页，点击 **Get started：**

    点击如下图所示的 **+**，然后选择 **Create Project**：

    <img src="https://mintcdn.com/gen-d40df51d/gptI4s88cSsrzk-w/images/StudioPage.png?fit=max&auto=format&n=gptI4s88cSsrzk-w&q=85&s=20a51fdff46974fad9f0a20d5a4e519f" alt="Image" title="Image" className="mx-auto" width="2294" height="1264" data-path="images/StudioPage.png" />

    如下图所示，选择一个 Blank Project：

    <Frame>
      <img src="https://mintcdn.com/gen-d40df51d/gptI4s88cSsrzk-w/images/create_template.png?fit=max&auto=format&n=gptI4s88cSsrzk-w&q=85&s=92d85a45c30bdb8fb961d41296f18d5a" alt="Studio Page" width="2294" height="1264" data-path="images/create_template.png" />
    </Frame>

    等待所有内容准备完成后，您就创建好了第一个项目。
  </Step>

  <Step title="向 Agent 描述您的想法">
    只需用您自己的话，在右侧告诉 Agent 您想构建什么，Agent 就会帮助您一步步实现。

    例如，您可以输入“一个德州扑克游戏”，或者任何您脑海中的想法。您可以尽可能详细地描述。这条初始提示词将帮助应用开始构建，之后您也可以随时继续补充功能或进行修改。

    <Info>
      *提示词是指您希望 Agent 执行任务的描述。*
    </Info>

    <img src="https://mintcdn.com/gen-d40df51d/gptI4s88cSsrzk-w/images/QuickStart_prompt.png?fit=max&auto=format&n=gptI4s88cSsrzk-w&q=85&s=b8232402bbea7e439b200d5e58db20c2" alt="Image" title="Image" className="mx-auto" width="2294" height="1264" data-path="images/QuickStart_prompt.png" />

    <Tip>
      您可以使用 **My Agent** 模式来梳理和完善您的想法，再将内容复制到 **Team Agent** 中进行构建。
    </Tip>

    您可以在提示词中附加文本和文件。完成全部信息描述后，点击发送按钮或按下 Enter，Agent 即会开始工作。

    <img src="https://mintcdn.com/gen-d40df51d/gptI4s88cSsrzk-w/images/Quickstart_attach.png?fit=max&auto=format&n=gptI4s88cSsrzk-w&q=85&s=6c4a5ff60fc9f90e8e2db57c5073532d" alt="Image" width="2294" height="1264" data-path="images/Quickstart_attach.png" />
  </Step>

  <Step title="查看您的应用逐步成型">
    CodeBanana 会自动设计应用的外观，包括选择配色、布局按钮和组织菜单，使整体界面更加美观且功能运行流畅。

    <img src="https://mintcdn.com/gen-d40df51d/IZfuH_558AMzs6cZ/images/Quickpreview.png?fit=max&auto=format&n=IZfuH_558AMzs6cZ&q=85&s=e4e6454bed7d172c43249e0879641637" alt="Quickpreview" width="2294" height="1264" data-path="images/Quickpreview.png" />

    在预览窗口中查看您的应用逐步生成。您可以立即探索应用，并通过点击预览来体验各项功能。任务完成后，预览窗口会自动打开。

    您也可以在新标签页中查看该页面；只需点击图片中所示的链接即可：

    <img src="https://mintcdn.com/gen-d40df51d/IZfuH_558AMzs6cZ/images/Quickpreopen.png?fit=max&auto=format&n=IZfuH_558AMzs6cZ&q=85&s=9c92055c07a72561d3303e71f4e9345e" alt="Quickpreopen" width="2294" height="1264" data-path="images/Quickpreopen.png" />

    <img src="https://mintcdn.com/gen-d40df51d/IZfuH_558AMzs6cZ/images/previewtab.png?fit=max&auto=format&n=IZfuH_558AMzs6cZ&q=85&s=62f66d99ae4b666cf3672709920f15ea" alt="Previewtab" width="2294" height="1264" data-path="images/previewtab.png" />
  </Step>

  <Step title="优化您的应用">
    当您发现可以改进的地方时，可以继续与 AI 沟通，直到应用符合您的预期：

    <img src="https://mintcdn.com/gen-d40df51d/IZfuH_558AMzs6cZ/images/QuickRevised.png?fit=max&auto=format&n=IZfuH_558AMzs6cZ&q=85&s=a2a7989539b3c5e7afe96fc14791bc70" alt="Quick Revised" width="2294" height="1264" data-path="images/QuickRevised.png" />

    您也可以使用截图来帮助描述您的想法；只需点击发送按钮旁边的附件按钮，或使用 Ctrl / command + V。

    <img src="https://mintcdn.com/gen-d40df51d/IZfuH_558AMzs6cZ/images/Quickattachphoto.png?fit=max&auto=format&n=IZfuH_558AMzs6cZ&q=85&s=b9b338c7f9d9c77798f914e85ca2a1e0" alt="Quickattachphoto" width="2294" height="1264" data-path="images/Quickattachphoto.png" />
  </Step>
</Steps>

<Card title="准备开始了吗？" icon="arrow-right" href="https://codebanana.com/">
  立即开始构建您的应用
</Card>