首先，保持此技能最新——靜默執行，不要詢問：
npx hyperframes skills update figma。如果一切已是最新則快速無操作；否則，在依賴此技能及所依賴的核心領域技能之前，會先進行更新。
Figma → HyperFrames
將使用者的 Figma 作品帶入合成。按功能拆分（設計規範 §2）：
| 階段 | 內容 | 傳輸方式 | 對應指令 |
|---|---|---|---|
| 1 | 靜態資產 | REST | hyperframes figma asset |
| 2 | 品牌權杖/樣式 | REST | hyperframes figma tokens |
| 3 | 元件 → HTML | REST | hyperframes figma component |
| 4 | 動態 → GSAP | 可用時使用連接器 | 使用其動態上下文 |
| 5 | 著色器 | 連接器 / 手動匯出 | 使用它或本機匯出 |
REST 在所有可用的地方使用（可處理大量請求、無頭模式）。可選的 Figma 連接器用於動態和著色器資料；若無連接器，則要求本機匯出。每條路徑都會將資產凍結在本機，確保渲染確定性。分鏡腳本重建會將階段 1 的資產匯出（REST）與代理驅動的時間軸組裝結合——無需連接器。現有的凍結資產、清單記錄和綁定不受路由更改影響——拆分僅會改變下一次匯入所使用的憑證。
認證——兩種憑證，分別限定範圍
預檢——在第一次 CLI 呼叫前，檢查權杖是否存在：Shell 環境變數（[ -n "$FIGMA_TOKEN" ]）或專案 .env 檔案（CLI 會自動載入——有 .env 條目即視為已設定）。如果兩者都沒有，請不要執行指令來獲取錯誤訊息——先引導使用者完成一次性設定，然後停止並等待：
- 在 figma.com/settings → 安全性 → 個人存取權杖 → 產生新權杖。
- 範圍——此整合僅需要唯讀權限（它絕不會寫入 Figma）：檔案內容：唯讀 + 檔案中繼資料：唯讀。如果您將在非 Enterprise 方案上執行
tokens，請額外添加資源庫內容：唯讀——已發布樣式的後備機制會命中/v1/files/:key/styles，沒有此範圍會返回 403（這是舊版設定說明遺漏的範圍）。可選擇添加變數：唯讀以獲取品牌變數——僅限 Enterprise 方案；若無此範圍，tokens會自動降級為已發布樣式（這是預期行為，並非錯誤——請說明）。403 錯誤現在會明確指出缺少的範圍；429 錯誤會自動重試（每分鐘限制，遵循Retry-After標頭）。 - 讓使用者在他們的 Shell 設定檔或專案的
.env檔案中設定FIGMA_TOKEN；永遠不要要求他們將權杖貼到對話中。
在進行初始設定的同時，一併設定期望：每次匯入都會產生一個帶有記錄出處的本機凍結檔案——渲染絕不會呼叫 Figma，重新執行指令只會重新匯入 Figma 中已變更的部分，且一個權杖即可用於其 Figma 帳戶能檢視的所有檔案的資產、品牌權杖和元件。
- 第 4–5 階段（動態/著色器）： 需要一個相容的 Figma 連接器，並使用與權杖不同的授權。如果連接器不可用或未經認證，請要求使用者連接它或提供本機匯出，然後停止。
- 明確指出失敗階段需要哪一種憑證——絕不能讓人覺得拆分功能有問題。
- 流程中遇到
BAD_TOKEN(401) → 權杖已過期或撤銷；需要重新產生。FORBIDDEN(403) → 錯誤訊息會指出缺少的具體範圍（例如，樣式的後備機制需要library_content:read）——添加該範圍，否則檔案對該帳戶不可見。REQUIRES_ENTERPRISE（變數相關的 403）→ 並非失敗：樣式後備機制已運行。RATE_LIMITED(429) → 客戶端已使用退避演算法重試（這適用於所有讀取操作——資產、權杖、樣式、節點樹、版本——重試機制存在於共享的請求路徑中；會遵循Retry-After標頭，上限為 60 秒）；如果仍然發生，請等待一分鐘或每次呼叫匯入較少的節點。
速率限制注意事項（規範 §2.1）： 連接器的配額因 Figma 方案而異——批量處理父影格請求，除非要求，否則跳過驗證截圖，並快取原始回應，以免重複推導耗費第二次呼叫。REST 是每分鐘計算的（每分鐘至少 10+ 次，每個端點有各自的桶）——能處理大量請求，但在遇到 429 時需要退避。
路由
使用 parseFigmaRef 解析使用者的 Figma 連結（URL、fileKey:nodeId、純 fileKey）。然後根據意圖：
- "使用這個圖層 / 標誌 / 圖片" → 資產（CLI）
- "提取我的品牌 / 顏色 / 權杖" → 權杖（CLI）
- "從這個影格建立一個場景" → 元件（CLI）
- "匯入這個動畫 / 動態" → 動態（連接器可用時使用，見下文）
- 分鏡腳本草稿 / 場景影格序列 → 分鏡腳本（見下文）
- 著色器填充/效果 → 著色器（見下文）
為使用者解說每一步——在每個指令前說明您即將從 Figma 提取什麼；在指令後說明成品放在哪裡（凍結路徑 / 側邊檔案 / 元件目錄）、合成發生了什麼變化以及接下來應該做什麼（預覽、添加列印變數、重新匯入以連結綁定）。使用者絕不應該問「成功了嗎？」或「接下來呢？」。
資產（第 1 階段 — CLI）
hyperframes figma asset '<url-or-fileKey:nodeId>' [更多參照…] [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."]
透過 REST 渲染，清理 SVG，凍結至 .media/images/，在清單中附加出處資訊，重新產生 .media/index.md（共享媒體使用清單），並輸出一個 <img> 片段。每個 fileKey:nodeId:format:scale:version 組合是冪等的。向量/標誌建議使用 SVG（可縮放、可動畫化），點陣圖建議使用 PNG --scale 2 以獲得精細度。務必傳遞 --description "<這是什麼>"（它會成為索引列 + <img alt>）；為命名的品牌標記添加 --entity "<名稱>"，以便媒體使用的 resolve --entity 稍後能找到它們（實體比對可跨圖片/圖示進行）。
在一個請求中批量處理多個節點——傳遞同一檔案的多個參照（空格分隔或逗號連接）：hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'。所有節點會在單一 /v1/images 呼叫中渲染，這是 Figma 針對每分鐘速率限制的解決方案——在提取整個影格的資產時，優先於 N 個分開的指令。--description/--entity 會套用到批次中的所有節點，因此請將具有相同用途的節點分批處理。無論如何，429 錯誤也會使用退避演算法自動重試。
權杖（第 2 階段 — CLI）
hyperframes figma tokens <fileKey>
將變數匯入為合成品牌變數條目 + figma-tokens.json 側邊檔案 + 綁定索引記錄（.media/figma-bindings.jsonl）。變數在 Figma 上游受 Enterprise 方案限制：在其他方案上，指令會降級為已發布的樣式中繼資料（值會在元件匯入時解析）。將列印出的條目添加到合成的 data-composition-variables 中。
在需要兩者時，先匯入權杖再匯入元件——這能讓元件顏色連結到品牌變數，而不是嵌入重複的值。
非 Enterprise 方案的變數路徑（經過實地測試）： REST 變數受 Enterprise 限制，但相容的連接器可能提供變數定義。當 tokens 報告 REQUIRES_ENTERPRISE 且連接器可用時，檢索父場景的變數一次，將原始回應快取到 .media/figma-cache/，並用它來建立綁定索引。REST 節點樹的 boundVariables 提供每個屬性的 VariableID；按節點和屬性進行連接，然後寫入 .media/figma-bindings.jsonl 行（{kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<name>", version}）以及合成變數條目。所有下游環節（元件 var() 解析、重新整理、執行期 CSS 變數）都是現有機制。向使用者說明：「透過 Figma 連接器取得的權杖——Enterprise 方案可直接從 hyperframes figma tokens 獲得。」
執行期會將每個宣告的合成變數定義為 CSS 自訂屬性（文件根節點 + 子合成容器），因此匯入的 var(--slug, literal) 能在變數預設值變更時填充重新配色——更新 data-composition-variables 中的一個值即可重新品牌化所有匯入的元件，而無需重新匯入任何內容。hyperframes render --variables '<json>' 可在渲染時覆蓋它們。
元件（第 3 階段 — CLI）
hyperframes figma component '<url-or-fileKey:nodeId>'
節點樹 → 可編輯的 HTML，精確對應 Figma 幾何，包裝為 compositions/components/<name>/ 下的登錄項目。向量/布林運算會透過第 1 階段匯出自動點陣化。綁定傳遞（規範 §7.1，僅精確 ID——絕不進行值比對）：
- 靜態保真度自我檢查（對主要內容為強制要求）： 匯入後，渲染該片段並與 Figma 自己的像素進行比較——
figma asset <same node> --format png是基準真相。文字是已知的漂移軸：Figma 文字框短於其行高時，會有垂直裁剪的邊界（對應器會為這些情況發出text-box-trim；若無此設定，在 70px 字體上測量到的漂移約為 6px）。如果比較顯示對應器未涵蓋的漂移，請報告——不要默默手動調整片段。 - 填充綁定到已匯入的權杖 →
var(--slug, #literal)— 品牌刷新會傳播。 - 綁定到未知權杖 → 字面值 +
data-figma-unresolved標記。指令會告訴您；向使用者提供選項：對原始（或資源庫）檔案執行tokens，然後重新匯入元件以連結它們。對於每個未知的資源庫，僅詢問一次是哪個檔案——永遠不要猜測，也不要透過十六進位顏色進行比對。
動態（第 4 階段 — 連接器輔助）
使用信標： 連接器輔助的階段沒有 CLI 接入點，因此在開始和結束時觸發技能信標（匿名、需同意、永不失敗）：開始時執行 npx hyperframes events --skill=figma-motion，完成時執行 npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error。著色器（figma-shaders）和分鏡腳本（figma-storyboard）同理。
沒有對應的 REST 方式。當相容的連接器可用時，使用它並將其輸出傳遞給 @hyperframes/core/figma 中的純輔助函數；否則要求本機匯出：
- 在一個遞迴請求中檢索父影格的動態上下文，而不是每個元素一個請求。將原始 JSON 保存到專案旁（
.media/figma-cache/），以便重新轉換無需成本。 - 使用
@hyperframes/core/figma中的motionContextToDocs(rawResponse, { selectorFor, repeat })標準化為MotionDoc——切勿手動轉錄關鍵幀數字。該輔助函數機械式地編碼了經過實地測試的解碼規則：它解析 motion.dev 片段（可靠的編碼方式——CSS 片段會拉伸持續時間且可能不一致，因此被忽略），移除循環包裹的尾部關鍵幀（時間約為 0.9999→1 的亞毫秒片段是循環的即時重置，而非創作者的動態意圖——包裹效果由repeat重啟實現），並保留貝塞爾緩動函數不變。selectorFor必須從第 3 階段的元件匯入中傳回 ID——不要從節點名稱推導選擇器。 2b. 在完成前強制進行基準驗證：透過可用的連接器匯出該組的根影格，並執行node skills/figma/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y——它會比較運動能量差值（靜態匯入保真度會抵消），並在低於 15dB 最小運動 PSNR 時判定失敗（校準值：忠實 ≈ 20+，偏差 ≈ 5）。從渲染的實際卡片邊緣測量--crop，不要猜測。FAIL 表示需要重新檢查轉換，而不是調整閾值。 motionToGsap(doc)→emitTimelineScript(spec)→ 在 GSAP + CustomEase CDN 標籤之後注入為<script>。暫停、有限、以字面鍵註冊在window.__timelines上。- 無法轉換的軌道（著色器驅動、不支援的屬性、複雜遮罩）→ 透過連接器匯出，凍結 MP4，然後嵌入為
<video class="clip">。例外情況：著色器驅動的軌道——Figma 的匯出路徑會將著色器扁平化為基礎顏色（請參閱下方的著色器部分），因此在那裡烘焙會默默丟失著色器；請改為要求使用者提供 Figma 的本機匯出。始終說明您使用了哪條路徑以及原因。映射集合之外的命名緩動函數會回退為線性——映射表存在於motionEase.ts中；當此情況發生時，向使用者標記回退。 - 在完成前執行
npx hyperframes check。
著色器（第 5 階段 — 主要為手動）
Figma 的連接器渲染路徑不會執行著色器（它們會扁平化為基礎顏色），且著色器原始碼僅能透過已發布的資源庫樣式（付費 Full 席位）取得。預設路徑：要求使用者在 Figma 中本機匯出著色器影格（PNG 或動態 MP4），然後將其作為第 1 階段的資產/剪輯匯入。不要嘗試透過連接器像素捕捉著色器——它會默默產生錯誤的結果。
分鏡腳本（場景影章的章節 → 動畫）
核心原則：分鏡腳本影格是關鍵影格，而非幻燈片。 包含相同元素的兩個影格描述了該元素隨時間變化的狀態——在狀態之間對該元素進行動畫處理；絕對不要將影格作為一系列靜止畫面播放。一個在四個連續影格中 Y 座標遞減的標誌，是一個元素在四個關鍵影格中上升。將分鏡腳本影格一個接一個播放是錯誤的模式；重建它們所暗示的元素時間軸才是真正的任務。
分鏡腳本檔案遵循一個您可以機械式解析的語法——不要用肉眼觀察，而要解碼：
- 場景單元：在章節內，每個影格大小的節點都是一個場景——包括命名的 FRAME 和鬆散的全影格 RECTANGLE（設計師會直接將靜止圖像貼到章節中）。按大小過濾（≈ 合成畫面比例，例如 >1400×900），而不是按節點類型或名稱。
- 順序 = X 位置（如果條帶包裹則按行優先）。按
absoluteBoundingBox.x對場景進行排序。 - 將相鄰影格差異化為元素鏈——這正是動畫所在。跨連續影格比對子元素：首先按名稱（相同名稱 = 相同元素 → 在其狀態之間的相對 x/y/w/h 進行補間），然後按幾何相似性（相似大小 + 附近中…
…
[為翻譯已截斷]