Công cụ MCP

Agent làm việc qua khoảng 190 công cụ: đọc tài liệu, thay đổi nó, tạo cả trang, nhập, xuất và viết mã.

1Agent nên bắt đầu từ đâu

get_editor_state trả về tài liệu, trang và vùng chọn đang mở. ToolSearch tìm đúng công cụ theo từ khoá, nên agent không cần cả danh sách ngay từ đầu.

2Quy trình theo tầng

design_skeleton dựng khung trang và các phần của nó.
design_content lấp nội dung từng phần một.
design_refine hoàn thiện một trang đã xong.
finalize_design chạy các lượt sửa lỗi cố định trên toàn trang.

Các lượt sửa chỉ tác động đến những gì agent đã tạo, không bao giờ đụng vào lớp của bạn. Trang mới được đặt bên phải phần việc hiện có thay vì chồng lên nó.

3Nhóm công cụ

Nhóm	Ví dụ
Tài liệu	`open_document`, `save_document`, `lint_document`, `get_design_quality`
Đọc	`read_nodes`, `find_node_by_name`, `snapshot_layout`, `find_empty_space`
Chỉnh sửa	`insert_node`, `update_node`, `move_node`, `replace_all_matching_properties`
Vùng chọn	`set_selection`, `align_selected`, `group_selected`, `boolean_op`, `undo`
Trang	`add_page`, `duplicate_page`, `reorder_page`, `set_active_page`
Thành phần	`create_component`, `instantiate_component`, `add_library`, 37 công cụ kit `insert_*`
Biến	`set_variables`, `set_themes`, `apply_design_system`, `save_theme_preset`
Hướng dẫn	`get_design_md`, `get_style_guide`, `get_guidelines`
Tạo	`batch_design`, `execute`, `generate`, `enrich_images`, `run_design_agent`
Nhập	`import_svg`, `import_html`, `import_html_url`, `import_pen_dev`
Xuất	`get_screenshot`, `export_nodes`, `export_frames`, `export_deck`
Mã	`codegen_export`, `codegen_plan`, `codegen_assemble`
Xem trước	`set_screen`, `set_slide_transition`, `capture_preview`, `browser`

de tools in ra mọi công cụ kèm tham số, và de <tool> key=value gọi một công cụ từ terminal.

4Script

execute chạy JavaScript trên tài liệu. Cả một script là một bước hoàn tác, nên agent có thể thực hiện một trăm thay đổi và bạn có thể hoàn tác tất cả chỉ với một lần Cmd+Z.

5Hình ảnh và vector

generate tạo ảnh AI, tìm ảnh stock, vẽ SVG, chuyển ảnh thành vector, xoá hoặc thay nền. enrich_images lấp các ô ảnh trống bằng ảnh từ Openverse, và dùng Wikimedia khi không tìm thấy.

6Điều khiển biểu mẫu

Agent có thể đặt các điều khiển biểu mẫu hoạt động thật: ô nhập văn bản, vùng văn bản, ô nhập số, danh sách chọn, nhóm nút radio, công tắc, hộp kiểm, thanh trượt, thanh tiến trình và tab.

Tài liệuAgent và AI