Glassmorphism 登陸頁面技能
產生一款採用玻璃擬態風格的單檔登陸頁面，以 Tailwind 工具類別建構。整體視覺效果基於一個原則：模糊只有在色彩豐富的背景襯托下才可見 — 每一片玻璃窗格都浮在漸層背景之上，絕不放在純白背景上。
玻璃配方
一個共享的窗格配方，應用於每個表面：
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
分層規則：
- 頁面背景是鮮明的漸層（兩到三種色相）。窗格是唯一疊在其上的半透明圖層。
- 一種強調色驅動漸層和主要操作；其餘保持中性。
- 玻璃上的文字：標題使用 90-100% 不透明度的白色，內文使用 60-70% 不透明度；切勿在明亮的玻璃窗格上使用低對比度的灰色。
- 為每個窗格添加 1 像素的
border-white/20邊框 — 這能讓玻璃讀起來像是一張實體薄片，而非模糊的矩形。 - 大膽地使用圓角（
rounded-2xl/rounded-3xl）；玻璃應呈現柔和感，而非尖銳感。
配色變體
以下列四種變體作為可選套件輸出；範例將其呈現為一行主題色票，可即時切換漸層背景與強調色。
| 變體 | 漸層背景 | 強調色 |
|---|---|---|
| aurora | 紫羅蘭 → 粉紅 → 琥珀 | #7C3AED |
| ocean | 天空藍 → 青色 → 靛藍 | #0EA5E9 |
| ember | 玫瑰紅 → 橙 → 黃 | #F43F5E |
| forest | 翡翠綠 → 湖水綠 → 萊姆綠 | #10B981 |
工作流程
- 閱讀當前的 DESIGN.md（已嵌入上方）。若其中定義了色彩與字型，則將這些權杖用於文字與主要操作；玻璃配方與漸層則屬於此風格本身的貢獻。
- 根據需求命名產品與承諾。僅使用真實文案。
- 佈局： 黏性玻璃導覽列、英雄區塊（一個 H1 + 一個段落 + 位於漸層之上的 CTA）、主題變體列、三欄式玻璃功能卡片網格、一個玻璃見證區塊，以及結尾的 CTA。
- 維持品質標準： 一個 H1；主要 CTA 使用強調色；玻璃上的內文保持 >= 4.5:1 的對比度；焦點環在透光表面上可見；版面在螢幕寬度低於 768px 時收縮為單欄。
- 輸出一個自足式的
index.html。 原型階段透過 Play CDN 載入 Tailwind；正式生產版本應改為編譯 Tailwind。
反模式
- 玻璃窗格放在平坦、近乎白色的背景上（模糊效果會消失）。
- 螢幕上同時出現超過兩種強調色。
- 對文字套用模糊效果，或將玻璃層層堆疊直到對比度消失。
- 磨砂面板使用尖銳的直角。