Motion Lexicon
Motion Lexicon 是一套專為產品動態設計的設計系統。它連結兩個同等重要的集合：Motion Primitives 描述精確的行為；Components 將一個或多個行為轉變為完整、可直接複製的產品互動。頁面組合則將這些互動置入一致的產品表面中。
從使用者的產品事件出發進行設計。僅在明確支援狀態變化、聚焦的主角以及可達成的交接時，才產出程式碼。
選擇模式
| 請求中的訊號 | 模式 | 交付物 |
|---|---|---|
| 完整的頁面、畫面、登陸頁、儀表板或設定表面 | 建構頁面 | 頁面計畫、精確的 Registry 組合、可運作的頁面以及驗收證據 |
| 一種感覺、術語或「哪個動畫」的問題 | 推薦 | 排序後的候選方案及一個推薦 |
| 一個工作流程、轉場或多步驟場景 | 編排 | 動畫藍圖與節拍計畫 |
| 請求生產級程式碼或框架適配 | 實作 | 可攜帶的 HTML、CSS、JS 或所請求框架的程式碼 |
| 現有程式碼、錄製內容或卡頓報告 | 審查 | 優先排序的診斷與具體修正方案 |
| 新模式、範例或建議的函式庫新增 | 貢獻 | 準備好供維護者審查的候選記錄 |
確定性地應用模式優先級：完整的頁面或多區域表面使用「建構頁面」；明確請求程式碼或單一互動的框架實作使用「實作」；僅請求設計計畫、節拍計畫或藍圖使用「編排」。實作模式可在內部建立藍圖，但仍交付使用者要求的可執行格式。審查請求可在當前互動需要較大變更時返回修訂後的藍圖。
每次請求的起始步驟
- 保留使用者的語言。中文請求使用中文，英文請求使用英文。
- 識別產品任務、主要操作、操作前後的用戶可見狀態、主要參與者以及預期感覺。
- 使用下方的模式 × 參考文件表。僅載入當前任務選定的檔案。
- 當請求需要材質深度、實體感或 Interior 視覺風格時，載入 interior-principles.md。
- 當請求留下的產品脈絡不明確時，簡短陳述假設。僅在缺少的約束條件會影響設計時，提出一個聚焦的問題。
- 在一個節拍中，保持一個主要視覺參與者，最多兩個輔助參與者。為每個參與者指定語意類型：觸發、主角、狀態、記錄或環境。為每個節拍指定產品目的：引導、確認、保持連續性、揭示或恢復。
- 在每個已編排、實作或審查的互動中包含減少動畫計畫和鍵盤/焦點行為。
- 對於頁面請求，先檢查目標專案再選擇技術棧。保留其路由、元件系統、設計 Token 和內容語言。對全新的頁面使用 React 和 TypeScript，除非使用者要求其他技術棧。
模式 × 參考文件路由
| 模式或任務 | 讀取 | 僅在相關時添加 |
|---|---|---|
| 建構頁面 | page-composition.md、page-system.md 和 components.md | motion-lexicon-page.css（當目標專案沒有已建立的視覺系統時）；頁面主要狀態變化的某個 Moment 或 Primitive 參考文件 |
| 推薦已發布的元件 | components.md | 當使用者詢問動畫運作方式時，下方的某個 Primitive 家族 |
| 推薦單一行為 | motion-language.md | entrances、feedback、transitions 或 sequencing |
| 編排產品 Moment | composition.md 和 contract.md | feedback moment、choice moment、change moment 或 workflow moment |
| 實作 | implementation-css.md | contract.md（當需要消費或產出藍圖時）；components.md（針對精確的已發布元件） |
| 審查 | review-rubric.md | 符合觀察到行為的某個 Primitive 或 Moment 參考文件 |
| 貢獻 | contribution.md 和 candidate-template.md | contract.md（對於所需的藍圖）和 components.md（以排除現有元件） |
動畫語言
在整個技能中使用 Interior 風格的設定檔：
- 當材質深度有助於方向感時，使用邊框、凸起面板和凹陷凹槽來建模真實產品狀態。
- 從事件開始動畫：按壓、選取、路由變更、狀態更新或直接操作。
- 為狀態變化預留空間，使標籤、按鈕和記錄保持其幾何形狀。
- 使用進場動畫處理新內容：
cubic-bezier(.23, 1, .32, 1)約 200–280 毫秒。使用離場動畫處理移除的內容：cubic-bezier(.23, 1, .32, 1)約 110–180 毫秒。 - 對移動的內容使用
transform和opacity。當回饋需要立即響應時，使用短暫的顏色或焦點轉場。 - 允許後續的使用者操作中斷、反轉或平息前一個操作。
- 在減少動畫模式下，透過靜態狀態或短暫的透明度淡入淡出來保留狀態、層級、焦點和回饋。
閱讀 interior-principles.md 中的詳細規則。
建構頁面
在使用者的專案中建構一個完整、可運作的產品表面。在規劃頁面前，先閱讀 page-composition.md、page-system.md 和 components.md。
- 檢查目標儲存庫、框架、路由、現有 Token 和已安裝的依賴項。在一致的情況下重用主機系統。
- 在編輯任何檔案之前，輸出下方所示的「主機檢查表」和精簡的「頁面計畫」。包含頁面任務與原型、每個主要區域、精確的已發布元件 ID 或
none、主要的狀態邊界，以及響應式和主題決策。「主機檢查」中的每個值都應引用已檢查的檔案路徑。純文字的描述性實作意圖不符合此門檻要求。 - 對於已發布的元件，使用位於
https://motion-lexicon.pages.dev/r/<id>.json的來源。在編輯前讀取其files、dependencies和 runtime。安裝交付的原始碼和依賴項；僅調整其 props、標籤、資料、回呼函數以及在主機中的放置位置。不要重新生成該元件的近似版本。 - 在選擇 ID 前完成 Registry 整合門檻：所有當前 Registry 來源都使用 Tailwind 工具類別。確認主機已編譯 Tailwind，或者在變更主機工具鏈在範圍內時，新增其支援的 Tailwind 設定。如果無法新增該設定，則為該區域選擇
none並建構純語意的 UI；切勿靜默地貼上 Registry 元件的 CSS 重新實作。在頁面計畫中記錄 JSON URL、目標檔案、依賴項列表以及任何所需的 runtime。 - 整合後審核渲染的互動節點。頁面標準是至少 44 x 44 CSS 像素，即使 Registry 元件的預設視覺高度較小。透過文件化的
classNameprop 傳入主機類別，並在該節點上設定min-width和min-height。如果來源沒有提供安全的樣式鉤子，則選擇一個提供該功能且適合的元件，否則保持該區域為純文字。 - 為頁面提供一個主要工作表面、一個主要動畫時刻，以及最多兩個輔助動畫時刻。保持靜態內容平靜。
- 使用主機的設計系統。對於全新頁面，複製並調整 motion-lexicon-page.css，然後套用 page-system.md 中的精確層級和響應式規則。
- 交付整個路由或頁面，包含屬於其任務的真實內容、載入、空狀態、成功、失敗和恢復狀態。
- 驗證 320、390、768 和 1440 像素佈局；亮色和暗色主題；鍵盤順序和焦點；減少動畫；44 像素互動目標；溢出；以及主控台或水合錯誤。僅建構成功不符合頁面驗收標準。啟動本地應用程式或生產預覽，並使用可用的瀏覽器自動化工具來執行主要操作並在每個必需的視口檢查渲染的幾何形狀。缺少專案的瀏覽器測試腳本不是障礙：對本地預覽使用可用的瀏覽器工具。在每個視口，列舉所有可見的
button、連結、input、select、textarea和自訂互動節點；記錄最小渲染寬度和高度，以及低於 44 像素的節點的offenders列表。修復每個違規項目並重新執行所有四個視口審核，然後再報告驗收。報告命令、互動、測量值和可觀察結果。
保持頁面計畫簡潔：
## 主機檢查
| 關注點 | 觀察到的主機證據 |
| --- | --- |
| 框架 | 名稱/版本 — `package.json` |
| 路由 | 當前路由和目標檔案 — `src/router.tsx` |
| 元件系統 | 重用的元件或無 — `src/components/...` |
| Token / 主題 | Token 和主題機制 — `src/styles.css` |
| Tailwind | 已安裝/編譯或缺失 — `package.json`、`vite.config.ts` |
| 依賴項 | 重用的套件和版本 — `package.json` |
## 頁面計畫
任務：…
原型：…
主要操作：…
主要狀態：idle → pending → success/error
| 區域 | 產品目的 | 已發布元件 | 狀態或動畫 |
| --- | --- | --- | --- |
| … | … | `component-id` 或 `none` | … |
Registry：
- `component-id` — https://motion-lexicon.pages.dev/r/component-id.json — `target/file.tsx` — 依賴項：`package` / none
響應式：320/390 …；768 …；1440 …
主題：亮色 …；暗色 …；減少動畫 …
在計畫中的每一行都具體之前，不要開始實作。
最終的交接必須在中間訊息被折疊後仍可獨立審計。重複完整的「主機檢查表」和「頁面計畫」，包含區域表和 Registry 行，然後為以下每個項目添加一個「驗收表」，每個項目一個觀察到的行：
| 檢查項目 | 觀察到的證據 |
| --- | --- |
| 建構 | 命令和退出結果 |
| 320 | viewport/文件寬度，最小目標寬度/高度，違規計數 |
| 390 | viewport/文件寬度，最小目標寬度/高度，違規計數 |
| 768 | viewport/文件寬度，最小目標寬度/高度，違規計數 |
| 1440 | viewport/文件寬度，最小目標寬度/高度，違規計數 |
| 亮色 / 暗色 | 每個主題如何啟動和檢查 |
| 鍵盤 / 焦點 | 確切的按鍵路徑、焦點進入和焦點返回 |
| 減少動畫 | 模擬的偏好設定以及觀察到的靜態或淡入淡出結果 |
| 目標 | 測量的可見互動節點的最小寬度和高度 |
| 主要狀態 | 適用的 pending、success、error/retry 和中斷狀態的測試情況 |
| Runtime | 主控台、頁面、請求和水合錯誤計數 |
列出已安裝的元件 ID 和已更改的檔案。對未觀察到的行使用 Incomplete 並說明缺少的功能。不要將未經檢查的項目描述為已支援或通過。
當使用者請求 Motion Lexicon 外觀時，保留視覺風格和互動品質，同時調整內容和資訊架構以符合實際產品。避免用函式庫示範內容填充頁面。
推薦
返回一個使用者可以立即應用的簡潔決策。
- 根據 components.md 中的已發布元件，或從上述選定的相關 Primitive 參考文件中，將請求映射到最多三個已發布的候選方案。每個候選方案儲存格開頭必須使用其精確的已發布元件或 Primitive ID，並以反引號標示，在有用時加上人類可讀的標籤。僅有描述性標籤是不完整的。切勿將未知或虛構的 ID 呈現為已發布的。
- 以產品術語解釋視覺差異：空間連續性、重量、節奏、注意力或狀態信心。
- 選擇一個候選方案，在推薦行中重複其精確的已發布 ID，並說明預設的時序、緩動曲線、觸發條件和減少動畫處理方式。
- 當請求描述多個狀態時，提供動畫藍圖。
使用此格式：
## 建議 / Recommendation
| 候選 / Candidate | 適合場景 / Fit | 區別 / Difference |
| --- | --- | --- |
| `published-id` / … | … | … |
**推薦 / Pick:** `published-id` / …
- 觸發 / Trigger: …
- 節奏 / Timing: …
- 無障礙 / Accessibility: …
編排
在展開實作細節之前，先建立一個動畫藍圖。使用 assets/motion-blueprint.schema.json 作為合約。每個編排回覆都包含一個符合 schema 的圍欄 JSON 物件；不要使用散文表格或文字圖表來替代藍圖。在聊天中保持字串值簡潔，然後在使用者要求可重複使用的產出物時，將相同的 JSON 寫入檔案。
每個 beats[].primitive 和每個 provenance.foundations[] 值必須是從選定參考文件中複製的精確已發布 Primitive ID。人類可讀的標籤和未發布的偽 ID 不符合藍圖合約。
在回覆之前，將最終的 JSON 寫入一個臨時檔案並執行：
node "$CODEX_HOME/skills/motion-lexicon/scripts/validate-motion-blueprint.mjs" /tmp/blueprint.json
修復每個驗證失敗並重新執行，直到命令退出碼為 0。然後複製圍欄 JSON 區塊……
[因翻譯截斷]