用 AI CLI 做一個 Landing Page 並上線 — 不用會寫程式

那張兩百美金的海報，長得跟所有人一樣

想像你站在一條走廊裡，兩邊牆上全是佈告欄。每個佈告欄上都貼了一張海報。顏色不同、照片不同，但版型一模一樣。一樣的格線。一樣的字體。一樣的圓角按鈕。

你花了 $200 美金做的 Squarespace 網站就是這樣。或者 $180 的 Wix。或者每個月 $29 的 Webflow。你挑了一個模板、換上自己的名字跟照片、按下發布。網站能動。載入速度快。看起來很專業。但它也跟上禮拜用同一個模板做出來的三萬個網站長得一模一樣。

你想要的是一個感覺像「你」的東西。你得到的是一件誰穿都合身的戲服。

替代方案是這樣的：你用白話描述你想要什麼。AI 從零寫出程式碼 — 客製的，不是從模板改的。你在自己的電腦上預覽。然後一行指令，放上網路。免費。

不用月費。不用拖拉式編輯器。不用「升級 Pro 才能移除浮水印」。每一行程式碼都是你的，想改的時候，描述一下你要什麼改動就好。

這篇文章結束的時候，你會有一個真正的 landing page，在網路上是活的，有一個真正的 URL 可以分享給別人。整個過程大約 30 分鐘。

開始之前你需要什麼

三樣東西：

1. 一台電腦 — Mac、Windows 或 Linux，都行。
2. Claude Code — 我們要用的 AI 工具。需要 Claude Pro 訂閱（$20 美元/月）。已經有的話就可以直接開始。還沒有的話，到 claude.ai 註冊。
3. 一個免費的 Netlify 帳號 — 這是你的網站要放的地方。把它想成網路上的免費佈告欄。到 netlify.com 用 GitHub 或 email 註冊。

你不需要懂 HTML。不需要懂 CSS。不需要知道 terminal 是什麼，只要知道「那個打字的黑色視窗」就夠了。我們會一步一步解釋。

如果你從來沒用過 Claude Code，Claude Code 第一個小時 有完整的安裝教學。下面是精簡版。

第一步：安裝 Claude Code（5 分鐘）

打開你的 terminal。Mac 上，用 Spotlight 搜尋「Terminal」（Cmd + Space，輸入 Terminal）。Windows 上，打開 PowerShell。

Terminal 就是用文字跟電腦溝通的方式。不是按圖示，而是打指令。就這樣。沒有魔法，沒有危險。想成傳訊息給你的電腦，而不是用手指點按鈕。

Mac 或 Linux，貼上這行然後按 Enter：

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

Windows（PowerShell）：

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

跑完之後，打：

claude

瀏覽器會開起來讓你登入。用你 Claude Pro 訂閱的那個帳號。登入完回到 terminal，你應該會看到一個游標在等你輸入。

這就是 Claude Code。一個住在你 terminal 裡的 AI。你打字告訴它你要什麼，它就做。它可以讀檔案、寫檔案、跑指令，而且 — 對我們來說最重要的 — 可以從一段描述生出整個網站。

第二步：建立你的專案資料夾（2 分鐘）

我們需要一個地方放你的 landing page 檔案。在 terminal 裡打：

mkdir my-landing-page && cd my-landing-page

mkdir 是「make directory」的意思 — 建立資料夾。cd 是「change directory」— 進到那個資料夾裡。你剛建了一個叫 my-landing-page 的資料夾，然後走進去了。

接著在這個資料夾裡啟動 Claude Code：

claude

準備好了。

第三步：描述你的 Landing Page（10 分鐘）

這個步驟正常來說需要懂 HTML（網頁的骨架）和 CSS（油漆和裝潢）。但你不用。你只要用白話描述你要什麼，Claude Code 會幫你寫程式碼。

這是一個範例 prompt。不要照抄 — 用你自己的話描述你的頁面：

幫我做一個 freelance 攝影師的單頁 landing page，攝影師叫陳美。

