核心論點：AI 讓做網站變簡單了，但「知道要對 AI 問什麼」變得更重要。

沒時間讀全文？先帶走這 3 個決定：

開始前，先寫一份 brand-guideline.md。 AI 最大的問題不是它不會，是它不知道你是誰。把自己寫清楚，後面每次對話都省一段力。
做網站前只問一個問題：靜態、混合，還是動態？ 這一個問題會決定你後面所有技術選擇。選錯一次，整套要重寫。
雖然 AI 幫你做完大多數的事情，大部分時候你只要一直按同意就好。 但非常建議你嘗試了解每個決策分岔點背後的原因——這會幫你拓展認知邊界，在省時間的同時也能有所成長。

我不是工程師。

以前當 BI Analyst 的時候，我寫過一點 SQL，懂資料邏輯，但前端這塊完全沒碰過。CSS、前後端、部署、網域——這些名詞我都聽過，但真要我做，我完全不知道從哪開始。

沒想到 Claude Code 只用了幾個小時就把網站做好，加上規劃和討論的時間，大約三天。

但最重要的不是那三天，是那三天裡，我所拓展的認知邊界。

這篇文章是我從零開始用 Claude Code 建站的完整紀錄，紀錄了我當初做決定的脈絡、使用了哪些 skills、學習到的技能。

我不會告訴你用 AI 建立網站「超簡單，人人都可以」，也不會說「沒有專業，根本做不出來」，我想分享的是中間那塊——AI 真的讓門檻變低了，但「認知邊界」，才是最關鍵影響你結果的因素。

01｜開始之前：建立一個數位的家

這步很多教學會跳過。但如果你跟我一樣是從零開始，這是第一件要做的事。

在桌面建一個資料夾叫 Claude Playground——所有跟 Claude 有關的專案的家。

裡面再建一個 website-assets，專門放跟網站相關的素材：logo 圖檔、網頁要用的照片、Notion 匯出的產品介紹、字型檔案。

接下來這一步，最多人忽略，但做了以後你會回頭感謝自己——建一個 brand-guideline.md。

這個檔案是你的品牌單一來源（single source of truth）。建好之後，每次跟 Claude 開新對話，你直接把它丟進去，Claude 就會以這份文件為創作依據。你不用每次都重新解釋「我是誰、我做什麼、我的語氣是什麼、我的美感長怎樣」——這是 AI 時代最隱形的生產力漏洞。

放哪裡？看你未來的使用範圍：

如果你以後還會用 Claude 做內容創作、社群經營、電子報 → 放在 Claude Playground 根目錄（所有專案共用）
只會用來做這個網站 → 放在 website-assets 裡

我用的 brand-guideline.md 結構（供你參考）：

# Brand Guideline

**Tagline:** 一句話說清楚你的價值主張

## 品牌色系 Brand Colors
主色、輔色、強調色的 HEX 碼 + 用法場景

## A01 · Who Am I 我是誰
真實身份、職涯軌跡、故事脈絡

## A02 · Identity Tags 核心身份標籤
3–5 個讓人快速認識你的標籤

## A03 · Core Values 核心價值觀
工作、生活、合作上堅持的原則

## B01 · Business Model 事業模型
你賣什麼、商業模式是什麼、為誰服務、不為誰服務

## B02 · Tone & Voice 語氣與口吻

### Macro Pillars
內容大方向的 2–4 個主軸

### Micro Rules
具體用字偏好、禁用詞、人稱、長短節奏

## C01 · How to Work with Me 給 AI 的說明書
你希望 AI 怎麼跟你合作、怎麼回、怎麼交付

## C04 · Vision & Goals 理想目標與願景
三年、五年想走到哪裡

## C05 · Aesthetic Direction 美感方向
視覺風格、參考的網站和樣式

為什麼要花時間寫這個？

因為 AI 最大的問題不是「它不會」，是「它不知道你是誰」。

你每次都花 15 分鐘跟它介紹自己、解釋你的品牌、貼你的過往作品——還不如花一次 1 小時把這份文件寫清楚。之後每次對話都省下那 15 分鐘，而且 Claude 給你的東西會穩定一致，不會上一次很到位、下一次完全歪掉。

