水電工阿水｜SoloAI AI 數位轉型顧問

這是一個新系列的第一篇。

接下來幾週，我會一個作品一個作品地攤開：一個人加六個 AI，到底能做出什麼東西。不講理論，直接展示流程——需求怎麼來的、任務怎麼拆的、誰做了什麼、中間踩了什麼坑，到最後成品長什麼樣。

如果你正在摸索怎麼用 AI 建立工作流程，這個系列可以當成一份作業來抄。如果你是企業主，想知道「找 AI 團隊做網站」到底是怎麼回事，這個系列會讓你看到完整的幕後。

第一個作品：一個寵物旅館的品牌網站，毛孩旅舍。

為什麼第一個作品選寵物旅館？

老實說，不是因為我養狗。

我們團隊需要一個 demo 站來驗證一件事：一個人加六個 AI，能不能從零做出一個商家看了會覺得「這是認真的」的網站？

選寵物旅館有三個原因。第一，這個產業一般人都看得懂，不用解釋商業模式。第二，寵物主人對「質感」很敏感，網站如果做得粗糙，一眼就會被淘汰。第三，寵物旅館的功能需求有一定複雜度——它不只是一頁名片，還需要房型展示、即時空房狀態、預約流程，足以測試我們的團隊到底能處理到什麼程度。

簡單說，這是一場考試。我們用這個案子來考自己。

我們怎麼做的？先講流程

很多人對「AI 做網站」的想像是：丟一句話給 AI，它就吐出一個完整網站。

實際上完全不是這樣。

我們的流程是這樣走的：

第一步，PM 確定需求和品牌方向。 我先定義了這個 demo 站的目的——展示寵物旅館的標準服務項目、營造溫暖可信賴的品牌感、具備預約功能讓商家看到「這個網站是可以收客的」。

第二步，用 AI 原型工具產出初版。 我們先跟參謀官討論出網站的核心架構，然後用原型工具快速生成一個初版設計。這個初版的目的不是「完成品」，而是「把想法視覺化」，讓所有人在同一個畫面上討論。

第三步，CTO（首席技術長）審核技術架構。 初版出來之後，這位技術總指揮會檢查架構是否合理、技術棧是否符合我們的標準、有沒有安全疑慮。這一步非常關鍵——AI 工具生成的程式碼經常有安全漏洞或架構不夠乾淨的問題，必須有人把關。

第四步，Developer（開發者）重新編譯成正式技術棧。 我們不會直接拿原型工具的產出當成品。開發者會把它轉換成我們統一使用的技術棧（React + TypeScript + Tailwind CSS），確保程式碼品質和日後維護性。

第五步，監督角色驗收部署。 執行監督負責把網站部署到正式環境，然後逐一驗收：手機版是否正常、所有連結是否可點、SSL 憑證有沒有問題、Console 有沒有報錯。每一項都是 checkbox，打勾才算過關。

第六步，PM 最終確認。 我自己再看一次，站在「如果我是客戶，我看到這個網站會有什麼感覺」的角度做最後判斷。

六個步驟，每一步都有明確的負責人和產出物。這不是隨便做做，這是一條生產線。

任務卡長什麼樣？

上面那六個步驟要能跑起來，靠的不是口頭交代，而是任務卡。

任務卡是我們團隊的核心工具。每一個任務在執行之前，都會被拆成一張卡，寫清楚該知道的所有事情。結構長這樣：

基本資訊——這張卡從哪來的、預估要花多少時間、誰負責執行。

目標——用一句話講清楚這張卡要完成什麼。不是「做一個網站」這種模糊的描述，而是「將原型工具產出的程式碼轉換為 React + TypeScript + Tailwind CSS 技術棧，部署至 Vercel，綁定 demo-dog.soloai885.com 子網域」。

前置條件——執行之前需要先確認什麼？比如 DNS 設定權限是否到位、原型程式碼是否已經通過安全檢查。

執行步驟——Step by Step，每一步都寫到 AI 可以直接執行的程度。不是「處理 DNS」，而是「在 Cloudflare Dashboard 新增 CNAME 記錄，Name 填 demo-dog，Target 填 cname.vercel-dns.com，Proxy 設為 DNS only（灰雲模式）」。