風格要極簡、優雅，深色背景搭配暖色系的重點色。

區塊：
1. 最上方 Hero：大標題「Mei Chen Photography」，一行 tagline「Telling stories through light」，一個「View My Work」按鈕。
2. 作品集格子：6 個 placeholder 圖片方框，3x2 排列。用灰色方塊加上 "Photo 1"、"Photo 2" 等文字當 placeholder。
3. About 區塊：一段關於攝影師的簡短介紹（幫我編一段合理的），旁邊放一個 placeholder 大頭照。
4. Contact 區塊：email 連結、Instagram 連結、一個簡單的表單有 Name、Email、Message 欄位。
5. Footer 加上版權聲明。

要做 responsive 的，手機上看也要好看。
全部輸出在一個 index.html 檔案裡。

把這段（或你自己的版本）打進 Claude Code，按 Enter。

看看發生了什麼。Claude Code 會想一下，然後開始寫一整個 HTML 檔 — 結構、樣式、排版、顏色、字體、響應式設計 — 全部根據你的描述。它會把檔案放在你目前的資料夾裡。

關鍵：描述要具體。「幫我做一個網站」會得到普通的東西。「深色背景、暖色重點色、極簡風、4 個區塊、作品集格子」會得到一個看起來像經過設計的成品。

如果有什麼不喜歡的，直接跟 Claude Code 說就好：

把背景改成米白色，重點色改成森林綠。

或者：

標題放大一點，區塊之間的間距加大。

每次 Claude Code 都會直接改檔案。你負責指揮，它負責執行。這個過程以前要花 $200 和一個禮拜跟網頁設計師來回溝通。

第四步：在本機預覽（2 分鐘）

在把頁面放上網路之前，先在自己的電腦上看看。這就像把海報先在房間裡舉起來看看，再決定要不要貼到走廊的牆上。

還在 Claude Code 裡面，打：

幫我用瀏覽器打開 index.html。

Claude Code 會執行指令打開檔案。瀏覽器跳出來。你的 landing page 就在眼前。

看看它。滾動看完。把瀏覽器視窗拉大拉小，看不同尺寸的效果。如果有東西不對，回到 terminal 跟 Claude Code 說：

作品集格子在手機上看太擠了，圖片方框之間加一點 padding。

重新整理瀏覽器。修好了。

描述、預覽、調整 — 這個循環就是專業網頁開發者的工作方式。唯一的差別是他們手打 CSS，你打中文。

第五步：安裝 Netlify CLI（3 分鐘）

你的頁面在本機上看起來不錯了。該放上網路了。

Netlify 是一個免費的 hosting 服務。想像成公共走廊裡的免費佈告欄 — 只要有 URL，任何人都能看到你的海報。不用付租金。不用管伺服器。你只要把頁面釘上去，Netlify 處理剩下的。

先離開 Claude Code，按 Ctrl + C 或打 /exit。

現在安裝 Netlify CLI（CLI 就是 command line interface — 用打字控制的工具）：

npm install -g netlify-cli

如果看到 npm 找不到的錯誤，你需要先安裝 Node.js。到 nodejs.org 下載 LTS 版本，跑安裝程式，然後再試一次上面的指令。

安裝完之後，從 terminal 登入你的 Netlify 帳號：

netlify login

瀏覽器會打開。授權連線。完成。

第六步：Deploy（3 分鐘）

就是這一刻。一行指令把你的頁面放上網路。

確認你還在 my-landing-page 資料夾裡，然後執行：

netlify deploy --prod --dir=.

拆開來看：

• netlify deploy — deploy 指令。就像把海報貼上牆。
• --prod — 代表「這是正式的、公開的版本」。
• --dir=. — 那個點代表「用目前的資料夾」。你的 index.html 就在這裡。

第一次 Netlify 會問你幾個問題：

• 建立新網站？ 是。
• Team？ 選你的 team（通常就是你的名字）。
• 網站名稱？ 自己取一個，或讓它隨機產生。

