我花48小時用AI做了個網站，從選題到上線全流程實錄
整理版優先睇
作者用AI工具Claude Code在48小時內從選題到部署上線一個隱私檢測工具站，總結咗過程入面嘅踩坑經驗同AI開發三原則。
呢篇文章出自《出海工具站實戰手冊》系列，作者係獨立開發者袁鋭欽。佢之前已經做咗行業數據分析同選題研究，揀咗一個自己都有需求嘅方向：隱私反追蹤檢測工具。目標係喺48小時內由零開始整一個可以俾人用嘅網站，而唔係淨係Demo。
作者用咗Claude Code做AI輔助開發，由生成代碼到除錯都靠佢。過程中遇到三個主要問題：SSL證書驗證失敗、動態加載追蹤檢測唔到、同埋部署上Vercel時Playwright唔兼容。每個問題都係透過快速試錯同AI協作解決咗。最終網站功能齊全，包括追蹤技術識別、風險評分、歷史記錄同分享報告，總共約800行代碼，作者自己只寫咗約50行。
作者嘅結論係：AI可以極大加速開發，但唔可以完全取代人嘅判斷。佢提出咗三條原則——先跑通再優化、唔使識曬全部代碼、同埋人工判斷必不可少。最後佢仲俾咗五個步驟，話俾想嘗試嘅人跟住做。
- 用AI輔助開發可以將網站從選題到上線由3個月壓縮到48小時，但需要快速試錯同人工判斷。
- AI生成嘅代碼通常只處理主路徑，邊界情況（如SSL驗證、動態加載）需要自己發現同描述俾AI補。
- 部署環境同本地環境係兩回事，Vercel等serverless平台有特殊限制，需要拆解步驟或用替代方案。
- UI係信任基礎，功能正確但樣衰嘅網站會令用戶卻步，AI可以生成但需要人工迭代設計。
- 唔需要成為程式員，但要成為代碼嘅甲方：識得提需求、驗收同指出問題。
選題背景：點解揀隱私檢測工具？
作者之前已經做咗Day 1同行業數據分析同Day 2嘅HN熱門項目研究，從中篩選咗三個可行方向。佢最終揀咗隱私反追蹤檢測工具，原因好簡單：呢個需求佢自己就有。
市面上嘅工具一係太專業（開發者先睇得明），一係太粗糙（淨係俾Yes/No）。佢想做一個中間態：輸入網址，30秒內知道用咗咩追蹤技術、收集咗咩數據、風險等級係點。呢個選題經已通過需求驗證。
48小時開發實錄：三個坑同點樣解決
Hour 0：作者用Claude Code做AI編程工具，直接喺終端描述需求，生成第一版代碼——一個Python Flask app加HTML/CSS前端，總共唔到200行。本地運行成功，但輸入測試網址即刻報錯。
- 1 第一個坑：SSL證書驗證失敗。Claude Code生成嘅代碼用requests.get()，但目標網站HTTPS證書有問題。作者花咗40分鐘先發現係SSL問題，加上verify=False參數解決。佢體會到AI令「試錯成本」降到幾乎為零。
- 2 第二個坑：動態加載追蹤檢測唔到。Claude Code只分析HTML源碼嘅script標籤，但好多追蹤代碼係動態執行嘅。作者自己諗到用Selenium或Playwright模擬瀏覽器行為，話俾AI知，佢就幫手集成Playwright，再花2小時改善檢測準確率。
- 3 第三個坑：部署上Vercel時Playwright唔兼容。Vercel嘅serverless環境冇Chromium瀏覽器。作者查文檔後同Claude Code商量，將檢測邏輯拆成兩步：第一步輕量級請求分析行得通，第二部完整瀏覽器分析用外部服務。最終成功部署。
除咗呢三個坑，仲有其他問題例如編碼格式亂碼、超時處理、移動端錯位。每個問題描述俾Claude Code，佢改代碼，作者測試，平均15-30分鐘解決。同時加咗歷史記錄同分享報告功能，仲做咗基礎SEO。
AI開發三原則：加速器唔係替代器
- 1 先跑通，再優化：第一個版本目標係「能跑」，唔係「完美」。功能未穩定之前優化UI係浪費時間。
- 2 唔使識曬全部代碼：作者大概睇得明60%代碼，但佢能夠判斷「呢段代碼做乜」、「出問題係咪因為佢」。你需要成為代碼嘅甲方——識得提需求、驗收、指出問題。
- 3 人工判斷不可少：AI生成唔到「呢個功能對用戶有冇價值」。動態追蹤檢測邏輯、UI風格、部署策略都係作者自己諗出嚟。AI係加速器，唔係替代器。
今日就可以開始嘅五個步驟
- 1 安裝Claude Code或者用Cursor（有圖形界面）。
- 2 揀一個你自己有痛點嘅選題，唔一定要做隱私檢測工具，需求驗證過先有動力。
- 3 用作者嘅提示詞模板，具體描述需求，生成第一版。越具體越好。
- 4 本地測試，記錄所有問題。呢啲問題就係你下一步嘅指令。
- 5 部署上免費平台（Vercel、Netlify、Cloudflare Pages），上線後再迭代。記住：48小時目標係「能用嘅產品」，唔係完美。
作者提醒：48小時嘅目標唔係完美產品，而係一個可以俾人用嘅網站。之後可以再慢慢修bug、加功能、做SEO。
呢篇文章係嚟自《出海工具站實戰手冊》系列，第 3/90 篇。
系列定位：根據哥飛/Web出海v3/赫茲/三木等出海公眾號嘅資料，純規範性開發流程，唔結合個人項目數據。
我做網站嘅經驗都唔算少。
但係講真，以前做一個可以上線嘅工具站，由諗清楚要做啲乜，到真係用到，最少要3個月。執bug、改UI、set server，呢啲仲未計在內。
學寫程式用咗兩年。揾外包俾人呃過兩次。自己搞WordPress，插件衝突搞到半夜三點。
所以當我今年開始研究出海工具站嘅時候，第一個阻住面前嘅問題就係：我而家邊有3個月去做一個唔知賺唔賺到錢嘅嘢？
呢個問題喺Day 1同Day 2已經傾過。Day 1係睇行業數據，結論係機會窗口仲喺度。Day 2爬咗HN 1000個熱門項目，提煉出3個選題規律。
今日Day 3，我要解決嘅係：揀好題之後，點樣喺48個鐘之內將佢變成一個可以訪問嘅網站。
唔係Demo，唔係喺本地行得通。係可以俾Google收錄、俾用戶訪問嘅真實網站。
先交代嚇背景
Day 2最後我哋篩選咗3個2026年可以執行嘅選題方向。我揀咗第一個：私隱反追蹤檢測工具。
理由好簡單——呢個需求我自己都有。每次開一個網站，想知道佢到底收集緊我啲乜嘢數據，有冇偷偷追蹤。現有工具一係太專業（開發者先睇得明），一係太粗糙（淨係畀一個Yes/No）。
一個中間狀態嘅工具：輸入網址，30秒之內話畀你知呢個網站用咗邊啲追蹤技術、收集咗邊啲數據、風險等級係幾多。
需求驗證過咗，接下來係執行。
Hour 0：我嘅工具係Claude Code
我用嘅AI寫程式工具係Claude Code，Anthropic出嘅命令行版本。你都可以用Cursor、Windsurf、GitHub Copilot，邏輯一樣。
選擇佢嘅原因好簡單：我可以喺終端機裏面直接描述需求，佢幫我生成代碼、改代碼、行測試。唔需要喺IDE同ChatGPT之間來回複製貼上。
開始前我只係做咗兩件事：
- 1. 新建一個文件夾
privacy-checker - 2. 打開終端機，輸入
claude
然後我同佢講咗呢段話。你可以直接複製攞去用：
我要做一個私隱檢測工具站。用戶輸入一個網址，我檢測呢個網站用咗邊啲追蹤技術（Google Analytics、Facebook Pixel、第三方Cookie等），收集咗邊啲用戶數據，然後畀一個風險評分（低/中/高）同詳細報告。前端用HTML+CSS，後端用Python Flask。先幫我生成核心檢測邏輯。
Claude Code用咗大概30秒，幫我生成咗第一個版本。
一個 app.py，一個 templates/index.html，一個 static/style.css總共唔夠200行代碼。
我喺本地運行，輸入 python app.py打開瀏覽器訪問 localhost:5000。
頁面出咗嚟。輸入框喺度，按鈕喺度，可以點擊。
第一關過咗。
Hour 2：第一個伏——代碼行唔通
我好興奮咁輸入咗一個測試網址，㩒檢測。
頁面轉咗幾圈，然後報錯。
requests.exceptions.SSLError
SSL證書驗證失敗。Claude Code生成嘅代碼直接用咗 requests.get(url)但係我嘅測試目標網站用咗HTTPS，證書鏈有問題。
呢個伏我用咗40分鐘先解決。唔係技術好難，係我唔知道問題出喺邊。
我首先懷疑代碼邏輯錯咗，叫Claude Code重寫檢測模塊。重寫完咗都係報錯。
然後懷疑係目標網站嘅問題，換咗一個網址，都係報錯。
最後先意識到：係SSL驗證嘅問題。叫Claude Code加上 verify=False 參數，同時處理警告信息。
解決之後我停低諗咗一件事。
如果呢個係我兩年前學寫程式嗰陣遇到呢個報錯，我可能要查2個鐘資料，喺Stack Overflow睇10個帖子，最後可能都搞唔掂。
而家40分鐘解決，唔係因為我識嘅嘢多咗。係因為AI將「試錯成本」降到幾乎係零。我可以快速驗證「係咪呢個問題」，錯咗就換下一個假設。
Hour 6：第二個伏——我以為行得通，其實冇
SSL問題解決之後，檢測功能正常運作咗。
我輸入幾個網站測試，可以返回追蹤技術列表。Google Analytics檢測到咗，Facebook Pixel檢測到咗，第三方Cookie都統計咗。
睇落冇問題。我正準備進入下一階段，隨手輸入咗一個國內知名網站。
結果返回嘅數據係空嘅。
唔係報錯，係空。追蹤技術數量：0。風險評分：低。
呢個明顯唔啱。呢個網站廣告周圍都係，點可能0追蹤？
我檢查代碼，發現Claude Code生成嘅檢測邏輯只係分析咗HTML源碼入面嘅script標籤。但係好多追蹤代碼係動態載入嘅——頁面載入之後先執行，或者藏喺iframe入面，或者經過混淆。
呢個係一個典型嘅「AI生成代碼行得通，但唔夠深入」嘅問題。
Claude Code畀嘅係一個「可以運作嘅最小版本」，唔係「運作得好」嘅版本。佢唔知我要檢測嘅係「真實追蹤行為」而唔係「源碼裏面有冇呢個字符串」。
解決思路係我自己諗出嚟嘅：唔可以只係分析靜態HTML，要模擬瀏覽器行為。用Selenium或者Playwright打開頁面，等JavaScript執行完，再分析實際載入咗邊啲追蹤腳本。
我將呢個思路話畀Claude Code，佢幫我集成咗Playwright，重寫咗檢測引擎。
又用咗2個鐘。但係今次，檢測準確率由「捉到明顯嘅」變成咗「捉到隱蔽嘅」。
Hour 12：網站用得啦，但係樣衰到我唔想承認
功能基本穩定之後，我睇咗睇前端頁面。
點講呢。用得。但係睇落好似2005年嘅網站。
輸入框冇對齊，結果頁全部係文字堆埋一齊，風險評分用紅綠黃三色塊顯示，但係色塊大小唔一樣，有啲圓有啲方。
我本來想「先上線再優化」，但係忍唔住。用戶見到一個樣衰嘅網站，第一個反應唔係「功能好唔好」，係「呢個可靠嗎」.
我叫Claude Code重新設計UI。畀咗佢一個明確指令：
參考現代SaaS產品嘅設計風格，用卡片式佈局，檢測結果分區塊展示，風險評分要醒目但唔好嚇親人。配色用藍白為主，紅色只用喺高風險警告。
20分鐘之後，新版UI出咗嚟。
輸入框置中，結果分三個卡片（追蹤技術概覽、數據收集詳情、風險評分），風險評分用大號數字+顏色標籤，整體風格乾淨咗好多。
唔係設計師水平，但係夠用啦。
Hour 18：第三個伏——部署比開發難
本地行得好哋哋，要部署上線啦。
我揀咗Vercel。免費、支援Python、自動HTTPS、全球CDN。對於第一個工具站嚟講夠用啦。
但係Vercel嘅Python支援有啲限制。Playwright需要Chromium瀏覽器，Vercel嘅serverless環境入面冇。
又報錯。
今次我學精咗，冇叫Claude Code盲目重寫。先查Vercel文檔，確認邊啲依賴唔支援，然後同Claude Code一齊諗替代方案。
最後方案係：檢測邏輯拆成兩步。第一步用輕量級請求分析（可以行喺Vercel上），如果檢測到可能有隱藏追蹤，再觸發第二步嘅完整瀏覽器分析（用外部服務或者升級配置）。
咁樣Vercel免費 tier就可以行得起，後期流量大咗再升級。
部署成功嗰一刻，我喺手機上打開咗自己嘅網站，輸入一個網址，30秒之後見到檢測結果。
由Hour 0到Hour 24，第一個版本上線。
Hour 24-48：執bug、加功能、做SEO
第二日主要係完善。
發現幾個小bug。有啲網站嘅編碼格式唔啱，中文顯示亂碼。有啲網站嘅回應時間太長，超時處理冇做好。流動裝置頁面錯位。
每個問題都係描述俾Claude Code，佢改代碼，我測試。平均每個bug 15-30分鐘解決。
同時間加咗兩個功能。
歷史記錄——用戶檢測過嘅網站可以翻睇結果。分享報告——生成一個可以分享嘅連結，其他人可以見到檢測結果但係見唔到你檢測咗邊啲網站。
然後做咗最基本嘅SEO。頁面title同description寫好，加咗sitemap.xml，提交到Google Search Console，頁面載入速度優化（圖片壓縮、CSS合併）。
呢啲唔係Day 3嘅重點，Day 13-15會專門講SEO。但係基礎工作做咗先，等Google可以發現呢個站。
48個鐘之後嘅結果
網站上線地址：https://privacy-checker-demo.vercel.app（示例地址）
功能清單：
- • ✅ 輸入網址檢測私隱追蹤技術
- • ✅ 識別Google Analytics、Facebook Pixel、第三方Cookie等
- • ✅ 風險評分（低/中/高）+ 詳細報告
- • ✅ 檢測歷史記錄
- • ✅ 可以分享報告連結
- • ✅ 響應式設計，手機用得
- • ✅ 基礎SEO優化
總代碼量：大約800行（Python + HTML + CSS + JavaScript）
我親手寫嘅代碼：大概50行。主要係除錯嗰陣嘅print語句同測試用例。
剩低750行，係Claude Code生成嘅。
3個踩伏總結
48個鐘入面，真正卡住我嘅唔係「唔識寫代碼」，係下面呢3件事：
第一，AI畀嘅係「行得通嘅最小版本」，唔係「好用嘅完整版本」.
SSL驗證、動態載入追蹤、編碼格式——呢啲邊界情況Claude Code唔會主動考慮。佢畀嘅係主路徑，分支路徑需要你自己發現、自己描述、叫佢補。
第二，部署環境同本地環境係兩回事。
本地行得通唔代表線上行得通。Vercel嘅限制、依賴包嘅兼容性、環境變數嘅配置——呢啲「最後一公里」問題，佔咗我至少6個鐘。
第三，UI唔係錦上添花，係信任基礎。
功能再強，頁面樣衰到似釣魚網站，用戶唔敢用。AI可以生成「功能正確」嘅UI，但係生成唔到「令人覺得專業」嘅UI。呢度需要你嘅判斷同迭代。
AI開發3個原則
呢48個鐘令我總結出3條原則，你攞去做任何AI輔助開發嘅項目都用得：
原則一：先行得通，再優化。
第一個版本嘅目標係「行得通」，唔係「完美」。我喺Hour 2就想執UI，俾我自己攔住咗。功能未穩定之前優化UI係浪費時間。
原則二：睇唔明代碼都用到。
我仔細睇Claude Code生成嘅代碼，大概睇得明60%。剩低40%睇唔明，但係我可以判斷「呢段代碼係做咩」「出咗問題係咪佢嘅原因」.
你唔需要成為程式設計師，你需要成為「代碼嘅甲方」——可以提需求、可以驗收、可以指出問題。
原則三：人工判斷唔可以少。
AI可以生成代碼，但係唔可以判斷「呢個功能對用戶有冇價值」。動態追蹤檢測嘅邏輯係我自己諗出嚟嘅，UI風格係我定嘅，部署策略係我同Claude Code一齊商量出嚟嘅。
AI係加速器，唔係替代器。有判斷力嘅人用AI，先可以48個鐘上線。
你今日就可以開始嘅5個步驟
如果你睇完想自己動手，跟呢個順序嚟：
第一步：安裝Claude Code
去Anthropic官網申請，或者直接用Cursor（更簡單，有圖形界面）。
第二步：揀一個Day 2嘅選題
唔需要做私隱檢測工具，揀你自己有痛點嘅方向。需求驗證過嘅選題，執行先有動力。
第三步：描述需求，生成第一版
用我上面嘅提示詞模板，改一改你嘅需求描述。越具體越好——「做一個工具站」太泛，「用戶輸入網址，檢測用咗邊啲追蹤技術」夠具體。
第四步：本地測試，記錄問題
唔好指望第一版完美。行起嚟，用，記錄邊度唔啱。呢啲問題就係你嘅「下一步指令」.
第五步：部署上線，再迭代
揀Vercel、Netlify、或者Cloudflare Pages，免費 tier行起嚟。上線之後再執bug、加功能、做SEO。
記住：48個鐘嘅目標唔係完美產品，係「用得嘅產品」.
下篇預告
Day 4我哋要解決一個問題：網站上線咗，但係免費部署嘅流量同速度有限。幾時應該升級？VPS點揀？幾多錢？
《免費部署vs伺服器部署：兩個方案都教你》
關於呢個系列
《出海工具站實戰手冊》計劃寫90篇，由選題到流量到變現，完整覆蓋。
已發佈：
- • Day 1：2026年出海工具站仲值得做嗎？從行業數據睇機會窗口
- • Day 2：我爬咗HN 1000個熱門項目，發現2026年出海工具站選題嘅3個規律
關注公眾號「Ruiqin 袁鋭欽」，回覆「出海工具站」，領取：
- • 呢篇文完整提示詞模版
我係袁鋭欽，一個用AI做產品嘅獨立開發者。相信工具嘅價值，更加相信「做出嚟」比「諗明白」重要。
本文出自《出海工具站實戰手冊》系列，第 3/90 篇。
系列定位：基於哥飛/Web出海v3/赫茲/三木等出海公眾號資料，純規範性開發流程，不結合個人項目數據。
我做網站的經驗不算少。
但說實話，以前做一個能上線的工具站，從想明白要做什麼，到真正能用，至少3個月。修bug、改UI、配服務器，這些還不算在內。
學編程花了兩年。找外包被坑過兩次。自己折騰WordPress，插件衝突搞到半夜三點。
所以當我今年開始研究出海工具站的時候，第一個攔在面前的問題就是：我現在哪有3個月去做一個不知道能不能賺錢的東西？
這個問題在Day 1和Day 2裏已經聊過。Day 1看的是行業數據，結論是機會窗口還在。Day 2爬了HN 1000個熱門項目，提煉出3個選題規律。
今天Day 3，我要解決的是：選好題之後，怎麼在48小時內把它變成一個能訪問的網站。
不是Demo，不是本地跑通。是能被Google收錄、能被用戶訪問的真實網站。
先交代一下背景
Day 2最後我們篩出了3個2026年可執行的選題方向。我挑了第一個：隱私反追蹤檢測工具。
理由很簡單——這個需求我自己就有。每次打開一個網站，想知道它到底在收集我什麼數據，有沒有偷偷追蹤。現有工具要麼太專業（開發者才看得懂），要麼太粗糙（只給一個Yes/No）。
一箇中間態的工具：輸入網址，30秒內告訴你這個網站用了哪些追蹤技術、收集了哪些數據、風險等級是多少。
需求驗證過了，接下來是執行。
Hour 0：我的工具是Claude Code
我用的AI編程工具是Claude Code，Anthropic出的命令行版本。你也可以用Cursor、Windsurf、GitHub Copilot，邏輯一樣。
選擇它的原因很簡單：我可以在終端裏直接描述需求，它幫我生成代碼、改代碼、跑測試。不需要在IDE和ChatGPT之間來回複製粘貼。
開始前我只做了兩件事：
- 1. 新建一個文件夾
privacy-checker - 2. 打開終端，輸入
claude
然後我對它說了這段話。你可以直接複製拿去用：
我要做一個隱私檢測工具站。用戶輸入一個網址，我檢測這個網站使用了哪些追蹤技術（Google Analytics、Facebook Pixel、第三方Cookie等），收集了哪些用戶數據，然後給一個風險評分（低/中/高）和詳細報告。前端用HTML+CSS，後端用Python Flask。先給我生成核心檢測邏輯。
Claude Code花了大概30秒，給我生成了第一個版本。
一個 app.py，一個 templates/index.html，一個 static/style.css。總共不到200行代碼。
我本地運行，輸入 python app.py，打開瀏覽器訪問 localhost:5000。
頁面出來了。輸入框在，按鈕在，能點擊。
第一關過了。
Hour 2：第一個坑——代碼跑不通
我興沖沖地輸入了一個測試網址，點擊檢測。
頁面轉了幾圈，然後報錯。
requests.exceptions.SSLError
SSL證書驗證失敗。Claude Code生成的代碼直接用了 requests.get(url)，但我的測試目標網站用了HTTPS，證書鏈有問題。
這個坑我花了40分鐘才解決。不是技術多難，是我不知道問題出在哪。
我先是懷疑代碼邏輯錯了，讓Claude Code重寫檢測模塊。重寫完了還是報錯。
然後懷疑是目標網站的問題，換了一個網址，還是報錯。
最後才意識到：是SSL驗證的問題。讓Claude Code加上 verify=False 參數，同時處理警告信息。
解決之後我停下來想了一件事。
如果這是我兩年前學編程的時候遇到這個報錯，我可能要查2小時資料，在Stack Overflow翻10個帖子，最後可能還搞不定。
現在40分鐘解決，不是因為我會的多了。是因為AI把「試錯成本」降到了幾乎為零。我可以快速驗證「是不是這個問題」，錯了就換下一個假設。
Hour 6：第二個坑——我以為跑通了，其實沒有
SSL問題解決後，檢測功能正常工作了。
我輸入幾個網站測試，能返回追蹤技術列表。Google Analytics檢測到了，Facebook Pixel檢測到了，第三方Cookie也統計了。
看起來沒問題。我正準備進入下一階段，隨手輸入了一個國內知名網站。
結果返回的數據是空的。
不是報錯，是空。追蹤技術數量：0。風險評分：低。
這明顯不對。這個網站廣告滿天飛，怎麼可能0追蹤？
我檢查代碼，發現Claude Code生成的檢測邏輯只分析了HTML源碼裏的script標籤。但很多追蹤代碼是動態加載的——頁面加載後才執行，或者藏在iframe裏，或者經過混淆。
這是一個典型的「AI生成代碼能跑，但不夠深」的問題。
Claude Code給的是一個「能work的最小版本」，不是「能work得好」的版本。它不知道我要檢測的是「真實追蹤行為」而不是「源碼裏有沒有這個字符串」。
解決思路是我自己想出來的：不能只分析靜態HTML，要模擬瀏覽器行為。用Selenium或者Playwright打開頁面，等JavaScript執行完，再分析實際加載了哪些追蹤腳本。
我把這個思路描述給Claude Code，它幫我集成了Playwright，重寫了檢測引擎。
又花了2小時。但這一次，檢測準確率從「能抓到明顯的」變成了「能抓到隱蔽的」。
Hour 12：網站能用了，但醜得我不想承認
功能基本穩定後，我看了看前端頁面。
怎麼說呢。能用。但看起來像2005年的網站。
輸入框沒對齊，結果頁全是文字堆在一起，風險評分用紅綠黃三色塊顯示，但色塊大小不一樣，有的圓有的方。
我本來想「先上線再優化」，但忍不了。用戶看到一個醜網站，第一反應不是「功能好不好」，是「這靠譜嗎」。
我讓Claude Code重新設計UI。給了它一個明確指令：
參考現代SaaS產品的設計風格，用卡片式佈局，檢測結果分區塊展示，風險評分要醒目但不要嚇人。配色用藍白為主，紅色只用於高風險警告。
20分鐘後，新版UI出來了。
輸入框居中，結果分三個卡片（追蹤技術概覽、數據收集詳情、風險評分），風險評分用大號數字+顏色標籤，整體風格乾淨了很多。
不是設計師水平，但夠用了。
Hour 18：第三個坑——部署比開發難
本地跑得好好的，該部署上線了。
我選了Vercel。免費、支持Python、自動HTTPS、全球CDN。對於第一個工具站來說夠用了。
但Vercel的Python支持有一些限制。Playwright需要Chromium瀏覽器，Vercel的服務器less環境裏沒有。
又報錯。
這次我學聰明瞭，沒讓Claude Code盲目重寫。先查Vercel文檔，確認哪些依賴不支持，然後和Claude Code一起想替代方案。
最後方案是：檢測邏輯拆成兩步。第一步用輕量級請求分析（能跑在Vercel上），如果檢測到可能有隱藏追蹤，再觸發第二步的完整瀏覽器分析（用外部服務或者升級配置）。
這樣Vercel免費 tier就能跑起來，後期流量大了再升級。
部署成功的那一刻，我在手機上打開了自己的網站，輸入一個網址，30秒後看到了檢測結果。
從Hour 0到Hour 24，第一個版本上線。
Hour 24-48：修bug、加功能、做SEO
第二天主要是完善。
發現幾個小bug。有些網站的編碼格式不對，中文顯示亂碼。有些網站的響應時間太長，超時處理沒做好。移動端頁面錯位。
每個問題都是描述給Claude Code，它改代碼，我測試。平均每個bug 15-30分鐘解決。
同時加了兩個功能。
歷史記錄——用戶檢測過的網站可以回看結果。分享報告——生成一個可分享連結，別人能看到檢測結果但看不到你檢測了哪些網站。
然後做了最基礎的SEO。頁面title和description寫好，加了sitemap.xml，提交到Google Search Console，頁面加載速度優化（圖片壓縮、CSS合併）。
這些不是Day 3的重點，Day 13-15會專門講SEO。但基礎工作先做上，讓Google能發現這個站。
48小時後的結果
網站上線地址：https://privacy-checker-demo.vercel.app（示例地址）
功能清單：
- • ✅ 輸入網址檢測隱私追蹤技術
- • ✅ 識別Google Analytics、Facebook Pixel、第三方Cookie等
- • ✅ 風險評分（低/中/高）+ 詳細報告
- • ✅ 檢測歷史記錄
- • ✅ 可分享報告連結
- • ✅ 響應式設計，手機可用
- • ✅ 基礎SEO優化
總代碼量：約800行（Python + HTML + CSS + JavaScript）
我親手寫的代碼：大概50行。主要是調試時的print語句和測試用例。
剩下750行，是Claude Code生成的。
3個踩坑總結
48小時裏，真正卡住我的不是「不會寫代碼」，是下面這3件事：
第一，AI給的是「能跑的最小版本」，不是「好用的完整版本」。
SSL驗證、動態加載追蹤、編碼格式——這些邊界情況Claude Code不會主動考慮。它給的是主路徑，分支路徑需要你自己發現、自己描述、讓它補。
第二，部署環境和本地環境是兩回事。
本地能跑不代表線上能跑。Vercel的限制、依賴包的兼容性、環境變量的配置——這些「最後一公里」問題，佔了我至少6小時。
第三，UI不是錦上添花，是信任基礎。
功能再強，頁面醜得像釣魚網站，用戶不敢用。AI能生成「功能正確」的UI，但生成不了「讓人感覺專業」的UI。這裏需要你的判斷和迭代。
AI開發3原則
這48小時讓我總結出3條原則，你拿去做任何AI輔助開發的項目都能用：
原則一：先跑通，再優化。
第一個版本的目標是「能跑」，不是「完美」。我在Hour 2就想修UI，被我自己攔住了。功能沒穩定之前優化UI是浪費時間。
原則二：看不懂代碼也能用。
我仔細看Claude Code生成的代碼，大概能看懂60%。剩下40%看不懂，但我能判斷「這段代碼是做什麼的」「出了問題是不是它的原因」。
你不需要成為程序員，你需要成為「代碼的甲方」——能提需求、能驗收、能指出問題。
原則三：人工判斷不可少。
AI能生成代碼，但不能判斷「這個功能對用戶有沒有價值」。動態追蹤檢測的邏輯是我自己想出來的，UI風格是我定的，部署策略是我和Claude Code一起商量出來的。
AI是加速器，不是替代器。有判斷力的人用AI，才能48小時上線。
你今天就能開始的5個步驟
如果你看完想自己動手，按這個順序來：
第一步：安裝Claude Code
去Anthropic官網申請，或者直接用Cursor（更簡單，有圖形界面）。
第二步：選一個Day 2的選題
不需要做隱私檢測工具，選你自己有痛點的方向。需求驗證過的選題，執行才有動力。
第三步：描述需求，生成第一版
用我上面的提示詞模板，改一改你的需求描述。越具體越好——「做一個工具站」太泛，「用戶輸入網址，檢測用了哪些追蹤技術」夠具體。
第四步：本地測試，記錄問題
不要指望第一版完美。跑起來，用，記錄哪裏不對。這些問題就是你的「下一步指令」。
第五步：部署上線，再迭代
選Vercel、Netlify、或者Cloudflare Pages，免費 tier先跑起來。上線後再修bug、加功能、做SEO。
記住：48小時的目標不是完美產品，是「能用的產品」。
下一篇預告
Day 4我們要解決一個問題：網站上線了，但免費部署的流量和速度有限。什麼時候該升級？VPS怎麼選？多少錢？
《免費部署vs服務器部署：兩個方案都教你》
關於這個系列
《出海工具站實戰手冊》計劃寫90篇，從選題到流量到變現，完整覆蓋。
已發佈：
- • Day 1：2026年出海工具站還值得做嗎？從行業數據看機會窗口
- • Day 2：我爬了HN 1000個熱門項目，發現2026年出海工具站選題的3個規律
關注公眾號「Ruiqin 袁鋭欽」，回覆「出海工具站」，領取：
- • 本文完整提示詞模版
我是袁鋭欽，一個用AI做產品的獨立開發者。相信工具的價值，更相信「做出來」比「想明白」重要。