SHELEG 設計
概述
一個頁面感覺起來具有電影感，並非來自於大量的動畫，而是來自一個單一事實來源（測量的捲軸位置）驅動許多廉價、分層、可獨立降級的反應。將捲軸集中到一個儲存中；各圖層每幀讀取它並以自己的語言做出反應。沒有什麼是淡入淡出的 — 事物會重新部署。每個圖層都會降級到一個平靜的靜止狀態。
必要參考 — 針對電影級路徑： 在實作捲軸驅動頁面之前，請閱讀 SHELEG_DESIGN.md — 架構、變形數學、DOM↔WebGL 橋接、建構配方（§11）、檔案對映。
產品 UI 工作不需閱讀此文件；但它唯一需要遵守的規則在此重複：當套件的動畫 token 與 SHELEG 預設值不同時，以套件為準。
在任何動畫之前必須閱讀： 請閱讀 MOTION_DOCTRINE.md。SHELEG_DESIGN.md 說明動畫如何建構；此學說則說明是否要建構它 — 用於在高重複路徑上抑制動畫的頻率表、緩動樹和 ease-in 禁令、持續時間上限、禁止的形式，以及減少動畫的合約。
使用時機
- 登陸/行銷/首頁，其中動態是一個明確目標；與捲軸相關的粒子或 WebGL 背景；與捲軸連結的圖表、步驟流程、導軌、視差效果
- 一個現有的、感覺緊張、卡頓或不同步的捲軸網站
- 需要一個鎖定視覺系統的產品 UI — 儀表板、管理後台、內部/開發工具、token、明/暗模式 — 僅限風格套件，透過
workbench - AI 產品表面：聊天和代理 UI、串流輸出、執行日誌、模型錯誤、生成內容和確認狀態（
AI_PRODUCT_PATTERNS.md） - 以任何方向跨越 Figma 邊界移動視覺系統（
FIGMA_BRIDGE.md）
切勿將電影級動畫層應用於： 產品 UI、文件網站、靜態內容網站 — 或任何視覺系統或文案尚未完成的頁面。產品 UI 僅使用風格套件部分，不包含其他內容。
核心模式 — 五項原則，按順序
- 一個時鐘。 所有動畫源自一個測量的捲軸狀態；沒有圖層自行測量捲軸，因此圖層永遠不會相位偏移。
- 每幀讀取，很少通知。 高消耗的消費者（WebGL/canvas/導軌）直接命令式地讀取儲存，零框架渲染；只有粗略的動作/區段變更會通知框架。
- 保持，然後重新部署。 在一個區段中約 80% 的時間保持一個結構，然後在一個短暫、相位交錯、弧線彎曲的波中變形。禁止淡入淡出。
- 應得的動畫。 僅對隨時間敘述狀態的儀器使用擦洗；懸停/進入動畫保持在 500 毫秒以下，且永遠不會封鎖內容。
- 降級至平靜。 減少動畫/粗略指針/無 WebGL 會折疊成一個靜態、完全可讀的頁面。效果是獎勵，絕非依賴。
風格套件
動態方法論與風格無關；視覺識別來自 styles/ 中的一個風格套件。每個套件檔案以其自己的完整描述開頭 — 此表格用於選擇，而非用來替代閱讀套件內容：
| 套件 | 外觀 | 選擇用於 |
|---|---|---|
instrument-console | 接近黑色的航太控制台，一縷電光藍，單色遙測 | 技術 / 系統 / 基礎設施 · 核心合約 |
editorial-luxury | 奶油色和濃縮咖啡墨水，鼠尾草綠強調色，Fraunces/Newsreader 字型 | 編輯 / 研究 / 高級 B2B · 核心合約 |
workbench | 安靜的明/暗產品 UI，邊框作為層次，單色數據 | 儀表板 / 管理後台 / 內部及開發工具（獨立）· 核心合約 |
briefing-room | 暗色 16:9 簡報，一種 OKLCH 藍色色調，抖色藝術 | 投資人及董事會簡報、情況說明、作為頁面呈現的演講（獨立）· 核心合約 |
atrium | 奶油色日光，一種赤陶色，攝影照片上的凹槽玻璃 | 消費者健康、長壽、健康、高信任度 DTC · 核心合約 |
orchard | 溫暖的燕麥色區塊，鼠尾草綠加上糖果橙，柔軟的 3D 藥丸 | 友善的消費者生技、DTC 健康、套件和補充品 · 核心合約 |
field-notes | 綠色調的紙張，由極細線條劃分，鐵鏽色強調，裁切標記 | 以可審計性為賣點的開源及開發者工具（獨立） |
showroom | 白色畫廊，接近黑色墨水，七層框架陰影 | 產品型公司，其最佳論點是螢幕上的應用程式 |
blueprint | 白色紙張，32px 網格，註冊標記，無圓角 | 以精準度為賣點的基礎設施 — 向量搜尋、儲存、查詢引擎 |
prism | 帶有硬邊的彩虹色洗滌，怪誕字體搭配單色正文 | 開源基礎設施項目的門面，第一步是一個指令 |
maquette | 接近黑色的桌面，奶油色軸測模型，淺水藍色 | 面向架構採購者的企業數據基礎設施 |
cyclorama | 32 秒循環的粉彩場域，打字機襯線字體，橘色填充 | 企業 AI 轉型和應用 AI 顧問公司 |
scoreboard | 溫暖的紙張，墨水原色，僅用於標記的亮橘色，像素數字 | 產品論點是累積數字 — 成長、廣告、SEO |
一個具體化的套件回答了核心套件遺漏的部分問題。 npx sheleg-design-skill --kit <pack> 會產生 src/styles.css，其元件部分是為核心套件拒絕指定的狀態編寫的 CSS — :hover、:focus-visible、:disabled、已選取。它不隨此技能一起提供，因此僅閱讀此套件的代理將自行發明這些狀態。請先取得套件，並將套件與具體化套件之間的任何差異視為其中一個的缺陷，而非選擇。
十三個套件中有六個在核心合約上，這會改變你得到的東西。 標記為核心合約的套件不會指定 ## 元件、## 首頁、## 響應式 或 ## 標誌性元素 — 因此每個元件的狀態、開啟的視口及其行數上限、折疊規則以及頁面被記住的單一元素由你決定，並且你在做出決定時要大聲說出來。其他七個套件則回答了所有這四個問題。這種不對稱性是這個函式庫中最可能讓你發明一個值並相信自己讀到過它的一件事：核心套件確實陳述的內容精確到小數點後兩位，而這種精確性並不能證明它保持沉默的那一半。每個套件在其 Register 上方的 Contract: 行聲明自己的等級。
在設定任何樣式之前完整閱讀所選的套件 — 它提供了調色板、字體、紋理、動畫 token 值、標誌性動機和禁止事項。每個套件在 styles/tokens/<pack>.css 中提供了一個現成的 token 層 — 直接複製該檔案，而不是轉錄表格。對於一個新的風格，請複製 styles/STYLE_PACK_TEMPLATE.md 並保留每個標題 — Register / 調色板 / 字體 / 紋理與表面 / 元件 / 首頁 / 響應式 / 動畫 token / 標誌性動機 / 標誌性元素 / 動畫風格（僅限電影級套件）/ 微互動 / 禁止事項 / 注意事項 — 然後在同一個變更中編寫其 tokens/<pack>.css；切勿臨時發明 token 值。
校準 — 三個旋鈕
一個套件回答了哪個註冊表。它沒有回答多遠。同一個套件的兩個登陸頁面，一個給受監管的保險公司，一個給設計工作室，不會是相同的頁面。三個旋鈕承載了這種差異，並且它們被設定一次，大聲說出來，在任何佈局存在之前。
DESIGN_VARIANCE（設計變異度） 1–10 — 1 是完美對稱，10 是故意不對稱且沒有兩個區塊相同。MOTION_INTENSITY（動畫強度） 1–10 — 1 是靜態，10 是電影級且物理的。VISUAL_DENSITY（視覺密度） 1–10 — 1 是畫廊牆，10 是駕駛艙。
基準線 7 / 5 / 4。 在建構之前陳述這些值並給出一行推理；不要要求使用者編輯檔案，也不要默默地偏離你所宣佈的內容。
從簡報中讀取它們
| 簡報讀起來像是 | 變異度 | 動畫 | 密度 |
|---|---|---|---|
| 極簡、平靜、編輯風格、「像 Linear 一樣安靜」 | 5–6 | 3–4 | 2–3 |
| 高級消費者、品牌導向、「感覺昂貴」 | 7–8 | 5–7 | 3–4 |
| 代理商、作品集、實驗性、獎項誘餌 | 9–10 | 7–9 | 3–4 |
| 登陸/行銷頁面，無進一步信號 | 7 | 5 | 4 |
| 產品 UI：儀表板、管理後台、內部工具 | 4–5 | 2–3 | 6–8 |
| 信任優先：受監管、公共部門、臨床 | 3–4 | 2–3 | 4–5 |
| 簡報投影片 | 5–6 | 1–2 | 3–4 |
| 重新設計，保留現有識別 | 匹配 | 匹配 +1 | 匹配 |
| 重新設計，明確全面翻新 | +2 | +2 | 匹配 |
一個簡報可能符合兩行，並且它們可能相差三倍。「一個安靜的內部管理儀表板」同時觸發了*「像 Linear 一樣安靜」（密度 2–3）和「產品 UI」*（密度 6–8）。優先順序規則：命名表面的行優於命名情緒的行。 表面決定了需要容納多少內容；情緒決定了如何處理它 — 在產品 UI 套件中，「安靜」是透過顏色和動畫的克制來獲得的，而不是透過空白。當兩行都觸發時，說出你選擇了哪一行以及原因。
它們如何綁定
- 套件在值上獲勝，旋鈕在數量上獲勝。 旋鈕永遠不會發明顏色、字體或圓角半徑 — 這些來自套件的 token 層。它決定網格承載多少不對稱性、頁面有多少部分移動以及它包裝得多緊密。
MOTION_INTENSITY（動畫強度）受頻率表限制，而不是反過來。設定畫面中的強度 9 仍然意味著鍵盤路徑不會動畫化。先閱讀MOTION_DOCTRINE.md第 1 節；旋鈕調高的是該表格剔除後剩下的東西。- 宣稱的動畫就是顯示的動畫。 高於 4 時，頁面實際上會移動 — 首頁的進入動畫、關鍵區塊的揭示動畫、主要操作的響應動畫。一個宣稱 7 的靜態頁面是壞掉的。如果可行的動畫不符合範圍，請將旋鈕調低至 3 並提供一個乾淨的靜態頁面；永遠不要半途而廢地建構一個會停頓、截斷或跳躍的動畫。
- 獨立套件固定自己的上限。
workbench和briefing-room不是電影級的；兩者中任何一個的MOTION_INTENSITY高於 3 都是對套件的誤讀，而不是一個大膽的選擇。field-notes預設是獨立的，並且可以選擇加入電影級層 — 它帶有一個說明如何進行的## 動畫風格部分 — 因此它是唯一一個沒有硬性上限的獨立套件。在為它調高旋鈕之前，請先閱讀該部分。
工藝標準 — 「完成」的含義，按順序
當任何人都可以提示他們的方式得到一個原型時，工藝是唯一剩下的差異化因素。設計師對其含義進行排名（Figma，State of the Designer 2026，n=906）：視覺打磨 58% · 深思熟慮的問題解決 47% · 清晰直觀的 UX 36% · 情感與愉悅 35% · 一致性 15%。 將其視為完成的定義，按此順序：
- 打磨 — 不折不扣地應用套件：使用 token，而非直接值；diff 中任何地方都沒有臨時的 hex、圓角半徑或字型大小。
- 系統思維 — 視覺決策存在於一個位置（token 層，
SCENES註冊表），其他所有內容都讀取它。 - 清晰的 UX — 結構和行為不是此技能的一半；如果流程和狀態尚未決定，請停下來先決定它們。
- 情感 — 僅限應得的動畫（原則 4），且絕不以犧牲 1-3 為代價。
- 一致性 — 每個螢幕上，一個任務使用一種緩動、一個持續時間集合、一個強調色、一個原子。
按需載入 — 套件層不決定的三件事
- 場景深度 — 六個圖層（
SURFACE_COMPOSITION.md），在為電影級頁面編寫 CSS 之前。一個場景有平面；所有東西都在一個平面上是再多的緩動也無法修復的失敗。 - 圖表 — 將套件交給
dataviz（同一檔案），然後在任何套件中繪製圖表。Token 名稱在十三個套件中並非全部統一 — 只有--bg和--ink在所有地方都可解析 — 而未定義的自訂屬性不會報錯，它會無聲地回退。猜測一個是送出錯誤圖表最安靜的方式。 - 行動裝置表面（
MOBILE_SURFACES.md），當簡報是原生應用程式畫面或行動網頁視圖時 — 不是一個唯一的行動裝置問題是折疊的桌面頁面。每個套件各自陳述五條行動裝置規則，第六條沒有套件回答（字體縮放比例跟隨視口寬度，而非使用者的文字大小），以及在手機上沒有套件決定的那一半：平台慣例。
在套件之間選擇 — 安裝它們，不要想像它們
當一個以上的套件可以承載一個產品時，不要爭論它。渲染它們。
將候選套件安裝在一個現有的、已填充內容的頁面上 — 真實的標題、真實的數據、真實的密度 — 透過一個 ?variant=<pack> 搜尋參數切換，並在瀏覽器中來回切換。只有 token 層會改變；標記保持不變。
一個帶有佔位符內容的拋棄式路由是一個真空：每個套件在其中看起來都不錯，這正是它什麼都解決不了的原因。如果真的還沒有已填充內容的頁面，那麼選擇就是過早的 — 在簡報的 Register 指向的那個套件中建構頁面，一旦有真正可以切換的東西時再重新審視。如果簡報完全沒有給出信號，那麼預設值是 workbench（用於產品 UI）和 showroom（用於行銷頁面）：兩者都足夠安靜，以至於以後切換只會花費佈局成本，而不會影響識別。（這曾經是說「預設套件」而沒有指名，這不是一個後備方案。）
比較用的框架是 scaffolding，不是可交付成果：它在記錄決定的同一個變更中被移除。
AI 驅動的產品表面
在相同的調查中，設計 AI 產品現在是第三大最受歡迎的技能（37%）— 領先於動畫和 IA — 而且表面是新的：模型在串流、代理在行動、答案可能錯誤。在草稿版面或編寫提示詞之前，請閱讀 AI_PRODUCT_PATTERNS.md。