Design EditorDokumentasiAgen dan AI
Alat MCP
Agen bekerja melalui sekitar 190 alat: membaca dokumen, mengubahnya, membuat halaman utuh, mengimpor, mengekspor, dan menulis kode.
1Dari mana agen sebaiknya memulai
get_editor_state mengembalikan dokumen, halaman, dan pilihan yang terbuka. ToolSearch menemukan alat yang tepat berdasarkan kata kunci, sehingga agen tidak memerlukan seluruh daftar sejak awal.
2Alur kerja berlapis
design_skeletonmenyusun frame halaman dan bagian-bagiannya.design_contentmengisi satu bagian dalam satu waktu.design_refinememoles halaman yang sudah selesai.finalize_designmenjalankan serangkaian perbaikan tetap pada seluruh halaman.
Perbaikan hanya menyentuh apa yang dibuat agen, tidak pernah layer milik Anda. Halaman baru ditempatkan di sebelah kanan pekerjaan yang sudah ada, bukan menimpanya.
3Kelompok alat
| Kelompok | Contoh |
|---|---|
| Dokumen | open_document, save_document, lint_document, get_design_quality |
| Baca | read_nodes, find_node_by_name, snapshot_layout, find_empty_space |
| Edit | insert_node, update_node, move_node, replace_all_matching_properties |
| Pilihan | set_selection, align_selected, group_selected, boolean_op, undo |
| Halaman | add_page, duplicate_page, reorder_page, set_active_page |
| Komponen | create_component, instantiate_component, add_library, 37 alat kit insert_* |
| Variabel | set_variables, set_themes, apply_design_system, save_theme_preset |
| Panduan | get_design_md, get_style_guide, get_guidelines |
| Pembuatan | batch_design, execute, generate, enrich_images, run_design_agent |
| Impor | import_svg, import_html, import_html_url, import_pen_dev |
| Ekspor | get_screenshot, export_nodes, export_frames, export_deck |
| Kode | codegen_export, codegen_plan, codegen_assemble |
| Pratinjau | set_screen, set_slide_transition, capture_preview, browser |
de tools menampilkan setiap alat beserta parameternya, dan de <tool> key=value memanggil satu alat dari terminal.
4Skrip
execute menjalankan JavaScript pada dokumen. Satu skrip utuh adalah satu langkah urungkan, sehingga agen dapat membuat seratus perubahan dan Anda dapat membatalkan semuanya dengan satu Cmd+Z.
5Gambar dan vektor
generate membuat gambar AI, mencari foto stok, menggambar SVG, mengubah gambar menjadi vektor, serta menghapus atau mengganti latar belakang. enrich_images mengisi slot gambar kosong dengan foto dari Openverse, dan beralih ke Wikimedia jika tidak ada.
6Widget formulir
Agen dapat menempatkan kontrol formulir yang berfungsi: input teks, area teks, input angka, pilihan dropdown, grup radio, sakelar, kotak centang, slider, bilah progres, dan tab.