Sketch MCP to Design
建立或調整 Sketch 設計以符合參考。此技能用於在 Sketch 中進行設計工作；反向流程是 sketch-design-to-code。
精確度優先
目標是與參考達到視覺一致——而非一個包含類似區塊的合理頁面。相似不等於完成。請勿在內容存在時就停止；直到並排螢幕截圖比較通過 references/validation.md 中的完成標準為止。
必要的 Sketch 指南
get_guide搭配topic: "mcp"— 永遠執行；MCP 前置條件、run_code規則、錯誤處理與視覺驗證。get_guide搭配topic: "use"— Sketch 編輯、堆疊、符號、樣式、覆寫、素材與原型製作。get_guide搭配topic: "layout"— 在建立或重構框架、群組、堆疊、頁面放置、尺寸調整、固定或容器類型之前執行。
當任務需要時，可依需求提取指南子主題：troubleshooting、layout、styling、symbols、assets 和 prototyping。
前置條件
- 啟用 MCP 並正在執行的 Sketch（設定 → 一般 → 允許 AI 工具與開啟的文件互動）。
- 目標文件已開啟，或使用者希望您建立/使用新文件。
- 參考資料可透過 URL、螢幕截圖或原始碼取得。
- 範圍足夠明確以採取行動：整個頁面 vs. 單一框架、目標寬度、深色/淺色模式，以及文件中有多個候選項時的目標頁面/框架。
如果 MCP 無法使用，請停止並呼叫 get_guide 搭配 topic: "troubleshooting"。在 MCP 無法連接時，請勿憑記憶猜測佈局。
步驟
按順序執行以下步驟。主要流程應足夠應付一般工作；僅在步驟需要更多細節或範例時才載入參考文件。
步驟 1 — 確認上下文與參考
- 取得必要的指南。
- 使用
get_document_info解析目標文件。 - 分類參考類型：
- URL — 收集頁面標題、視埠寬度、DOM 結構、來源 HTML、連結或捆綁的 JavaScript/CSS（若可用）、計算後的色彩/字型、文案以及素材 URL。
- 螢幕截圖 — 收集尺寸、區域、文字內容、對齊方式與主要色彩。
- 程式碼 — 收集主題代碼、字型堆疊、間距尺度、元件名稱、內嵌 SVG 以及素材匯入。
- 提取精確度規格，並在進行任何佈局變更前，於目標寬度下擷取參考錨點截圖。該規格必須包含區域（由上至下）、逐字文案、色彩、字型排版、佈局寬度以及素材來源 — 請參閱 references/reference-extraction.md。
若要參考特定類型的提取方式，請閱讀 references/reference-extraction.md。關於比較與完成條件，請在步驟 5 之前閱讀 references/validation.md。
步驟 2 — 探索可重複使用的 Sketch 內容
在進行變更之前先進行檢查。從唯讀的 MCP 工具開始：
- 呼叫
get_document_info以取得頁面、頂層框架/圖形、圖層數量與現有佈局候選項。 - 對候選框架或相關頁面呼叫
get_layer_tree_summary，以取得階層、ID、名稱、尺寸、文字片段、符號實例覆寫數量以及堆疊提示。 - 呼叫
get_design_assets和get_libraries以取得可重複使用的符號/元件與庫素材。 - 僅在摘要未提供所需細節時，使用目標性的
run_code。
只有在確定現有框架對應到要求的設計時，才優先編輯現有框架。否則，建立一個新框架。
步驟 3 — 在畫像素之前先規劃結構
在繪製之前定義圖層計劃：
- 頂層區域及其順序。
- 父/子關係與兄弟群組。
- 區域寬度、內容最大寬度、以及全出血 vs. 欄位內區段。
- 固定/固定區域 vs. 可滾動內容。
- 符號候選項、堆疊候選項、素材候選項以及可重複使用的堆疊樣式。
請勿套用預設頁面模板。必須匹配參考的資訊架構。
對於每個結構化區域，在繪製前決定 Sketch 堆疊模型：方向、間距、內距、對齊、尺寸調整、換行以及預期的視覺順序。使用堆疊來處理列、欄、導覽列、工具列、卡片、列表、表單、按鈕群組與重複內容，除非有特定理由需要該區域為自由形式。對於頁面層級放置、固定 chrome、疊加層、遮罩或真正自由形式的藝術創作，則使用手動座標。
步驟 4 — 建立代碼標記與基底框架
為背景、邊框、文字、品牌、淡化文字與重要表面建立或匹配文件色票/共享樣式。有目的地設定頁面/框架背景，並清除結構群組中意外的填色。有關符號細節，請呼叫 get_guide 搭配 topic: "symbols"。
使用參考中的值：計算後的 CSS、螢幕截圖中取樣的色彩，或程式碼代碼。有關樣式細節，請呼叫 get_guide 搭配 topic: "styling"。
步驟 5 — 逐步建構佈局
應用小型、可逆轉的 run_code 編輯。一個腳本應執行一個小動作。
絕對不要在一個腳本中建立整個頁面、頂層區域或多區塊佈局。不要在同一次執行中混合探測、建立、樣式設定與重新排序。保持腳本扁平：引導、依 ID 尋找目標、執行一項變更、記錄 JSON。避免深層輔助函式、巢狀 IIFE 以及長控制流程樹。
由外而內建構：
- 頁面框架與背景。
- 來自圖層計劃的頂層區域容器。
- 每個區域的堆疊設定，在詳細子項目之前。
- 以小型兄弟批次在各區域內放置文字、形狀與符號實例。
- 在其父層結構正確之後，處理固定/固定區域。
一次建構一個頂層區域。在每個區域的內容批次之後：
- 在參考錨點寬度下，使用
get_screenshot對框架進行截圖。 - 將該區域頻段與參考錨點進行比較 — 使用 references/validation.md 中的分類法列出差異。
- 在開始下一個區域之前修復主要不匹配。
在結構性編輯之後，使用 get_layer_tree_summary 重新查詢或對框架進行截圖。有關安全地重新排序/重新指定父層的模式，請閱讀 references/editing-patterns.md。
步驟 6 — 符號、素材與覆寫
在繪製重複的一次性圖層群組之前，先使用現有的文件/庫符號。重複的 UI 通常應成為一個符號主體，包含實例與覆寫。
在繪製詳細形狀之前，對每個非文字視覺元素進行分類。將照片、螢幕截圖、插圖、複雜 SVG、產品圖像、品牌標誌、詳細圖示、漸層與雜訊作為 SVG/PNG/圖片素材匯出/匯入。僅在 Sketch 中重建簡單的 UI 基本元素、簡單的可編輯向量、分隔線、膠囊形狀與基本形狀。
對於圖示/標誌/圖片，首先使用簡單的佔位符建立佈局，然後在幾何形狀與堆疊順序穩定後再匯入/指派真實的圖片素材。對於重複的素材，偏好使用專用圖層上的符號圖片覆寫。
有關符號覆寫模式，請閱讀 references/symbols.md。有關匯入/匯出細節，請呼叫 get_guide 搭配 topic: "assets"。
步驟 7 — 僅進行目標性的修正
當使用者回報問題或螢幕截圖比較顯示不匹配時：
- 在變更前，使用
get_layer_tree_summary或目標探測檢查當前圖層。 - 僅變更回報的屬性：一個框架值、文字樣式、色彩、圖層順序、堆疊屬性或覆寫。
- 重新截圖並確認子層數量未變更，除非刪除是有意為之。
如果佈局損毀或圖層遺失，請立即告知並要求使用者先復原/還原後再繼續。
步驟 8 — 最終驗證與交接
在完成標準通過之前，請勿宣稱完成 — 請參閱 references/validation.md → 完成標準。
- 在參考錨點寬度下，使用
get_screenshot進行全框架截圖。 - 針對精確度規格中的每個頻段，對參考錨點截圖執行區域閘門。
- 如果仍有任何主要差異，請返回步驟 7 並迭代。請勿以「差不多」的佈局進行交接。
- 總結使用的符號、建立的代碼/樣式、目標畫板/框架名稱與 ID、已驗證的區域，以及任何剩餘的次要差異。
- 在任務完成之前，請勿執行
zoomToFitCanvas。
規則
特定於 Sketch → 設計的方向性規則。通用 MCP/腳本規則來自 get_guide 搭配 topic: "mcp"，Sketch 內容規則來自 get_guide 搭配 topic: "use"。
- 修補，不要重建。如果內容存在，請修正框架、樣式、覆寫或順序，而不是刪除並重新建立主要區域。
- 在重新排序、重新指定父層、新增或刪除操作前後，記錄子層數量基準。
- 切勿使用
parent.layers = [...]；使用layer.index進行重新排序，使用child.parent = newParent進行重新指定父層。 - 匹配參考的區域結構；相同的視覺內容應具有相同的父/子關係，除非有刻意理由需要偏離。
- 在每個有意義的批次之後進行截圖，並使用截圖差異來選擇下一個編輯。
- 結構化佈局預設使用堆疊。如果兄弟元素在參考中表現得像 flex、grid、list、form、nav 或 card 內容，則建立或保留 Sketch 堆疊，而不是手動放置每個子元素。
- 素材就是素材。不要將複雜的藝術作品、照片、螢幕截圖或品牌標誌重新繪製為低解析度的向量近似；應匯出/匯入或指派圖片/SVG 素材。
- 不猜測。不要從記憶或通用 UI 模式中發明佈局、文案、色彩、間距或素材。從參考中提取；如果某個值缺失，請重新獲取或詢問使用者。
- 始終使用參考錨點。將 Sketch 輸出與擷取的參考截圖進行比較——而不是您對頁面的回憶。
- 完成閘門。不要因為區塊存在或頁面「看起來相似」就停止。當 references/validation.md 的完成標準通過時才停止。
常見陷阱
- 為修復一個小不匹配而重建整個頁面會浪費已調整好的工作，並引入新的錯誤。應根據截圖差異進行精確編輯。
- 將圖片直接放置在符號實例上可能會破壞階層或在 API 中失敗。將圖片圖層放在主體中，並透過實例層級的圖片覆寫來驅動。
- 跳過截圖會隱藏佈局、排序與色彩錯誤。每個批次都應進行截圖。
- 使用
parent.layers = [...]重新排序可能會刪除子層或複製物件 ID。應改用安全的重新排序模式。 - 如果弄錯索引與打包方向，堆疊順序可能會看起來反轉。使用
get_guide搭配topic: "layout"並透過截圖驗證。 - 整個頁面或區域的腳本難以驗證、除錯與復原。應按區域、堆疊設定與小型兄弟批次進行分割。
- 使用手動框架建立的結構化佈局在間距或順序變更時會偏移。使用 Sketch 堆疊來處理行、列、列表、表單、導覽、卡片與重複區域。
- 將複雜藝術作品重建為基本形狀會產生低品質的近似。應匯出/匯入 SVG/PNG 或使用圖片覆寫；保留形狀給簡單的 UI 基本元素。
- 僅首次繪製的頁面截圖可能會遺漏延遲載入圖片與觸發滾動的 UI 狀態。使用瀏覽器或代理工具，滾動以觸發內容，然後擷取目標視埠。
- 過早完成：代理添加頁首/主體/頁尾並使用通用樣式後就停止。執行區域閘門與完成標準；持續修復直到主要差異消失。
- 即興創作文案與色彩：改寫標題、Lorem Ipsum 風格的填充文字，或預設的灰色/藍色而非提取的值。逐字使用精確度規格；從參考中重新取樣色彩。
- 佔位符持續存在：灰色方塊被留作「標誌」或「英雄圖片」。在交接前匯出/匯入真實素材，除非使用者要求佔位符。
故障排除
對於橋接/工具呼叫失敗、解析器錯誤、MCP 連線問題或截圖失敗，請在重試前呼叫 get_guide 搭配 topic: "troubleshooting"。
對於文件操作失敗：
- 佈局/堆疊/順序問題 →
get_guide搭配topic: "layout"。 - 符號覆寫問題 →
get_guide搭配topic: "symbols"。 - 匯出/匯入/圖片問題 →
get_guide搭配topic: "assets"。
設計建構症狀
- 腳本執行後子層數量減少：告知使用者復原，然後檢查操作。不要重複執行批量圖層指派。
get_screenshot為空或錯誤：重新解析框架/圖層 ID，如有需要則對頁面或父框架進行截圖。- 符號覆寫無效：重新獲取
get_symbol_overrides，使用commonOverrideIDPrefix + '_' + property重建覆寫 ID，然後進行截圖。 - 文字在行堆疊中重疊：檢查子層順序與間距；一次修正一個堆疊屬性或子層索引。
參考資料
get_guide搭配topic: "mcp"— MCP 工具、run_code、疑難排解、視覺驗證與完成規則get_guide搭配topic: "use"— Sketch 編輯、堆疊、符號、樣式、覆寫、素材與內容驗證get_guide搭配topic: "layout"— 堆疊、頁面放置、尺寸調整、固定、容器類型、重新排序/重新指定父層與佈局偏移- 參考提取
- 安全編輯模式
- 符號覆寫模式
- 驗證迴圈
- Sketch JavaScript API
- StackLayout
- 符號覆寫（透過 MCP 中的
get_symbol_overrides確認）