Agentic Canvas: Thiết kế cùng AI agent16 min read

AI agent có thể tạo một website trong vài phút. Nhưng sau đó bạn muốn di chuyển một nút, so sánh hai bố cục, gom vài ảnh chụp màn hình hoặc tự chỉnh khoảng cách. Thế là bạn lại phải giải thích một thay đổi trực quan bằng prompt mới. Đôi khi kéo thả dễ hơn viết prompt.

Đó là lý do chúng tôi tạo ra Agentic Canvas của AgentGrid.io. Đây là không gian thiết kế AI miễn phí, nơi bạn và agent hỗ trợ MCP cùng làm việc trên một trang HTML và CSS thực. Nhập HTML, bắt đầu từ một thiết kế hoặc hình ảnh, hay nhờ agent tạo trang. Sau đó bạn có thể chọn, di chuyển, đổi kích thước và chỉnh sửa những gì agent đã tạo. Bạn có thể mở Agentic Canvas mà không cần tạo tài khoản.

Cách dùng rất đơn giản: nhập trang HTML hoặc hình ảnh, sắp xếp và chỉnh sửa trực quan, nhờ Claude hoặc ChatGPT tinh chỉnh hoạt ảnh hay tương tác, rồi xuất HTML. Bạn có thể tự tay chỉnh sửa bất cứ lúc nào, không phải viết lại prompt từ đầu.

Agentic Canvas là gì?

Đây là không gian làm việc trực quan để thiết kế trang web thật cùng AI agent. Canvas có các khung, lớp, bảng kiểm tra và công cụ bố cục quen thuộc, nhưng các khung dựa trên mã chứ không phải ảnh tĩnh. Agent kết nối qua MCP có thể đọc và sửa trang hiện tại. Bạn xem kết quả, tự chỉnh sửa rồi để agent tiếp tục từ thiết kế đã cập nhật.

Hãy hình dung đây là nơi người nhận ra điều cần sửa và agent có thể viết mã cùng làm việc trên một trang.

Vì sao chúng tôi cần một không gian thiết kế cho AI agent

1. Cùng thiết kế trực quan mà không phải lặp lại prompt

Khi làm trang đích, màn hình sản phẩm hoặc nội dung marketing cùng Claude hay ChatGPT, bản nháp đầu tiên mới chỉ là khởi đầu. Bạn có thể muốn ba phiên bản phần mở đầu, bố cục lưới gọn hơn hoặc lời kêu gọi hành động khác. Giải thích mọi quyết định trực quan trong cuộc trò chuyện rất mất thời gian, nhất là khi bạn đã biết chính xác mình muốn sửa gì.

Trong Canvas, bạn có thể thực hiện thay đổi trực tiếp. Agent có thể đọc trang như hiện tại, không phải mô tả bằng lời về phiên bản đã thay đổi. Nó làm phần việc nặng, bạn tự tay đưa ra quyết định cuối cùng, và nó tiếp tục từ chỗ bạn dừng lại.

2. Nơi tập hợp tư liệu trực quan

Có ý tưởng bắt đầu từ bảng cảm hứng chứ không phải bản đặc tả. Hãy gom ảnh chụp màn hình, trang tham khảo, hình ảnh và văn bản, sắp xếp chúng trên canvas và thêm tư liệu giúp diễn đạt điều bạn muốn làm. AI agent có thể dựa vào thiết kế trước mắt thay vì đoán từ lịch sử trò chuyện dài.

Điều này quan trọng với thiết kế thương hiệu. Một bố cục tham khảo, đoạn nội dung và ảnh chụp màn hình có thể truyền đạt ý định nhanh hơn một đoạn văn khác mô tả cảm giác bạn muốn tạo ra.

3. Vì sao canvas dùng HTML và CSS thực

Tại sao xây dựng công cụ thiết kế trên HTML và CSS? Vì các coding agent vốn đã đọc và viết mã thành thạo. Với tôi, bắt agent làm việc qua một định dạng thiết kế riêng giống như yêu cầu người bản ngữ tiếng Anh suy nghĩ bằng tiếng Anh nhưng đọc và viết bằng tiếng Trung. Khâu chuyển đổi này có thể làm mất chi tiết, tốn thời gian và token. Tôi từng lập luận rằng Thiết kế là mã. Ở đây, ý tưởng ấy trở thành hiện thực.

Với Agentic Canvas, mỗi khung là một trang thực, bố cục tự động tương ứng với CSS flexbox và lưới là CSS grid. Bạn có thể chỉnh sửa nút trực quan, nhờ agent thêm hoạt ảnh hoặc tương tác rồi xuất mã khi sẵn sàng. Các trang trực tiếp trên canvas có thể chạy script, hiệu ứng hover và hành vi responsive. Đây không phải một bức ảnh phải dựng lại sau này.

Điều này khác gì một không gian thiết kế thông thường?

Canvas thiết kế thông thường giúp bạn bố trí ý tưởng trực quan, nhưng kết quả thường cần thêm một bước triển khai để thành trang web hoạt động. Agentic Canvas là công cụ thiết kế HTML: mỗi khung là một trang thực, nên agent có thể đọc và sửa chính HTML và CSS mà bạn đang chỉnh trực quan. Điều đó không có nghĩa nó có mọi tính năng của bộ công cụ thiết kế lâu đời. Mục tiêu là giữ quyết định thiết kế và mã chạy được trong cùng một quy trình, dù bạn đang sửa website do AI tạo hay làm website mới.

Cách thiết kế website với Claude hoặc ChatGPT trên Agentic Canvas