這個檔案會跟著你長大。剛開始只有幾行沒關係，每次發現 Claude 誤解你什麼，就回頭把那個細節寫進 brand-guideline——它就是你跟 AI 合作這段關係的說明書。

02｜必裝的 Claude Code Skills（我實際在用的）

Skills 可以理解成：給 Claude 裝上專業腦袋的 SOP 手冊。

我做這個網站有裝這幾個：

Skill	在做什麼	我怎麼用它
`find-skills`	找其他 skill	不知道有什麼工具可用時先問它
`shadcn`	管理 UI 元件	建立專業級的按鈕、卡片、表單
`superpowers`	幫你規劃、腦力激盪	所有專案開始前都先用 brainstorming
`vercel`	部署、環境變數、CI/CD	推上線的時候靠它
`impeccable`	UI/UX 優化	做完後讓網站看起來不像 AI 做的

要去哪裡找 skills？

skills.sh 是目前最完整的 skill 目錄，可以直接搜尋、下載
impeccable.style 是上面這張表裡最推的一個，專門處理「網站看起來太 AI」的問題

💡 裝 skills 的心法：不是裝越多越好，是裝剛好你需要的。 你現在看不懂也沒關係，下面每個都會用到。

03｜Start with WHY：為什麼你要做這個網站

這是 99% 的人會跳過的一步，但它會決定後面所有技術選擇。

我當初先問自己的問題：

這個網站是作品集、學習紀錄、銷售頁，還是品牌入口？
流量會從哪裡來？（IG、Threads、搜尋、口碑、廣告）
我希望大家在這頁面上看到什麼？
我希望大家在這頁面上獲得什麼？

Pro tip：你可以用 superpowers:brainstorming 這個 skill，它會像教練一樣問你問題，幫你把想法抓清楚。但我建議你自己先想過一輪，帶著初稿去對話，品質會差 10 倍。

如果你在和 AI 溝通時已經有初步的概念和框架，指令下得越明確具體，AI 越快能掌握你的需求——可以減少來回溝通的時間和成本（token）。

04｜Planning：靜態 vs 動態——整個專案的分水嶺

這是我遇到的第一個認知邊界太窄的問題。

我原本以為「網站就是網站」。後來才發現網站有三種，如果一開始選錯架構，做好網站後要再重新修改，就會很麻煩：

📦 純靜態（櫥窗型） 只做單向展示，所有訪客看到一模一樣的內容。例子：餐廳官網（菜單、地址、電話）、個人履歷網站、單場活動 Landing Page——伺服器不需要針對不同使用者做任何運算。

🔄 混合型（櫥窗 + 一點互動） 主要是展示，但有一兩個地方需要跟伺服器互動（表單、測驗、資料查詢）。例子：我的 free-soul-angel.com——大部分是介紹服務、峇里島指南、Notion 模板，但有一個「衝浪測驗」會把結果寫進我的 Notion 資料庫。

⚙️ 純動態（互動型） 會員、交易、即時資料是網站的核心功能。例子：這個衝浪網站 SurfCheck 韓國浪池梯次——可以線上報名課程、可以看到每梯次剩餘的報名數量。這些資訊都是綁定資料庫才能即時呈現，所以它是一個典型的動態網站。其他例子還有 蝦皮、Hahow 好學校、Notion。

💡 3 個問題幫你判斷是靜態還是動態網站

靜態 vs 動態決策流程

Pro Tips：

有會員、有下單、有即時資料 → 動態
只有表單 / 測驗 / 留言 → 混合
純展示 → 靜態

05｜動態網站為什麼常常選 Next.js

如果你要做動態或混合型網站，AI 大機率會推你用 Next.js。

給完全不懂程式的科技小白的比喻：

你要蓋一間房子。有三種選擇：

🧱 選擇 A：買一塊空地，從挖地基開始蓋（= 純手刻 HTML / CSS / JavaScript） ——完全客製化，但你要自己處理水管、電路、結構、裝潢，沒經驗會很痛苦

🏠 選擇 B：買一間水電瓦斯都配好的房子，你只要決定傢俱和裝潢（= Next.js） ——大部分麻煩的東西都幫你做好了，你只要專心設計外觀和功能

🏢 選擇 C：租一間套房（= Wix、Squarespace 等模板型工具） ——最快搬進去，但能改的很有限

