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, insert_* 키트 도구 37개 |
| 변수 | 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를 실행합니다. 스크립트 전체가 실행 취소 한 단계이므로, 에이전트가 백 군데를 바꿔도 Cmd+Z 한 번으로 되돌릴 수 있습니다.
5이미지와 벡터
generate는 AI 이미지를 만들고, 스톡 사진을 찾고, SVG를 그리고, 이미지를 벡터로 바꾸고, 배경을 제거하거나 교체합니다. enrich_images는 빈 이미지 자리를 Openverse 사진으로 채우고, 없으면 Wikimedia를 사용합니다.
6폼 위젯
에이전트는 실제로 동작하는 폼 컨트롤을 배치할 수 있습니다: 텍스트 입력, 텍스트 영역, 숫자 입력, 선택 상자, 라디오 그룹, 스위치, 체크박스, 슬라이더, 진행률 표시줄, 탭.