技能概述
Web Prototype — Soft Premium 係一個 Apple 級別嘅柔和網頁原型技能。美學特徵係柔軟、有重量感、對嵌套架構極度執著。適用於簡報要求「Apple-like」、「Linear-tier」、「premium consumer」、「calm SaaS」或「$150k agency」完成度嘅場景。
設計來源：Leonxlnx/taste-skill 嘅 soft-skill，包含觸覺微美學、雙邊框架構同運動編排規則。
觸發關鍵字
- Apple-like、Linear-tier、premium consumer、calm SaaS、$150k agency
- 蘋果風格、高端消費級、柔和 SaaS
- soft premium、squircle、雙邊框
什麼時候用
- 需要 Apple 級別嘅高端消費級視覺
- SaaS 產品需要「calm」感嘅設計
- 用戶要求「有 Apple 嗰種感覺」、「高級感」
使用方法
自然語言觸發
做一個 Apple 風格嘅 landing page
用 soft premium 技能做 prototype
Linear-tier 嘅設計
設計規則
畫布： 銀灰色或暖奶油色（#F2F2F0 或 #FDFBF7），唔用純白。
字體配對： 展示字體用 Geist / Plus Jakarta Sans / Cabinet Grotesk（粗重字重），正文用同一家族，元數據用 Geist Mono。
展示字體： clamp(48px, 7vw, 96px)，字距 -0.035em，行高 0.96，字重 700+。
Squircle 圓角： border-radius: 28px–40px（rounded-[2rem] 到 rounded-[2.5rem]）。
雙邊框（必需）： 每個重要卡片都係外殼（p-1.5，髮線邊框，柔和外陰影）包含內核，有自己嘅背景同同心較小半徑（例如外 2rem，內 calc(2rem - 0.375rem)）。
CTA = 按鈕內按鈕： 主 CTA 係完整藥丸形（rounded-full px-6 py-3）；尾隨箭頭在自己嘅圓形包裝內靠右對齊。
環境深度： Hero 背後一個慢漂移徑向網格 blob，opacity ≤ 0.18，pointer-events: none，fixed。
禁止事項
- Inter、Roboto、Helvetica、Open Sans。
- 通用 1px 灰色邊框（使用
border-black/5/ring-1 ring-black/5）。 shadow-md、shadow-lg、硬陰影。僅用擴散陰影（0 20px 40px -15px rgba(0,0,0,0.05)）。- 貼頂粘性導航欄。用浮動玻璃藥丸形（
mt-6 mx-auto w-max rounded-full）。 linear或ease-in-out過渡。用cubic-bezier(0.32, 0.72, 0, 1)或彈性物理。h-screen（使用min-h-[100dvh]）。- 純黑
#000。使用 Zinc-950 / Off-Black。
必需組件
| 組件 | 說明 |
|---|---|
| 浮動藥丸導航欄 | backdrop-blur-2xl + 髮線環 |
| 非對稱 Hero | 巨型粗展示字、eyebrow 標籤、正文 lede max-w-[52ch]、兩個 CTA（主藥丸 + ghost） |
| Bento 網格 | 使用雙邊框模式；至少一個寬卡片同一個高卡片 |
| 功能行 | z 軸級聯或分割圖像模塊 |
| Logo 走馬燈 | 慢速無限平移（-100% / 20s），懸停暫停 |
| 結尾帶 | 柔和反轉表面（深鋅色 / 濃縮咖啡色） |
| Footer | 等寬字體元數據，上方髮線 |
動畫
- 所有過渡：
transition: transform 700ms cubic-bezier(0.32,0.72,0,1)起。 - CTA 懸停：外藥丸
:active縮放到0.98，內圖標圓平移(+1px, -1px)並scale(1.05)。 - 滾動進入：
translateY(16px) blur(8px) opacity(0)→translateY(0) blur(0) opacity(1)。 - 走馬燈：
transform: translateX(-50%)，30s linear無限循環。 - Hero 網格 blob：24s+ 關鍵幀漂移，僅 opacity 或 transform。
實際例子
用戶：「做一個 Apple 風格嘅 consumer SaaS landing page。」
生成結果：
- Hero：巨型 Geist 展示字「Work, simplified.」，兩個 CTA（主藥丸 + ghost）
- Bento 網格：3 個功能卡片，全部雙邊框模式
- Logo 走馬燈：客戶 logo 慢速滾動
- 結尾：深鋅色反轉表面