【實作紀錄】無程式基礎也能打造的廣告留言媒合平台：從構想到上線的四小時挑戰
- 廖天佑 Bless Liao
- 6月29日
- 讀畢需時 5 分鐘
已更新：7月23日
本文記錄了一次從構想出發，利用 AI 實作網站的完整過程——在完全沒有程式背景的情況下，如何透過 AI 工具與免費平台，製作出一個具有留言媒合功能的小型應用網站。這不只是技術挑戰，更是一個關於創意實踐與廣告策略創新的探索過程。
廣告成本升高下的靈光一現：留言是被忽略的曝光機會
多數人已習慣 Facebook 廣告費用年年調漲，對演算法調整幾乎毫無掌控力。過去我們的應對策略多集中在研究演算法、優化文案與受眾設定。然而，一直有個構想藏在我心中許久，那就是——廣告留言版位，其實大有可為。
許多用戶在看到廣告前，會先看留言做判斷。根據我與其他從業者的經驗，留言往往成為決策點之一。多數品牌沒有善用留言區，有些甚至不知道留言可以置頂。而也有高手專頁，會用留言補充資訊，一次留言多則如迷你頁面般呈現。這讓我思考：能否把留言當作一種資源？進一步讓不同品牌合作置入，交換彼此的流量與曝光？
發想擴展：讓品牌在留言中互補曝光
構想非常直觀——
健身房廣告的留言中可出現運動用品的資訊；
財商課程廣告中可讓營業員、業務置入聯絡方式；
廟宇活動的廣告可讓香品、文創產品共同曝光；
這些原本就存在互補性的品牌，可以在對方廣告留言中進行置入，創造雙方互利的合作模式。我將此構想簡稱為「留言共享」，讓花出去的每一分廣告費，能產生雙向效益。
在這個模式中，留言版位不再只是附屬，而是可「租賃」、「互惠」或「競價」的媒體資源。這不僅延伸了廣告的使用價值，也重新定義品牌合作方式。
現實挑戰：媒合合作比想像中難
設想雖簡單，但實作充滿挑戰。首先，要怎麼找到足夠的廣告主？每個人逐一解釋留言合作的概念太費力。再來，置入品牌如何知道有哪些廣告版位可合作？此外，雙方怎麼媒合、協調條件、安排留言順序？如果是付費合作，又該如何交付成效？
這些挑戰需要一個中介角色，像廣告經紀人般協助雙方合作——不只協調創意與文案，還要保障留言呈現的合理性與不突兀，並能根據成效數據進行收費。
我於是構想出一個「留言懸賞榜」的雛型：
廣告主張貼可合作留言版位與條件；
其他品牌可以留言申請合作；
平台協助媒合、排程與審核留言內容；
雙方留下評價與數據記錄。
這樣就能初步建立一個結構化的留言合作系統。未來更可透過 API 串接 Meta 廣告帳戶，自動同步留言素材，強化數據追蹤與成效驗證。
實作歷程：用 AI 完成一個沒有程式背景者的網站夢
我一開始完全不知道該怎麼做，但在看到 Cloud 推出一個叫 Artifact 的功能後，我決定試試看。
我開始將構想逐一拆解成需求：
表單可以提交廣告與留言條件；
用戶需具備登入功能，能編輯與刪除內容；
所有資料要能儲存並在網頁上展示。
Cloud 的 AI 幫我寫出初步網頁程式碼，並解釋每段程式的設計邏輯。我再用 GitHub 部署前端，把資料儲存在 Supabase，完成資料庫的串接。
我使用的專案代號為「BrandShare」，目前可公開瀏覽：網站連結，程式碼則已上傳至 GitHub：專案程式庫。網站首頁展示了目前留言合作需求，並有完整的發布表單、品牌清單以及密碼編修模組。所有資料皆透過 Supabase 雲端資料庫即時管理。
製作流程拆解
發想與需求整理：確定留言媒合的目標、使用對象與使用場景。
描述需求給 Cloud AI：如「我要讓使用者提交廣告資訊，並能編輯留言內容」。
依 AI 回應組裝前端結構：使用 Cloud Artifact 產生頁面並本地測試。
將前端代碼部署至 GitHub Pages：建立公開網址與初步測試。
使用 Supabase 架設後端資料庫：處理留言資料儲存、讀取與更新。
逐步擴充功能（登入/登出、編輯、刪除、分類查詢）。
測試錯誤處理：出現問題時截圖畫面，回傳給 AI 要求調整指令碼。
部署正式版本，公開展示與收集使用回饋。
整個流程大約耗時四小時，期間與 AI 對話次數超過 60 次，透過不斷修改與測試完成基本原型。
常見問答（FAQ）
Q1：誰可以使用這個平台？A：任何有投放廣告的品牌主或有置入合作需求的商家皆可註冊使用。
Q2：留言是自動審核還是手動？A：目前留言合作需經雙方確認，由廣告主決定是否接受對方留言置入建議。
Q3：留言能修改嗎？A：可以，發起留言合作的品牌可在合作期間內調整留言內容。
Q4：合作有費用嗎？A：初版平台以互惠為主，未來可加入留言租賃與績效導向收費模組。
Q5：平台如何追蹤成效？A：計畫導入 Google Analytics 追蹤點擊與留言互動，未來支援 Meta Pixel 串接。
Q6：是否有違規留言過濾？A：留言需通過雙方同意與平台審核機制，防止不當或無關內容。
Q7：留言的曝光順序如何決定？A：初版依時間排序，未來可能引入置頂、排序推薦或互評機制。
成果展示與未來計畫
目前這個網站已具備以下功能：
廣告主張貼留言需求與條件；
合作品牌提交留言置入申請；
基礎帳號登入、編輯與刪除機制；
留言懸賞榜清單展示與查詢功能；
使用者資料存取與管理，基於 Supabase 權限設計。
如果一切順利，接下來計畫加入：
成效數據追蹤與點擊紀錄（考慮導入 GA 或 pixel 串接）；
評價系統與合作紀錄查詢；
頁面中直接呈現廣告預覽；
持續尋找願意互惠或出租版位的廣告主
這些功能將使平台不只是媒合工具，更成為一種「廣告留言經濟」的基礎架構。
結語：AI 讓創意構想成真，也讓非工程師能啟動產品開發
這次實作證明：只要清楚描述需求，AI 能協助你一步步打造出具備實用價值的應用產品。即使完全沒有寫過程式，也能藉由 Cloud、GitHub、Supabase 等工具，在短時間內完成具備互動與資料儲存功能的應用網站。
留言，不再只是互動的副產品，而是品牌合作的新入口。如果你對這個平台有興趣，或也想找人合作測試、改良，歡迎隨時聯絡，我樂意分享更多開發細節與成果！
傳送門
留言