Capture Tools

ให้บริบทภาพที่แม่นยำแก่ AI ทั้งภาพหน้าจอ การเลือกองค์ประกอบ และรูปภาพ

ยิ่งคุณให้บริบทภาพแก่ AI ได้แม่นยำเท่าไร การแก้ไขก็จะยิ่งดีขึ้นเท่านั้น Proyecta มี capture tools หลายแบบให้ใช้งาน

เลือกองค์ประกอบ (Visual Editor)

ในโหมด Visual Editor องค์ประกอบทุกชิ้นใน preview จะสามารถคลิกได้ ลองวางเมาส์เพื่อไฮไลต์ แล้วคลิกเพื่อเลือก องค์ประกอบที่เลือกจะถูกไฮไลต์ด้วย overlay และคุณสมบัติที่แก้ไขได้ (ข้อความ สี ระยะห่าง ฟอนต์ เส้นขอบ เอฟเฟกต์) จะปรากฏในแผงด้านข้าง

เมื่อเลือกองค์ประกอบแล้ว คุณสามารถ:

• แก้ไขโดยตรง — เปลี่ยนคุณสมบัติได้เลยโดยไม่ต้องพิมพ์ prompt
• ถาม AI เกี่ยวกับองค์ประกอบนั้น — การเลือกจะถูกส่งเป็น context เพื่อให้คุณพูดว่า "make this button bigger" หรือ "move this section above the hero" และ AI จะรู้ว่าคุณหมายถึงอะไร

องค์ประกอบแบบ dynamic (เช่น computed classNames, conditional rendering, expressions) จะ fallback ไปยัง AI chat โดยอัตโนมัติพร้อม prompt ที่มีโครงสร้างชัดเจน

ดู Visual Edit สำหรับรายการคุณสมบัติที่แก้ไขได้ทั้งหมด

วางหรือลากภาพหน้าจอเข้า chat

ช่องพิมพ์ chat รองรับรูปภาพโดยตรง:

1. Paste — คัดลอกภาพหน้าจอด้วยคีย์ลัดของระบบปฏิบัติการ (Cmd+Shift+4 บน Mac, Win+Shift+S บน Windows) แล้ววางลงใน chat
2. Drag — ลากไฟล์รูปภาพใดก็ได้มาวางบนช่องพิมพ์ chat

รูปแบบที่รองรับ: PNG, JPEG, WebP, GIF, AVIF ขนาดสูงสุด: 10 MB ต่อรูปภาพ

Preview screenshots

AI สามารถถ่ายภาพหน้าจอ preview ของคุณได้เองทุกเมื่อผ่าน tool ในตัวที่ชื่อ preview_screenshot คุณจะเห็นผลลัพธ์ภาพหน้าจอปรากฏแบบ inline ใน chat โดย AI จะเรียกใช้งานนี้โดยอัตโนมัติเมื่อต้องการตรวจสอบการเปลี่ยนแปลง หรือทำความเข้าใจสถานะปัจจุบันของแอปของคุณ

screenshot tool สามารถกำหนดเป้าหมายไปยัง route เฉพาะได้ (เช่น /dashboard, /settings) และจับข้อมูลขนาด ซึ่งช่วยให้ AI วิเคราะห์เรื่อง layout และระยะห่างได้แม่นยำยิ่งขึ้น

คำถามที่พบบ่อย

จะชี้ให้ AI โฟกัสที่ปุ่มหรือข้อความเฉพาะได้อย่างไร?

ใช้โหมด Visual Editor แล้วคลิกที่องค์ประกอบนั้น วิธีนี้จะส่ง reference ที่แม่นยำและมีโครงสร้างชัดเจนไปยัง AI — ได้ผลดีกว่าการอธิบายองค์ประกอบด้วยคำพูดมาก

เร็วๆ นี้

capture tools ต่อไปนี้ได้รับการพัฒนาไว้แล้วในระดับภายใน แต่ยังไม่เปิดให้ใช้งานบน UI:

• Annotate — จับภาพ preview ปัจจุบัน แล้ววาดลูกศร สี่เหลี่ยม วงกลม เส้นอิสระ และป้ายข้อความลงไปก่อนส่งให้ AI
• Screen Record — บันทึกการโต้ตอบหลายขั้นตอน (การคลิก การนำทาง แอนิเมชัน) และแนบ frame ที่จับไว้ไปกับข้อความ chat ของคุณ เหมาะสำหรับ bug ที่ขึ้นอยู่กับ timing ซึ่งภาพหน้าจอเดียวไม่สามารถแสดงให้เห็นได้