Premium SaaS Web
本技能編碼了暢銷 SaaS/AI/代理模板中營造高級感的秘訣。它源自於深入分析六個參考網站的 CSS 層級（OptimAI、Aigocy、Adon、Davies、Pastily 和一個 AI 圖片生成演示），並測量它們使用的實際數值。這些配方是真正的技術，而非猜測。
檔案佈局。 僅載入任務所需的內容：
directions/<name>/style.md：每個視覺方向一個檔案（Token、字體、標誌性元素、僅該方向使用的技術）。只閱讀你所選的那一個。shared/*.md：每個方向都會用到的技術，按主題劃分。閱讀與你正在建構的區塊相對應的檔案（映射關係見步驟 3）。
核心洞見：高級感 = 可控光線 + 克制 + 動態
廉價頁面和高級頁面通常使用相同的元件（英雄區、logo 條、功能區、定價區、常見問題、CTA）。差別在於四個層次的打磨：
- 光線 — 表面看起來是被照亮，而不是被填滿。發光效果是由模糊形狀雕琢而成；卡片具有左上角光澤；按鈕具有內部高光和內部底部邊緣；邊框是透明度 6–20% 的髮絲線。真實的光線會衰減，所以沒有任何東西是純色的平面區塊。
- 克制 — 只使用一種強調色，且用於 ≤5% 的頁面。文字層級來自同一種顏色的透明度變化（100 / 80 / 60 / 50%），而非多種灰色。最多使用兩種字體（+ 可選的等寬字體用於標籤）。零裝飾，除非具有意義。
- 具有張力的排版 — 展示字型大且字距緊湊（字母間距 −2% 到 −7%），行高大約 1.0–1.2。標題的一半通常會變暗（
opacity .5或較淺的漸層），以便視線先閱讀較強的一半。 - 具有重量的動態 — 平滑滾動（Lenis）、逐詞上升的標題、隨滾動填充的文字、滾動計數器、永不停止的跑馬燈、重疊的卡片。所有動態都使用緩出效果（無線性），沒有反彈，且全都尊重
prefers-reduced-motion。
如果輸出只有元件而沒有這四個層次的打磨，無論有多少區塊，它看起來都會像一個免費的 Bootstrap 主題。
工作流程
1. 閱讀簡報，選擇一個方向
從此表中選擇一個方向，然後閱讀其 directions/<資料夾>/style.md（完整的 Token 集 + 其標誌性技術）。不要閱讀其他方向。
| 方向（資料夾） | 感覺 | 最適合 | 來源 |
|---|---|---|---|
Ember Dark (ember-dark) | 深海軍藍黑、雕琢的橘紅/藍色發光、彩虹邊框 CTA、等寬按鈕標籤 | AI 工具、開發者工具、SaaS 應用 | OptimAI |
Tactile Light (tactile-light) | 鋅白/米白、光澤擬物化按鈕、光澤卡片、一種強烈強調色（紅色）、帶 3D 渲染的框景英雄區 | AI 代理商、B2B SaaS、顧問公司 | Aigocy |
Editorial Mono (editorial-mono) | 純 #111 在 #F0F0F0 上、140px 怪誕字體且字距 −7%、髮絲線網格、滾動填充文字、無陰影 | 代理商、工作室、高級服務 | Adon |
Noir Spotlight (noir-spotlight) | 黑色、一種霓虹強調色、與照片互動的巨大文字、著色器/WebGL 背景、重疊的專案卡片 | 個人品牌、作品集、創意科技 | Davies |
Warm Playful (warm-playful) | 溫暖的米白紙張、近乎黑色的墨水、柔和的綠色→金色、28px 白色卡片、手寫筆記、裝置溢出邊緣、照片支援的定價 | 桌面/選單列應用、工具、獨立及消費者工具、一次性付費軟體 | Pastily |
如果使用者未指定且是 SaaS/AI，預設為 Ember Dark。當產品是原生/桌面/行動工具、獨立開發者或單一創始人工具，或簡報中提到友善、平易近人、溫馨、「非企業感」（即使從未提及「SaaS」）時，切換到 Warm Playful。Ember Dark 會讓一個 9 美元的剪貼簿應用感覺像企業基礎設施。混合使用方向會讓頁面變得混亂。從其他方向借用一種技術是可以的，只要色板和字型保持一致。
用一句話告訴使用者你選擇了哪個方向及其原因，以便他們可以及早重新導向。除非品牌有自己的顏色（使用者指定了一種顏色，或產品已使用一種顏色），否則保留該方向的強調色；「溫馨」或「暮色」等情緒詞不是品牌顏色。對於真正的品牌顏色，請參閱 directions/README.md 中的「更換強調色」。
2. 將頁面規劃為一種節奏，而非列表
高級頁面會交替使用密度和色調。一個有效的典型 SaaS 首頁：
- 英雄區：眉批徽章（一個藥丸形狀的「✦ AI 驅動的代理商」或一個真實的事實如「v1.4 已發布」；僅在使用者提供了真實評分時才顯示頭像堆疊 + 評分）、兩行標題（其中一半變暗）、1–2 行 60% 透明度的副標題、主要 + 次要 CTA，然後是產品本身（瀏覽器框架內的模型或互動式提示框）透過漸層淡出融入到下一個區塊。
- Logo 條：灰階 logo、無限跑馬燈、邊緣遮罩。
- Bento 功能網格：5–7 個大小不一的單元格，每個都有一個用 HTML/CSS 構建的迷你 UI 插圖（工作流程節點、聊天氣泡、切換開關、圖表、色票），而非庫存圖示。
- 滾動填充陳述句：一個大句子，隨滾動從 30% 填充到 100%。填充嚴格逐行進行（每個區塊一個時間軸，行與行之間連續），絕不一次填充多行。請參閱
shared/typography.md。 - 數字：3–4 個統計數據，帶滾動計數器；一個巨大的淡色數字作為裝飾。
- 運作方式 / 分頁標籤 或 堆疊卡片。
- 推薦：僅使用使用者提供的引言，附上頭像 + 姓名 + 角色，可能是垂直跑馬燈卡片。如果沒有，請省略此區塊（或將其替換為信任/隱私條帶或來自製作者的簡短說明）。虛構的評論、評分和使用者數量是虛假的社交證明：它們會誤導買家，且所有者可能不小心將其發佈。
- 定價：3 個方案，中間的方案以強調色邊框/發光效果凸顯，月付/年付切換。
- 常見問題 折疊式選單。
- 最終 CTA，帶有頁面上最強的發光效果，然後是帶有巨大文字標誌的平靜頁尾。
交替使用深色/淺色（或背景-1/背景-2）區塊背景以創造節奏。區塊內距要寬敞：桌面版垂直方向 120–176px。
3. 使用配方建構
配方是可直接複製的 CSS/HTML/JS。你的方向的 style.md 已包含其標誌性技術（例如 Ember 的彩虹邊框、Tactile 的觸覺按鈕和光澤卡片）。對於其他所有內容，請閱讀與你正在建構的內容相匹配的共享檔案：
| 正在建構… | 閱讀 |
|---|---|
| 英雄區光線、發光、點狀/網格/噪點背景、髮絲線網格和欄位指引 | shared/light.md |
| 標題（緊湊字距、變暗的一半、金屬漸層）、滾動填充陳述句（逐行 GSAP，或逐詞搭配彩色關鍵字） | shared/typography.md |
| 英雄區中的產品模型（瀏覽器框架或帶有 OS 視窗裝飾的桌面應用）、螢幕截圖庫、帶迷你 UI 的 Bento 網格 | shared/product-proof.md |
| 玻璃導航、感知區塊的藥丸導航、眉批徽章和頭像堆疊、手寫註解、柔白卡片、卡片聚光燈、跑馬燈、定價（3 方案、照片支援的單一價格，或純文字單一價格卡片）、常見問題、頁尾文字標誌 | shared/components.md |
| 任何具有圖示的知名品牌（整合、Logo 條、軌道、「與…搭配使用」） | shared/logos.md |
GSAP + Lenis 樣板、時間/緩動表、gsap.matchMedia() 減少動畫模式、顯示效果、計數器、堆疊卡片、純 CSS 色調轉變故事堆疊、固定的 UI 晶片牆、固定滾動、懸停、注意事項、原生 CSS 滾動驅動動畫 | shared/motion.md |
| 著色器/WebGL 背景、粒子場、光暈（Three.js，附 CSS 備援和行動裝置過濾） | shared/webgl.md |
一個完整的登陸頁面通常需要所有檔案；一個單一區塊或小型編輯僅需要其對應的列。所有 GSAP 外掛，包含 SplitText，自 3.13 版起均為免費，可從 jsDelivr 載入。
4. 技術預設值
- 使用 Tailwind CDN 的單一 HTML 檔案（或專案現有技術棧 — 如果有則遵循它）。將設計 Token 放在
:root上的 CSS 自訂屬性中，以便一次編輯即可切換色板。 - 來自 Google Fonts 的字型。來自參考資料的經過驗證的搭配：Sora + Inter Tight + IBM Plex Mono（Ember）、Urbanist（Tactile）、像「Inter Tight」/「Schibsted Grotesk」/「Familjen Grotesk」這樣的怪誕字體 + DM Sans（Editorial）、Figtree/「Outfit」（Noir）。
- 圖示：內聯 SVG（Lucide 風格 1.5px 描邊）。永遠不要使用表情符號作為圖示。
- 圖片：如果圖片生成可用，則生成品牌化的 3D 渲染 / 抽象物體；否則使用 CSS/SVG 建構視覺元素（發光、迷你 UI、點狀球體）。僅在人物/肖像時使用
https://images.unsplash.com/...的照片。英雄區中若沒有視覺錨點，頁面看起來會不完整。 - 真實的品牌 logo，絕不使用字母佔位符。 每當頁面提到現有公司、產品或 SaaS（整合晶片、logo 弧/條、「與…搭配使用」條、推薦、比較表）並且在其旁邊顯示圖示時，請使用該品牌的實際 logo。帶有首字母的彩色方塊（「F」代表 Figma，「S」代表 Slack）會顯得廉價模板化並破壞信任。詳細資訊和來源請參閱
shared/logos.md。如果無法找到真實 logo，則僅以純文字形式顯示名稱，不帶任何圖示；虛假的圖示比沒有更糟。 - 行動裝置：在 <768px 解析度下，所有內容摺疊為一欄；展示字型使用
clamp()縮放；發光效果縮小（較大的模糊在手機上耗能）；在觸控裝置上停用游標效果。
5. 交付前的自我審查
如果可以，在瀏覽器中開啟頁面並截取 1440px 和 390px 的螢幕截圖。對照此清單進行檢查。這些是區分「AI 生成」和「暢銷產品」的關鍵：
- 僅一種強調色（加上中性色）。漸層保持在該色系內，除非是刻意的彩虹邊框。
- 展示標題具有負字母間距和變暗的一半或漸層。
- 正文/次要文字使用同一種顏色的透明度層級，且對比度仍然通過（正文 ≥4.5:1）。
- 英雄區展示產品（模型、提示框、UI），而不僅僅是漸層上的文字。
- 每個深色區塊至少有一個雕琢過的光源；沒有純色的平坦矩形。
- 邊框是髮絲線（1px，透明度 6–20%），圓角半徑一致（選擇一個尺度：8/12/20/28/999）。
- 按鈕具有改變光線的懸停狀態（發光收緊、光澤移動、箭頭移動 2–4px），而不僅僅是顏色。
- 動畫：英雄區文字顯示、觸發滾動的淡入效果（帶有交錯延遲）、至少一個時間軸效果、跑馬燈。所有效果在
prefers-reduced-motion下停用（透過gsap.matchMedia()），持續時間取自shared/motion.md中的時間表，沒有任何動畫作用於寬度/高度/上/左位置。 - 如果使用 WebGL：下方使用 CSS 發光作為備援，限制 DPR，僅在可見時渲染，在行動裝置/低核心裝置上跳過，文字保留在 HTML 中。
- 頁面上提到的每個真實品牌都有其實際 logo（或沒有圖示）。沒有首字母方塊。
- 如果是 Warm Playful：英雄區裝置是一個用 HTML 建構的逼真 OS（選單列、 Dock、應用程式選單），從一邊溢出邊緣，且最多有兩條 Caveat 註記；故事卡片以 16px
top的步長固定，並隨卡片改變色調；關鍵字顏色僅出現在單個單詞上，並通過 4.5:1 對比度；強調色仍然是綠色（除非使用者提供了品牌顏色），金色僅出現在 CTA 漸層的結尾；一次性定價是單張白色卡片（如果有照片則使用照片背景，否則為純文字），任何免費試用作為其內的一行文字。 - 沒有 Lorem Ipsum。文案針對產品：具體的數字、聽起來真實的功能。
- 沒有虛構的社交證明：沒有捏造的評分、使用者數量、推薦或新聞媒體 logo。必須假設的產品詳細資訊已列出供使用者確認。
- 在 390px 解析度下沒有任何內容水平溢出。
應避免的事項（「廉價模板」的跡象）
- 按鈕在懸停時移動。嚴格規則，沒有例外。 沒有磁性/游標跟隨按鈕，沒有
translate/scale/rotate作用於按鈕或其標籤/圖示的:hover狀態，沒有滑出的箭頭，沒有懸停時升起的效果。佈局在游標下保持靜止，因此點擊目標永遠不會躲閃。僅使用顏色、亮度、發光、邊框或陰影變化來顯示懸停狀態。（卡片仍然可以升起；按鈕和樣式為按鈕的連結則不行。） - 到處都是紫色到藍色的漸層；多種競爭的強調色。
- 在深色背景上使用像
0 4px 6px rgba(0,0,0,.3)的陰影（陰影在深色上不明顯；改用發光和邊框）。 - 所有內容居中，搭配 3 個圖示 + 標題 + 文字的相同卡片網格。
- 玻璃態效果，但玻璃後面沒有任何東西可供模糊。
- 虛假的品牌圖示：一個帶有字母的彩色圓角方形，用來代表 Figma、Slack、GitHub 等。
- 有彈性的/易曲的緩動、持續時間 >1 秒的淡入效果、所有元素同時動畫。
- 正文使用漸層文字；每個視口超過一個漸層文字短語。
- 庫存的「AI 大腦」圖像。改為展示產品或抽象渲染。
- 深色背景上的低對比度正文：保持正文至少 ~70% 白色，使其在發光效果中仍可閱讀。