前言

在上一篇，我們整理並介紹了各種 AI 生成網站工具，這篇我們就來實際操作看看吧！
本次所選擇的工具為 bolt.new，如果想知道其他工具所生成的結果，可以看看我們之前的貼文，都有針對各個工具做詳細的介紹。

---

首次使用：註冊你的個人帳號

就像很多 AI 工具一樣，在使用工具之前，必須先註冊個帳號。登入後頁面是長這樣子的：

---

示範案例：建立活動列表頁面

假設我們要做一個讓觀眾查看近期演唱會的首頁，我們輸入以下提示：

我想開發一個樂團現場演出安排網站、我需要三個身分使用者。
第一個是樂團經理和表演者，可以編輯樂團部落格、演出安排和樂團歷史記錄。
第二個是主辦者，可以新增和編輯現場活動，並將樂隊資訊添加到活動頁面，以及編輯活動歷史記錄。
第三個是觀眾，可以查看活動、樂團訊息，並在網站上購票。
有時我們可以給觀眾一些折扣，讓他們參加更多活動。
視覺和文字方面，可以更偏向搖滾風格。

工具會馬上產出一個符合格式的畫面。你可以：

• 預覽畫面結構
• 修改字體、顏色與內容細節
• 匯出程式碼，作為之後整合登入功能的基礎

---

我們來看看 bolt.new 為我們生成了些什麼：

當我們完成生成後，右邊的網頁工具就會幫我們自動啟動生成好的網頁。
由於筆者是用英文下的指令，所以目前網頁所顯示的都是英文。
內容部分可以用假資料（例如預設的活動列表）先模擬，之後再慢慢加上真實的功能。

首先我們來觀察一下首頁，上面已經生成了不少按鈕。
但不論選擇上面的 Events、Bands 還是下面的 Find Shows、Discover Bands，
都會開啟下拉式搜尋的選單。

然後活動 & 樂團的部分，AI 也生成了一些給我們做參考，當然資料都是 AI 自己生成的。

再來我們點擊 Sign up 按鈕，會發現基礎的登入介面已經做出來了，下面可以選擇身分組。
（當然此時的頁面後面是空白的，只要按照規則隨意輸入就會進入所選擇身分組頁面）

我們點選右上的 Login，會發現除了一般的登入選項外，AI 還幫我們生成了三個組的示範帳號。
（跟剛剛一樣，目前還沒有後台系統，所以剛才註冊的帳號並不能使用，只能使用示範帳號）

下面就快速展示一下每個身分組的頁面

現在我們有基礎的網頁了，但我們還沒有登入系統，需要後期的打磨與完善。
在介紹工具之前，我們先來理解一下，為什麼沒辦法用 AI 做出登入系統？

---

下一篇預告：為什麼單靠 AI 無法完成登入功能？

到目前為止，我們透過 AI 工具（這次使用的是 bolt.new）已經成功打造出一個視覺上完整、結構清晰的網站雛型，包含首頁、選單、功能按鈕，甚至還有模擬的登入與註冊介面。

但你應該也發現了──這些登入按鈕看起來可以點，其實還沒有真正的功能。目前使用的示範帳號只是前端畫面，背後並沒有資料庫、驗證機制，也無法保證使用者的資訊安全。

我們會更深入地解析「AI 為什麼做不好登入流程」，從安全性、完整性、與開發責任的角度出發，說明這是一個不能只靠模型生成的任務。