Claude Design cực kỳ hữu ích ngay lúc này.
Hôm nọ, khi đang viết code với Claude Code, tôi đã nhờ nó tạo một tài liệu bán hàng nhanh.
Kết quả? Màu sắc và font chữ gần như giống hệt sản phẩm tôi làm việc hàng ngày. Thành thật mà nói, tôi đã phải dừng lại một giây.
Tôi đã thử Claude Design ngay sau khi nó ra mắt và rồi bỏ qua nó. Nhưng cảm giác "tài liệu ra đời một cách liền mạch, kết nối với sản phẩm" này là điều tôi chưa từng trải nghiệm với các công cụ AI trước đây, và nó đã thay đổi quan điểm của tôi.
Tôi là tatsuki (@nobel_824). Tôi hỗ trợ ứng dụng AI cho các doanh nghiệp vừa và nhỏ, giúp triển khai Claude và Codex vào kinh doanh, đồng thời tự chạy Claude Code mỗi ngày.
Bài viết này được viết chủ yếu cho những ai "thường xuyên động đến code."
Tôi đã tạo một Design System Kit tổng hợp cách tạo Design System, một tính năng được khuyên dùng của Claude Design.
Tôi đã để sẵn nó ở cuối bài viết này.
Tại sao nó lại ra đời với "cùng một tông"?
Để tiết lộ bí mật, đó là vì tôi đã thiết lập một "Design System" từ trước.
"Design System" nghe có vẻ phức tạp, nhưng đối với những người viết code, nó giống như việc truyền các quy tắc thương hiệu dưới dạng một "tệp cấu hình" trước vậy.
Màu sắc. Font chữ. Kiểu tiêu đề. Khoảng cách. Những điều không nên làm. Nếu bạn viết một lần, nó sẽ tải nó mỗi lần trước khi tạo tài liệu.
Nó tương tự như cảm giác đặt một tệp CLAUDE.md vào dự án để không phải gõ cùng một hướng dẫn mỗi lần. Bạn có thể hiểu nó như là "viết một CLAUDE.md cho thương hiệu."
Bằng cách cung cấp điều này, tông màu của các tài liệu kết quả luôn nhất quán mỗi lần. Ngay cả khi bạn thêm trang sau này, chúng vẫn kết nối với trang đầu tiên. Cảm giác "do AI tạo ra chung chung" cũng biến mất.
Phần hay nhất là /design-sync
Đây là phần chỉ có những ai sử dụng Claude Code mới được hưởng lợi.
Có một lệnh /design-sync ở phía Claude Code có thể đọc một bộ design system, bao gồm màu sắc và font chữ, từ kho lưu trữ GitHub hoặc code cục bộ và truyền trực tiếp chúng đến Claude Design (bản cập nhật tháng 6 năm 2026).
Nói cách khác, nếu bạn cung cấp code của dịch vụ đang chạy, nó sẽ xuất ra bản nháp cho tài liệu hoặc LP sử dụng màu sắc và font chữ của dịch vụ đó.
Hình ảnh của tài liệu và sản phẩm thực tế sẽ không bị xung đột. Công việc sao chép mã màu thủ công hoàn toàn biến mất. Đây là lúc nó thực sự có tác dụng. Trong môi trường của tôi, nó hoạt động bình thường mặc dù là phiên bản beta.
*Lưu ý: Đây là lệnh dành cho Claude Code (một công cụ riêng biệt được sử dụng trong terminal hoặc ứng dụng desktop) và không thể gõ vào trường chat của claude.ai/design. Vì bản thân Claude Design vẫn đang trong giai đoạn beta (dành cho gói Pro / Max / Team / Enterprise), nó có thể không khả dụng tùy thuộc vào gói của bạn.
Nếu để mặc, AI có xu hướng chung chung
Ngược lại, nếu bạn yêu cầu mà không cung cấp gì, nó sẽ trả về một thiết kế chung chung đã thấy ở đâu đó. Tông màu thay đổi mỗi lần, và màu sắc cũng khác nhau.
Hơn nữa, Claude Design được cấu trúc để tiêu thụ giới hạn sử dụng mỗi khi bạn làm lại một tác vụ. Trong các báo cáo nước ngoài, có câu chuyện về người dùng đã dùng hết giới hạn của một tuần trong 30 phút bằng cách lặp lại các chỉnh sửa (PCWorld, tháng 4 năm 2026). Mặc dù giới hạn đã được cải thiện trong bản cập nhật tháng 6, cấu trúc "nỗ lực giảm làm lại có hiệu quả trực tiếp" vẫn còn đó.
Đó là lý do tại sao việc đầu tư tạo một design system ngay từ đầu lại có lợi. Hướng dẫn chính thức cũng được viết trên tiền đề thiết lập điều này trước.
Ý tưởng tương tự cũng hoạt động ngay cả khi không có code
Ngay cả khi bạn nói, "Tôi không có kho lưu trữ riêng," đừng lo lắng.
Thay vì code, bạn có thể cung cấp logo, màu thương hiệu, hoặc URL của trang web công ty (thậm chí ảnh chụp màn hình cũng được). Nó sẽ lấy màu sắc và font chữ từ đó. Đối với những người có code, phần đó sẽ được tự động hóa với /design-sync. Chỉ có sự khác biệt đó thôi.
Sau đó, cung cấp nội dung của tài liệu và nói, "Làm theo tông này." Để hoàn thiện cuối cùng, chỉ cần nhanh chóng kiểm tra bằng mắt thường xem có sự không nhất quán về tên gọi hoặc chữ số không. Bạn không cần phải đạt 100 điểm ngay từ đầu. Kích thước font và màu sắc có thể được điều chỉnh sau trong Claude Design.
Từ slide hội thảo và tài liệu đề xuất đến bản tóm tắt nội bộ một trang và bản nháp LP—bạn càng sản xuất hàng loạt tài liệu trong khi viết code, bước đầu tiên này càng có lợi cho bạn về sau.
Tôi đã chuẩn bị một bộ kit bạn có thể sử dụng ngay
Tuy nhiên, tôi nghĩ việc tạo một cái từ đầu thật phiền phức.
Vì vậy, tôi đã chuẩn bị một "Claude Design System Kit" cho phép bạn tái tạo chính xác nội dung của bài viết này. Nó được thiết kế để loại bỏ trước các vấn đề "thiên về chung chung" và "làm tan chảy giới hạn với việc làm lại."
- Một bảng cài đặt thương hiệu mà bạn chỉ cần điền màu sắc, font chữ, khoảng cách, thành phần và danh sách cấm.
- Các ví dụ bạn có thể làm theo chính xác.
- Mẫu slide hội thảo.
- Cách suy nghĩ khi truyền nó cho Claude Code (cách kết hợp với /design-sync).
Tôi đang phân phối miễn phí "Claude Design System Kit," cho phép bạn tái tạo nội dung của bài viết này chỉ bằng cách sao chép và dán, trên LINE.
▼ Đăng ký LINE để nhận "Claude Design System Kit"
https://t.co/90omRA4UQ7
Vui lòng tham gia Open Chat (LINE OpenChat) và sau đó gửi từ khóa từ LINE chính thức được đề cập trong ghi chú:
Design System
để nhận quyền lợi.
*Vui lòng không gửi từ khóa trong chính Open Chat.*
Tôi khuyên bạn nên đưa mẫu vào Claude Design trước và thử tạo một tài liệu. Chỉ riêng điều đó thôi cũng sẽ giúp bạn cảm nhận được việc sử dụng design system.
▼ Đăng ký LINE để nhận "Claude Design System Kit"
