Claude Design: Cách tránh giao diện AI đại trà

Bạn đã bao giờ yêu cầu AI tạo một landing page và nhận lại giao diện trông quen đến mức khó phân biệt với hàng chục mẫu khác chưa? Bố cục sạch, card bo tròn, màu xanh dịu, khoảng trắng rộng và nút CTA nổi bật: mọi thứ đều ổn, nhưng sản phẩm lại thiếu bản sắc.

Với Claude Design, vấn đề này không nhất thiết nằm ở khả năng tạo giao diện. Nguyên nhân thường là AI chưa được cung cấp đủ ngữ cảnh về thương hiệu, quy tắc thị giác và cách component phải hoạt động. Cách xử lý thực tế là xây một design system dạng văn bản trước khi tạo từng màn hình.

Vì sao giao diện AI thường trông giống nhau?

Giao diện AI dễ giống nhau vì mô hình phải tự điền vào những khoảng trống mà prompt không mô tả. Khi bạn chỉ yêu cầu “tạo dashboard SaaS hiện đại”, Claude Design sẽ chọn các giải pháp an toàn và quen thuộc thay vì tự đoán bản sắc thương hiệu của bạn.

Kết quả thường không sai về mặt chức năng. Bạn vẫn có hierarchy hợp lý, khoảng trắng dễ nhìn và bố cục đủ rõ. Tuy nhiên, sản phẩm dễ mang dấu hiệu của một mẫu dựng nhanh: font sans-serif phổ biến, màu xanh hoặc tím làm accent, card bo tròn, hero có gradient và sidebar gồm icon đi kèm label.

Đây không phải lỗi riêng của một công cụ. Bất kỳ AI tạo giao diện nào cũng cần context. Một designer con người sẽ hỏi về brand guideline, nhóm người dùng, cảm xúc cần truyền tải và các pattern đã tồn tại. AI cũng cần đầu vào tương tự, nhưng dưới dạng có cấu trúc.

Nếu bạn đang triển khai website doanh nghiệp, vấn đề này đáng quan tâm hơn một bản demo đẹp mắt. Thiết kế phải phản ánh định vị, hỗ trợ nội dung và phù hợp hành trình chuyển đổi. Bạn có thể tham khảo thêm quy trình thiết kế website từ brief đến bàn giao để đặt bước tạo giao diện AI vào đúng bối cảnh dự án.

Design system cho Claude Design là gì?

Design system là tài liệu tham chiếu mô tả các quyết định thiết kế mà AI phải tuân theo. Nó không cần trở thành bộ tài liệu đồ sộ ngay từ đầu; mục tiêu là biến các lựa chọn mơ hồ thành quy tắc có thể áp dụng lặp lại.

Một tài liệu tốt thường bao gồm typography, bảng màu, spacing, radius, shadow, layout, component và các điều cấm. Theo định dạng Design Tokens Community Group, design token là cách biểu diễn những quyết định thiết kế theo cấu trúc để nhiều công cụ có thể trao đổi và sử dụng nhất quán.[1]

Điểm quan trọng là mức độ cụ thể. Viết “dùng màu ấm” chưa đủ. Viết “màu nền chính là kem nhạt, màu chữ là nâu đậm, màu accent chỉ dùng cho CTA và trạng thái active” sẽ giúp AI hiểu phạm vi sử dụng rõ hơn.

Bạn không cần bắt đầu từ con số 0 nếu sản phẩm đã có website hoặc file thiết kế. Hãy trích xuất những pattern đang hoạt động tốt, sau đó chuẩn hóa thành tài liệu ngắn gọn. Nếu đang cân nhắc luồng thiết kế sang code, bài Figma to Code: 8 công cụ chuyển thiết kế thành code sẽ giúp bạn nhìn rõ bước bàn giao kỹ thuật.

Cách viết design system đủ dùng cho Claude Design

Một design system đủ dùng nên trả lời được ba câu hỏi: dùng giá trị nào, dùng ở đâu và không được dùng theo cách nào. Bạn nên bắt đầu với một file văn bản duy nhất để đội ngũ dễ đọc, dễ chỉnh sửa và dễ đưa vào context của AI.

Cấu trúc tối thiểu có thể gồm các nhóm sau:

• Typography: font cho heading và body, weight, kích thước, line-height, quy tắc viết hoa.
• Color: màu nền, chữ, border, CTA, trạng thái hover, success, warning và error.
• Spacing: scale khoảng cách và quy tắc áp dụng giữa section, card, label và input.
• Radius và shadow: mức bo góc, đổ bóng và trường hợp không được sử dụng.
• Layout: max-width, gutter, grid, breakpoint và hành vi responsive.
• Components: button, input, card, badge, navigation, modal và trạng thái tương ứng.

Tailwind CSS cũng dùng theme variables để định nghĩa design tokens như màu sắc, font và breakpoint, rồi ánh xạ chúng thành utility class.[2] Cách tiếp cận này hữu ích ngay cả khi bạn không dùng Tailwind: AI cần một bộ giá trị nhất quán thay vì lựa chọn ngẫu nhiên cho từng màn hình.

Mình khuyên bạn chỉ ghi những quy tắc thực sự có ý nghĩa. Một file quá dài nhưng thiếu ưu tiên sẽ làm context nặng hơn mà không cải thiện đầu ra. Hãy đặt các nguyên tắc có ảnh hưởng lớn lên đầu tài liệu, sau đó bổ sung ngoại lệ khi dự án phát sinh nhu cầu thực tế.

