Design Editor文件Agent 與 AI
MCP 工具
Agent 透過約 190 個工具工作：讀取文件、修改文件、產生整個頁面、匯入、匯出和撰寫程式碼。
1Agent 該從哪裡開始
get_editor_state 會回傳目前開啟的文件、頁面和選取範圍。ToolSearch 依關鍵字找到合適的工具，因此 Agent 不必一開始就載入完整清單。
2分層工作流程
design_skeleton配置頁面畫框及其區塊。design_content一次填入一個區塊。design_refine潤飾完成的頁面。finalize_design對整個頁面執行固定的修復流程。
修復只會處理 Agent 產生的內容，絕不會動到你自己的圖層。新頁面會放在現有作品的右側，而不是疊在上面。
3工具分組
| 分組 | 範例 |
|---|---|
| 文件 | open_document, save_document, lint_document, get_design_quality |
| 讀取 | read_nodes, find_node_by_name, snapshot_layout, find_empty_space |
| 編輯 | insert_node, update_node, move_node, replace_all_matching_properties |
| 選取 | set_selection, align_selected, group_selected, boolean_op, undo |
| 頁面 | add_page, duplicate_page, reorder_page, set_active_page |
| 元件 | create_component, instantiate_component, add_library，以及 37 個 insert_* 套件工具 |
| 變數 | set_variables, set_themes, apply_design_system, save_theme_preset |
| 指引 | get_design_md, get_style_guide, get_guidelines |
| 生成 | batch_design, execute, generate, enrich_images, run_design_agent |
| 匯入 | import_svg, import_html, import_html_url, import_pen_dev |
| 匯出 | get_screenshot, export_nodes, export_frames, export_deck |
| 程式碼 | codegen_export, codegen_plan, codegen_assemble |
| 預覽 | set_screen, set_slide_transition, capture_preview, browser |
de tools 會列出每個工具及其參數，de <tool> key=value 則可從終端機呼叫某個工具。
4腳本
execute 會對文件執行 JavaScript。整個腳本算作一個復原步驟，因此即使 Agent 做了上百項變更，你也只要按一次 Cmd+Z 就能全部還原。
5圖片和向量圖
generate 可以產生 AI 圖片、尋找圖庫相片、繪製 SVG、將圖片向量化，以及移除或替換背景。enrich_images 會用 Openverse 的相片填入空白的圖片位置，找不到時改用 Wikimedia。
6表單控制項
Agent 可以放置可實際操作的表單控制項：文字輸入框、多行文字框、數字輸入框、下拉選單、選項按鈕群組、切換開關、核取方塊、滑桿、進度列和分頁標籤。