技能概述
Web Prototype — Editorial Minimalism 係一個編輯極簡風格嘅網頁原型技能，形似 Notion/Linear 營銷網站或高端文檔界面。適用於簡報要求「clean」、「editorial」、「premium SaaS」、「documentation」或「knowledge product」嘅場景。
設計來源：Leonxlnx/taste-skill 嘅 minimalist-skill 同 taste-skill 中嘅空間節奏規則。
觸發關鍵字
- clean、editorial、premium SaaS、documentation、knowledge product
- 極簡、編輯風、高端 SaaS、文檔網站
- editorial minimalism、Notion-style、Linear-style
什麼時候用
- 需要高端、克制、有質感嘅品牌形象
- SaaS 產品營銷頁面、文檔中心、知識產品展示
- 用戶要求「clean 啲」、「有質感」、「像 Linear 嗰種」
使用方法
自然語言觸發
做一個 editorial 風格嘅 landing page
用 minimalist 技能做 SaaS 頁面
Linear 風格嘅 prototype
設計規則
畫布： 暖色米白（#FBFBFA 或 #F7F6F3），絕唔可以用純白 #FFFFFF。
前景色： 非黑色 #111111，次要文字 #787774，絕唔可以用 #000000。
邊框： 1px solid #EAEAEA，陰影唔超過 0 1px 2px rgba(0,0,0,0.04)。
字體配對： 展示襯線（Instrument Serif / Newsreader / Lyon）+ 正文無襯線（Geist / Switzer / SF Pro）+ 元數據等寬（Geist Mono / JetBrains Mono）。
展示字距： letter-spacing: -0.025em，行高 1.05。
色塊： 柔和色調（#FDEBEC、#E1F3FE、#EDF3EC、#FBF3DB）僅用於標籤/徽章，唔可以做區塊背景。
容器： border-radius: 8–12px，唔可以用藥丸形或 rounded-full 卡片。
區塊間距： py-24 起，hero 用 py-32。
禁止事項
- Inter、Roboto、Open Sans（使用 Geist / Switzer / SF Pro）。
- 通用 Lucide 細線圖標（使用 Phosphor Bold 或 Radix）。
- 漸變、霓虹、毛玻璃（除 navbar 嘅微妙模糊）。
shadow-sm以上嘅陰影。- 通用佔位名稱（John Doe / Acme / Lorem）。
- AI 文案陳詞濫調：「Elevate」、「Seamless」、「Unleash」、「Next-Gen」。
- 純黑
#000000。 - 深色圖片上居中 Hero H1。
必需組件
| 組件 | 說明 |
|---|---|
| 導航欄 | 粘性藥丸形（半透明米白，backdrop-blur-md，髮線邊框） |
| 非對稱 Hero | 左對齊襯線展示字，上方有 eyebrow 標籤，lede 段落 max-w-[52ch] |
| Bento 功能網格 | 不等高行 + 可見 1px 分割線 —— 絕唔可以係 3 個相同卡片 |
| 對比區塊 | 僅用 border-t 分隔嘅「what it isn't」區塊 |
| 註冊/價格帶 | 單一強調色 CTA |
| Footer | 等寬字體元數據，上方一條髮線 |
動畫（克制）
- 滾動進入：
translateY(12px) → 0+opacity 0 → 1，600ms cubic-bezier(0.16, 1, 0.3, 1)，僅用IntersectionObserver。 - 卡片懸停：
box-shadow從0 0 0到0 2px 8px rgba(0,0,0,0.04)，200ms。 - 列表錯開：
--index * 80ms。 - 僅動畫化
transform同opacity。
實際例子
用戶：「做一個 editorial 風格嘅 AI 工具 landing page。」
生成結果：
- Hero：左側 Instrument Serif 展示字「Intelligence, Refined.」，右側留白
- Bento 網格：3 個功能卡片，不等高，1px 分割線
- 對比區塊：「What it isn't — not another AI wrapper」
- Footer：等寬字體元數據