驗收標準——一張 checkbox 清單。RWD 響應式正常、Build 成功無錯誤、瀏覽器 Console 無報錯、SSL 憑證有效。每一項都打勾才算完成。

注意事項——踩過的坑寫在這裡，防止同樣的錯再犯。

這就是我們讓 AI 「聽話」的方式——不是靠模型聰不聰明，是靠指令寫得夠不夠清楚。

七個角色，誰做了什麼？

來，攤開分工。

PM（專案經理，就是我）： 決定品牌方向、在原型工具上操作產出初版、最終驗收。我不寫程式，但我決定這個東西要長什麼樣、要給誰看、要傳達什麼感覺。

參謀官： 協助撰寫原型工具的生成指令。把我的模糊想法轉化成結構化的描述——首頁要有哪些區塊、服務項目要呈現幾個、視覺風格的關鍵字是什麼。

CTO（首席技術長）： 審核技術架構、決定部署方案（Vercel + Cloudflare DNS）、產出給 Developer（開發者）的任務指令檔。每一張任務卡的技術方案都經過 CTO 確認。

UI/UX： 提供 AI 生成的視覺素材——Hero 區塊的背景圖、服務卡片的插畫。風格要求是「溫暖日系、寫實質感」，不要扁平插畫。

執行監督： 把 CTO 的指令檔拆解成可執行的任務卡、派工給 Developer、執行完畢後逐項驗收。這個角色是品質的最後防線。

Developer（開發者）： 實際動手的人。清理原型程式碼、轉換技術棧、處理部署設定、修復 Bug。

這裡面有一個很重要的設計：沒有任何一個角色是從頭做到尾的。 每個人只負責自己的環節，做完交給下一個人。這不是效率問題，是品質問題——每多一層經手，就多一次錯誤被攔截的機會。

成品長什麼樣？

毛孩旅舍是一個一頁式 Landing Page，所有內容在同一頁面，用導航列做 anchor 跳轉。

整體設計： 以橘色為主色調，搭配淺粉米色背景，整體溫暖柔和。Hero 區塊用一張 AI 生成的高品質攝影圖——一隻金毛獵犬坐在寵物飯店大廳。主標語是「讓毛孩在最溫暖的地方等你回家」。

服務展示： 六張服務卡片，包含過夜住宿、日間托育、寵物美容、接送服務、每日照片回報、智慧排程管理。每張卡片配一張統一風格的日系暖色插畫。

最大亮點——即時犬舍狀態面板： 這是整個網站最有說服力的功能。畫面上直接顯示 13 間犬舍的即時狀態——灰色代表空房、橘紅色代表入住中、黃色代表清潔中。小型犬舍 A1 到 A6、中型犬舍 B1 到 B4、大型犬舍 C1 到 C2，還有一間 VIP 套房。飼主一看就知道還有沒有房間。

預約表單： 可以切換「過夜住宿」和「日間托育」兩個模式，填寫飼主和毛孩資訊、選擇房型、加購服務（洗澡美容、鮮食餐、照片回報、接送），一次搞定。

信任元素： Google 評分 5.0、500+ 則評論、三則飼主好評、10 題常見問答。

一個寵物旅館的網站該有的東西，它全部都有。而且不是那種「看起來像模板」的感覺，是「看起來像有人認真做過」的感覺。

中間踩了什麼坑？——以及，是誰發現的

做每一個案子都會踩坑。分享三個我們實際遇到的。

但在講坑之前，我要先說一件事：以下這些技術問題，我一個都不會。

我是做了二十年水電的人。什麼是 API Key、什麼是 SSL 憑證、什麼是 DNS Proxy，這些詞在半年前對我來說跟外星語沒什麼兩樣。這些坑不是我自己發現的，是我的 AI 夥伴在流程中幫我攔下來的。

這一點我必須講清楚，不然你看完這篇會以為我本來就懂這些。我不懂。但我有一個很會的 CTO，只是它剛好是 AI。

好，來看那些坑。

