本文記錄了一次從構想出發，利用 AI 實作網站的完整過程——在完全沒有程式背景的情況下，如何透過 AI 工具與免費平台，製作出一個具有留言媒合功能的小型應用網站。
廣告成本升高下的靈光一現：留言是被忽略的曝光機會
多數人已習慣 Facebook 廣告費用年年調漲，對演算法調整幾乎毫無掌控力。然而，一直有個構想藏在我心中許久，那就是——廣告留言版位，其實大有可為。
💡 核心創意
能否把留言當作一種資源？進一步讓不同品牌合作置入，交換彼此的流量與曝光？
發想擴展：讓品牌在留言中互補曝光
構想非常直觀——
- 健身房廣告的留言中可出現運動用品的資訊
- 財商課程廣告中可讓營業員、業務置入聯絡方式
- 廟宇活動的廣告可讓香品、文創產品共同曝光
現實挑戰與解決方案
🔧 面臨的挑戰
設想雖簡單，但實作充滿挑戰：如何找到廣告主？如何媒合？如何協調？如何收費？
✨ 解決方案：留言懸賞榜
我於是構想出一個「留言懸賞榜」的雛型：
- 廣告主張貼可合作留言版位與條件
- 其他品牌可以留言申請合作
- 平台協助媒合、排程與審核留言內容
- 雙方留下評價與數據記錄
實作歷程：用 AI 完成一個沒有程式背景者的網站夢
我一開始完全不知道該怎麼做，但在看到 Claude 推出一個叫 Artifact 的功能後，我決定試試看。
製作流程拆解
- 發想與需求整理：確定留言媒合的目標。
- 描述需求給 Claude AI：如「我要讓使用者提交廣告資訊」。
- 依 AI 回應組裝前端結構：使用 Claude Artifact 產生頁面。
- 部署至 GitHub Pages：建立公開網址。
- 使用 Supabase 架設後端資料庫：處理資料儲存。
- 逐步擴充功能（登入/登出、編輯、刪除）。
- 測試錯誤處理：出現問題時截圖回傳給 AI 調整。
- 部署正式版本，公開展示與收集回饋。
整個流程大約耗時四小時，期間與 AI 對話次數超過 60 次。
成果展示與未來計畫
如果一切順利，接下來計畫加入數據追蹤、評價系統與廣告預覽等功能。
結語：AI 讓創意構想成真
這次實作證明：只要清楚描述需求，AI 能協助你一步步打造出具備實用價值的應用產品。
留言，不再只是互動的副產品，而是品牌合作的新入口。