用 AI 做 Landing Page：1 小時內完成的實測流程

快速摘要

這篇是飛飛實際用 AI 工具在 1 小時內完成一個 Landing Page 的完整紀錄。從工具選擇、Prompt 策略、設計微調到最終部署，每一步都記錄下來，包括踩過的坑和最後的成品程式碼。

為什麼用 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 會生成 React/Next.js 元件，適合要整合進現有 Next.js 專案的情境。

這次飛飛選用 Claude + Cloudflare Pages 的組合，因為可控性最高，而且完全免費。

為什麼選 Cloudflare Pages：

• 免費方案就夠用（每月 500 次建構、無限流量）
• 自動 SSL、全球 CDN
• 從 GitHub 自動部署，推 code 就上線
• 可以設定自訂網域
• 提供免費的 Web Analytics（不像 Google Analytics 會拖慢網頁速度）

完整流程（計時紀錄）

以下是實際計時的完整流程。總耗時 60 分鐘。

第 1 步：需求定義（5 分鐘）

在開始之前，先寫清楚 Landing Page 的目標。這一步很多人會跳過，但它直接影響 AI 輸出的品質。

這次的需求：

• 目標受眾：對 AI 有興趣但還沒開始用的上班族
• 主要 CTA：加入 LINE 社群
• 內容區塊：Hero → 三大特色 → 學習路線 → 社群 CTA → Footer
• 風格：專業、簡潔、暖色調
• 技術要求：純 HTML/CSS/JS 單頁、響應式、支援深淺色模式
• 安全要求：不引用外部 CDN、不用 inline event handler

把這些寫在一個文字檔裡，等一下直接貼進 Prompt。

第 2 步：初版生成（10 分鐘）

把需求整理成一個結構化的 Prompt 給 Claude。關鍵是給出具體的結構和設計規範，而不只是說「幫我做一個 Landing Page」。

實際使用的 Prompt：

你是一位資深前端設計師兼工程師。請幫我製作一個 Landing Page 的完整 HTML 檔案。

目標受眾：對 AI 有興趣但還沒開始用的台灣上班族
主要 CTA：加入 LINE 社群（連結：https://example.com/line）

頁面結構：

1. Hero Section：大標題 + 副標題 + CTA 按鈕
2. 三大特色區塊：用卡片式排版，每張卡片有 icon + 標題 + 說明
3. 學習路線：用時間軸或步驟式排版，展示從入門到進階的路線
4. 社群 CTA：強調加入社群的好處，附上 CTA 按鈕
5. Footer：版權資訊 + 聯絡方式

設計規範：

- 色彩系統：主色 #6C5CE7，輔色 #00B894，背景 #FAFAFA，文字 #2D3436
- 字型：Noto Sans TC
- 間距系統：以 8px 為基數（8, 16, 24, 32, 48, 64, 96）
- 圓角：按鈕 8px，卡片 12px
- 支援深色模式（用 prefers-color-scheme）

技術要求：

- 純 HTML + CSS + JS，不要用任何框架
- 所有樣式寫在 <style> 裡，不要外部 CSS 檔
- 響應式設計，breakpoint 768px
- 不要引用任何外部 CDN 或第三方資源
- 不要用 inline event handler（onclick 等）
- 用 CSS 變數管理色彩和間距
- 所有按鈕和連結要有 hover 效果和 focus 狀態

語言：繁體中文

Claude 會生成一個完整的 HTML 檔案，通常 300-500 行。把它存成 index.html。

這個 Prompt 的幾個重點：

角色設定很重要。告訴 AI 它是「資深前端設計師兼工程師」，產出的品質會比沒有角色設定好很多，特別是在排版細節和可及性（accessibility）方面。

間距系統要明確指定。如果不指定，AI 會用各種隨機的數值（37px、53px），後面微調會很痛苦。用 8px 基數系統可以讓整體排版更協調。

安全要求要提前寫。如果等到生成完才回去檢查安全問題，來回修改的時間反而更久。

第 3 步：內容填充（15 分鐘）

AI 生成的初版通常用 placeholder 文字（Lorem ipsum 或「這裡放說明文字」）。這步要把真實的文案、數據、CTA 連結填入。

需要替換的內容：

• Hero 大標題和副標題
• 三大特色的標題和說明文字
• 學習路線的每個步驟說明
• CTA 按鈕的連結（LINE 社群網址）
• Footer 的版權文字和聯絡方式
• 所有的 alt text（圖片替代文字）

文案的幾個原則：

大標題要在 3 秒內讓訪客知道這是什麼。「用白話理解 AI，用實作把 AI 用起來」比「歡迎來到我們的網站」好太多。

CTA 按鈕文字要具體。「免費加入 LINE 社群」比「了解更多」有更高的點擊率。

