Canvas Agent Design

Thiết kế canvas cộng tác giữa người và agent trong thời gian thực

Cộng tác với agent không nên tối ưu cho việc hai bên cùng kéo sửa mọi thứ trong cùng một lúc. Nó nên tối ưu cho việc hai bên luôn hiểu cùng một trạng thái, biết lúc nào ai đang chịu trách nhiệm, và có thể trao lại quyền mà không làm mất công sức của nhau. Agent cần dừng để hỏi khi chưa chắc, người dùng cần thấy rõ agent đang dựa trên thông tin nào, và mọi thay đổi quan trọng phải có đường quay lại.

Tác giả: Lương Quốc Dũng Bằng chứng: quan sát trực tiếp một phiên Claude Design thật (không phải PAM/MindPal)

00Phiên quan sát

Đề bài không yêu cầu dựa trên PAM/MindPal. Nguồn bằng chứng cho bài này là một phiên làm việc thật với Claude Design — sản phẩm đúng loại "human↔agent canvas" mà đề bài hỏi. Transcript dưới đây là dữ liệu thô.

Human
"tạo ra một bản vẽ xây dựng ngôi nhà 2 tầng theo phong cách tối giản, sang trọng, clean"
Agent
Claude has some questions →Hỏi lại 5 mục: scope, land_size, style_ref, color, deliverable — trước khi bắt tay làm.
Agent
Copying starter ×2 → Designing → Finishing upTạo trang concept, báo rõ phần còn thiếu (ảnh cần người dùng thả vào) — Created 3 files
Human
"Tạo ra thiết kế bản vẽ luôn"
Agent
Refining design ×2 → Finishing upThay placeholder bằng bản vẽ mặt đứng thực tế — Edited Biet Thu Concept.dc.html
Agent
Found issues — fixing…Tự phát hiện và sửa lỗi tràn header, không có yêu cầu từ human — Edited Biet Thu Concept.dc.html
Human
Vào chế độ Edit, chọn phần tử trên canvas, chỉnh nội dung trực tiếp, kéo nhầm làm tiêu đề đổi ngoài ý muốn → bấm Undo trên toolbar → khôi phục gần như tức thời.

01Interaction model

Có shared canvas thật về mặt thao tác, nhưng trong phiên quan sát, sự cộng tác chưa thật sự diễn ra đồng thời: human có thể chạm canvas nhưng chủ yếu chọn giao việc qua chat. Khoảng cách nằm giữa "có thể cùng sửa" và "thực sự phối hợp khi cùng sửa."

Điều đã quan sát được

quan sát trực tiếp
  • Bàn giao quyền rõ ràng (explicit handoff): "Claude has some questions" khiến agent dừng để hỏi; sau khi tạo xong, agent trả kết quả để người dùng quyết định bước tiếp.
  • Ngữ cảnh chung được vật thể hóa: scope, land_size, style_ref, color, deliverable. Đây không còn là trí nhớ mơ hồ trong chat mà là một bản tóm tắt đọc được.
  • Chỉnh sửa trực tiếp + hoàn tác có thật: đã thử vào Edit, chạm trực tiếp vào canvas. Một lần kéo làm tiêu đề đổi ngoài ý muốn; đã hoàn tác thành công. Điều này chứng minh chỉnh sửa trực tiếp và khả năng hoàn tác — nhưng chưa chứng minh đề xuất của agent luôn có thể hoàn tác.

Điều đề xuất (chưa quan sát được)

đề xuất thiết kế
  • Phân vùng quyền sửa giữa người và agent (scoped ownership).
  • Mọi thay đổi lớn của agent nên đi qua một lớp đề xuất để người dùng duyệt, thay vì ghi thẳng vào bản chính (reversible proposals).

02Agent "sees" the canvas bằng gì

Câu chốt Agent không "nhìn canvas" như một họa sĩ nhìn pixel. Nó làm việc trên artifact có cấu trúc — file và cây phần tử — rồi dùng bản render để kiểm tra kết quả thị giác.

Bằng chứng cho vế thứ nhất: agent thao tác qua Created 3 files / Edited Biet Thu Concept.dc.html — đơn vị hành động là file, không phải pixel. Bằng chứng cho vế thứ hai: sự kiện Found issues — fixing… dẫn tới "Đã sửa lỗi tràn header" — lỗi tràn header là lỗi thị giác, loại lỗi khó phát hiện nếu agent chỉ đọc thuộc tính CSS dạng số mà không có một bước kiểm tra bằng render/hình ảnh.

Vì vậy: cấu trúc (file/DOM) là nơi agent hành động; render là nơi nó tự kiểm. Hai kênh không ngang hàng — chúng phục vụ hai việc khác nhau.

03Conflict & undo

quan sát trực tiếp

