0 基礎 1 天做好一個網頁

這篇怎麼用

開工前 15 分鐘：裝 3 個東西 + 註冊 2 個帳號

動工前先把下面這些準備好。只要做一次，以後做第二個網頁就不用再弄了。

0-1 裝 Claude Code

Claude Code 是 Anthropic 官方出的指令列工具（不是那個會跟你聊天的網頁版 Claude）。它能直接在你電腦上建檔案、改檔案、跑指令。官方提供一行指令就裝好，不用先裝 Node。

Mac 使用者

打開 Terminal（內建 App，Spotlight 搜 "Terminal"），複製下面這行貼進去按 Enter：

curl -fsSL https://claude.ai/install.sh | bash

這是 Anthropic 官方的 native installer，一行下去自動裝好、自動保持最新版。

Windows 使用者

1. 先裝 Git for Windows（全部按 Next 就好）— 這是 Claude Code 在 Windows 上跑指令用的
2. 打開 PowerShell（搜 "PowerShell" 按 Enter）
3. 貼下面這行：

irm https://claude.ai/install.ps1 | iex

如果你看到 'irm' is not recognized 那代表你開的是 CMD 不是 PowerShell — 關掉重開，這次搜「PowerShell」。

驗證安裝：裝完後在 Terminal 打 claude --version，有版本號跳出來就對了。

0-2 第一次啟動 Claude Code

裝好後，在 Terminal / PowerShell 打 claude 按 Enter。第一次跑會叫你登入。

1. 打 claude 按 Enter
2. 它會開瀏覽器跳到 Anthropic 登入頁 — 用你的 Anthropic 帳號（也就是你用 Claude 網頁版的那個帳號）登入
3. 登入成功後瀏覽器會告訴你「可以關掉視窗了」，回到 Terminal 就會看到它在等你下指令

注意：Claude Code 需要付費方案。官方文件寫得很清楚：免費的 Claude.ai 帳號不包含 Claude Code 使用權，要 Pro（USD 20 / 月）、Max、Team 或 Enterprise 才能用。沒帳號的去 claude.ai/upgrade 訂 Pro；Pro 一個月用下來能做好幾個網頁外加 AI 每天陪你寫文案、改履歷，滿值的。

0-3 註冊 GitHub 帳號

GitHub 是放程式碼的地方，免費。Vercel 部署時會從 GitHub 抓你的網頁去上線。

1. 到 github.com，右上角按 Sign up
2. 輸入 email → 設密碼 → 取一個 username（這個 username 會出現在你之後的網頁網址裡，建議好記、英文小寫）
3. GitHub 會寄驗證碼到你的 email，回填驗證碼
4. 後面會問一些個人化問題（用途、經驗）— 隨便選都可以
5. 登入完成後你會看到 GitHub 首頁（左邊有綠色 New 按鈕那個）

0-4 註冊 Vercel 帳號

Vercel 是把你的網頁放到網路上的平台，免費方案永久夠用。最方便的註冊方式 = 用剛剛的 GitHub 帳號登入。

1. 到 vercel.com，右上角按 Sign Up
2. 選 Continue with GitHub
3. GitHub 會問「要不要讓 Vercel 存取你的帳號」→ 按 Authorize Vercel
4. Vercel 會問你的名字、團隊名稱 — 一人使用隨便填就好
5. 登入完看到 Vercel Dashboard 就成功了

12 個 prompt：跟 Claude 聊出一個網頁

接下來你只要做一件事：把下面每一個 prompt 按順序貼到 Claude Code，看 Claude 做完 → 按 Enter → 貼下一個。每一個 prompt 右上角都有複製按鈕。

STEP 1 需求（2 個 prompt）

先跟 Claude 講你要做什麼。

1建資料夾 + 基本 HTML 檔

幫我建一個資料夾叫 my-website，裡面做一個 index.html，我要做一頁式的服務介紹網站。

Claude 會做：建資料夾、建 index.html、先寫一個最基本的 HTML 結構（空空的）。

2講清楚分幾個區塊

網站分 4 個區塊：大標題、關於我、3 個服務項目、聯絡方式。

Claude 會做：把 index.html 切成 4 個 section，每個都先放佔位標題。這時打開檔案已經看得出架構。

STEP 2 內容（2 個 prompt）

先放假的文字跟圖片，之後再慢慢改成你真的要的內容。

3填佔位文字 + 圖片

每個區塊先放假的文字跟圖片佔位，讓我看整體感。

Claude 會做：每個 section 寫 2-3 句 placeholder 文字，用 placeholder.com 或 unsplash 隨機圖當封面。

43 個服務做成卡片

3 個服務做成卡片，每張有標題、簡介、價格。

Claude 會做：用 CSS grid 排 3 欄卡片，每張含標題 / 一段簡介 / 一個價格。手機上會自動疊成一欄。

STEP 3 視覺（4 個 prompt）

整體調性 → 配色 → 手機版 → 讓 Claude 自己 review。