特色說明用「你 + 動詞」句式。「你可以跟著教學動手做」比「提供手把手教學」更有代入感。

如果你自己寫文案有困難，可以再用一次 AI。把你的核心訊息告訴它，請它用不同的角度產生 3-5 個版本，你挑一個最順的。

第 4 步：設計微調（15 分鐘）

這是最花時間的步驟。AI 的「審美」和你的品牌不一定一致，而且有些細節 AI 不太會處理好。

常見問題和修正方式：

間距不均。AI 喜歡用隨機的 px 值。解決方式是用 CSS 變數統一管理：

:root {
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
}

然後把所有 padding 和 margin 的值替換成這些變數。用瀏覽器的開發者工具（F12）逐一檢查每個區塊的間距，確認視覺上是協調的。

色彩對比不足。特別是淺色文字在淺色背景上。可以用瀏覽器開發者工具的 Accessibility 面板檢查，或是搜尋 WCAG Contrast Checker 線上工具。最低標準是 AA 等級（對比度 4.5:1）。

手機版排版跑掉。AI 生成的響應式設計通常「大致可用」，但細節不行。常見問題：

• 圖片超出螢幕寬度。加 max-width: 100% 和 height: auto
• 水平捲軸。檢查是否有固定寬度的元素沒有在手機版改成百分比
• 按鈕太小。手機上按鈕的最小觸控區域建議是 44x44px
• 文字太小。中文內文在手機上建議至少 16px

字型大小建議。中文和英文的字型大小需求不同。英文 14px 還可以讀，中文 14px 就太小了：

深色模式的調整。如果你在 Prompt 中指定了深色模式，AI 通常會用 prefers-color-scheme: dark 來處理。但有幾個容易被忽略的地方：

• 深色背景上的陰影需要調亮或移除
• 卡片的邊框顏色需要調整
• 圖片如果有白色背景，在深色模式下會很突兀
• 連結的顏色在深色背景上可能對比度不夠

第 5 步：安全檢查（10 分鐘）

上線前的安全檢查——這是大多數 AI 做網站教學不會提到的步驟。AI 生成的程式碼不一定安全，上線前一定要檢查。

檢查 1：外部資源引用。在 HTML 裡搜尋 http 和 src="，確認沒有引用外部的 CDN、字型、圖片。每一個外部請求都是潛在的隱私風險（第三方可以追蹤你的訪客）和效能瓶頸。

# 快速檢查外部引用
grep -n 'http' index.html | grep -v 'https://你的網域'
grep -n 'src=' index.html
grep -n 'href=' index.html | grep -v '#'

如果 AI 引用了 Google Fonts CDN，你可以下載字型檔案到本地，改用 @font-face 載入。或者直接用系統字型：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;

檢查 2：JavaScript 安全。搜尋這些危險的寫法：

grep -n 'eval\|innerHTML\|document.write\|onclick\|onerror' index.html

innerHTML 如果用在使用者輸入上，會有 XSS 風險。如果你的 Landing Page 有表單，表單的值不要用 innerHTML 顯示，改用 textContent。

onclick 等 inline event handler 違反 CSP 的最佳實踐。改用 addEventListener。

檢查 3：meta tag。確認沒有洩漏開發環境的資訊：

<!-- 該有的 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="你的頁面描述">
<meta property="og:title" content="你的標題">
<meta property="og:description" content="你的描述">
<meta property="og:type" content="website">

<!-- 不該有的 -->
<meta name="generator" content="...">  <!-- 不要暴露使用的工具 -->

檢查 4：表單安全。如果你的 Landing Page 有表單（例如 email 訂閱）：

• 前端要做輸入驗證（email 格式、長度限制）
• 後端 API 也要做驗證（不要只靠前端）
• 加上 rate limiting 防止濫用
• 考慮加入 reCAPTCHA 或 Turnstile 防機器人

檢查 5：Cloudflare Pages 的安全標頭。在專案根目錄建立 _headers 檔案：

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; font-src 'self'

這些標頭會告訴瀏覽器：

• 不允許被嵌入 iframe（防止點擊劫持）
• 不允許 MIME type 猜測（防止某些攻擊）
• 限制 Referrer 資訊的傳送
• 禁用不需要的瀏覽器功能（攝影機、麥克風、定位）
• CSP 限制可載入的資源來源

第 6 步：部署上線（5 分鐘）

用 Cloudflare Pages 部署的完整步驟：

1. 在本地建立專案資料夾，把 index.html 和 _headers 放進去

mkdir my-landing-page
cd my-landing-page
# 把 index.html 和 _headers 放到這個資料夾

1. 初始化 Git 並推到 GitHub