Next.js 就是選擇 B——地基、牆、窗戶、水電都蓋好，你只要決定房間怎麼擺。 它幫你處理掉最煩的那些技術問題（路由、效能、SEO、圖片壓縮），你可以把力氣花在「我的網站要長怎樣」。

技術面的加分項（有印象就行）：

前後端寫在同一個專案（AI 對話更順、部署更簡單）
內建多種渲染模式（SSR / SSG / ISR，AI 會幫你選，但你要知道這件事存在）
資料夾結構 = URL 結構（不用寫路由設定）
圖片自動優化（SEO 和速度都更好）
社群超大（AI 看過的教學材料最多，答案最準）

🤔 Pro tip：我的網站是「混合型」，為什麼還是選 Next.js？

如果你讀到這裡，心裡可能會冒出一個問題：「這個網站看起來以展示為主，為什麼要用動態網站框架 Next.js？用輕量的靜態網站工具（Hugo、Jekyll、Astro）不就好了嗎？」

我的理由有四個：

1. 我有一個衝浪測驗要寫入 Notion。 純靜態網站沒有內建這個能力——要把使用者的選擇存進資料庫，需要伺服器端處理。Next.js 內建這個能力（API Routes），不用另外架一台。

2. 我未來想加會員、課程、線上購物。 現在用 Next.js 寫好架構，以後升級只需要「加功能」，不用「整個重寫」。框架選對，未來的自己會感謝現在的你。

3. 免費方案夠用。 我的流量還沒大到要付費的程度，免費方案完全 cover。

4. AI 對 Next.js 最熟。 這點很重要但很多人忽略——你選的技術越主流，AI 給你的答案就越準。同樣一個 bug，用冷門框架 AI 可能給你三個錯誤答案，用 Next.js 可能三秒給你解法。

所以結論：就算你現在只有一個小小的動態需求，只要你「未來可能」想加更多功能，Next.js 都不會錯。

06｜該部署到哪？三個主流平台實戰比較

寫完了網站，接下來要「放到網路上」讓大家看得到——這叫部署（Deploy）。

目前我會推薦三個主流平台，各有強項：

平台	一句話介紹	免費方案	適合	缺點
Vercel	Next.js 原生家	個人作品集夠用	作品集、新創、Next.js 專案	商業流量變大會超標、付費不便宜
Cloudflare Pages	全球 CDN 最強	頻寬幾乎無限	靜態頁、工具頁、高流量	進階功能 UI 較雜（有 AI 協助比較不是問題）
Zeabur	台灣團隊、中文介面	有試用但主要付費	需要 24/7 連線的服務（n8n、Discord bot）	貴一點，但中文客服是最大賣點

我的選擇：Vercel。 兩個原因：

1. 以我目前的使用量，免費。 個人網站流量還沒大到要付費，Vercel 的免費方案完全夠用。

2. Next.js 和 Vercel 是同一家公司做的。

這件事有多重要，用 Apple 的生態系就秒懂：

如果你的電腦、手機、平板都是 Apple 家的——AirDrop 一秒傳檔案、iPhone 拍的照片自動出現在 Mac、複製在手機上貼到電腦、用 iPad 當第二螢幕——這些「不用設定就能用」的魔法，都是因為它們本來就設計來互相搭配。

Next.js + Vercel 就是網站版的「全 Apple 組合」。 同個生態系、同組人馬開發、所有功能都預設最佳化。你少掉一堆「為什麼這個設定不 work」的 debug 時間。

你當然也可以用 Next.js 部署到別的地方（就像 iPhone 也能配 Windows 筆電），能用，但你會失去一堆原本不用做就自動幫你做好的事。

我現在也有一些小工具放 Cloudflare，每個月 0 元跑得很快。這三個平台不是互斥的，你可以分不同專案用不同平台。

選定 Vercel 後，記得下載 vercel skill——後面部署、環境變數、加網域都會用到。

💡 Zeabur 優惠：如果你要用 Zeabur 買伺服器或 AI Hub 額度，在 zeabur.com 結帳時輸入推薦碼 angelchen，可享 10% 折扣。

07｜我的金流抉擇：用 Portaly 先繞過整個後端

