不會寫程式，
我用 AI 做出一個
真的能上線的網站

先說結論——你也做得到

這個網站是我做的。但我一行 code 都沒寫。

我女兒一歲多，每個週末我都在煩惱同一件事：到底要帶她去哪走走跳跳。看了很多推薦，看完就忘；在 Google Map 打個星號，也沒有然後。想自己做個 Notion 整理，光建表格就累到放棄。

直到最近 AI 變強，我把這個放在心裡很久的想法，直接丟給它。童行 tinygo.tw 就這樣做出來了——一個整合親子友善地點的網站，現在我朋友會自己打開來找週末去哪。

這份懶人包，我把整套流程原原本本拆給你。協助你把心裡想做的東西講清楚、交給 AI 幫你做出來。

如果你心裡也有一個「要是有這個就好了」的想法，往下看。

心法：你真正要會的，只有一件事

開始之前，先把一個誤會拆掉。

你以為做網站要先學程式。其實你要會的，是把腦袋裡的東西描述清楚。剩下「翻成程式碼」這件事，現在 AI 做得比大多數人好。

你會打字、你能講清楚自己想要什麼，你就具備了全部的條件。

我自己做童行的過程，比較像在跟一個很厲害、很有耐心的工程師朋友講話：「我想做一個這樣的東西」「這裡我希望它長這樣」「這邊壞掉了，幫我看看」。我負責想、負責描述、負責決定；它負責寫、負責修、負責跑。

接下來六個步驟，就是我實際走過的路。

你會用到的工具（花費全攤開）

整套做下來，加上「一次補進上百筆資料」，總共大概花了美金幾塊錢。

老實說，上面這些名詞，有些連我自己一開始也不知道是什麼。但你不懂真的沒關係——直接問你的 AI（Claude Code）：「Supabase 是什麼？用白話跟我解釋」，它會講到你懂；你甚至可以說「這個我不想搞懂，你幫我用好就好」，它真的辦得到。

先想清楚：你要解決的是什麼？

最容易失敗的起點，是想做一個「很厲害的東西」。最容易成功的起點，是做一個你自己每天都會用、會痛的小東西。

童行對我來說就是這樣：我自己每個週末都卡在「不知道帶女兒去哪」。我做的不是給全世界用的大平台，是先解決我自己的問題。

動手前，先用這幾個問題把想法收斂成一句話：

• 這個東西是給誰用的？（最好第一個用戶就是你自己）
• 它解決哪一個具體的麻煩？
• 如果只能留一個核心功能，是哪一個？
• 我能用一句話跟朋友介紹它嗎？

童行的那句話是：「把親子友善的地點集中在一個地圖上，週末不用再煩去哪。」

先有這句最核心的話，再開始接下來的動作。

用 Claude Code 把需求講成程式

這是整件事的核心動作：你講，它寫。

不用想得太複雜。你打開 Claude Code，第一句話就是把你 Step 1 那句話講給它聽，然後一句一句把功能加上去。卡住了、壞了，就把狀況描述給它。

下面是我實際的指揮方式，你可以直接照抄、改成你的東西（按「複製」拿去用）：

我想做一個網站，叫「童行」。
它是一個地圖，上面標出對親子友善的地點（親子餐廳、公園、親子館、景點）。
使用者可以用類別和地區篩選、搜尋，點地點看詳細資訊。
我完全不會寫程式，也不懂任何技術名詞。
請你幫我決定要用什麼工具最簡單、最穩定、最適合新手，
然後一步一步帶我做，每一步告訴我你在做什麼、我需要做什麼。

現在幫我加一個「篩選類別」的功能：
上面一排按鈕，點「親子餐廳」就只顯示親子餐廳。

我點「公園」這個按鈕，畫面沒有反應，
其他按鈕都正常。幫我看看哪裡有問題。

跟 AI 討論版面，順便做 logo

網站能跑之後，下一件事是讓它好看、有自己的樣子。

版面（UI）：你不用懂設計術語，用形容詞跟它聊就好。

我想要整個網站的感覺是「溫暖、療癒、給爸媽看的」，
不要科技冷冰冰那種。配色用暖奶油底色、圓潤的圓角，
字體選可愛一點的。先給我兩三個方向讓我選。

Logo：AI 也能直接幫你生圖。我童行的 logo 是「一隻大手牽一隻小手」，就是這樣生出來的：

幫我設計一個 logo，主題是「牽手同行」：
一隻大手牽著一隻小手，塗鴉手繪風、線條溫暖，
配色用陶土橘加葉綠。背景透明，簡單乾淨。

