Landing Page Builder
將簡短簡介轉換成快速、響應式、自包含的登陸頁面，準備好部署在 GitHub Pages、Netlify 或任何靜態主機上。
1. 收集簡介
在開始撰寫之前，請確保有這些資訊。僅在一個訊息中詢問缺少的部分。
| 欄位 | 範例 |
|---|---|
| 產品/方案 | "LearnMizo – 線上學習米佐語" |
| 目標受眾 | "希望孩子會說米佐語的僑民父母" |
| 訪客的主要成果 | "30 天內能進行簡單對話" |
| 主要行動呼籲（CTA） | "開始免費課程" + 目標網址 |
| 您擁有的證明 | 真實數字、真實引述、標誌（或"尚無"） |
| 品牌 | 顏色、字體、語氣（或"幫我選擇"） |
如果使用者說「直接建立吧」，就做出合理的假設，並在回覆頂部列出這些假設。
2. 先撰寫文案（在任何 HTML 之前）
遵循 references/page-structure.md 中的結構。規則：
- 標題 = 成果，而非功能。 最多約 10 個字。評判標準：受眾會說「是的，這就是我想要的」嗎？
- 副標題用一句話解釋如何達成。
- 一個主要 CTA，重複出現（英雄區、頁面中間、頁尾）。每次用詞相同。
- 好處寫成「你可以…」或「不再…」，而非功能列表。
- 從不虛構證明。 沒有虛假的推薦、使用者數量、評級或標誌。如果缺少證明，使用明確標記的佔位符：
<!-- TODO: add a real customer quote -->，並且在草稿中僅顯示明顯的「您的推薦在此處」。 - 保持閱讀難度簡單（目標為 6–8 年級水準）。
3. 建立頁面
從 assets/template.html 開始，並替換 {{placeholders}}。
技術要求：
- 單一檔案，所有 CSS 行內寫在
<style>中；無任何框架。僅在需要時才使用 JavaScript（例如 FAQ 切換）。 - 行動優先；測試寬度 360px、768px、1280px。
- 語意化 HTML：一個
<h1>，區段使用<h2>，<main>，<footer>。 - 填寫
<title>（≤60 個字元）、meta description（≤155 個字元）、Open Graph 標籤。 - 色彩對比度至少達到 WCAG AA 標準（正文文字 4.5:1）。
- 按鈕高度 ≥ 44px；CTA 在行動裝置上無需滾動即可看到。
- 圖片：使用
loading="lazy"，設定 width/height，提供描述性的alt。
4. 交付前品質檢查
執行 references/checklist.md 並修復任何未通過的項目。然後交付：
- HTML 檔案。
- 三行摘要：選擇的標題、CTA、所做的假設。
- 兩個用於 A/B 測試的備選標題。