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วิดเจ็ตฟอร์ม
เอเจนต์วางตัวควบคุมฟอร์มที่ใช้งานได้จริง ได้แก่ ช่องกรอกข้อความ พื้นที่ข้อความ ช่องกรอกตัวเลข ตัวเลือกแบบดรอปดาวน์ กลุ่มปุ่มตัวเลือก สวิตช์ ช่องทำเครื่องหมาย แถบเลื่อน แถบความคืบหน้า และแท็บ