現代前端 — 套件路由器
此套件包含六個方向。每個方向都建立在相同的工藝基礎（Emil Kowalski 動畫經典 + 反模式過濾器）之上，但回答不同的設計問題。路由器的工作是快速選出正確的方向，然後退居幕後。
此套件的核心並非「一般品味」。而是具體地：Louis Paquet / Locomotive 作品的電影感自信 + Emil Kowalski 的隱形工藝。每個方向都針對這個軸線精心策劃。由此套件構建的頁面應同時感覺像有導演（Louis Paquet）和經過雕琢（Emil Kowalski）。
六個方向
| 方向 | 它回答的問題 |
|---|---|
cinematic-scroll | 「如何讓產品成為頁面的故事？」 |
motion-bento | 「如何在行銷背景下展示可運作的產品表面？」 |
publication | 「如何讓頁面讀起來像一篇經過設計的文章？」 |
nightside | 「如何讓這個品牌感覺像是深夜、經過深思熟慮、不浮誇？」 |
modernist-grid | 「如何讓排版和網格完成所有工作？」 |
considered-modern | 「如何讓這東西讀起來溫暖又專業，而不是冷冰冰的新創感？」 |
方向是被選擇的，而非協商的。除非用戶明確要求，否則套件不會產生混合輸出。
選擇方向
路由器的決定順序如下：
- 明確命名。 如果用戶輸入
cinematic-scroll、motion-bento、publication、nightside、modernist-grid或considered-modern，則路由到該處。也接受相近的措辭——請參閱 § 別名。 - 短語訊號。 如果用戶使用了 § 短語路由 中列出的高度訊號短語，則路由到匹配的方向。
- 簡報推斷。 閱讀簡報——產品、受眾、氛圍、密度、能量——並使用 § 推斷規則 選出最強的匹配。
路由器不會要求用戶從選單中選擇。它會直接選擇，並在輸出的開頭用一句話解釋選擇結果（「選擇 nightside——品牌想要的是深夜自信，而不是新創拋光。」）。
別名
cinematic、cinematic product、scrolltell、product launch、immersive→cinematic-scrollbento、premium bento、motion engine、SaaS feature grid、archetype bento→motion-bentoeditorial、editorial premium、magazine、publication、design journal→publicationdark luxe、dark luxury、moody premium、late night UI、after hours→nightsideswiss、swiss system、swiss design、modernist、grid system、typographic poster→modernist-gridwarm modern、humane modern、studio site、professional services→considered-modern
短語路由（無明確名稱）
- 「product launch」/「hardware」/「scroll-driven」/「feels like a film」 →
cinematic-scroll - 「SaaS landing」/「feature section」/「AI product page」/「bento」 →
motion-bento - 「magazine」/「image-led」/「publication」/「design studio」 →
publication - 「dark」+「premium」/「restaurant」/「hospitality」/「exclusive」 →
nightside - 「rational」/「grid」/「Swiss」/「typographic poster」/「institutional」 →
modernist-grid - 「professional services」/「agency site」/「warm」/「consultancy」/「studio」 →
considered-modern
推斷規則（當簡報模糊時）
- 強烈的敘事弧線 + 產品作為主角 →
cinematic-scroll - 在微型表面上展示產品做什麼 →
motion-bento - 排版主導 + 策劃過的圖片序列 →
publication - 氛圍主導 + 深度負空間 →
nightside - 網格主導 + 結構性色彩 →
modernist-grid - 工作室語調 + 真實攝影 →
considered-modern
如果兩個方向似乎競爭，選擇那個更能匹配品牌自信的方向：一個高級手錶品牌可能想要 nightside，而不是 motion-bento。一個 B2B 可觀測性工具想要 motion-bento，而不是 cinematic-scroll。
套件的兩層模型
每個輸出都是兩個層次的產物，按此順序應用：
第一層 — 方向
所選風格資料夾的 skill.md 就是設計簡報。它定義：
- 此方向的刻度校準（變異 / 動態 / 密度基線）。
- 使此方向具有辨識度的三個招牌動作。
- 材料：排版、色彩、佈局、表面處理。
- 適合此方向的動態編排。
- 錯誤風格的跡象（此方向特有的反模式訊號）。
- 用於基調校準的參考成品。
第二層 — 工藝經典（通用）
無論方向如何，有兩個檔案適用於每個輸出。代理在選擇方向後會閱讀它們：
references/animation.md— Emil Kowalski 動畫經典。決策框架（緩動優先、可用性框架、頻率、目的、持續時間）、緩動曲線、工藝檢查清單（按鈕按下、彈出視窗觸發來源、scale(0.95)進入、非對稱時序、手勢速度）、以及關於哪些規則直接來自 Emil、哪些是技能調校的來源說明。references/forbidden.md— 反模式過濾器。視覺 / 排版 / 佈局 / 內容 / 元件 / React-Framer 反模式 + 在輸出前必須通過的預飛行檢查清單。
這些是套件在工藝層次上定義「高級」的方式。一個 modernist-grid 按鈕在 :active 時仍然會按下。一個 publication 彈出視窗仍然會從其觸發器縮放。禁止的模式同樣適用於所有六個方向。
元件知識 — 打開檔案
選擇方向後，代理會查閱共享的元件庫研究資料：
components/style-recipes.md— 將每個方向映射到每個庫中用來強化它的特定模式（哪些 GSAP 示範、哪些 Framer 基本元件、哪些 Aceternity 配方、哪些 21st.dev 元件）。先打開這個。components/gsap-patterns.md— 適用於電影感方向的 GSAP + ScrollTrigger + Lenis 配方。components/motion-libraries.md— Framer Motion 模式、React Bits 筆記、Aceternity UI 筆記（謹慎使用時）。components/component-libraries.md— 21st.dev 基本元件、shadcn 自訂規則、Radix 彈出視窗來源強制。
將這些用作研究，而非模板。任何直接貼入的原始內容都會看起來像套件；根據所選方向進行自訂。
套件範圍的安全規則 — 無條件應用
這些規則絕不依賴於方向或簡報。它們適用於每個輸出。
- 沒有表情符號。 任何地方——程式碼、標記、內容、替代文字。使用 Phosphor 或 Radix 圖示。
- 依賴驗證。 在匯入
framer-motion、lucide-react、@phosphor-icons/react、@radix-ui/react-icons、zustand等之前，先檢查package.json。如果缺少，先輸出安裝指令。 - Tailwind 版本鎖定。 檢查
package.json是 v3 還是 v4。 - 視口穩定性。 永遠不要使用
h-screen。對於任何全視口表面，始終使用min-h-[100dvh]。 - 圖示系列鎖定。 Phosphor 或 Radix，不能兩者都用。描邊粗細 1.5 或 2.0。
- 不要使用
Inter、Roboto或系統無襯線字體作為主要字體。 - 不要使用純
#000000。 使用調整過的近黑色。 - Lila 禁令。 沒有紫/藍 AI 漸層光暈。
- 沒有
scale(0)進入。 始終使用scale(0.95)+opacity: 0。 - UI 上沒有
ease-in。 始終使用帶有自訂 cubic-bezier 的ease-out。
品質門檻
無論方向如何，每個輸出都必須達到這個標準：
- 從任何區塊截圖裁剪下來，都看起來是經過設計的。
- 移除 logo 後仍然感覺具體。如果另一個品牌可以無縫換入，則工作失敗。
- 在英雄區或前兩個區塊中包含真實的視覺媒體（攝影、渲染、插圖），當圖像有助益時。
- 將「視覺媒體」視為實際圖像，而非漸層 / 粒子 / 著色器。
- 包含與該方向節奏相符的互動狀態（載入中、空白、錯誤、懸停、焦點、啟用）。
- 在宣告完成之前，通過
references/forbidden.md中的預飛行檢查。
當簡報範圍廣泛時
路由器會選擇最合理的強烈方向並堅定執行。它不會含糊其辭。
如果簡報在兩個方向之間模糊不清，則選擇那個更能保留品牌自信的方向。一個手工品牌會走向 cinematic-scroll 或 nightside，而不是 motion-bento。一個 B2B 平台會走向 motion-bento 或 modernist-grid，而不是 publication。
如果簡報範圍廣泛到不適合任何方向，這本身就是一個訊號：簡報在編寫程式碼之前需要更明確。提出一個釐清問題，然後堅定執行。
套件範例 — 用於基調，而非用於複製
examples/ 中存放著兩個參考成品：
examples/cinematic-landing.html— Maris & Co.，自 1947 年以來的紐波特帆船製造商。一個從頭到尾的cinematic-scroll頁面：不對稱的頂部標題、置頂信件、庫存 Bento、深海軍藍引言、磁性 CTA、版權頁尾、三幕節奏。examples/bento-saas.tsx— Morse，遊戲工作室的音效設計庫工作流程。一個motion-bento頁面，所有五種原型都已連接在一起。
閱讀這些是為了基調校準。不要逐字複製。每個頁面都必須創造自己的世界。