Nếu mỗi lần nhờ Claude Design bạn lại phải dặn “dùng màu xanh này, font kia”, công việc sẽ rất mất thời gian và dễ lệch thương hiệu. Design system giải quyết chuyện đó: bạn khai báo bộ nhận diện một lần, Claude tự áp dụng cho mọi thiết kế và slide về sau. Bài này hướng dẫn cách tạo, kiểm tra, chia sẻ và cập nhật design system.
Design system là gì và vì sao nên có?
Design system là “bộ luật thiết kế” của thương hiệu: bảng màu, kiểu chữ, các thành phần giao diện (nút, thẻ, thanh điều hướng) và quy tắc bố cục (khoảng cách, lưới, cấu trúc trang). Bạn không cần tự gõ lại từng quy tắc. Bạn chỉ cần đưa cho Claude tài liệu sẵn có, Claude sẽ tự rút ra các quy tắc đó.
Lợi ích lớn nhất nằm ở gói Team và Enterprise: chỉ cần một người thiết kế làm một lần, cả tổ chức đều được hưởng. Các dự án mới tự kế thừa màu sắc, font chữ và thành phần của tổ chức, nên ai làm slide hay landing page cũng ra đúng “chất” thương hiệu.
Chuẩn bị trước khi bắt đầu
Design system hiện ở giai đoạn beta, có trên các gói Pro, Max, Ultra, Team và Enterprise:
- Với Pro, Max, Ultra và Team, tính năng được bật sẵn.
- Với Enterprise, Owner phải bật mục Design systems tại Organization settings → Artifacts. Owner cũng có thể giới hạn ai được đăng (publish) hay đặt design system mặc định.
Bạn cần ít nhất một trong các nguồn sau. Càng nhiều nguồn, Claude càng hiểu đúng thương hiệu:
- Kho mã có sẵn design system hoặc thư viện component (ví dụ thư viện React).
- Bộ slide hoặc tài liệu thể hiện nhận diện hình ảnh (PowerPoint, PDF).
- Tài sản thương hiệu: logo, file bảng màu, thông số kiểu chữ.
- Ảnh chụp màn hình sản phẩm hoặc file thiết kế cũ.
Ba cách tạo design system
| Cách | Làm thế nào | Phù hợp khi |
|---|---|---|
| Từ cuộc trò chuyện | Nhờ Claude dựng design system từ ứng dụng đã kết nối, file tải lên, file Figma, bộ slide, logo, font | Bạn có bộ nhận diện thương hiệu (màu, font, hướng dẫn) |
| Từ Claude Code | Chạy lệnh /design-sync; Claude đọc trực tiếp token và component | Design system đã có sẵn dưới dạng component React |
| Chuyển từ claude.ai/design | Mang design system của nhóm từ bản Claude Design chạy riêng sang | Bạn từng dùng bản riêng, sắp đóng cửa ngày 14/12/2026 |
Prompt mẫu (cách 1): “Tôi tải lên logo, file PDF hướng dẫn thương hiệu và bộ slide giới thiệu công ty. Hãy tạo design system cho thương hiệu này: bảng màu chính, phụ, nhấn; font chữ và cỡ chữ; kiểu nút, thẻ, thanh điều hướng; quy tắc khoảng cách. Chỗ nào tài liệu không nói rõ thì hỏi lại tôi, đừng tự đoán.”
Chuyển design system từ claude.ai/design
Nếu nhóm bạn đã có design system ở bản Claude Design chạy riêng, hãy chuyển sang trước hạn đóng cửa:
- Mở tab Design ở cuối thanh bên (sidebar).
- Bấm Move team design systems trên dải thông báo (banner).
- Mỗi design system sẽ trở thành một artifact, dùng được trong mọi cuộc trò chuyện, kể cả trong Claude Code.
- Nếu bản chuyển sang còn lộn xộn, bấm Let Claude clean it up trên banner để Claude sắp xếp lại phần hướng dẫn, token và component.
Lưu ý: nếu tổ chức có chính sách thời hạn lưu trữ áp dụng cho artifact, một design system đã chuyển mà không ai mở trong thời hạn đó có thể bị xoá vĩnh viễn. Việc mở một thiết kế dùng design system đó không được tính là đã mở.
Kiểm tra và đưa vào sử dụng
Bản design system Claude tạo ra thường gồm bốn phần: bảng màu (chính, phụ, nhấn), kiểu chữ (họ font, cỡ, độ đậm), thành phần giao diện và mẫu bố cục. Đừng vội dùng ngay, hãy thử trước:
- Tạo một dự án thử nghiệm.
- Thử vài yêu cầu thực tế, ví dụ: landing page cho sản phẩm của bạn, một dashboard chỉ số, một one-pager về chủ đề nhóm hay trình bày.
- So kết quả với thương hiệu thật. Nếu lệch, tải thêm hoặc đổi tài liệu nguồn rồi để Claude rút lại.
- Với bản riêng claude.ai/design: khi đã ưng, bật công tắc Published để các dự án mới của tổ chức dùng design system này thay cho mặc định.
Mẹo từ Help Center: hãy đưa ví dụ thật như một landing page hay trang marketing đã hoàn thiện, đừng chỉ đưa bảng thông số khô khan.
Quản lý và cập nhật
- Xem và quản lý: vào Settings → Capabilities, bấm Manage cạnh mục Design systems. Nếu không thấy, vào Settings → Design systems.
- Cập nhật (ở claude.ai/design): trong phần cài đặt tổ chức của Claude Design, bấm Open cạnh design system, rồi bấm Remix ở góc trên bên phải để mở khung chat và cùng Claude chỉnh sửa.
- Phân quyền: trên Enterprise, admin có thể chỉ cho một số người được đăng, đặt mặc định hoặc xoá design system.
- Bàn phím: Cmd+F6 (Windows: Ctrl+F6) chuyển giữa danh sách mục và nội dung; Cmd/Ctrl+Z để hoàn tác khi không ở trong ô nhập chữ.
Những điều bạn học được trong bài này
- Design system gói gọn màu, kiểu chữ, thành phần và bố cục để Claude áp dụng tự động
- Tính năng đang beta, có từ gói Pro trở lên; Enterprise cần Owner bật trong Organization settings → Artifacts
- Có 3 cách tạo: từ cuộc trò chuyện, bằng /design-sync trong Claude Code, hoặc chuyển từ claude.ai/design
- Chỉ cần một nguồn tài liệu, nhưng nhiều nguồn và ví dụ thật cho kết quả tốt hơn
- Luôn thử bằng dự án mẫu trước khi cho cả nhóm dùng
- Quản lý tại Settings → Capabilities → Manage
Cần nhớ: Chất lượng design system phụ thuộc vào tài liệu bạn đưa vào. Nếu kết quả đầu tiên chưa giống thương hiệu, đừng sửa tay từng chỗ, hãy bổ sung tài liệu tốt hơn và để Claude rút ra lại.
Nguồn tham khảo: Set up your design system in Claude Design – Claude Help Center; Get started with Claude Design – Claude Help Center
Câu hỏi thường gặp
Gói Free có tạo được design system không?
Không. Design system đang beta và chỉ có trên Pro, Max, Ultra, Team và Enterprise.
Tôi chỉ có mỗi file logo, có đủ không?
Một nguồn là đủ để bắt đầu. Tuy vậy, thêm bộ slide, hướng dẫn thương hiệu hay ảnh chụp sản phẩm sẽ giúp Claude rút ra design system đầy đủ và chính xác hơn.
Tổ chức có thể có nhiều design system không?
Có. Bạn quản lý chúng tại Settings → Capabilities, và trên Enterprise, admin có thể giới hạn ai được đặt design system mặc định.
Design system của công ty là component React, nên chọn cách nào?
Dùng lệnh /design-sync trong Claude Code. Claude sẽ đọc trực tiếp token và component từ mã nguồn thay vì đoán từ hình ảnh.