這是我最想分享的決策，因為它直接反映「你不知道你不知道什麼」這件事。

我網站上想放我的 Notion 模板產品。按理說需要：

商品管理系統
購物車
金流串接（綠界、藍新、Stripe）
開發票、報稅邏輯
客戶資料庫

我目前的體量不需要這些。所以我把所有商品外連到 Portaly 的頁面。

Portaly 幫我處理金流、開發票、收客戶 email。我只要維護一個連結。

🎁 好友推薦：透過我的推薦連結註冊 Portaly，你可以獲得 1 個月免費升級。

但關鍵是——我跟 Claude 溝通時，有明確說：「未來可能會需要會員系統和庫存，現階段先用外連方案。」Claude 就會幫我用一種「以後可以升級」的架構去做。

這就是拓展認知邊界的重要性。

認知邊界——知道這個問題存在，比知道答案更重要。

08｜網域要買嗎？什麼時候買？

短答：不急。整個網站做完再買也來得及——但你可以先想好名字。

一、先想好你要的網址

網域就是你的網址，例如我的是 free-soul-angel.com。

挑網域的原則：

短、好記、好念（打字快、口耳相傳不會錯）
跟品牌一致（跟 IG、Threads、Email 最好對得起來）
英文為主（中文網域發 email、口頭講都麻煩）

想好幾個候選 → 到供應商搜尋框試打 → 看哪些還沒被買走。

二、常用網域供應商

供應商	特色
Cloudflare Registrar	成本價不加價，最便宜
GoDaddy	老牌、介面直覺
Gandi	歐洲、注重隱私
Zeabur	中文介面
Netcup	德國、CP 值高

我自己用 Cloudflare Registrar——成本價、續約不漲、介面乾淨。

三、比價（後綴差很多）

同一個名字，不同後綴（TLD, Top-Level Domain）價差可達兩三倍：

後綴	常見年費（美元）
`.com`	$10–15
`.tw`	$15–25
`.io`	$30–50
`.app`	$15–20
`.me`	$15–25

四、避開「第二年大漲價」陷阱 🔥

很多供應商第一年超便宜（$1–3 吸引你），第二年起翻 10 倍漲回 $15–30。GoDaddy 尤其愛玩這招——你買的時候爽，續約的時候傻眼。

我的做法：我在 Cloudflare Registrar 買 free-soul-angel.com——它的方案是成本價不加價，一年約 US$10 多，永遠不漲。我直接一次買三年，避免任何變數。

💡 看第一年價格之前，一定要先點開續約價格看第二年多少錢。用第二年的價格比才公平。

五、你該不該買網域？

買了好處不少： 品牌專業度立刻拉高、SEO 權重比子網域高、未來換平台不用改網址、可以做品牌 email（angel@free-soul-angel.com 比 Gmail 看起來專業 10 倍）。

現實成本：一年不到 500 台幣（比一頓晚餐便宜）。

對照你的情境：

情境	建議
長期經營、接客戶、做品牌	一定要買，越早越好
正式事業、要發名片寫提案	一定要買，自有網域才有門面
Side project 還在測試中	先用平台預設網址（`xxx.vercel.app`），確定再買
純學習、自己玩	不用買，省下來喝咖啡

我的判斷標準：只要這個網站會活超過一年，就買。

讀到這裡你可能有點頭昏眼花——沒關係，這些選擇沒有對錯，只有哪一個比較符合你當下的需求而已。

你不是在做完美網站，是在做一個「夠好、之後可以改」的起點（MVP），真正難的部分已經結束了！

09｜執行：把方向盤交給 Claude，但你要盯住地圖

前面的功夫做足了，這一步反而最簡單。

我按照 superpowers:writing-plans 產出的計畫，一步一步跟著做。Claude 會：

幫你寫 code
指引你 push 上 GitHub
帶你一步一步部署到 Vercel

我做的事：看它寫的東西，問「這段在做什麼？為什麼這樣選？」確認每一個決定我都理解，才讓它繼續。

這不是在挑剔，是在幫自己建立認知邊界。 因為下次你要改的時候，你要看得懂自己的網站是怎麼長出來的。

10｜收尾：讓網站從「能動」變「值得看」