git init
git add .
git commit -m "initial landing page"
git remote add origin https://github.com/你的帳號/my-landing-page.git
git push -u origin main

1. 到 Cloudflare Dashboard → Pages → Create a project → Connect to Git

2. 選擇你的 GitHub repository

3. Build settings 可以留空（純靜態 HTML 不需要建構指令）

4. 點 Save and Deploy

部署完成後，Cloudflare 會給你一個 xxx.pages.dev 的網址。

1. 設定自訂網域（選擇性）：Pages → Custom domains → 輸入你的網域 → 按照指示設定 DNS

整個部署過程大約 2-3 分鐘。之後每次你 push 到 GitHub，Cloudflare Pages 都會自動重新部署。

Prompt 迭代技巧

第一次生成的結果通常不會完美。以下是幾個常用的迭代 Prompt：

調整特定區塊：

請調整 Hero Section：

- 大標題字型加大到 56px
- 副標題和大標題之間的間距從 16px 改成 24px
- CTA 按鈕改成圓角膠囊形狀（border-radius: 999px）
- 按鈕 hover 時往上移 2px 加陰影

修正手機版：

手機版（768px 以下）有幾個問題要修：

1. 三張特色卡片要改成垂直排列（一行一張）
2. Hero 的標題太大，手機版改成 32px
3. 按鈕要改成 100% 寬度
4. 所有左右 padding 統一改成 20px

加入動畫效果：

幫這個頁面加入滾動動畫：

- 每個 section 在滾動進入視窗時淡入（opacity 0 → 1）
- 動畫持續 0.6 秒，easing 用 ease-out
- 用 Intersection Observer API 實作，不要用外部套件
- 第一個 section（Hero）不需要動畫，直接顯示

每次迭代只改一個部分，不要一次要求改很多東西。AI 在同時處理太多修改時，容易遺漏或搞混。

常見的踩坑紀錄

以下是飛飛在這次實測中遇到的問題：

AI 生成了 Google Fonts 的 CDN 連結。即使在 Prompt 中寫了「不要外部 CDN」，AI 還是在 <head> 裡塞了一行 <link href="https://fonts.googleapis.com/...">。每次生成完都要手動檢查。

深色模式的圖片背景。AI 用了一個有白色背景的 SVG icon。在淺色模式下看不出來，切到深色模式就變成白色方塊。解決方式是把 SVG 的填充色改成 currentColor，讓它跟隨文字顏色。

手機版的 padding 不一致。桌面版的 section padding 是 96px，手機版 AI 忘了改，結果上下空白太多。在 @media (max-width: 768px) 裡統一改成 48px。

按鈕的 focus 狀態。AI 有時候會用 outline: none 去掉按鈕的 focus 外框。這會影響鍵盤使用者的操作體驗。正確做法是自訂 focus 樣式，而不是移除：

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

CTA 連結沒有 rel="noopener"。如果 CTA 連結會開新分頁（target="_blank"），一定要加上 rel="noopener noreferrer"，否則目標頁面可以透過 window.opener 存取你的頁面。

成果與反思

1 小時內完成的 Landing Page，成果達到什麼水準？

• 視覺：80-90 分，比大多數 WordPress 模板好看
• 效能：Lighthouse 95+（因為是純靜態 HTML）
• SEO：基本的 meta tag 和結構化資料都有
• 安全：經過檢查清單確認，沒有明顯漏洞

這個流程最適合：快速測試市場反應（MVP）、活動頁面、個人品牌頁面、產品預告頁、內部工具的說明頁。

不適合：需要後端功能的應用（會員系統、金流）、電商網站（商品管理、購物車）、需要 CMS 的內容網站（部落格、新聞）。

如果你的 Landing Page 需要表單提交，可以搭配 Cloudflare Workers 或 Google Apps Script 做簡單的後端處理，不需要架伺服器。

延伸閱讀

如果你想更深入了解相關概念：

• Vibe Coding 是什麼？——用 AI 協助寫程式的完整概念介紹
• Prompt 是什麼？——了解怎麼寫出好的 AI 指令
• Prompt Engineering 是什麼？——進階的 Prompt 技巧
• Claude 是什麼？——這次使用的主要 AI 工具
• Claude Code 是什麼？——如果你想用終端機操作 AI 寫程式
• Prompt Injection 是什麼？——為什麼 AI 生成的程式碼需要安全檢查

知識檢測

讀完文章後，測試一下你對這個主題的理解。

常見問題

參考資料

• Cloudflare Pages Documentation — Cloudflare Pages 官方文件
• WCAG 2.1 Contrast Requirements — WCAG 色彩對比度標準
• Content Security Policy (CSP) - MDN — CSP 安全標頭參考
• Anthropic Claude Documentation — Claude 官方文件