進階小撇步 — Claude Design：Anthropic 2026-04-17 推出了姊妹產品 Claude Design（Pro / Max / Team / Enterprise 可用），專門拿來生成視覺稿。流程是先在 Claude Design 調到你喜歡的介面樣子，然後一鍵交給 Claude Code 實作。這篇教的是純 prompt 調視覺（夠用），但你對視覺要求高、或想比對幾個版本再決定，走 Claude Design 會更快更精緻。不會影響這 12 個 prompt 的邏輯，只是把 Step 3 換個更聰明的做法。

5整體風格

整體風格改成 Apple 官網那種乾淨簡約的感覺。

Claude 會做：加白底、大間距、細字 + 粗標題、關鍵字用灰階。如果你想換別的風格，把「Apple」換成你想要的品牌名都行（例如「日系 Muji 風」「小紅書那種少女風」）。

6配色

主色調換成金色配黑底，要像高級精品店的感覺。

Claude 會做：自己選適合的金色 hex（通常會挑香檳金），底色調黑，標題 / 按鈕 / 強調色都換過去。你不用懂色碼。

7手機版

手機打開也要好看，字不要擠在一起。

Claude 會做：加 responsive 斷點（通常 768px），手機上字變大一點、區塊間距寬一點、3 欄卡片變 1 欄。

8讓 Claude 自己 review

幫我看看這頁哪裡可以更好，給我 3 個建議然後照建議改。

這個 prompt 最實用：0 基礎看不出哪裡怪，叫 Claude 自己挑毛病它會告訴你「大標題太小」「卡片陰影太重」「聯絡 CTA 不明顯」這種視覺細節，然後自動改。

STEP 5 GitHub（1 個 prompt）

把做好的檔案上傳到 GitHub。

10上傳到 GitHub

幫我上傳到 GitHub，repo 名字叫 my-website。

Claude 會做：

• 幫你跑 git init 初始化
• 第一次會問你 GitHub 帳號（照它指示登入就好）
• 在 GitHub 上建一個叫 my-website 的 repo
• 把全部檔案推上去

完成後你 GitHub 上會看到新的 repo 裡面有你的網頁檔。

會遇到的坑：如果 Claude 問你要不要登入 GitHub CLI（gh auth login），選 GitHub.com → HTTPS → Login with a web browser，它會給你一組 8 碼確認碼，複製去瀏覽器貼。

STEP 6 Vercel 部署（2 個 prompt）

把 GitHub 上的網頁連到 Vercel，一鍵上線。

11一鍵部署

把 GitHub 上的 my-website 連到 Vercel 部署，完成給我網址。

Claude 會做：

• 叫 Vercel CLI（第一次跑會請你登入 Vercel — 按它提示按 Enter 讓它開瀏覽器就好）
• 把 my-website 連到你的 Vercel 帳號
• 自動部署
• 完成後給你一個網址，類似 my-website-xxxx.vercel.app

12確認上線

打開那個網址，如果看到我的網站就代表成功了。

做完這一步你就有一個可以傳給別人的網址了。把網址貼給朋友、放 IG bio、放 LINE 都行。Vercel 免費方案是永久的，不用擔心會消失。

跑到一半卡住怎麼辦

Claude Code 不是永遠一次到位，你可能會遇到：

• 它說要改但改壞了：告訴它「剛剛那步改壞了，幫我還原」。它會用 git 還原。
• Terminal 跑出紅字：直接把紅字複製貼給 Claude，跟它說「我卡在這裡」。
• 它問你 yes / no 你不知道該選哪個：打「我不太懂，你解釋一下再讓我選」。它會解釋。
• GitHub 或 Vercel 網頁看不到新的東西：等 1 分鐘再重整。雲端會有延遲。

用 AI 做網頁要知道的限制

上面 12 個 prompt 帶你從 0 做到上線。但你做出來的這種是一頁式靜態網頁 — 畫面上只有文字、圖片、按鈕連結，沒有會員登入、沒有資料庫存東西、沒有後台程式跑在雲端。這種網頁只是把做好的檔案放在 Vercel 上給人看，Claude 寫好就會跑，你改字改圖也不會意外壞掉其他功能。所以 0 基礎跟著打，Claude 幾乎一次就對，才會有「跟 AI 聊一聊就做好」的順暢感。

一旦網頁要做得更複雜，例如有註冊登入、收款、後台寫入資料庫、多頁資料互相串接 — 所謂的 AI vibe coding（跟著感覺寫、不看實際程式碼）就會開始出問題：

• 穩定性：AI 會編出看起來對但實際跑不起來的函式名、套件版本、API 路徑；改一個地方會意外壞另一個地方，你沒 review 就不會發現。
• 資安：登入密碼、金流、API key、使用者資料這幾塊 AI 很容易寫出「能跑但不安全」的版本。2026-04 這週就有多篇報導講 AI 生成的 app 被實測出數十個漏洞。
• 可維護性：想到什麼改什麼，3 個月後你自己也看不懂架構，要擴功能就很痛。

這篇教的就是上面這種簡單網頁 — 顯示內容為主，所以這三個風險都碰不到，0 基礎跟著做沒問題。但如果你要做更大的東西 — 會員系統、電商、SaaS — 三個風險就會一個個跳出來，那時候就不能只靠「跟 AI 聊一聊」做完，要改成 AI 加速 + 人工把關，不是 vibe coding。

常見問題

這篇用到的工具