很多人做到上線就停了。但 AI 生成的網站有個共同氣味——工整但平庸，一看就是 AI 做的。

優化：我用這幾個方式優化網頁的美感與使用者體驗：

impeccable skill — 全面優化 UI/UX，修掉那股 AI 味
impeccable:critique — 讓它幫我出一份網站評分報告，告訴我哪裡可以更好
請 Claude 檢查 SEO — meta tags、結構化資料、sitemap
請 Claude 檢查安全性 — 敏感資訊、依賴套件漏洞
埋點追蹤數據 — 用 Claude 幫我設定 Google Analytics，之後就能追蹤使用者在網頁上的數位足跡

這五個看似不起眼的步驟，絕對會讓你的網站質感拉高一個等級。

11｜工程師朋友的專業幫我拓展認知邊界

從前期規劃到網站上線，我有兩段和工程師朋友的對話，每一段都扎實地拓展了我的認知邊界。

第一段對話發生在前期做網站規劃的時候。

我問朋友：「網站建好之後應該要部署到哪個平台？Cloudflare？Zeabur？」

他沒有直接回答。他反問我：

「你的網站是靜態還是動態？只有前端，還是也有後端？」

我當下愣住。因為我連這個問題的存在都不知道。

靜態、動態、前端、後端——這些名詞我雖然聽過，但要怎麼用在自己的網站上、影響到什麼決策，我完全沒概念。我原本以為「部署網站」就是把東西丟上網就好，沒想到不同類型的網站適合不同平台。

我回去把這些問題丟給 Claude，才第一次理解到整個網站分類邏輯（就是這篇文章 04 段那張決策圖的內容）。這件事直接改變了我後面所有選擇——包括為什麼最後選 Next.js + Vercel，為什麼金流先外連 Portaly、不自己做。

朋友一個反問，比他直接給答案有價值 100 倍。

這就是「你不知道你不知道什麼」的真實瞬間——我以為我準備好要問「該選哪個平台」，但真正該問的，是更底層的「我在做哪一種網站」。

第二段對話是我把網站做完後，請朋友幫我看。

我以為我都做完了。結果他隨手點一點，丟出一串我從來沒注意過的檢查項目：

「你的首頁影片跟主視覺圖片，有沒有設預載入？訪客進來的那一秒看到空白，體感就差很多。」

「網速慢的時候，圖片載入前有沒有預留空間？很多網頁圖片一出現畫面就整個跳一下，體驗很差。」

「你這個網站有點 AI 感，如果你想修掉這個味道，去試試 impeccable 這個 skill，Claude 的設計品質會提升一個等級。」

我回去檢查，結果前兩件事 Claude 早就默默幫我做好了——首頁影片有預載入、圖片都有預留空間（工程上叫 layout shift 的處理）。AI 感那條是真的新建議，後來用了 impeccable，整個排版、字級、質感都不一樣了。

但這才是最有意思的地方——就算 Claude 做對了，我根本不知道它做對哪些事、到底有沒有做、哪些該做、哪些不該做、還有哪些可以做？

這兩段對話讓我意識到專業的重要性：

雖然 AI 讓很多事情變得簡單許多，但專業還是很有價值——因為專業可以做出更周到的決策。

但難道我們就要先變成工程師才能製作網站嗎？

12｜拓展認知邊界，是 AI 時代最重要的能力

不用先變成工程師。 AI 確實讓做網站變簡單了——以前要學半年才敢動手的事，現在三天可以有雛形。

但 AI 讓你用更低的成本做出「還可以」的東西。真正的差距在——你知道要指示 AI 做什麼，你知道哪些事 AI 不會主動提，你知道自己在哪裡會踩坑。

這個叫「認知邊界」。

它不是靠天賦，是靠：

親自動手嘗試、踩坑
請專業領域的朋友給你建議
問 Claude「這個選擇有什麼我沒考慮到的？」
承認自己的無知，比假裝什麼都懂更有用

只要能努力拓展認知邊界——透過自學、詢問朋友和專家、甚至是在與 AI 的互動中學習——還是能很有效率地擴張自己的視野，透過 AI 去實現那些我們原本要花超爆多時間才能做到的事情。

真正值錢的，是中間那段認知的升級。

AI 幫我做好了網站，這樣就夠了嗎？