Design Editorドキュメントエージェントと AI
MCP ツール
エージェントは約 190 のツールで作業します。ドキュメントの読み取りと変更、ページ全体の生成、インポート、エクスポート、コードの作成ができます。
1エージェントの出発点
get_editor_state は開いているドキュメント、ページ、選択範囲を返します。ToolSearch はキーワードで適切なツールを見つけるので、エージェントは最初から全ツールの一覧を持っている必要はありません。
2レイヤードワークフロー
design_skeletonがページのフレームとセクションを配置します。design_contentがセクションをひとつずつ埋めていきます。design_refineが完成したページを仕上げます。finalize_designがページ全体に決まった修正処理をかけます。
修正の対象はエージェントが生成した部分だけで、あなたのレイヤーには触れません。新しいページは既存の作業の上ではなく右側に配置されます。
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 を実行します。スクリプト全体が 1 回の取り消し単位になるため、エージェントが 100 箇所を変更しても、Cmd+Z 1 回で元に戻せます。
5画像とベクター
generate は AI 画像の生成、ストック写真の検索、SVG の描画、画像のベクター化、背景の削除や差し替えを行います。enrich_images は空の画像スロットを Openverse の写真で埋め、見つからない場合は Wikimedia を使います。
6フォームウィジェット
エージェントは実際に動作するフォームコントロールを配置できます：テキスト入力、テキストエリア、数値入力、セレクト、ラジオグループ、スイッチ、チェックボックス、スライダー、プログレスバー、タブ。