Canvas có thể ghi nhận chỉnh sửa tay và hoàn tác chúng: khi thao tác kéo/nhập sai vùng, nội dung bị thay đổi ngoài ý muốn; nút Undo khôi phục được gần như tức thời. Đây là bằng chứng về rủi ro của chỉnh sửa trực tiếp và khả năng hoàn tác ở cấp một bước.

Điều chủ động không kết luận Đã thử kiểm tra bước tiếp theo — lưu một chỉnh sửa tay rồi yêu cầu agent sửa phần khác, xem chỉnh sửa tay có bị ghi đè không — nhưng thao tác nhập qua giao diện không ổn định, có thể tạo một phần tử văn bản mới thay vì cập nhật đúng phần tử cũ. Không đủ sạch để gọi đó là conflict agent–human đã xác minh.

Vì sao vẫn đáng nói dù chưa xác minh được thực nghiệm

Kết luận không phụ thuộc thực nghiệm đó: vì đơn vị hành động của agent là file (mục 02), đơn vị xung đột cũng phải kiểm tra ở cấp file và phiên bản tài liệu — không chỉ ở cấp hai con trỏ chuột như mô hình OT/CRDT truyền thống của editor nhiều người (kiểu Google Docs) vốn xử lý xung đột giữa hai người gõ cùng dòng, không xử lý chuyện một bên viết lại cả file.

Đề xuất — chưa quan sát trực tiếp "Stale revision" là điều kiện xung đột đề xuất hệ thống phải phát hiện: agent đang sửa dựa trên một bản cũ, trong khi human đã sửa tay sau đó rồi. Xuất phát từ thử nghiệm chỉnh sửa tay chưa xác minh được đến mức agent ghi đè file; đây không phải hành vi đã quan sát trực tiếp.

04Architecture của collaboration loop

Bảy nút, với một gate rẽ nhánh dựa trên rủi ro/xung đột — không phải một luồng thẳng.

Human prompt / canvas action
Structured brief + document revision
Agent edits source artifact (file/DOM)
Render + structural check + visual check
Risk / conflict gate
low risk
Direct commit + one-step undo
high risk / overlap / stale revision
Proposal + review
Updated canvas + handoff

Tiêu chí rẽ nhánh ở gate

Mức rủi roThay đổi nhỏ, cục bộ → commit thẳng. Thay đổi lớn, lan rộng nhiều phần → cần duyệt.
Vùng chồng lấnAgent định sửa đúng vùng human vừa thao tác tay → chuyển sang proposal thay vì ghi đè.
Revision cũ (stale)Agent đang dựa trên bản trước khi có chỉnh sửa tay mới nhất → dừng lại, không commit thẳng.

05Interaction design — người dùng thấy gì

Bốn điểm chạm, lấy trực tiếp từ phiên quan sát — không suy diễn thêm chỗ chưa thử.

Lúc agent đang xử lý
quan sát trực tiếp

Trạng thái hiện trong khung chat dưới dạng các bước tuần tự như Copying starter ×2, Designing, Finishing up, sau đó có thông báo kết quả. Không thấy một loading chung duy nhất; cũng chưa xác minh được mỗi bước tương ứng với một tiến trình kỹ thuật riêng.

"Claude has some questions →"
quan sát trực tiếp

Xuất hiện trong khung chat. Người dùng trả lời bằng văn bản tự do; sau đó transcript được gom thành các cặp key–value (scope, land_size, style_ref, color, deliverable). Không thấy một form UI riêng.

Kéo nhầm → Undo
quan sát trực tiếp

Bấm nút Undo trên toolbar. Thay đổi được khôi phục gần như ngay lập tức trên canvas; không thấy độ trễ đáng kể.

Comment / Tweaks / Present / Share
chưa thử

Chưa quan sát trực tiếp. Không suy ra chức năng từ tên nút.

06Giới hạn & điều tôi không hứa

  • Toàn bộ bài dựa trên một phiên quan sát duy nhất (n=1) với một loại thay đổi (thêm nội dung, sửa văn bản) — không bao trùm mọi loại thao tác canvas có thể có.
  • Scoped ownership và reversible proposals là đề xuất kiến trúc, chưa quan sát được trong phiên thật.
  • "Stale revision" là điều kiện gate đề xuất, xuất phát từ một thử nghiệm không đủ sạch để kết luận — không phải hành vi đã xác minh của hệ thống thật.
  • Comment / Tweaks / Present / Share — bốn công cụ trên toolbar chưa được thử, không đưa vào phần thiết kế dựa trên suy đoán tên gọi.
  • Kết luận về "agent sees the canvas" (file/DOM + render để tự kiểm) dựa trên suy luận từ một sự kiện quan sát được (sửa lỗi tràn header), không phải tài liệu kỹ thuật xác nhận trực tiếp cơ chế bên trong.