然後它上傳你的檔案。大約 10 秒後，你看到這樣的輸出：

Website URL: https://mei-chen-photography.netlify.app

打開那個 URL。用任何瀏覽器。用手機。傳給朋友。

你的 landing page 在網路上了。

那個 URL 是真的。是你的。現在就能用。全世界有那個連結的人都可以看到你的頁面。

第七步：隨時修改（持續）

你的網站不是凍結的。下週想更新？打開 terminal：

cd my-landing-page
claude

告訴 Claude Code 要改什麼：

把 placeholder 圖片換成這些描述：
- Photo 1：稻田上的夕陽
- Photo 2：自然窗光下的人像
用 SVG 插畫產出這些圖片，直接嵌入 HTML。

或者：

在 Portfolio 和 Contact 之間加一個新的「Pricing」區塊。
三個方案：Basic（$500）、Standard（$1200）、Premium（$2500）。
乾淨的卡片排版，Standard 那張標示為推薦方案。

改完之後，再 deploy 一次：

netlify deploy --prod --dir=.

就這樣。你的線上網站幾秒內更新。不用登入後台。不用拖拉式編輯器。不用「你的方案不支援自訂 CSS」。

你剛跳過了什麼

老實說一下你剛剛跳過了什麼：

• 學 HTML — 每個網頁的骨架。Claude Code 寫了。
• 學 CSS — 樣式。Claude Code 處理了。
• 選模板 — 不需要。你的頁面是從你的描述產生的，不是塞進別人的版型裡。
• 付 hosting 費 — Netlify 的免費方案處理個人網站和作品集綽綽有餘。
• 月費訂閱 — Squarespace 每月收 $16-49 美元。你 hosting 花了 $0，Claude Pro 每月 $20，還可以拿去做幾百件其他事。

你沒有跳過的：

• 擁有你的程式碼 — 那個 index.html 是你的。你可以用任何文字編輯器打開它，搬到其他 hosting，或交給開發者去擴充。
• 理解你的網站在做什麼 — 你描述了每個區塊。你知道上面有什麼，因為是你要求的。
• 控制權 — 任何改動都只是一段對話的距離。不用開工單。不用「這個功能需要 Business 方案」。

往下走

單一 index.html 檔案適合 landing page、作品集、個人網站。當你需要更多的時候，同樣的 workflow 可以擴展：

• 多頁網站： 告訴 Claude Code 建立 about.html、portfolio.html，加上導覽列互相連結。整個資料夾用同樣的方式 deploy。
• 自訂 domain： 買一個網域（大約 $12 美元/年，Namecheap 或 Cloudflare），然後在 Netlify 後台的 Domain Management 加上去。你的網站從 random-name.netlify.app 變成 meichenphotography.com。
• 真正會動的表單： Netlify 免費處理表單提交。告訴 Claude Code 在表單 tag 加上 netlify 屬性，提交的資料就會出現在你的 Netlify 後台。
• 完整的 web app： 當你準備好做互動功能 — 資料庫、使用者帳號、動態內容 — AI CLI 工具完整指南涵蓋了完整的工具鏈。

你做了什麼

你做了一個客製的 landing page。不是從模板來的。不是從拖拉式編輯器來的。從一段你想要什麼的描述，被 AI 變成真正的程式碼，免費放上了網路。

完整流程：

1. 描述 — 告訴 Claude Code 你的頁面要長什麼樣
2. 預覽 — 用瀏覽器打開檔案，看看效果
3. 調整 — 告訴 Claude Code 要改什麼
4. Deploy — 一行指令，上線
5. 更新 — 同樣的循環，隨時都可以

不需要會寫程式。但說真的 — 你剛剛做的事情就是寫程式。你描述了一個結構。你反覆調整它。你把它部署上線。你跟網頁開發者現在唯一的差別，只是你用中文而不是 HTML。

這不是次等版的開發流程。這就是開發流程，用了一個更好的介面。