Bạn đang đọc bài viết thuộc chuyên mục Công nghệ của VietnamTutor, nơi mình chia sẻ cách ứng dụng AI vào quy trình web và vận hành doanh nghiệp theo hướng thực tế.

Cách kiểm tra component trước khi dựng toàn bộ trang

Đừng yêu cầu AI tạo toàn bộ website ngay trong lần đầu tiên. Hãy dựng một component showcase trước để kiểm tra xem hệ thống đã hiểu đúng ngôn ngữ thiết kế hay chưa.

Bạn có thể yêu cầu một trang thử nghiệm gồm button, input, card, badge, navigation, alert và modal. Mỗi component nên xuất hiện ở các trạng thái phổ biến như default, hover, focus, disabled hoặc error. Material Web cũng tổ chức tài liệu theo từng component và trạng thái, cho thấy component là đơn vị phù hợp để kiểm tra tính nhất quán của hệ thống.[3]

Quy trình thực hành gồm bốn bước:

1. Đưa tài liệu design system vào context trước.
2. Yêu cầu tạo một trang showcase component, chưa cần nội dung marketing.
3. Soát font, màu, spacing, radius, border, shadow và trạng thái tương tác.
4. Sửa tài liệu nguồn rồi tạo lại showcase cho đến khi các component ổn định.

Sau khi component đã đúng, bạn mới chuyển sang layout. Hãy yêu cầu AI tạo shell của trang: header, sidebar nếu có, main content, footer và grid. Cách làm này giúp bạn kiểm soát kiến trúc trước khi thêm nội dung chi tiết. Thú vị ở chỗ, một vòng kiểm tra ngắn ở đầu dự án thường tiết kiệm nhiều lần sửa lan truyền về sau.

Nếu dự án có nhiều bước tự động hóa, bạn cũng nên xác định rõ điểm nào AI tự xử lý và điểm nào cần review con người. Tư duy này tương tự cách triển khai AI agent tự động hóa doanh nghiệp theo từng bước.

Negative constraints giúp loại bỏ điều gì?

Negative constraints là danh sách những lựa chọn thiết kế AI không được tự ý sử dụng. Đây là phần thường bị bỏ qua, nhưng lại rất hiệu quả khi bạn muốn tránh các pattern mặc định.

Ví dụ, bạn có thể quy định:

• Không dùng gradient nếu chưa được yêu cầu rõ.
• Không lồng card bên trong card.
• Không bo góc mọi thành phần; chỉ dùng radius theo token đã định nghĩa.
• Không dùng emoji làm icon UI.
• Không thêm animation chỉ để trang trông sinh động hơn.
• Không tự tạo màu mới ngoài bảng màu.
• Không thay đổi layout đã được duyệt khi chỉ sửa nội dung.

Điều cuối cùng đặc biệt quan trọng. Khi một màn hình đã ổn, hãy coi layout là locked. Các vòng sau chỉ nên thay đổi copy, dữ liệu hoặc nội dung nếu task không yêu cầu chỉnh kiến trúc. Đây là cách tránh tình trạng sửa một chi tiết nhỏ nhưng AI lại tái cấu trúc cả trang.

Cách duy trì source of truth khi dùng Claude Design

Design system chỉ hữu ích khi nó là source of truth duy nhất và luôn phản ánh trạng thái mới nhất của sản phẩm. Nếu đội ngũ sửa giao diện nhưng không cập nhật tài liệu, AI sẽ tiếp tục tạo output theo quy tắc cũ.

Hãy lưu tài liệu trong repository hoặc không gian cộng tác mà designer và developer đều truy cập được. Khi thay đổi token hoặc component, bạn nên ghi rõ lý do, phạm vi ảnh hưởng và ngày cập nhật. W3C Design Tokens Community Group xây định dạng token để hỗ trợ trao đổi dữ liệu thiết kế giữa các công cụ, còn Figma cũng mô tả variables và collections như cách quản lý giá trị tái sử dụng theo ngữ cảnh.[1][4]

Một checklist vận hành ngắn gọn:

1. Chỉ duy trì một file design system chính.
2. Cập nhật file ngay khi một quyết định thiết kế được duyệt.
3. Kiểm tra showcase component sau thay đổi lớn.
4. Khóa layout đã ổn định trước khi chỉnh copy.
5. Review thủ công trước khi đưa prototype vào production.

Kết luận: Claude Design cần context trước khi cần prompt dài hơn

Muốn Claude Design tạo giao diện có bản sắc, bạn nên đầu tư vào design system trước khi cố viết prompt ngày càng dài. Một tài liệu rõ ràng, một trang component showcase và một danh sách negative constraints thường mang lại kết quả ổn định hơn nhiều so với việc chỉnh từng màn hình theo cảm tính.

Bắt đầu nhỏ thôi: chọn typography, bảng màu, spacing, radius và ba component quan trọng nhất. Sau đó test, khóa layout và cập nhật source of truth khi có thay đổi. Nếu bạn đang cân nhắc làm mới website hiện tại, hãy xem thêm 9 dấu hiệu doanh nghiệp cần thiết kế lại website.

Nguồn tham khảo

1. Design Tokens Community Group: Format Module
2. Tailwind CSS: Theme variables
3. Material Web: Components
4. Figma Help Center: Guide to variables in Figma
5. MindStudio: How to Avoid AI Slop When Using Claude Design

Bạn đã thử đưa design system vào workflow tạo giao diện bằng AI chưa? Hãy chia sẻ cách bạn kiểm soát tính nhất quán của prototype nhé!