Công cụ Chụp ảnh

Cung cấp cho AI ngữ cảnh hình ảnh chính xác. Ảnh chụp màn hình, chọn phần tử và hình ảnh.

Ngữ cảnh hình ảnh bạn cung cấp cho AI càng chính xác, các chỉnh sửa của AI càng tốt. Proyecta tích hợp sẵn nhiều công cụ chụp ảnh.

Chọn một phần tử (Visual Editor)

Trong chế độ Visual Editor, mọi phần tử trong bản xem trước đều có thể nhấp vào. Di chuột để tô sáng, nhấp để chọn. Phần tử được chọn sẽ được đánh dấu bằng một lớp phủ, và các thuộc tính có thể chỉnh sửa (văn bản, màu sắc, khoảng cách, font chữ, đường viền, hiệu ứng) sẽ hiển thị trong bảng sidebar.

Sau khi chọn một phần tử, bạn có thể:

• Chỉnh sửa trực tiếp — thay đổi các thuộc tính ngay tại chỗ mà không cần viết bất kỳ prompt nào
• Hỏi AI về nó — phần tử được chọn sẽ được truyền làm ngữ cảnh, cho phép bạn nói "make this button bigger" hoặc "move this section above the hero" và AI biết chính xác bạn đang muốn gì

Các phần tử động (computed classNames, conditional rendering, expressions) sẽ tự động chuyển sang AI chat với một prompt có cấu trúc.

Xem Visual Edit để biết danh sách đầy đủ các thuộc tính có thể chỉnh sửa.

Dán hoặc kéo ảnh chụp màn hình vào chat

Ô nhập chat chấp nhận hình ảnh trực tiếp:

1. Dán — chụp màn hình bằng phím tắt của hệ điều hành (Cmd+Shift+4 trên Mac, Win+Shift+S trên Windows) rồi dán vào chat
2. Kéo thả — kéo bất kỳ file hình ảnh nào và thả vào ô nhập chat

Định dạng được hỗ trợ: PNG, JPEG, WebP, GIF, AVIF. Kích thước tối đa: 10 MB mỗi hình ảnh.

Ảnh chụp màn hình bản xem trước

AI có thể tự chụp ảnh màn hình bản xem trước của bạn bất kỳ lúc nào thông qua công cụ preview_screenshot tích hợp sẵn. Bạn sẽ thấy kết quả ảnh chụp hiển thị ngay trong chat. AI tự động gọi công cụ này khi cần xác minh các thay đổi hoặc hiểu trạng thái hiện tại của ứng dụng.

Công cụ chụp màn hình có thể nhắm đến các route cụ thể (ví dụ: /dashboard, /settings) và ghi lại kích thước, giúp AI suy luận về bố cục và khoảng cách.

Câu hỏi thường gặp

Làm thế nào để chỉ cho AI biết một button hoặc đoạn văn bản cụ thể?

Hãy dùng chế độ Visual Editor và nhấp vào phần tử đó. Thao tác này sẽ truyền một tham chiếu chính xác, có cấu trúc đến AI — hiệu quả hơn nhiều so với việc mô tả phần tử bằng lời.

Sắp ra mắt

Các công cụ chụp ảnh sau đây đã được triển khai nội bộ nhưng chưa hiển thị trong giao diện:

• Annotate — chụp bản xem trước hiện tại và vẽ mũi tên, hình chữ nhật, hình tròn, nét vẽ tự do, và nhãn văn bản lên đó trước khi gửi cho AI.
• Screen Record — ghi lại một tương tác nhiều bước (nhấp chuột, điều hướng, hoạt ảnh) và đính kèm các khung hình đã chụp vào tin nhắn chat của bạn. Lý tưởng cho các lỗi nhạy cảm về thời gian mà một ảnh chụp màn hình duy nhất không thể ghi lại được.