Justin Figma 設計 (/jfd)

jfd) 是做什麼的？

此工作空間是一個 Figma 優先的協作工作空間，而非應用程式程式碼庫。此技能是編排層：工作空間記憶、Figma Console 工作流程、設計系統紀律以及基於證據的視覺 QA。除非使用者明確要求設計轉程式碼，否則請勿產生 React、HTML 或 CSS。

必要的 MCP 夥伴

所有 Figma 工作皆運行於 Figma Console MCP (user-figma-console)：使用 figma_execute 進行檢查和修改，使用 figma_take_screenshot 取得證據，使用 figma_get_status 和 figma_reconnect 管理 Desktop Bridge 連線。寫入工作需要連接 Desktop Bridge 的本機/NPX 伺服器；託管的遠端模式為唯讀。在撰寫任何腳本之前，請先閱讀 references/figma-execute.md，並參閱工作空間檔案 docs/tools/figma-console.md（位於工作空間根目錄）以了解連線細節。在沒有該 MCP 連線的情況下，請勿將 /jfd 視為獨立的 Figma 編輯器。

從設計中解析事實，而非從此技能

此技能提供程序，而非事實。裝置尺寸、字型、間距和樣式偏好會隨著時間推移而改變；目標檔案始終是最新的。請依序解析任何所需的值（尺寸、字型、間距步進、顏色、名稱或慣例）：

1. 目標檔案。 測量實際的影格、文字、Token 或元件。
2. 家族。 同一區段中的兄弟影格、狀態和畫面。
3. 工作空間記憶。 檔案的 docs/files/<別名>/design.md 和 docs/preferences.md，並遵循其「最後驗證」日期。
4. 使用者或當前查詢。 詢問使用者，或查閱現行的平台指南。絕不相信記憶中的裝置尺寸或舊的預設值。
5. 回寫。 在目標 design.md 中記錄已解析的值及今天的日期，以便下一次工作階段可以信任它。

絕對不要從此技能自身的文字中解析專案值。

兩種工作流程

• 編輯現有檔案（預設）：有東西可以測量。請遵循下方的完整循環，並且永遠不要假設根影格尺寸——請測量正在編輯的家族的實際根影格。
• 從頭開始：沒有東西可以測量，因此解析順序將運行於步驟 3–5。請閱讀 references/starting-from-scratch.md。在建立之前，先與使用者確認根影格尺寸、排版和主題支援，然後立即建立檔案的 design.md，以便之後的每個工作階段都可以測量而非猜測。

初始化空工作空間

當工作空間缺少 docs/preferences.md 和 docs/FILES.md 時，請使用初始化模式。初始化是一個本機的、冪等的支架程序；它永遠不會開啟 Figma、呼叫 MCP 或修改畫布。

1. 當主機缺少斜線別名時，將 jfd init 視同 /jfd init。
2. 在寫入前列出遺失的支架路徑。在非空工作空間中，先要求確認。絕不覆寫現有檔案、目錄、符號連結或技能安裝。
3. 僅從此技能的 assets/templates/ 複製遺失的檔案。
4. 在 .agents/skills/justin-figma-design/（標準路徑）以及適當時在 .cursor/skills/justin-figma-design/ 安裝遺失的技能副本。
5. 可選擇執行 scripts/init_project.py（Python 3，僅限標準函式庫）進行一次批量處理；代理程式檔案工具仍然是主要路徑。
6. 驗證支架，然後要求提供 Figma 連結或檔案金鑰。絕對不要偽造憑證或檔案資料。

詳細資訊：references/getting-started.md。

選擇操作模式

Non-YOLO 是預設模式。

• Non-YOLO 用於生產工作：共用模式、畫面、元件、變數、主題、響應式變更，以及任何非明確為可拋棄的範圍。
• YOLO 僅在使用者明確表示「YOLO」、「快速示範」、「快速原型」或類似詞語，且範圍是單一名稱的看板或狀態時使用。
• 「建立一個元件」、「更新一個函式庫」、「支援亮色和暗色模式」或修改共用外觀，不會因為其規模小而成為 YOLO。
• 在使用者明確要求實作或執行之前，保持在規劃模式。

YOLO 減少了函式庫的開銷；它並不消除安全性或視覺 QA。在發現共用外觀、可重複使用的模式、多個相關狀態、亮/暗或響應式傳播、主元件變更、Auto Layout 重構、業務規則變更或第二個看板時，升級為 Non-YOLO。完整的路由器和檢查清單：references/modes-and-workflow.md。

在任何 Figma 變更之前

