A
返回 工具
工具2026/05/097 分鐘閱讀

Web Prototype — Soft Premium 技能指南

Apple 級別柔和 Web 原型 — 銀灰/奶油畫布、雙邊框卡片、按鈕內按鈕 CTA、大量 squircle 圓角、彈性動畫、環境漸變網格。

技能概述

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–40pxrounded-[2rem]rounded-[2.5rem])。

雙邊框(必需): 每個重要卡片都係外殼(p-1.5,髮線邊框,柔和外陰影)包含內核,有自己嘅背景同同心較小半徑(例如外 2rem,內 calc(2rem - 0.375rem))。

CTA = 按鈕內按鈕: 主 CTA 係完整藥丸形(rounded-full px-6 py-3);尾隨箭頭在自己嘅圓形包裝內靠右對齊。

環境深度: Hero 背後一個慢漂移徑向網格 blob,opacity ≤ 0.18pointer-events: none,fixed。

禁止事項

  • Inter、Roboto、Helvetica、Open Sans。
  • 通用 1px 灰色邊框(使用 border-black/5 / ring-1 ring-black/5)。
  • shadow-mdshadow-lg、硬陰影。僅用擴散陰影(0 20px 40px -15px rgba(0,0,0,0.05))。
  • 貼頂粘性導航欄。用浮動玻璃藥丸形(mt-6 mx-auto w-max rounded-full)。
  • linearease-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 慢速滾動
  • 結尾:深鋅色反轉表面

相關技能