Claude Design — dựng mockup HTML/CSS bằng prompt, chuyển giao đã chuẩn hoá
Công cụ mới của Anthropic cho phép designer dựng mockup UI bằng prompt tiếng Việt, rồi xuất bundle gồm HTML, CSS, README và chat transcript để coding agent dựng thẳng thành sản phẩm. Bài viết này được làm ra bằng chính nó.
Chuyển giao thiết kế giữa designer và engineer xưa nay vẫn là một trò đau đầu. Figma xuất PNG, designer viết spec, engineer mở bảng chú thích, đo padding bằng mắt. Mỗi bước rơi rớt một ít thông tin, mỗi cuộc họp lại thêm phần mơ hồ.
Claude Design — Anthropic ra mắt đầu tuần này — chọn lối khác: mockup không còn là hình, mà là mã thật. Designer viết prompt tiếng Việt, công cụ dựng HTML/CSS, rồi đóng gói thành bundle để coding agent mở ra và dựng thẳng thành sản phẩm.
Một file ZIP chứa đủ ngữ cảnh để agent tự dựng
Khi designer chốt phương án, Claude Design xuất một bundle. Ba thứ quan trọng nằm bên trong: README dặn coding agent đọc gì trước, HTML/CSS nguyên bản của mockup, và chat transcript đầy đủ — nơi ý định của designer được ghi lại chi tiết hơn bất kỳ tài liệu spec nào.
📁 udemi-tech/├── README.md├── chats/│ └── chat1.md└── project/ ├── Articles Section.html ├── articles.css ├── Landing Page.html └── components/ ├── Articles.jsx └── Landing.jsx
Handoff cũ là ảnh. Handoff mới là thực thi được.
Engineer đọc pixel và bảng padding, rồi dịch lại thành code. Thông tin rơi rớt ở mỗi khâu.
Agent đọc bundle trực tiếp. Không cần diễn giải. Ý định gốc nằm ngay trong transcript.
Điểm mấu chốt không phải là designer viết code — designer vẫn dùng prompt. Điểm mấu chốt là đầu ra của designer trùng với đầu vào của agent. Chuyển giao thủ công, ở nghĩa truyền thống, biến mất.
3 phương án, 1 bundle, 1 lần ship
Section “Bài viết” mà bạn đang đọc — gồm lưới editorial có lead story, rail “cùng tuần”, và hàng 4 card — được thiết kế bằng Claude Design trong một buổi chiều. Designer yêu cầu 3 phương án (editorial · digest · live feed), công cụ dựng cả ba ở độ chi tiết đủ để so sánh đánh đổi, rồi xuất bundle. Coding agent (Claude Code) dựng thành production trong vài giờ — bạn đang đọc bản đầu tiên nó ra.
Đây không phải câu chuyện AI thay thế designer. Designer vẫn là người chọn V1 thay vì V2. Đây là câu chuyện về việc khoảng cách giữa ý tưởng và code thu hẹp lại khi cả hai cùng nói một ngôn ngữ mà máy đọc được.
Chỉ đáng dùng khi bạn đã làm việc cùng agent
Claude Design hợp nhất khi đội của bạn đã dùng coding agent để dựng sản phẩm. Nếu pipeline của bạn vẫn là người đọc Figma rồi tự gõ, giá trị của nó nhỏ hơn nhiều — định dạng bundle tận dụng khả năng đọc file có cấu trúc và làm việc đồng thời trên nhiều file của agent.
Ngược lại, nếu đội đã chạy theo hướng agentic, Claude Design khép mắt xích cuối: bản thiết kế cũng được viết bằng ngôn ngữ agent đọc được, không còn khâu trung gian chỉ dành cho người.