# AI 網站建構器 (AI Website Builder)

AI 網站建構器是一個直觀的代理，旨在幫助您創建視覺上吸引人且互動性強的一頁式網站。只需提供您的規格，代理就會生成一個完整的 HTML 文件，該文件包括嵌入的 JavaScript 和 CSS。生成的網站將具有動態元素，例如下拉菜單、可點擊的按鈕和響應式設計，確保用戶友好的體驗。無論您是初學者還是有經驗的開發人員，這個工具都可以方便地自定義和有效地展示您的內容。

# 開始使用

要開始使用，請確保您已經複製了 AI 網站建構器。按照從模板創建的指示複製和配置您的 AI 代理。

# 配置說明

# 知識

您可以上傳.pdf或.txt文件，為代理提供滿足您特定需求的量身定制背景。

# 用戶輸入

標籤名稱	描述	使用指引
Requirements of the Website	您的網站的要求	提供您網站的詳細描述或目的，力求在3-5句內清晰表達不同方面。

# AI 模型

默認模型為 Llama 3.1 8B Instruct，但您還可以探索其他支持的AI模型。如果需要，請根據您的需要調整提示以獲得更精確的輸出。

TIP

有關配置 AI 代理的更詳細說明，請參閱配置 AI 代理。

# 輸入與輸出範例

# 輸入範例

Requirements of the Website:
- websiteTitle: My Portfolio
- mainContent: Welcome to my personal portfolio website where I showcase my projects and skills.
- colorScheme: #2E7D32
- menuItems: Home, Projects, Contact
- interactiveElements: A contact form and clickable project images

# ### 輸出範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <style>
      body {
        background-color: #2e7d32;
      }
      /* Additional CSS for styling */
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="home">
        <h1>Welcome to my personal portfolio website</h1>
        <p>Here I showcase my projects and skills.</p>
      </section>
      <section id="projects">
        <h2>My Projects</h2>
        <p>Clickable project images will be displayed here.</p>
      </section>
      <section id="contact">
        <h2>Contact Me</h2>
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required />
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />
          <button type="submit">Send</button>
        </form>
      </section>
    </main>
    <script>
      // JavaScript for interactive elements
    </script>
  </body>
</html>

# 有效配置的提示

明確您的輸入：對每個輸入使用具體的描述，以幫助代理準確理解您的需求。
保持簡單：不要一次性在您的網站上添加過多功能；從基本元素開始，然後再擴展。
測試和迭代：生成網站後，測試其功能，並根據反饋或性能進行必要的調整。
利用色彩心理學：選擇能激發合適情感的顏色，確保它們與您網站的目的相符合。
保持組織：將您的代碼保持良好註釋和組織，以便未來參考或修改。這將在重訪項目時提供幫助。

# 相關文章

繼續探索我們的代理模板庫，發現更多 AI 代理的實用範例！