SaaS 登陸頁面技能
產出一份單一檔案的 SaaS 登陸頁面，用來銷售一個產品與一個核心想法。
工作流程
- 讀取上層的 DESIGN.md（已注入於上方）。英雄區塊、卡片與行動呼籲都必須從其設計代碼中提取顏色、字體、間距與圓角。不要自行發明數值——只使用
var(--token)。 - 命名產品與承諾。 根據需求摘要，提取具體的產品名稱、一句核心承諾以及單一主要行動（開始試用 / 預約演示 / 立即開始）。撰寫真實文案——不要使用「功能一 / 你的公司名稱」這類佔位文字。
- 依照以下順序安排區段：
- 黏性導覽列：左側字標，4-5 個連結，右側主要行動呼籲按鈕。
- 英雄區塊：一個 H1（最多約 8 個字）、一段輔助段落、兩個按鈕（主要 + 次要），以及一個帶外框的產品視覺佔位。
- 客戶標誌條：5-6 個客戶名稱，淡色處理，均勻間隔。
- 功能網格：6 張卡片，每張包含一個短標題（<=5 個字）與 1-2 句利益說明——不是規格列表。
- 推薦證言：一則引述，附姓名、職稱、公司。
- 價格預覽：2-3 張方案卡片，價格使用需求摘要中的貨幣，功能項目符號（每張卡片 <=5 項），其中一個方案需標示為精選。
- 結尾行動呼籲區塊 + 簡潔頁尾（產品 / 公司 / 法律 欄位）。
- 維持工藝水準：
- 頁面上只有一個 H1；每個區段使用 H2；透過字級大小而非顏色來建立層級。
- 主要色僅用於行動元素——絕不用於裝飾。
- 區段節奏使用間距標記（
--section-y-*或 space tokens）；交替使用表面色與背景色區塊以營造呼吸感。 - 每個可互動元素都必須有可見的焦點狀態；按鈕高度 >=44px；在區塊背景上，淡色文字的對比度至少需達 4.5:1。
- 響應式設計：小於 768px 時為單欄，導覽列簡化為簡單的堆疊或無漢堡選單的連結行。
- 輸出一個自包含的
index.html——嵌入<style>，無外部請求，無 JavaScript（除非需求摘要要求）。
反模式
- 在英雄區塊後方使用預設漸層搭配不易閱讀的重疊文字。
- 六個等大的功能區塊都號稱「強大」。
- 每個畫面使用超過一種強調色；紅色/赭色保留給錯誤訊息。
- Lorem ipsum、「解鎖...的力量」、「革新...」等空泛用語。