Waitlist Page 技能
上市前的頁面是你與未來使用者的第一次握手。這項技能打造一個專注且誠實的入口：你的品牌識別、正在打造的產品、以及一條加入早期名單的明確路徑。沒有虛假稀缺性、沒有假倒數計時、沒有誇大手法——只是一個乾淨、行動優先的容器，用來容納真正的興趣。
工作流程
前置：載入強化模板與品牌基礎
- 載入品牌識別 — 讀取
DESIGN.md以取得色彩系統、字體搭配與空間規則。這是你的基礎。一個候補名單頁面能否存活，取決於它與所代表品牌的一致性。如果DESIGN.md遺失，請要求使用者先提供一份再繼續。 - 讀取並複製可重複使用的模板 — 讀取
assets/template.html。這個模板是所有輸出的強化種子。將其複製到index.html作為你的基礎。不要從頭編寫 HTML 或偏離此結構。模板已包含所有必要的佈局、表單結構、裝飾、焦點樣式與無障礙支架。
步驟：帶有驗證與跳脫的 Token 映射
- 從輸入中映射 Token — 對於模板中的每個佔位符（例如
{{PRODUCT_NAME}}、{{BG_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{LOGO_MARK}}），遵循以下替換規則：- 文字 Token（
{{PRODUCT_NAME}}、{{TAGLINE}}）：在插入 HTML 文字節點或屬性值之前，對<、>、&、"、'進行 HTML 跳脫。 - HTML Token（
{{LOGO_MARK}}）：如果使用文字縮寫，預設對其進行 HTML 跳脫。如果使用內聯 SVG，你必須使用允許清單對其進行嚴格消毒：移除<script>標籤、事件處理常式（on*）、<foreignObject>、外部參考（href、xlink:href、url()）以及任何不允許的屬性/元素後再插入。如果 SVG 無法安全消毒，則回退到已跳脫的文字縮寫。切勿直接輸出未經消毒的任意 HTML。確保任何 SVG 在其容器內能乾淨縮放。 - 顏色表達式 Token（
{{BG_EXPRESSION}}、{{FG_EXPRESSION}}、{{ACCENT_EXPRESSION}}、{{DECO_EXPRESSION}}、{{STRIPE_EXPRESSION}}、{{SUCCESS_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{BTN_LABEL_EXPRESSION}}、{{TICKER_BG_EXPRESSION}}、{{TICKER_FG_EXPRESSION}}、{{DECO_STROKE_EXPRESSION}}、{{LOGO_SHADOW_EXPRESSION}}、{{LOGO_FG_EXPRESSION}}）：必須嚴格遵循明確的顏色文法（#hex、rgb/rgba、hsl/hsla、oklch或僅使用區域變數的color-mix()）。硬性拒絕任何包含;、{}、<、>、註解（/*）、@、url(或外部參考的輸入，以防止 CSS 注入。不要包裝在#中或添加額外引號。範例：rgba(196, 169, 154, 0.38)、color-mix(in srgb, var(--fg) 38%, transparent)、#FDE8DF。按原樣插入到:rootCSS 變數中。如果 DESIGN.md 中存在，則從中推導--success；否則僅使用允許的回退值#2D6A4F。 - 字型名稱 Token（
{{DISPLAY_FONT_CSS}}、{{BODY_FONT_CSS}}）：這些是 CSS font-family 值，如果包含空格則已加引號（例如'DM Sans'、Syne）。按原樣插入到--font-display和--font-body宣告中；不要添加額外引號。 - 字型網址 Token（
{{DISPLAY_FONT_URL}}、{{BODY_FONT_URL}}）：空格必須編碼為+以便用於 Google Fonts 網址（例如DM+Sans、IBM+Plex+Serif）。在插入之前驗證網址格式是否正確。
- 文字 Token（
- 驗證 Token 映射規則 — 所有顏色 Token 現在都存在於 CSS 變數中：
--bg={{BG_EXPRESSION}}（例如#FDE8DF）--fg={{FG_EXPRESSION}}（例如#1A1410）--accent={{ACCENT_EXPRESSION}}（品牌徽章）--deco={{DECO_EXPRESSION}}（裝飾主要）--deco-stripe={{STRIPE_EXPRESSION}}（強調條紋）--input-border={{BORDER_EXPRESSION}}（完整 CSS 表達式，含透明度）--success={{SUCCESS_EXPRESSION}}或#2D6A4F回退--btn-label={{BTN_LABEL_EXPRESSION}}（按鈕文字顏色，用於對比）--ticker-bg={{TICKER_BG_EXPRESSION}}（動畫跑馬燈背景）--ticker-fg={{TICKER_FG_EXPRESSION}}（動畫跑馬燈文字）--deco-stroke={{DECO_STROKE_EXPRESSION}}（SVG 筆畫，通常為低飽和度 12–15% 透明度）--logo-shadow={{LOGO_SHADOW_EXPRESSION}}（標誌容器陰影，微妙的前景色調）--logo-fg={{LOGO_FG_EXPRESSION}}（標誌縮寫的對比文字顏色）
- 響應式佈局 — 模板包含行動優先縮放：
- 375px：表單堆疊為單欄，標誌縮小至 40px，裝飾壓縮，無水平滾動。
- 768px：舒適的雙欄呼吸空間。
- 1440px+：置中佈局搭配寬敞空白。
- 驗證所有文字保持可讀，且電子郵件輸入框與按鈕在 375×667 和 390×844 尺寸下完全可見（無裁剪）。
驗證：在輸出前執行強化品質檢查
- 執行品質檢查清單 — 讀取
references/checklist.md。在輸出前驗證每個 P0 關卡：- 恰好一個 CTA（電子郵件表單）
- 無倒數計時器、無虛假社交證明、無表情符號
- 在 375px 寬度下無水平滾動
- 電子郵件輸入框具有
type="email"和required；名字欄位不具有required - 表單未使用
novalidate；JS 使用checkValidity()保護 - 成功訊息具有
role="status"或aria-live="polite" - 所有顏色來自 DESIGN.md 或允許的回退值；無憑空製造的 hex 數值
- 所有使用者文字已進行 HTML 跳脫；顏色 Token 遵循嚴格文法；字型已進行 URL 編碼
- 通過 P0 否則不輸出。 如果任何 P0 關卡失敗，請詢問使用者或修正 Token 映射並重試。
- 驗證 P1 關卡 以確保品質提交（建議）：
- 提交按鈕的懸停與啟動狀態
- 表單驗證附有清晰的回饋
- 跑馬燈動畫尊重
prefers-reduced-motion: reduce - 所有互動元素具有可見的焦點樣式（input:focus 包含
outline） - Tab/Enter 鍵盤支援
- 內文 WCAG AA 對比（≥4.5:1）與按鈕標籤（≥4.5:1）
- 標誌包含 alt/aria-label；跑馬燈具有
aria-hidden="true" - 已設定
<html lang="">
輸出
- 輸出乾淨的 HTML — 單一檔案，CSS 內聯，圖形使用 SVG。為互動元素標記
data-od-id（標題、表單、標誌、跑馬燈、網格等），以便代理能夠無需解析即可自訂。
品質關卡
此技能強制執行一個強化、基於模板的工作流程，以確保合規。你必須遵循此執行路徑；偏離模板將使輸出不合格。
強制模板化執行：
- 讀取
assets/template.html作為你的基礎；不要從頭編寫 HTML。 - 將其複製到
index.html，並僅用經過驗證/跳脫的值替換{{PLACEHOLDER}}Token。 - 在輸出前運行
references/checklist.md中的每個 P0 關卡；如果任何一個失敗，修正並重新驗證。
P0 關卡（必須通過）：
- 單一 CTA：電子郵件表單是唯一的互動元素。無導航、無次要按鈕、無社交連結。
- 標誌位置：固定在左上角，符合 DESIGN.md 強調色，在行動裝置上縮放（50px → 40px）。
- 顏色一致性：每個顏色皆來自 DESIGN.md 調色板。唯一允許的硬編碼例外：
--success的#2D6A4F。 - 無反模式：無倒數計時器、無虛假社交證明、無表情符號圖示、無 lorem ipsum。
- 內容完整性：標題與文案直接與
product_name和tagline輸入相關——無填充內容。 - 行動裝置適配：在 375px 無水平滾動。電子郵件輸入框與提交按鈕在 375×667 和 390×844 尺寸下完全可見（無裁剪）。垂直溢出可滾動，而非隱藏。
- 字體紀律：僅限顯示+正文字體（2 字體規則）。跨區塊大小一致。
- 表單結構：兩個欄位（名字可選、電子郵件必填），
checkValidity()保護，成功訊息帶有role="status"。 - Token 跳脫：所有使用者提供的文字已進行 HTML 跳脫；顏色 Token 遵循嚴格文法且不包含危險字元（
;、{}、<、>、/*、@、url(）；字型名稱已進行 URL 編碼；{{LOGO_MARK}}為已跳脫的文字縮寫或經過嚴格消毒的內聯 SVG（無腳本、無事件處理常式、無 foreignObject、無外部 href）。
P1 關卡（為確保品質提交應通過）：
- 主視覺區域視覺明顯且位於首屏之上。
- 電子郵件提交按鈕具有懸停與啟動狀態。
- 表單驗證提供清晰回饋。
- 頁面在所有行動裝置視口中可滾動（無裁剪）；CTA 無需滾動即可見。
- 跑馬燈動畫在
prefers-reduced-motion: reduce下暫停/移除。 - 所有互動元素具有可見的焦點樣式（outline，而非僅 outline:none）。
- 鍵盤：Tab 可到達每個表單欄位；Enter 可提交。
- WCAG AA 對比：內文 ≥4.5:1，按鈕標籤 ≥4.5:1。
- 標誌包含 alt/aria-label；跑馬燈具有
aria-hidden="true"。 <html lang="">設定為正確的語言代碼。
裝飾節制：
- 下方區域增強效果而不造成干擾。使用透明度、細微筆畫、低調動畫。
- 無跨越多於 20% 視口高度的漸層。
- 螺旋、條紋、網格或跑馬燈均僅使用 DESIGN.md 中的顏色。
輸出
僅在所有 references/checklist.md 中的 P0 關卡通過後才輸出。
將成果物包含在標籤之間輸出：
<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>
在成果物上方寫一行描述；下方不寫任何內容。
輸出後： 如果使用者要求更改，請就地更新 index.html，並在輸出下一個版本之前重新執行 P0 檢查清單關卡。不要在迭代中跳過驗證。