技能概述
Waitlist Page 係一個預發布頁面技能，產生一個專注、誠懇嘅入口：品牌識別、你做緊嘅嘢、一條清晰嘅加入早期名單路徑。無人為稀缺性、無假倒計時、無膨脹策略 —— 只係一個乾淨、移動優先嘅載體，用於真正嘅興趣。
預發布頁面係你同未來用戶嘅第一次握手。
觸發關鍵字
- waitlist page、coming soon page、pre-launch landing page
- email capture page、launch page
- 預發布頁面、等候名單
什麼時候用
- 產品發佈、beta 註冊
- 早期訪問計劃、獨立項目
- 用戶要求「做一個 coming soon 頁面」、「waitlist landing page」
使用方法
自然語言觸發
做一個 waitlist page
coming soon landing page
email capture 頁面
工作流程
1. 加載硬化模板
讀取 assets/template.html，複製到 index.html 作為基礎。唔好從頭寫 HTML。
2. Token 替換（帶驗證同轉義）
| Token | 說明 | 驗證 |
|---|---|---|
{{PRODUCT_NAME}} / {{TAGLINE}} |
HTML 轉義 <、>、&、"、' |
文本轉義 |
{{LOGO_MARK}} |
文本首字母 HTML 轉義，或嚴格 sanitizied SVG | SVG 白名單過濾 |
| 顏色表達式 | 嚴格遵循 #hex、rgb/rgba、hsl、oklch 或 color-mix() |
拒絕 ;、{}、<、> 等 |
| 字體 URL | 空格編碼為 + |
URL 格式驗證 |
3. 響應式布局
- 375px：表單單列，logo 縮到 40px
- 768px：舒適雙列
- 1440px+：居中布局，寬敞留白
P0 質量門（必過）
- 單一 CTA：email 表單係唯一交互元素
- Logo 固定左上角，匹配 DESIGN.md 強調色
- 顏色一致性：所有顏色來自 DESIGN.md，唯一例外
#2D6A4F（success） - 無反模式：無倒計時、無假社交證明、無 emoji、無 lorem ipsum
- 內容完整性：標題同文案直接關聯
product_name同tagline - 移動端適配：375px 無水平滾動
- 字體紀律：僅 display + body 兩種字體（2-font rule）
- 表單結構：兩個字段（名字可選，email 必填），
checkValidity()守衛
P1 質量門（建議通過）
- Hero 區域視覺突出
- Email 提交按鈕有 hover 同 active 狀態
- 表單驗證提供清晰反饋
- 所有交互元素有可見焦點樣式
- 鍵盤：Tab 到每個字段，Enter 提交
- WCAG AA 對比度：正文 ≥4.5:1，按鈕標籤 ≥4.5:1
- Logo alt/aria-label 存在；ticker 有
aria-hidden="true"
裝飾約束
- 下層區域增強而唔分散注意力。低透明度、微妙筆觸、柔和動畫。
- 梯度唔超過視口高度嘅 20%。
- Coil、stripe、grid 或 ticker 全部使用 DESIGN.md 顏色。
實際例子
用戶：「Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action.」
生成結果：
- 單一 HTML 文件，CSS inline，SVG 圖形
- Logo 左上角固定，品牌色
- Email 表單（名字可選，email 必填）
- 移動端友好，無水平滾動