CSS Studio: Thiết kế giao diện trực tiếp trên trình duyệt, để AI tự động viết mã

CSS Studio là một công cụ thiết kế sáng tạo hoạt động trực tiếp trên trang web của bạn và chạy ngay trên trình duyệt. Điểm đặc biệt nhất của công cụ này là khả năng gửi các cập nhật thiết kế đến tác nhân AI (AI agent) hiện có của bạn, từ đó tự động chỉnh sửa bất kỳ mã nguồn nào. Người dùng có thể trải nghiệm phiên bản mới nhất ngay trực tiếp trên trang web chính thức của dự án.

Cơ chế hoạt động

Về mặt kỹ thuật, quy trình hoạt động của CSS Studio diễn ra như sau: Bạn xem trang web của mình ở chế độ phát triển (dev mode) và bắt đầu chỉnh sửa trực quan. Trong tác nhân AI, bạn có thể chạy lệnh /studio, sau đó hệ thống sẽ kết nối hoặc sử dụng Claude Channels để giao tiếp với một máy chủ MCP (Model Context Protocol).

Các thay đổi thiết kế sẽ được truyền tải dưới dạng dữ liệu JSON thông qua MCP, đi kèm với thông tin về khung nhìn (viewport) và URL hiện tại. Tác nhân AI sẽ nhận các thông tin này và có hướng dẫn cụ thể về cách triển khai chúng tốt nhất vào mã nguồn.

Tính năng nổi bật

CSS Studio được trang bị bộ công cụ chỉnh sửa trực quan đầy đủ mà người dùng mong đợi từ một thiết kế web chuyên nghiệp, bao gồm:

• Chỉnh sửa văn bản trực tiếp.
• Tùy chỉnh kiểu dáng (styles).
• Trình chỉnh sửa dòng thời gian hoạt hình (animation timeline editor).