為什麼用 AI 做 Landing Page
傳統做一個 Landing Page 需要：設計師出稿（1-3 天）→ 前端工程師切版（1-2 天）→ 來回修改（1-2 天）。最快也要一週。
用 AI 做 Landing Page，整個流程可以壓縮到 1 小時。這不是誇張——飛飛實際測試過，而且成品品質可以直接上線。
但「快」不代表「可以隨便」。AI 生成的程式碼有幾個常見問題需要注意：
- 可能包含不安全的 inline script
- 圖片可能引用外部 CDN（隱私風險）
- 表單可能沒有 CSRF 保護
- 缺少 Content Security Policy
工具選擇
這次實測比較了三種方式：
| 工具 | 速度 | 品質 | 可控性 | 適合誰 |
|---|---|---|---|---|
| Claude + 手動部署 | 最快 | 高 | 最高 | 有基本 HTML 知識的人 |
| Cursor | 快 | 高 | 高 | 開發者 |
| v0 by Vercel | 快 | 中高 | 中 | 想要 React 元件的人 |
這次飛飛選用 Claude + Cloudflare Pages 的組合，因為可控性最高，而且完全免費。
完整流程（計時紀錄）
以下是實際計時的完整流程：
第 1 步：需求定義（5 分鐘）
在開始之前，先寫清楚 Landing Page 的目標：
- 目標受眾：對 AI 有興趣但還沒開始用的上班族
- 主要 CTA：加入 LINE 社群
- 內容區塊：Hero → 三大特色 → 學習路線 → 社群 CTA → Footer
- 風格：專業、簡潔、暖色調
第 2 步：初版生成（10 分鐘）
把需求整理成一個結構化的 Prompt 給 Claude。關鍵是不要只說「幫我做一個 Landing Page」，而是給出具體的結構和設計規範。
第 3 步：內容填充（15 分鐘）
AI 生成的初版通常用 placeholder 文字。這步要把真實的文案、數據、CTA 連結填入。
第 4 步：設計微調（15 分鐘）
調整間距、字型大小、顏色、手機版排版。這是最花時間的步驟，因為 AI 的「審美」和你的品牌不一定一致。
第 5 步：安全檢查（10 分鐘）
上線前的安全檢查清單——這是大多數 AI 做網站教學不會提到的步驟。
第 6 步：部署上線（5 分鐘）
推到 GitHub → Cloudflare Pages 自動部署 → 設定自訂網域 → 完成。
Prompt 策略
讓 AI 生成好的 Landing Page，Prompt 的結構很重要：
- 角色設定：告訴 AI 它是一個資深前端設計師
- 設計規範：指定色彩、字型、間距系統
- 結構描述：列出每個 section 的目的和內容
- 技術要求：純 HTML/CSS（不要框架）、響應式、深淺色模式
- 安全要求：不要外部 CDN、不要 inline event handler
設計調整
AI 生成的設計最常見的問題：
- 間距不均：AI 喜歡用隨機的 px 值，需要統一成 8px 為基數的系統
- 色彩對比不足：特別是淺色文字在淺色背景上，需要用工具檢查 WCAG 對比度
- 手機版排版：AI 有時會忘記處理手機上的 overflow
- 字型大小：中文內文建議 16-18px，AI 有時會生成太小的字
部署上線
推薦的免費部署方式：
| 平台 | 費用 | SSL | 自訂網域 | CDN |
|---|---|---|---|---|
| Cloudflare Pages | 免費 | 自動 | 支援 | 全球 |
| GitHub Pages | 免費 | 自動 | 支援 | 有限 |
| Vercel | 免費方案 | 自動 | 支援 | 全球 |
| Netlify | 免費方案 | 自動 | 支援 | 全球 |
上線前安全檢查
這是最重要的步驟。AI 生成的網站在上線前必須檢查：
- 檢查所有外部連結：確認沒有引用可疑的 CDN 或第三方資源
- 檢查 meta tag：確認沒有洩漏開發環境資訊
- 檢查表單：如果有表單，確認有 CSRF 保護和輸入驗證
- 檢查 JavaScript：確認沒有 eval()、innerHTML 等不安全的寫法
- 加入 CSP header：限制可執行的腳本來源
- 測試 HTTPS：確認 SSL 正確設定
成果與反思
1 小時內完成的 Landing Page，成果達到什麼水準？
- 視覺：80-90 分，比大多數 WordPress 模板好看
- 效能：Lighthouse 95+（因為是純靜態 HTML）
- SEO：基本的 meta tag 和結構化資料都有
- 安全：經過檢查清單確認，沒有明顯漏洞
這個流程最適合：快速測試市場反應、活動頁面、個人品牌頁面。不適合：需要後端功能的應用、電商網站、需要長期維護的產品。
常見問題
用 AI 做的 Landing Page 品質夠好嗎？
視覺品質可以達到 80-90 分，但細節（間距、字型、動畫）通常需要人工微調。對於 MVP 或測試市場反應，品質完全足夠。
需要會寫程式才能用 AI 做網站嗎？
不需要。用 Claude 或 Cursor 等工具，只要能描述你要的畫面，AI 就能生成 HTML/CSS/JS。但基本的 HTML 知識會幫助你更精準地調整。
做出來的網站 SEO 好嗎？
AI 生成的 HTML 通常結構正確，但 meta tag、Open Graph、結構化資料需要你自己檢查和補充。本文會教你怎麼做。