前言

萬事起頭難，既然我們要來製作個人網頁，那就要先有個清晰的想法。 這篇文章的目標很簡單：

把你的網站構想整理清楚，讓後續開發流程更順利。
我們會聚焦在三個問題：

---

1. 這個網站是要給誰用？

你可以從「目標使用者」開始想像這個網站的定位。這會影響功能與操作方式。

舉例來說，我們這系列的範例是一個：

讓樂團界自由分享的行事曆平台。

• 樂團可以放入自己的簡介與演出歷史
• 主辦單位可以隨時新增活動並在網站上售票
• 樂迷可以追蹤喜歡的樂團，在線上購票，並紀錄自己參加過的活動

這個網站的使用者包括：樂團、主辦單位、觀眾，每個角色都有不同的需求。

---

2. 你希望它有哪些基本功能？

接下來，我們用 AI 協助列出「最基本」的功能，先完成一個可運作的雛型。
以上面的範例為例，我們可以列出以下 MVP（最小可行產品）：

• 使用者可以註冊／登入帳號
• 使用者會有自己專屬的儀表板
• 所有訪客都能瀏覽活動行事曆
• 活動可以依照地區、樂風、日期篩選

---

2a.進階功能（可放到後面階段）則包括：

• 樂團可以新增或編輯自己的簡介
• 樂團可以在網頁上發布 Blog 與觀眾互動
• 主辦可以發佈活動資訊
• 主辦可開啟售票功能、設定票價
• 觀眾可以留言、按讚、收藏樂團以及線上購票
• 觀眾登入後，可以將預定的活動加入自己的行事曆

---

3. 你想像中的設計結果？

為了讓 AI 工具更準確幫助你，你可以進一步描述你希望的網站設計：

• 首頁是一個大範圍行事曆，列出近期活動
• 樂團頁面有大頭照、簡介、歷史演出紀錄
• 活動頁面顯示主視覺、時間地點、票價、購票連結
• 使用者有一個「個人頁面」，顯示自己參加過哪些演出

---

這些資訊都能幫助 AI 幫你生成畫面、元件與資料結構。
等你整理好你需要的資訊了，就可以讓 AI 幫我們設計網頁。

我們就可以使用名為 Vibe coding 的 AI 工具來幫我們生成結果。
我們將在下一篇文章介紹市面上流行的 Vibe coding 工具。