1. 讀取工作空間根目錄的 docs/preferences.md 和 docs/FILES.md。
2. 解析目標檔案別名，並讀取其 docs/files/<別名>/design.md；對於畫面、流程或組合表面工作，請讀取 screens.md。
3. 讀取最新的相關工作階段筆記。活躍的 design.md 和當前權威優先於過時的歷史筆記。
4. 確認活躍的 Figma 檔案、頁面、區段/影格和權威。在已連線的檔案中重新搜尋節點 ID、元件、變數和樣式；來自先前工作階段的 ID 是過時的證據，而非授權。
5. 在進行共用變更之前，清點整個同影格/狀態家族：亮/暗、展開/折疊、巢狀啟動路由、覆蓋層、響應式變體以及有意移除的狀態。
6. 測量正在編輯的家族的根影格。絕不假設裝置尺寸。
7. 在修改文字之前，檢查已設定樣式的字型區段並載入當前字型。依解析順序選擇任何替換字型——測量的文字，然後是 design.md，然後是使用者——絕不從此技能選擇。

如果目標檔案沒有 design.md，請先完成一個唯讀的調查基準。如果無法驗證活躍的檔案或權威，請停止並詢問。

常見圖形

在放置圖示或匯入的圖片之前，請讀取工作空間根目錄的 docs/assets/README.md 和 docs/assets/icons.md。優先使用現有的檔案元件和專案核准的圖示來源；在接受新的圖形之前，檢查向量邊界、尺寸和主題對比度。頭像僅由使用者提供；切勿自行產生。

Non-YOLO 合約

• 首先搜尋權威的本機實例/元件，然後是已啟用的函式庫，最後是更廣泛的函式庫搜尋。僅在記錄了差距之後才進行建立。
• 為核准的範圍建立最小連貫的設計系統：優先建立變數和模式，然後是樣式和元件，最後是畫面實例。
• 使用變體來處理結構/視覺狀態，並使用元件屬性來處理內容靈活性。優先使用實例、實例切換和受控包裝器，而不是分離的重繪。
• 使佈局意圖清晰易懂：語義化名稱、有意義的層級結構、在子元素相關時使用 Auto Layout、Token 綁定、元件描述以及記錄的可訪問性/狀態行為。
• 將亮/暗模式視為變量-模式矩陣，而不是兩個硬編碼的畫面。參閱 references/variables-and-theming.md。
• 一次性將共用變更應用於完整的相關畫面家族，然後 QA 每個成員。當兄弟畫面仍過時時，單一影格的修復不算完成。

在進行複雜工作之前，請閱讀 references/components-and-design-system.md 和 references/layout-and-autolayout.md。

佈局規則

為每個軸獨立選擇 Hug、Fill、Fixed 以及 min/max：對於內容驅動的堆疊和控制項使用 Hug；僅當子元素在 Auto Layout 父容器中有意義的可用空間時使用 Fill；對於有意的結構邊界（測量過的畫面根、圖示框、CTA、校準外殼）使用 Fixed；對於已批准的響應式限制使用 min/max。使用巢狀 Auto Layout、內距和間距來編碼關係——絕不使用不可見的間距影格來保留舊的座標。僅將「絕對定位」/「忽略 Auto Layout」圖層用於有正當理由的覆蓋層、外觀、裝飾或目標 design.md 中記錄的例外情況。在調整容器大小後，審核擁有寬度的後代元素；父容器變寬並不代表完成重新排列。詳細資訊：references/layout-and-autolayout.md。

執行與驗證

檢查，執行一個小型的、有針對性的 figma_execute，回傳每個已變更的 ID 和有用的幾何資訊，然後立即使用 figma_take_screenshot 擷取螢幕截圖。當路由依賴於活躍檔案時，保持寫入和螢幕截圖的順序。QA 結合了測量結構與視覺證據——視情況擷取：(1) 一個聚焦的元件裁剪，(2) 完整的看板，(3) 相關家族或區段概覽。檢查共用邊緣、間距、裁切、溢出、長文字行為、圖示/向量邊界、對比度、排版、隱藏的控制項、語義狀態、相關狀態一致性、硬編碼值、未解析的綁定以及亮/暗解析度。盡可能使用 Figma Check 設計；否則執行等效的結構化和手動檢查。

將失敗的 figma_execute 視為可能部分失敗，直到檢查目標為止；絕不盲目重新執行失敗的建立或重新父層的腳本。復原合約：references/figma-execute.md。完整檢查清單：references/qa-and-recovery.md。

結案

• 為每個變更過的看板和必要的家族成員擷取最終螢幕截圖。
• 記錄有意的例外、佔位符、未解決的問題和範圍邊界。
• 當權威、元件、變數、畫面、根尺寸或漂移發生變化時（包括在工作階段中解析的任何值），更新目標的 design.md 和 screens.md。
• 為有意義的工作在 docs/sessions/ 下寫入一個帶有日期的筆記。

尊重目標檔案在其 design.md 中記錄的保護措施：鎖定或保護的原件、必須保持移除的樣式或狀態、以及必須保留的副本和語言。絕不在專案記憶體中儲存憑證或私有 Token。

如需此技能背後的外部指導，請閱讀 references/research-sources.md。