Bạn từng thấy một trang web và đoán ngay “cái này AI làm” chưa? Hero section canh giữa, badge hình viên thuốc ghi “New”, ba thẻ tính năng, font Inter, một màu nhấn xanh dương, bo góc 12px, và phần chữ thì đầy dấu gạch ngang dài cùng câu kiểu “không phải X, mà là Y”. Không có yếu tố nào trong số này tệ khi đứng riêng lẻ, nhưng khi chúng luôn xuất hiện cùng nhau, người ta bắt đầu nhận ra khuôn mẫu.
Đây là điều Carmen Rincón (Yummy Labs) đã mổ xẻ khá kỹ trong một tài liệu hướng dẫn gần đây, và nó đáng để dịch lại vì lý do rất thực tế: nếu bạn đang dùng Claude hay Claude Code để dựng UI cho sản phẩm của mình, bài viết này sẽ giúp bạn hiểu tại sao Claude cứ quay về “giữa đường” và làm gì để nó có một hướng đi rõ ràng hơn.
Tại sao Claude luôn chọn phương án an toàn
Vấn đề không nằm ở việc Claude không làm được UI đẹp. Vấn đề là khi bạn đưa cho nó một yêu cầu mơ hồ, nó không thực sự chạy quy trình thiết kế như một designer thật sự làm. Nó dựa vào những khuôn mẫu đã thấy rất nhiều lần, dựng cấu trúc, rồi dồn công sức làm cho khuôn mẫu đó trông bóng bẩy. Nếu không có ai đóng vai trò kiểm duyệt thiết kế, gánh nặng đó rơi hết vào các file, tài liệu tham khảo và chỉ dẫn mà bạn cung cấp.
Có vài lý do khiến việc này lặp đi lặp lại:
Những gì nó thấy nhiều nhất. Font Inter xuất hiện khắp nơi trong nhiều năm, còn Tailwind, shadcn, Vercel, Linear, Notion và một lượng lớn code, tài liệu thiết kế mà Claude từng tiếp xúc đều củng cố một ngôn ngữ thị giác tương tự nhau. Khi cần chọn font hay hình dung một dashboard, nó tự nhiên với tới thứ quen thuộc.
Một giới hạn thật sự biến thành thói quen. Trong cửa sổ trò chuyện thông thường, Claude bị giới hạn bởi những gì nó có thể kéo vào dự án dễ dàng, nên nó nghiêng về các font miễn phí, phổ biến. Những font có cá tính hơn mà designer hay dùng — như Söhne, ABC Diatype, GT America, Untitled Sans hay Neue Montreal — không thực sự nằm trong “tầm với” trừ khi bạn chủ động cấp cho nó. Trong Claude Code, giới hạn này gần như biến mất vì dự án có thể chứa sẵn file font bạn muốn dùng.
Chọn phương án an toàn. Một font grotesque trung tính rất khó bị chê, còn font có cá tính thì hoặc làm cả sản phẩm nổi bật, hoặc trật lất hoàn toàn. Nếu bạn chưa nói rõ sản phẩm nên mang cảm giác gì, Claude không có lý do gì để mạo hiểm, nên nó chọn thứ “chấp nhận được với hầu hết mọi người” — mà đó lại chính xác là nơi phần lớn sản phẩm do AI tạo ra kết thúc.
Diễn trò thiết kế thay vì thực sự thiết kế. Đây là những chi tiết nhỏ trông như có chủ đích nhưng thực ra không đến từ một quyết định thiết kế thật: nhãn mono viết hoa nhỏ phía trên thẻ, gradient trên một chữ trong tiêu đề, hay một nhãn kiểu kỹ thuật gắn vào cho có vẻ “chuyên nghiệp”. Font mono có công dụng thật sự, nhất là với số liệu cần giữ độ rộng cố định hoặc mã lệnh, nhưng ngoài những trường hợp đó nó dễ trở thành lớp trang trí nói “sản phẩm công nghệ” giống hệt cách lens flare nói “cinematic”.
Bộ khung xương lộ tẩy — trước cả khi nhìn vào màu sắc hay font chữ
Điều đáng chú ý là những dấu hiệu về cấu trúc sống dai hơn nhiều so với font chữ hay bảng màu. Bạn có thể đổi font, đổi màu, thêm vài chi tiết thú vị, nhưng nếu bộ khung bên dưới vẫn y nguyên thì kết quả vẫn đọc được ra là “AI làm”.
Với trang landing page, khuôn mẫu quen thuộc là: hero canh giữa, badge hình viên thuốc ghi “New” hoặc “Introducing”, tiêu đề, một dòng mô tả phụ, hai nút cạnh nhau, thường có gradient tỏa tròn mờ phía sau. Tiếp theo là lưới ba cột tính năng với icon trong ô bo góc, dải logo “Trusted by”, các section xen kẽ ảnh trái – phải cùng chiều cao, ba đoạn testimonial, khối FAQ dạng accordion, một dải CTA nền tối, và footer bốn cột. Mọi thứ nằm gọn trong max-w-7xl, mỗi section có py-24, mỗi thẻ là rounded-xl viền 1px, nhịp khoảng cách giữ nguyên từ đầu đến cuối trang.
Với ứng dụng dạng dashboard, khuôn mẫu là: sidebar rộng 240–260px với avatar ở góc dưới trái, thanh trên có ô tìm kiếm, chuông thông báo và avatar khác, bốn thẻ số liệu xếp hàng ngang với con số lớn, nhãn nhỏ và phần trăm tăng giảm kèm mũi tên. Bên dưới là một thẻ biểu đồ lớn, rồi tới bảng dữ liệu với ô avatar-cộng-tên, badge trạng thái và menu ba chấm bên phải. Trạng thái rỗng thường là icon nằm giữa một vòng tròn nhạt màu, kèm hai dòng mô tả.
Về mặt bề mặt: bo góc thống nhất (8 hoặc 12px), bảng màu chủ yếu xám cộng đúng một màu nhấn (xanh dương hoặc tím), mỗi thẻ có cả viền 1px lẫn bóng đổ nhẹ, một chữ trong tiêu đề được tô gradient, thanh điều hướng có hiệu ứng mờ nền khi cuộn, icon Lucide ở kích thước 20px nét 1.5, chế độ tối gần như đen tuyền với thẻ hơi sáng hơn, mỗi section hiện lên bằng hiệu ứng trượt 20px trong 400ms, và thẻ nhấc lên 2px khi hover.
Phần chữ mới là thứ lộ rõ nhất
Phần lớn lời khuyên về “trông có vẻ AI” chỉ dừng ở hình ảnh, bỏ qua phần chữ — điều này khá lạ vì văn bản thường tố cáo nhanh hơn cả giao diện. Bạn có thể không giải thích được vì sao một trang trông giả, nhưng thường cảm nhận được, và phần lớn thời gian chính văn xuôi là thủ phạm.
Giọng văn mặc định của Claude dễ đọc, nhịp đều, hơi mang tính tiểu luận, nhưng không thực sự giống giọng của một ai cụ thể. Vài dấu hiệu dễ nhận ra:
- Lạm dụng dấu gạch ngang dài làm liên từ chính, nhiều lần trong một đoạn, ở những chỗ mà dấu phẩy hoặc cấu trúc câu khác sẽ tự nhiên hơn.
- Cặp phủ định đối lập: “Đây không phải là vấn đề font chữ, mà là vấn đề cấu trúc.” Một khi bạn để ý, sẽ thấy nó ở khắp nơi.
- Ba thứ liệt kê mọi lúc: ba ví dụ, ba tính từ, ba thẻ tính năng, kể cả khi con số ba chẳng có ý nghĩa gì.
- Từ vựng lấp chỗ trống: thực sự, quả thực, một cách âm thầm, đáng ngạc nhiên, đơn giản là…
- Không bao giờ dám khẳng định chắc chắn: mọi câu đều được rào trước đón sau đến mức không ai phản đối được — và cũng không ai học được gì nhiều từ đó.
- Không có số liệu, tên riêng, ngày tháng cụ thể — trong khi chính những chi tiết đó mới làm bài viết đáng tin.
Vì sao chỉ “cấm” là không đủ
Phản xạ đầu tiên thường là lập một file banned.md liệt kê những thứ Claude không được dùng. Nên có file này, nhưng tự nó không giải quyết được gốc rễ vấn đề, vì lệnh cấm thường chỉ đẩy Claude sang lựa chọn quen thuộc kế tiếp.
Cấm Inter, bạn sẽ nhận Geist, rồi Satoshi, rồi Manrope. Cấm tông xanh-xám, bạn nhận một tông trung tính ấm hơn với đúng một màu nhấn. Cấm dấu gạch ngang dài, câu vẫn y nguyên nhưng đổi sang dấu hai chấm. Model vẫn đang thỏa mãn yêu cầu bằng cách chuyển sang lựa chọn phổ biến tiếp theo — và đó vẫn cơ bản là mức trung bình.
Lệnh cấm cũng chỉ chạm tới bề mặt mà bỏ sót cấu trúc. Bạn hoàn toàn có thể dựng cùng một trang bằng font Fraunces và Cabinet Grotesk với bảng màu xanh lá đậm, và nó vẫn đọc ra là AI-generated, vì thứ người ta nhận diện đầu tiên chính là thứ tự và hình dạng của trang.
Điều thực sự hiệu quả hơn là biến một vấn đề về gu thẩm mỹ thành một vấn đề tuân thủ quy tắc — vì tuân thủ quy tắc là thứ Claude làm rất tốt. Có bốn thành phần cho cách tiếp cận này, và chúng phát huy tác dụng tốt nhất trong Claude Code, vì đó là nơi dự án có thể lưu file, chạy kiểm tra và thực sự nhìn thấy kết quả.
Bốn thứ thực sự hiệu quả
1. Hai file “khóa” quyết định
Trước khi viết bất kỳ dòng code nào, bạn cần hai file ngắn chứa quyết định thật, không phải tính từ chung chung. “Sạch sẽ và hiện đại” gần như không cho Claude thông tin gì để bám vào, trong khi một hệ thống bố cục, font chữ, bán kính bo góc và khoảng cách cụ thể thì có.
File direction-lock.md chốt các quyết định về bố cục: kiểu layout (canh giữa, bất đối xứng, chia đôi…), yếu tố nào “gánh” trang (chữ, hình ảnh, dữ liệu hay chuyển động — chỉ chọn đúng một), mật độ khoảng cách, chiến lược bảng màu, bộ font, tỉ lệ scale chữ, bán kính bo góc (0 cũng là một câu trả lời hợp lệ), dùng viền hay bóng đổ, ngân sách hiệu ứng chuyển động, và hệ lưới.
Dòng “chỉ chọn đúng một” quan trọng hơn vẻ ngoài của nó. Nếu để mở, Claude sẽ cho mọi yếu tố trọng số ngang nhau, và bạn sẽ có một trang mà chữ, hình ảnh, chuyển động và màu sắc cùng cố gắng “gánh” thiết kế một lúc. Chọn đúng một buộc phải có phân cấp thực sự.
File thứ hai, voice-spec.md, làm điều tương tự cho phần chữ: độ dài câu, có dùng từ viết tắt kiểu nói chuyện hay không, ngôi xưng, mức độ trang trọng, nơi được phép hài hước. Phần quan trọng nhất trong file này là các cặp ví dụ BAD/GOOD viết bằng chính ngôn ngữ sản phẩm của bạn — vì Claude bám theo một ví dụ đối chiếu cụ thể đáng tin cậy hơn nhiều so với một đoạn mô tả tông giọng chung chung.
2. Sổ ghi chép phân kỳ (divergence ledger)
Với mỗi quyết định lớn, yêu cầu Claude viết ra phương án mặc định nó đáng lẽ sẽ chọn, rồi ghi lại nó đang làm gì thay vào đó. Ví dụ:
Hero
Mặc định: canh giữa, badge viên thuốc, tiêu đề + mô tả phụ + hai nút CTA, gradient mờ.
Thay vào đó: khối chữ canh trái chiếm 60% chiều rộng, không badge, không mô tả phụ,
tiêu đề 88px gánh cả trang, một đường link chữ duy nhất.
Việc gọi tên phương án mặc định mới là điều tạo ra khác biệt. Nếu không gọi tên nó, Claude có thể trôi dạt về đó trong khi vẫn “tin” rằng mình đã đưa ra lựa chọn. Sổ này cũng là công cụ review nhanh: đọc trong 30 giây là biết thiết kế có thực sự chứa quyết định hay chỉ là bản mặc định khoác lớp áo mới.
3. Cổng chặn hoàn thiện
Ba thành phần còn lại đều có chung một điểm yếu: Claude tạo ra một trang hoàn chỉnh, đẹp mắt, và độ bóng bẩy đó khiến người ta khó nhận ra rằng cấu trúc chưa bao giờ thực sự được quyết định. Trông đã “xong” nên chẳng ai còn hỏi thứ tự các section có hợp lý không.
Cách khắc phục là chia độ hoàn thiện thành các giai đoạn: (1) chỉ cấu trúc — HTML với CSS bố cục, không màu, không font, không icon, cố tình xấu để câu hỏi duy nhất lúc này là thứ tự section có nên tồn tại hay không; (2) ba phương án cấu trúc khác nhau thật sự ở cùng độ chi tiết đó, để bạn chọn khi chi phí thay đổi còn thấp; (3) chữ thật, do bạn viết, cho ít nhất tiêu đề và một section — vì chữ ràng buộc bố cục nên cần có mặt trước khi layout “cứng” lại; (4) rồi mới tới bề mặt: font, màu, khoảng cách, chuyển động, theo đúng thứ tự đó.
4. Kiểm tra “dấu hiệu lộ tẩy” một cách máy móc
Dựng trang, chụp ảnh màn hình, đọc lại ảnh, chạy qua danh sách dấu hiệu, báo cáo cái nào bị dính, sửa, rồi dựng lại. Phần quan trọng là việc kiểm tra cần máy móc hết mức có thể — hỏi “Trông có ổn không?” cho câu trả lời không đáng tin, còn hỏi “Có badge viên thuốc phía trên tiêu đề không? Có lưới ba thẻ icon không? Mọi thứ có canh giữa không? Có bao nhiêu giá trị bo góc khác nhau? Phần chữ có dùng cấu trúc ‘không phải X mà là Y’ không?” thì cho ra thứ có thể kiểm chứng thật sự — grep dấu gạch ngang dài, đếm số giá trị bo góc, đếm số cỡ chữ khác nhau trong cùng một màn hình.
Cấu trúc thư mục gợi ý trong Claude Code
.claude/
CLAUDE.md # ngắn gọn, load mỗi phiên, chỉ chứa quy tắc cứng
settings.json # khai báo hooks
hooks/
gate-styling.sh # PreToolUse, chặn nếu direction-lock.md còn trống
run-checks.sh # Stop hook, chạy render + kiểm tra dấu hiệu lộ tẩy
agents/
tell-critic.md # subagent "khách quan", chỉ thấy ảnh chụp, không thấy hội thoại build
skills/
house-style/
SKILL.md
direction-lock.md # các giá trị bạn đã chốt
voice-spec.md # quy tắc giọng văn kèm ví dụ hai chiều
antipatterns.md # danh sách dấu hiệu lộ tẩy tự đúc rút
references/
manifest.md # mỗi ảnh một ghi chú: giữ lại gì / bỏ qua gì
scripts/
shoot.ts # Playwright, chụp mọi route và trạng thái
check-tells.sh # grep từ cấm, đếm bo góc / cỡ chữ
output/ # ảnh render, đưa vào .gitignore
Một chi tiết đáng chú ý: hook PreToolUse có thể chặn thao tác ghi/sửa file .css (thoát mã 2) khi direction-lock.md vẫn còn trống — nghĩa là biến quy tắc “quyết định trước khi code” thành thứ được ép buộc thật sự, chứ không chỉ là một dòng dặn dò trong CLAUDE.md mà Claude có thể lỡ quên.
Bạn nên đi theo hướng nào
Tài liệu gốc chia thành ba tình huống, tùy vào bạn đang có sẵn gì:
- Chưa có hệ thống thiết kế nào — bạn phải tự tạo ra ràng buộc. Cách làm: yêu cầu Claude đưa ra vài hướng thiết kế khác biệt thật sự theo trục được đặt tên rõ (ví dụ “một hướng biên tập lấy chữ làm trọng tâm, một hướng dữ liệu dày đặc, một hướng lấy ảnh làm chủ đạo, tối giản khung viền” — thay vì chỉ nói “cho tôi ba hướng”), dựng một màn hình quan trọng nhất với chữ thật trước, rồi mới rút token thiết kế từ đó.
- Đã có hệ thống thiết kế trưởng thành — rủi ro không phải là “chung chung” mà là “lệch hệ thống”: Claude tự bịa ra một biến thể nút không tồn tại trong thư viện, hoặc hardcode một mã màu gần giống nhưng không trùng token. Việc cần làm là biến các quy tắc thành thứ script có thể kiểm tra được: chỉ cho phép dùng token, có bộ danh mục component xác định rõ cái gì được phép, và khi Claude cần thứ không có sẵn thì phải dừng lại báo thiếu, không được tự chế.
- Có thương hiệu mạnh nhưng chưa có hệ thống thiết kế cho sản phẩm — tình huống phổ biến nhất. Bộ nhận diện thương hiệu thường được xây cho những khoảnh khắc lớn, mật độ thấp (trang landing, banner…). Áp thẳng vào giao diện sản phẩm dày đặc thông tin thường vỡ trận. Cần một lớp “phiên dịch”: màu thương hiệu chỉ dùng làm màu nhấn (kèm biến thể đạt chuẩn tương phản khi dùng cho chữ), font display chỉ dùng cho tiêu đề trang, tỉ lệ scale chữ được nén lại cho phù hợp giao diện sản phẩm, nhịp khoảng cách được chia nhỏ xuống, và giọng thương hiệu được chuyển sang đăng ký ngắn gọn, ít chơi chữ hơn cho các trạng thái lỗi.
Về phần kiểm tra khả năng tiếp cận (accessibility)
Tài liệu gốc có nhắc tới vài con số kỹ thuật, mình đã kiểm tra lại và xác nhận chính xác: theo WCAG 2.2, mức AA yêu cầu tỉ lệ tương phản tối thiểu 4.5:1 cho chữ thường và 3:1 cho chữ cỡ lớn, còn kích thước vùng chạm tối thiểu là 24×24 pixel CSS ở mức AA và 44×44 ở mức AAA. Apple khuyến nghị 44pt, Material Design của Google khuyến nghị 48dp — nên chọn mốc 44px làm sàn tối thiểu cho bất kỳ thứ gì người dùng cần chạm vào là hợp lý.
Điều công cụ này không giải quyết được
Có hai điều đáng nói thẳng để không ai kỳ vọng quá đà. Thứ nhất, không có công cụ nào ở trên khiến Claude tự sinh ra gu thẩm mỹ — nó biến vấn đề gu thành vấn đề tuân thủ, một dạng vấn đề Claude xử lý ổn định hơn nhiều, nhưng vị trí thẩm mỹ thật sự vẫn phải đến từ con người. Thứ hai, Claude không nhớ phiên làm việc trước — thứ tồn tại được là các file được đọc lại. Vậy nên cái gọi là “Claude học được gu của bạn” thực chất là việc bạn đã viết gu đó ra ở một nơi model có thể đọc lại mỗi lần.
Nếu bạn muốn thử nhanh trước khi setup gì cả: mở ba phiên chat mới hoàn toàn, đưa cho mỗi phiên đúng một câu brief mơ hồ như “làm landing page cho công cụ quản lý dự án”, rồi đặt ba kết quả cạnh nhau. Bất cứ thứ gì lặp lại ở cả ba — từ thứ tự section, tên nút, cho tới câu mở đầu tiêu đề — chính là danh sách dấu hiệu lộ tẩy của riêng bạn, không cần đoán mò theo ai khác.
Để lại một bình luận