1. Bắt đầu với những gì bạn có. Mở canvas và dán HTML, sao chép và dán từ Figma, nhập hình ảnh hoặc thiết kế, hay bắt đầu với trang do agent tạo. hướng dẫn nhập liệt kê các cách bắt đầu được hỗ trợ.
2. Kết nối agent của bạn. Trong canvas, chọn AI agents, rồi chọn Add an agent. Làm theo hướng dẫn kết nối để kết nối Claude, ChatGPT hoặc ứng dụng khác hỗ trợ MCP. Giữ tab canvas mở khi agent đang làm việc.
3. Cùng nhau đi qua lần đầu. Yêu cầu bố cục hoặc tương tác, sau đó kiểm tra kết quả trực tiếp trên canvas.
4. Tự tay chỉnh sửa trực quan. Di chuyển các phần tử, thay đổi màu sắc, thay đổi kích thước khung và tinh chỉnh bố cục bằng tay. Yêu cầu agent tiếp tục từ phiên bản mới nhất.
5. Xuất hoặc chia sẻ khi đã sẵn sàng. Xuất HTML hoặc định dạng được hỗ trợ khác mà không cần xuất bản. Nếu muốn có đường dẫn được lưu trữ, bạn có thể chia sẻ hoặc xuất bản qua AgentGrid.io. Bước dùng dịch vụ đám mây này là tùy chọn và cần tài khoản.

Những gì được lưu cục bộ và khi nào cần tài khoản?

Bạn có thể bắt đầu thiết kế miễn phí ngay trong trình duyệt mà không cần đăng ký. Các tệp được lưu trong trình duyệt đó trên thiết bị đó, chứ không tự động sao lưu giữa các thiết bị. Hãy xuất bản sao công việc bạn muốn giữ bên ngoài trình duyệt. Khi kết nối agent bên ngoài, agent có thể đọc canvas qua mạng, vì vậy lưu cục bộ không có nghĩa là làm việc ngoại tuyến. Chia sẻ hoặc xuất bản qua AgentGrid.io là tùy chọn và cần tài khoản.

Tôi tin rằng công cụ thiết kế tiếp theo không nên buộc chúng ta chọn giữa quyền kiểm soát trực quan và một agent có thể xây dựng. Agent nên làm việc bằng ngôn ngữ gốc của sản phẩm, còn chúng ta vẫn có thể chạm vào thứ trên màn hình và thay đổi nó.

Mở Agentic Canvas và thử thiết kế cùng agent của bạn. Để xem nhanh quy trình làm việc, xem video giới thiệu và khám phá các tính năng.

Các câu hỏi về Agentic Canvas

Agentic Canvas có miễn phí không, và tôi có cần tài khoản không?

Có, canvas thiết kế miễn phí. Mở trên trình duyệt và bắt đầu thiết kế mà không cần tài khoản. Bạn chỉ cần tài khoản AgentGrid.io nếu chọn chia sẻ hoặc xuất bản qua AgentGrid.io.

Những tác nhân AI nào làm việc với Agentic Canvas?

Claude, ChatGPT, Claude Code, Codex, Cursor và các agent hỗ trợ MCP khác có thể đọc và sửa canvas đang mở. Chọn AI agents và sau đó Add an agent để làm theo các bước kết nối. Giữ tab canvas mở khi agent làm việc.

Tôi có thể chỉnh sửa một trang web do AI tạo ra một cách trực quan không?

Đúng vậy. Đưa trang HTML hoặc thư mục site vào, sau đó di chuyển, thay đổi kích thước và tinh chỉnh các phần tử trên canvas. Các khung là HTML và CSS thật, nên agent có thể tiếp tục từ các chỉnh sửa trực quan của bạn thay vì phải xây dựng lại một mô phỏng tĩnh.

Tôi có thể nhập một trang HTML hoặc trang web hiện có không?

Có. Dán HTML vào canvas, hoặc thả thư mục website hay tệp ZIP của nó vào màn hình Home. Bạn cũng có thể bắt đầu bằng một vùng chọn trong Figma hoặc một hình ảnh.

Các tệp canvas của tôi được lưu trữ ở đâu? Chúng có được sao lưu không?

Các tệp được lưu cục bộ trong trình duyệt và thiết bị bạn dùng, không tự động sao lưu lên đám mây. Trình duyệt hoặc thiết bị khác sẽ không thấy chúng. Hãy xuất bản sao của công việc quan trọng, hoặc chọn chia sẻ qua AgentGrid.io nếu muốn sao lưu đám mây và lưu lịch sử phiên bản.

Agent AI của tôi có thể làm việc trên canvas sau khi tôi đóng tab không?

Không. Tab canvas cần giữ mở trong khi agent kết nối đọc hoặc thay đổi thiết kế. Bạn có thể quay lại các tệp lưu cục bộ trong cùng trình duyệt sau.

Việc kết nối agent có cho phép nó truy cập vào không gian làm việc AgentGrid.io của tôi không?

Không. Kết nối agent với canvas chỉ cho phép agent làm việc trên các tệp canvas đang mở. Kết nối agent đó với các artifact trên AgentGrid.io là bước riêng.

Tôi có thể xuất mà không cần xuất bản không?

Có. Xuất HTML, PNG, SVG hoặc PDF mà không chia sẻ hay xuất bản. Bạn có thể giao HTML cho một agent lập trình để tiếp tục xây dựng ở nơi khác.

Chia sẻ và xuất bản có giống nhau không?

Không. Chia sẻ qua AgentGrid.io cho phép truy cập vào những người và đại lý bạn chọn; xuất bản sẽ đặt thiết kế trên một địa chỉ web công khai. Cả hai đều là tùy chọn và yêu cầu tài khoản AgentGrid.io.