生出來不滿意？就繼續講：「線條再粗一點」「顏色太暗，亮一點」。改到你喜歡為止。

先讓「一個」地點的資料通

在補一大堆資料之前，先確認「一筆」能順利進來，建立信心。

童行的做法是：貼一個 Google Maps 連結，網站自動抓出這個地點的名稱、地址、照片，還有座標（座標是用來在地圖上標出這個點的，不會以數字顯示給使用者看）。背後是 Google 的 Places API 在做事，你一樣是講給 Claude Code 聽：

幫我做一個功能：
使用者貼上一個 Google Maps 的地點連結，
系統自動解析出地點的名稱、地址、經緯度、照片，
填進新增地點的表單。用 Google Places API。

這一步通了，你就有了「一筆一筆手動加」的能力。但如果你想要的是一次補上百筆——下一步是這份懶人包最酷的地方。

一次補進上百個地點

網站剛上線時，我自己都不好意思分享——它空到只有幾個地點。

後來我用一條「自動補資料」的流程，一次補進上百個真實地點，朋友才開始會自己打開來用。這條流程，是別的地方學不到的具體做法。我完整講給你。

它在做什麼（一條流水線，4 個動作）

你需要的東西

真實成本與成果（我第一次跑的數字）

一杯飲料的錢，網站從空蕩蕩變成有上百個地點。

關鍵字怎麼挑（我踩過的雷，直接告訴你）

• 窄的詞（例如「台北親子友善餐廳」）在社群上很少人這樣寫，抓不到幾篇。
• 通用的詞（例如「觀光工廠」「水族館」「親子景點」）量大很多。
• 想要某個地區的，先用通用詞大量抓，再用「地區過濾」留下你要的縣市就好。

最重要的一句話：你不用抄我的程式碼

這條流程在我的專案裡，是 7 個小程式檔（負責「抓 → 挑 → 補 → 存」這四件事，每一步存一個檔案方便檢查、出錯只重跑那一步）。

但你完全不需要照抄。因為你的專案、你的關鍵字、你要存的欄位，都跟我不一樣。你要做的，是把這個「需求」用 Step 2 教的方式，講給你自己的 Claude Code 聽：

我想做一條自動補資料的流程，分成四步，每一步存一個檔案方便我檢查：
1. 用 Apify 去 Threads 抓「（你的主題）」相關的貼文
2. 用 Claude Sonnet 從貼文裡挑出（你要的東西，例如地點 / 商品 / 餐廳）
3. 用 Google Places 補上每個地點的座標、照片、分類
   （如果你的主題不是地點，這步換成你需要的補充資料來源）
4. 寫進我的 Supabase，存之前先自動去掉重複的
請一步一步帶我做，每一步先跟我確認再往下。

它會幫你生一套屬於你自己專案的流程。這就是 AI 時代真正的槓桿：你懂了「可以這樣做」，工具會幫你長出「你的版本」。

上線，讓全世界打得開

最後一步：把網站放到網路上，拿到一個你自己的網址。

先部署上線。童行用的是 Zeabur，連著 Supabase 資料庫一起跑。一樣是講給 Claude Code 聽，它會帶你完成部署。完成後 Zeabur 會先給你一個免費網址（像 你的專案.zeabur.app）——這時候網站其實已經能用、能分享了。

我想把這個網站部署上線，用 Zeabur。
請帶我一步一步設定，包括：要設哪些環境變數、
怎麼連 Supabase、怎麼拿到網址。我不熟這些，請講白話。

想要一個自己好記的網域名稱（像我的 tinygo.tw，而不是落落長的免費網址）？去網域商買一個你喜歡的名字（一年通常幾百塊台幣），買完再叫 Claude Code 幫你把它接到 Zeabur 上：

我買了一個網域叫 tinygo.tw，
請帶我把它接到 Zeabur 上面這個網站：
DNS 要怎麼設、要填什麼，請一步一步講白話。

上線之後想改東西？改完再部署一次就好。網址不變，內容更新。

放在心裡的那個想法，現在真的做得出來

我沒有變厲害。我只是把放在心裡「要是有就好了」的想法，交給對的工具，把它做出來。

以前這件事卡在「我不會寫程式」。現在那道牆不在了。

你心裡是不是也有一個一直想做、卻覺得「我又不會、算了」的東西？挑最小、你自己最會用的那一個，照這六步開始。第一版很醜沒關係，能動，就是你的了。

做出來、卡住了、想分享成果，都歡迎來找我聊。