第一，AI 生成的程式碼裡藏著 API Key。 我們在另一個案子中，CTO 在做安全審查時發現，原型工具產出的程式碼裡直接把 Google Maps API Key 寫在前端。我當時連「API Key 是什麼」都不太確定，CTO 跟我解釋：這就像你把家裡的鑰匙貼在大門外面，任何人都可以拿去複製，而且用了之後帳單會寄到你這裡。聽完我就懂了。從那次之後，我們在流程裡加了一條硬規定：所有 AI 生成的程式碼，第一步必須做安全檢查。

第二，Cloudflare 的 Proxy 設定跟 Vercel 的 SSL 會打架。 我們把網站部署上去之後，發現網站打不開。我完全看不懂問題在哪。CTO 排查之後告訴我，是兩個服務的安全機制互相衝突——Cloudflare 想保護你的網站，Vercel 也想保護你的網站，結果兩邊搶著保護，反而把門鎖死了。解法是讓 Cloudflare 退一步，只做 DNS 指向就好。我聽完覺得這跟我以前裝水電遇到的狀況很像——兩個師傅都想接同一條管路，結果接頭打架漏水。道理相通，只是換了一個場域。

第三，AI 取的品牌名可能有侵權風險。 有一個案子，AI 生成的品牌名稱跟市場上已有的品牌太接近。這個倒是我自己的敏感度——做了二十年生意，商標這件事我是有概念的。我們後來改了名字，並且在流程裡加了一步：所有 demo 站的品牌名稱都要做基本的商標檢查。

三個坑，三條新規矩。這就是我們的做法——每踩一次坑，就把防護寫進制度裡，讓同樣的錯不再發生。但我更想讓你注意的是另一件事：這三個坑裡，有兩個是我完全沒有能力自己發現的。如果沒有 AI 夥伴，API Key 的問題我不會知道，SSL 衝突的問題我也不會排查。

很多人說 AI 是「放大器」——你原本有 60 分的能力，AI 幫你放大到 90 分。但我的經驗不完全是這樣。AI 不只是放大我已有的能力，它還幫我長出了原本完全沒有的能力。 我不會寫程式、不懂伺服器、不知道什麼是 DNS，但透過跟 AI 夥伴的協作，我現在可以帶領一個團隊把網站從零做到上線。

這不是放大，這是擴展。

如果你跟我一樣，不是技術背景出身，但你有自己的專業領域、有二十年行業經驗、有對客戶需求的直覺——AI 不是要取代你這些東西，它是幫你把這些東西帶到一個你原本去不了的地方。

模型會升級，但這些用教訓換來的制度不會過時。而你在過程中學到的東西，也不會消失。

為什麼不直接做完整版？

最後聊一個商業思考。

毛孩旅舍目前是一個前端 demo 站。它有完整的視覺設計、功能展示、預約表單，但後端系統（真正的資料庫、排程邏輯、金流串接）還沒有做。

為什麼？因為我們的策略是先用最小成本驗證市場需求。

傳統的做法是：接到案子，花幾週把前後端全部做完，交付一個「完整的產品」。但問題是——如果客戶看了不滿意、或者這個產業根本不需要這些功能，你投入的時間就全部浪費了。

我們的做法是反過來：先做出一個客戶看了會說「對，這就是我要的」的前端 demo，確認方向對了、客戶願意往下走了，再投入資源做後端。

這不是偷懶，這是風險管理。對客戶來說，他可以用最低的成本看到「做完會長什麼樣」；對我們來說，我們不會把時間花在方向錯誤的東西上。

做了二十年水電，我太清楚一件事：客戶最怕的不是價格高，是花了錢看不到東西。 先讓他看到東西，後面的事情都好談。

📌 本文是「從零到一：一個人 + 六個 AI 的創業實錄」系列第一篇

✅ 第一篇：毛孩旅舍——用 AI 團隊幫寵物旅館建站（本篇）

👉 第二篇：冰果城——下週上線

🔒 第三篇：冷氣工程行

🔒 第四篇：預約系統

🔒 第五篇：站群系統

🔒 第六篇：壹智科技的誕生

下一篇，我要分享一個完全不同的挑戰——怎麼幫一間冰品店在網路上賣出「吃不到的清涼感」。當你的產品是體驗而不是物件，網站該怎麼做？

本文發佈於「水電工阿水的 AI 轉型日誌」沙龍｜AI 協作實戰