# Claude Design hết mùi AI: làm một tờ design system cho riêng bạn

[Thanh Trần](https://homus.dev/speakers/thanh-tran) · [Thanh Trần - 5 Phút AI](https://homus.dev/orgs/thanh-tran-5-phut-ai)

> Vì sao Claude Design ra cùng một khuôn cho mọi ngành, và cách làm design system: màu từ Refero, phông qua bài kiểm tra tiếng Việt, luật viết chữ, icon.

Topics: Skills, AI UX, Workflow

Canonical: https://homus.dev/talks/vi-sao-claude-design-lam-ra-thiet-ke-co-mui-ai-va-cach-de-no-lam-ra-thiet-ke-cua-ban

## 1. Sáu doanh nghiệp, một câu lệnh, bốn trang chung một khuôn

Thanh Trần mở video bằng một thí nghiệm nhỏ với sáu doanh nghiệp tưởng tượng ở sáu ngành khác nhau: một quán cà phê, một tiệm spa, một trung tâm tiếng Anh cho trẻ em, một phòng khám nha khoa, một xưởng đồ gỗ và một văn phòng luật. Anh đưa cho Claude Design đúng một câu, giống hệt nhau cho cả sáu, chỉ đổi tên ngành. Câu đó đại ý là: làm trang giới thiệu cho cái (ngành) của tôi ở Hà Nội, cứ làm luôn, đừng hỏi lại. Ngoài câu đó ra anh không đưa thêm bất cứ thứ gì: không màu, không phông, không mô tả khách hàng, không ảnh tham khảo.

![Thanh Trần ngồi trước kệ sách, dòng chữ 6 doanh nghiệp và ba ảnh trang web cà phê, spa, tiếng Anh](https://homus.dev/photos/EBzoOSRXJlA-0003.jpg)

Mở đầu video: dòng chữ "6 doanh nghiệp" ở góc trên, phía dưới là ba trong sáu trang Claude Design làm ra cho quán cà phê, tiệm spa và trung tâm tiếng Anh. Cả ba đều nền sáng ngả kem và có một ô ảnh lớn để trống.

Rồi anh cho xem kết quả, đặt bốn trang cạnh nhau: tiệm spa, nha khoa, xưởng gỗ và văn phòng luật. Nhìn kỹ thì cả bốn trang có chung một bộ khung. Trên cùng là một dòng chữ nhỏ viết hoa. Dưới đó là một tiêu đề lớn dùng chữ có chân, đặt to đùng ở bên trái. Tiếp theo là hai cái nút: một nút màu đậm và một nút nền trắng đứng cạnh nhau. Bên phải là một ô ảnh rất to. Cả sáu trang, không chừa trang nào, cùng một tông nền trắng hơi ngả kem. Riêng hai trang nha khoa và xưởng gỗ còn trùng nhau tới đúng một mã màu.

![Bốn trang web của tiệm spa, nha khoa, xưởng gỗ và văn phòng luật, dòng chữ nhỏ viết hoa trên tiêu đề được tô xanh](https://homus.dev/photos/EBzoOSRXJlA-0023.jpg)

Bốn trang do cùng một câu lệnh tạo ra: Lụa Spa ("Làn da khỏe mạnh, tự nhiên và được chăm sóc đúng cách"), Nha Khoa Việt Tâm ("Chăm sóc răng miệng tận tâm, chính xác"), xưởng gỗ Mộc Nguyên ("Nội thất gỗ, đóng bằng tay, giữ lâu cả đời người") và Công ty Luật Hà Thành ("Giải pháp pháp lý rõ ràng cho doanh nghiệp và cá nhân"). Vạch xanh đánh dấu chỗ giống nhau đầu tiên: dòng chữ nhỏ viết hoa ở trên tiêu đề. Bố cục còn lại cũng y hệt: tiêu đề có chân bên trái, hai nút đậm và sáng, ô ảnh to bên phải.

Thanh đặt câu hỏi cho người xem: bây giờ che tên doanh nghiệp đi, liệu bạn có biết đâu là phòng khám răng, đâu là văn phòng luật hay không?

## 2. "Ngẫu nhiên" mà lại giống nhau

Theo Thanh, chỗ buồn cười nhất nằm ở dòng mà Claude tự ghi trước khi bắt tay vào làm. Trong phần suy nghĩ của nó có câu: chọn phông và màu ngẫu nhiên. Trong sáu lần chạy, có bốn lần nó ghi rõ hai chữ "ngẫu nhiên". Ngẫu nhiên mà kết quả lại giống nhau đến mức như vậy.

Trên màn hình, phần đầu trang nha khoa được phóng to: dòng chữ nhỏ viết hoa "Phòng khám nha khoa tại Hà Nội", tiêu đề có chân "Chăm sóc răng miệng tận tâm, chính xác", một câu giới thiệu về đội ngũ bác sĩ nhiều năm kinh nghiệm, trang thiết bị hiện đại, quy trình vô trùng khép kín, phục vụ từ khám tổng quát đến cấy ghép implant và chỉnh nha, rồi hai nút: "Đặt hẹn khám" màu nâu cam và một nút gọi điện nền trắng.

Anh đặt mình vào vị trí người chủ: nếu bạn là chủ phòng khám đó, khách hàng vào trang của bạn sẽ thấy nó y như trang của văn phòng luật ở phố bên cạnh, bởi vì người ta cũng gõ đúng câu ấy. Trang văn phòng luật trong thí nghiệm có tiêu đề "Đồng hành pháp lý đáng tin cậy" cùng hai đoạn giới thiệu về kinh nghiệm hành nghề lâu năm ở Hà Nội, về cam kết tư vấn trung thực và bảo mật thông tin khách hàng, đọc lên cũng chung chung y như vậy.

Thanh nhấn mạnh rằng ở đây ta hoàn toàn không thể trách con AI. Lỗi thật ra nằm ở phía mình: mình chưa cho nó biết mình thật sự là ai, như thế nào. Trong video, anh mở máy tính ra sửa thật, rồi chạy lại để mọi người thấy trước và sau khác nhau ra sao. Mọi bước đều làm được ngay trên trình duyệt, không cần cài thêm một công cụ nào.

## 3. AI không có gu, nó chỉ lấp chỗ bạn để trống

Trước hết, theo Thanh, cần hiểu một điều: AI không có gu. Nó cũng không cố tình làm cho bạn giống người khác. Về bản chất, nó chỉ lấp vào những chỗ bạn để trống.

Anh đi qua từng chỗ trống một:

- **Phông chữ.** Bạn không nói cho nó một phông chữ nào cả thì nó lấy phông mặc định. Bốn trên sáu trang vừa xem dùng chung một phông cho chữ thân bài, tên là Inter.

- **Màu.** Bạn không nói màu thì nó lấy luôn màu mặc định: nền trắng ngà kem, cả sáu trên sáu trang.

- **Giọng văn.** Bạn không nói giọng văn thì nó viết ra những câu mà ai cũng đã đọc. Nha khoa thì "chăm sóc răng miệng tận tâm". Trung tâm tiếng Anh thì "giáo viên tận tâm". Văn phòng luật thì "đồng hành pháp lý đáng tin cậy". Đọc xong không thể nhớ nổi ai là ai.

Và chỗ trống lớn nhất chính là điều anh vừa làm trong thí nghiệm: đưa cho nó đúng một câu. Câu đó không nói một chữ nào về cái quán, về cái phòng khám hay về chính người làm. Màu gì, chữ gì, khách hàng là ai, nó không được biết. Vì không biết nên nó đoán, và lần nào nó cũng đoán giống nhau.

Ba chỗ trống trong thí nghiệm và thứ Claude tự điền vào khi không được nói gì, theo đúng số Thanh đếm trên sáu trang.

## 4. Design system chỉ là một tờ giấy

Chỗ cần ghi rõ ấy, dân thiết kế gọi là **design system**, dịch sang tiếng Việt là hệ thống thiết kế. Thanh dặn đừng để cái tên làm mình sợ. Về bản chất, nó chỉ là một tờ giấy. Trên tờ giấy đó ghi: màu này, mã màu này; chữ tiêu đề dùng phông này; chữ nội dung dùng phông kia; các nút bấm bo góc bao nhiêu. Bạn đưa tờ giấy đó cho AI trước khi nó làm bất kỳ việc gì. Chỉ có vậy.

Toàn bộ phần còn lại của video là cùng nhau làm ra tờ giấy ấy, từng mục một: màu, phông, cách viết chữ, giọng văn, icon và ảnh.

Những mục sẽ được điền dần vào tờ giấy trong suốt video, rồi chọn tờ giấy đó trước mỗi thiết kế mới.

## 5. Tạo tờ giấy từ một ảnh chụp trong Claude Design

Việc đầu tiên là màu, và Thanh kể đây là việc từng làm anh mất rất nhiều thời gian. Lúc đầu anh ngồi tự nghĩ ra bảng màu, muốn nó đẹp, muốn nó mang dấu ấn cá nhân. Anh mở bảng chọn màu, kéo qua kéo lại, chọn ra những bộ màu mà mình nghĩ là rất đẹp. Nhưng khi dựng hết lên thì nhìn vẫn không ổn. Loay hoay chán chê, anh quyết định không ngồi nghĩ nữa mà đi lấy những thứ có sẵn. Phần này anh chỉ cách đi lấy.

Các bước trong Claude Design:

- Mở trình duyệt, vào `claude.ai/design`.

- Kéo xuống sẽ thấy ba thẻ: Projects, Design systems và Templates. Bấm vào thẻ Design systems.

- Bấm nút "Create design system" ở bên phải, rồi chọn "Create here". Hộp thoại "Add a design system" có hai lựa chọn: "Create here" (nối với Figma hoặc GitHub, hoặc tải slide và tài nguyên lên) và "Create using Claude Code", gắn nhãn "Best fidelity", dành cho ai đã có sẵn component React.

- Một tờ khai ngắn tên "Set up your design system" mở ra.

![Tờ khai Set up your design system: ô tên công ty, các ô link GitHub, thư mục, file .fig, phông và logo, ô ghi chú](https://homus.dev/photos/EBzoOSRXJlA-0305.jpg)

Tờ khai "Set up your design system" của Claude Design. Trên cùng là ô "Company name and blurb" (tên và một hai câu về việc của bạn). Phần "Provide examples of your design system and products" (đều không bắt buộc) có các ô: link code từ GitHub, link một thư mục code trên máy, tải file .fig, và "Add fonts, logos and assets" để kéo thả phông, logo, ảnh. Cuối cùng là ô "Any other notes?" để ghi chú thêm.

Ở ô đầu tiên, bạn ghi tên và một hai câu về việc mình làm. Thanh gõ một ví dụ:

```
Nha khoa Việt Tâm, phòng khám nha khoa ở Hà Nội, khách chủ yếu là gia đình có con nhỏ ngại đi khám răng.
```

Anh nói câu này quan trọng hơn mọi người nghĩ, vì đây là chỗ bạn nói cho nó biết khách hàng của bạn là ai. Phần sau của video sẽ cho thấy chỉ từ câu này Claude rút ra được cả nửa bộ luật viết chữ.

Tiếp theo, tìm một trang web mà bạn thấy đẹp, chụp màn hình lại, rồi kéo thẳng ảnh đó vào ô phông, logo và tài nguyên. Trong ví dụ, ảnh anh thả vào là trang chủ của Perk, một nền tảng quản lý công tác phí và chi tiêu, với tiêu đề "Automate travel, expenses, and policies in one platform". Ở ô cuối cùng, phần ghi chú, anh ghi rõ phông chữ là Be Vietnam Pro. Tới phần phông, anh sẽ giải thích vì sao phải ghi chính xác tên phông. Bấm Continue, rồi Generate; Claude báo sẽ mất chừng năm phút.

Ảnh chụp không nhất thiết phải là một website. Bạn có thể chụp bất cứ thứ gì mình thích, kể cả bao bì một sản phẩm trên kệ siêu thị, miễn là đồ thật, tức là đã có người ngồi thiết kế nó thật sự.

## 6. Refero: để Claude lọc hộ hơn 2.000 hệ thiết kế

Muốn chất lượng cao hơn, Thanh chỉ một trang: [styles.refero.design](https://styles.refero.design), đánh vần là R-E-F-E-R-O. Đây là một kho hơn 2.000 hệ thiết kế thật, bóc ra từ những sản phẩm đang chạy ngoài thị trường. Điểm quan trọng là nó được viết ở dạng AI đọc và hiểu được, và hoàn toàn miễn phí. Trang chủ ghi "Start with a design you love" và giới thiệu hơn 2.000 design system đọc được bằng AI, lấy từ các website sản phẩm hàng đầu; mỗi style có màu, typography, khoảng cách, component và một file DESIGN.md để dùng trong Cursor, Claude Code, Codex, v0 hay Lovable.

Nhưng 2.000 cái thì lướt đến bao giờ mới hết. Nên anh không lướt. Anh đưa đường link đó cho Claude và bảo nó đi qua trang này, chọn hộ ba cái hợp nhất với kênh của anh. Câu lệnh trên màn hình:

```
Đi qua styles.refero.design và tìm cho mình ba hệ thiết kế hợp nhất với một kênh dạy AI bằng tiếng Việt cho chủ doanh nghiệp nhỏ, khán giả không rành kỹ thuật. Cho mình ba đường link, mỗi cái một câu vì sao hợp.
```

![Ô nhập của Claude với câu lệnh nhờ đi qua styles.refero.design tìm ba hệ thiết kế, model Opus 5.5](https://homus.dev/photos/EBzoOSRXJlA-0423.jpg)

Câu lệnh gõ vào Claude (model Opus 5.5, mức Medium): đưa link Refero và bảo nó chọn hộ ba hệ thiết kế hợp với một kênh dạy AI bằng tiếng Việt cho chủ doanh nghiệp nhỏ, kèm link và một câu lý do cho mỗi cái.

Claude đọc tám trang và trả về ba hệ, trong đó có Superr và Perk. Perk chính là trang mà anh đã thả vào tờ khai nha khoa lúc nãy. Mỗi hệ đi kèm một đoạn giải thích. Với Superr: nền giấy kem, chú thích bằng bút cam viết tay kèm mũi tên, giống thầy giáo khoanh chỗ quan trọng; kiểu này hợp để giải thích công cụ AI cho người không rành kỹ thuật mà không làm họ thấy ngợp; phông gốc là phông riêng, cần thay bằng một phông bo tròn có hỗ trợ tiếng Việt. Với Perk: chỉ dùng một màu xanh chanh nổi bật trên nền giấy ấm, nút bấm bo tròn to; nhìn vào là biết ngay chỗ cần bấm, lại toát lên vẻ năng động và thực dụng mà chủ doanh nghiệp nhỏ thích; phông dự phòng là Inter nên hiển thị tiếng Việt tốt.

![Câu trả lời của Claude liệt kê Superr và Perk kèm link Refero, câu cuối giải thích vì sao bỏ Intercom và ElevenLabs](https://homus.dev/photos/EBzoOSRXJlA-0443.jpg)

Phần cuối câu trả lời: mục 2 Superr và mục 3 Perk, mỗi mục một link tới trang style trên Refero và một đoạn lý do. Câu được đóng khung ở cuối: Claude bỏ qua Intercom và ElevenLabs dù rất đẹp, vì hai hệ này dùng chữ siêu mảnh (weight 300), khi có dấu tiếng Việt sẽ khó đọc, và cảm giác hơi "sang" quá so với khán giả.

Thanh bảo phải đọc thật kỹ câu nó viết ở cuối. Claude nói nó bỏ qua hai hệ của Intercom và ElevenLabs, dù rất đẹp, vì chúng dùng chữ siêu mảnh; khi có dấu tiếng Việt vào thì sẽ rất khó đọc. Anh chỉ nói kênh của mình hướng dẫn bằng tiếng Việt, anh không hề bảo nó đi kiểm dấu. Nó tự nghĩ ra là phải đi kiểm. Theo anh, đó chính là sức mạnh của việc nói cho nó biết bạn đang viết cho ai.

Nếu ai nhận về ba kết quả khá chung chung, giống nhau, thì cách làm là tự mở trang Refero lên, lướt nhanh qua một số cái mình thấy ưng, chọn ra khoảng 15 cái rồi dán cả đống link đó vào, bảo Claude chọn hộ. Vẫn nhanh hơn là tự mình quyết. Khi đã chọn được cái ưng ý, chụp màn hình nó, quay lại đúng tờ khai lúc nãy và thả ảnh vào.

Sau bước này, bạn có trong tay một bộ mã màu cụ thể. Không phải kiểu "màu xanh", "màu đỏ", mà là một dãy ký tự bắt đầu bằng dấu thăng. Trong tờ giấy nha khoa, phần "Visual foundations" ghi bảng màu là nền kem ấm (`--cream-100`) thay vì trắng kiểu bệnh viện, màu nhấn `--color-accent` là `#FF8A66` cho mọi hành động chính, ấm hơn và thân thiện hơn màu đỏ báo động, và màu bạc hà là màu nhấn phụ, mang cảm giác dịu, dùng cho phần "trẻ em".

## 7. Phông tiếng Việt: bài kiểm tra năm chữ

Tiếp theo là phần Thanh muốn mọi người nhớ nhất trong cả video, vì theo anh không có tài liệu nước ngoài nào cảnh báo chuyện này: phông chữ. Đây là thứ sửa tốn ít công nhất nhưng thay đổi nhiều nhất. Người mới hay để nguyên phông mà AI đưa ra, và vô tình đó lại là dấu hiệu đầu tiên để người ta nhận ra sản phẩm của bạn do AI làm.

Chỗ lấy phông miễn phí tốt nhất, theo anh, là [Fontshare](https://www.fontshare.com) (fontshare.com). Mọi phông ở đây đều dùng cho kinh doanh được, không phải trả tiền, không phải xin phép.

Nhưng lưu ý: phần lớn những phông đẹp trên thế giới không được làm cho tiếng Việt. Người ta thiết kế cho 26 chữ cái, không thiết kế cho đống dấu của mình. Anh đã thử cả trăm phông trên Fontshare. Con số trên màn hình: đếm 100 phông trên trang chủ Fontshare thì chỉ 22 phông có đủ dấu tiếng Việt, còn 15 phông được xem nhiều nhất, tức những phông đẹp nhất, thì rớt sạch khi thử với tiếng Việt.

Vì vậy, trước khi "yêu" một phông nào, hãy làm một bài kiểm tra nhỏ ngay trên trang xem thử của phông đó. Trang nào cũng có một ô để gõ chữ vào. Xoá chữ mẫu đi và gõ đúng năm ký tự sau:

```
ẾỨỠẶẰ
```

Năm chữ này gom đủ mấy kiểu dấu khó nhất: dấu chồng dấu, dấu móc, dấu ngã trên mũ. Và phải nhìn kỹ, vì phông không vỡ theo kiểu mình tưởng tượng. Nó không mất dấu. Khi trình duyệt thấy phông thiếu chữ, nó lặng lẽ mượn một phông khác đắp vào từng chữ một. Nên thường bạn sẽ được năm chữ trông như nhặt từ năm phông khác nhau: chữ thì đậm, chữ thì mảnh, có chữ thì phần chữ và phần dấu rời hẳn ra khỏi nhau.

![Trang xem thử phông Satoshi trên Fontshare với năm chữ Ế Ứ Ỡ Ặ Ằ, dấu bị rời và lệch kiểu chữ](https://homus.dev/photos/EBzoOSRXJlA-0640.jpg)

Bài kiểm tra năm chữ trên trang xem thử của Satoshi, phông được xem nhiều nhất trên Fontshare, ở độ đậm Light. Các chữ trông như lấy từ nhiều phông khác nhau: dấu sắc của Ế đứng tách ra một bên, dấu huyền của Ằ nằm lạc ở góc phải. Dòng chú thích ghi: "Satoshi, xem nhiều nhất: RỚT".

Anh cho xem lần lượt: Clash Display rớt, Satoshi, phông được xem nhiều nhất trên trang, cũng rớt. Còn Anton thì năm chữ đều đậm, liền mạch, dùng được. Anh biết nhiều người sẽ tiếc, vì chính anh cũng tiếc, có những phông rất đẹp mà anh rất thích. Nhưng tiếc năm giây còn hơn là dựng xong cả bộ ảnh bìa rồi mới phát hiện ra.

## 8. Ghi tên phông, đừng ghi mô tả

Đi kèm là một mẹo nhỏ anh học được trong lúc chạy thử cho video này: đừng gõ vào Claude kiểu "dùng phông có dấu tiếng Việt". Anh gõ đúng câu đó và chạy thử hai lần. Lần đầu, Claude chọn Lora và Manrope; trên màn hình là trang nha khoa "An Nhiên" với tiêu đề "Nụ cười tự tin, bắt đầu từ An Nhiên". Lần sau, nó chọn Be Vietnam Pro.

Tức là cả ba phông đều đủ dấu, nhưng thành hai bộ khác nhau, và như vậy cũng không dùng được, vì nhìn từ xa hai lần chạy chẳng liên quan gì đến nhau. Cho nên phải ghi chính xác tên phông, đừng ghi mô tả. Lúc làm tờ khai cho phòng khám nha khoa, anh ghi đúng tên, và Claude nhớ luôn là dùng Be Vietnam Pro đúng như yêu cầu.

Bạn cần chốt tối thiểu hai phông: một cho tiêu đề, một cho đoạn văn. Cả hai đều phải qua bài kiểm tra năm chữ.

Thử nghiệm của Thanh: mô tả phông thì hai lần chạy ra hai bộ phông khác nhau; ghi đúng tên phông trong tờ khai thì Claude dùng đúng phông đó.

Thêm một chỗ nữa để tìm phông là [Fontesk](https://fontesk.com). Ở đó có nhiều phông lạ hơn, nhưng lại có nhiều kiểu giấy phép và bản quyền khác nhau, nên nếu cần kinh doanh từ thiết kế đó thì phải kiểm tra kỹ.

## 9. Chữ viết ra sao: học luật từ 5 trang đầu ngành

Đến đây, tờ giấy còn thiếu đúng một mục mà hầu như ai cũng quên: chữ được viết ra sao. Thanh nhắc lại mục đích: tạo ra một bản thiết kế nhìn không giống AI làm. Nếu bản thiết kế chỉ có hình đẹp mà chữ thì đọc cái là biết AI viết, rất có thể bạn mất người xem ngay từ dòng đầu tiên.

Trên màn hình là ảnh bìa cũ đó: ảnh dọc, anh chống cằm trước một chiếc laptop, dòng chữ vàng "Dùng AI theo cách mới" được đánh dấu "đúng 5 chữ", bên cạnh ghi hai điểm yếu: không tên công cụ, không con số.

Anh lấy ví dụ từ chính mình. Một ảnh bìa cũ của anh dùng tiêu đề đúng năm chữ: "Dùng AI theo cách mới". Không có tên công cụ, không có con số, không có manh mối nào cho biết mở ra sẽ thấy gì, sẽ được gì. Khi nó chung chung quá, mọi người sẽ lướt qua. So với một ảnh bìa anh làm gần đây có con số 64GB: cũng ngắn như vậy, nhưng có con số, có một thứ cụ thể, người xem biết ngay anh sắp nói chuyện gì. Theo anh, đó là một luật, và luật đó phải nằm trong tờ giấy chứ không phải chỉ nằm trong đầu bạn.

Cách lấy luật nhanh nhất là bắt AI đi học những người giỏi trước khi nó viết. Anh làm thử với phòng khám nha khoa lúc nãy. Câu lệnh của anh, đại ý: đi qua website của năm phòng khám nha khoa đứng đầu Hà Nội, xem cả năm cái làm gì giống nhau ở dòng tiêu đề lớn và chữ trên nút bấm mà mấy phòng khám yếu hơn không làm, rồi rút thành năm luật, kèm vài trang nhỏ hơn để so. Claude trả về đúng năm luật:

Năm luật Claude trả về: (1) dòng H1 là tên + nghề, không bao giờ là lời chào; (2) hẹp thắng rộng, cấm các từ uy tín, chất lượng, hàng đầu, toàn diện, tận tâm khi chúng đứng một mình ở tiêu đề mà không kèm danh từ chuyên môn; (3) nút chính là một hành động nhỏ, miễn phí, rút lui được, mô tả việc người dùng làm trong 10 giây tới chứ không phải việc họ cam kết; (4) một nhãn duy nhất, lặp nguyên văn, luôn đi cặp: một trang, một nhãn CTA chính, mọi nút khác hạ xuống cấp phụ; (5) mỗi lời tự khen phải kéo theo một danh từ riêng không thuộc về mình.

Thanh đọc hai luật anh thích nhất.

**Luật thứ nhất: tiêu đề là tên cộng nghề.** Claude cho luôn một bài thử: xoá tên phòng khám khỏi câu tiêu đề; nếu câu đó vẫn đúng với mọi phòng khám khác thì viết lại. Còn nhớ trang nha khoa đầu video, "Chăm sóc răng miệng tận tâm, chính xác"? Xoá tên đi thì câu đó đúng với mọi phòng khám ở Hà Nội. Vậy là rớt.

**Luật thứ năm: mỗi lời tự khen phải kèm một cái tên không phải của mình.** Claude lấy luôn ví dụ: "hơn 80.000 ca trồng implant" là mạnh, vì đứng cạnh tên các hãng làm trụ implant như Straumann và Osstem. Còn những câu như "99% khách hàng hài lòng" thì yếu, vì nó có thể đứng một mình mà không ai làm chứng.

Rồi anh mở tờ giấy nha khoa ra. Có một mục anh không hề yêu cầu: luật viết chữ. Claude tự viết nó từ đúng câu mô tả khách hàng lúc nãy. Mục "Content fundamentals" ghi: giọng văn ấm, trấn an, nói thẳng với bố mẹ, xưng "bạn", gọi "bé", gọi "con"; câu ngắn, không dùng thuật ngữ y khoa. Viết "Khám răng nhẹ nhàng, cho cả gia đình" chứ đừng viết "Dịch vụ nha khoa toàn diện". Nút bấm phải là một việc cụ thể như "Đặt lịch khám", "Xem bảng giá", không bao giờ là kiểu "Tìm hiểu". Chỉ một câu mô tả khách hàng mà nó đã tự rút ra được cả nửa bộ luật.

Anh dán thêm năm luật vừa học được vào đó, kèm một câu:

```
Thêm 5 luật này vào phần luật viết chữ của hệ thiết kế, giữ nguyên các luật cũ:
1. Dòng tiêu đề lớn là tên + nghề, không bao giờ là lời chào. Xoá tên thương hiệu khỏi tiêu đề mà ...
```

![Mục Content fundamentals của tờ giấy nha khoa, năm luật mới được thêm vào khung xanh bên dưới các luật cũ](https://homus.dev/photos/EBzoOSRXJlA-0950.jpg)

Mục "Content fundamentals" sau khi cập nhật. Phía trên là các luật Claude tự viết: Voice, Framing, Trust signals (số năm hoạt động, số trẻ đã khám, đánh giá của phụ huynh thay vì logo đối tác), Casing (viết hoa kiểu câu, dấu tiếng Việt luôn đúng), No emoji, CTAs luôn là hành động cụ thể. Khung xanh bên dưới là năm luật mới nằm dưới luật cũ, ví dụ "Hẹp thắng rộng. Cấm đứng một mình ở tiêu đề: uy tín, chất lượng, hàng đầu, toàn diện, tận tâm" và "Mỗi lời tự khen phải kèm một danh từ riêng không thuộc về mình. Con số không có ai bảo chứng thì bỏ".

Thế là xong. Một lưu ý của anh: khi làm cho việc của mình, hãy ghi ngành thật cụ thể. Đừng ghi kiểu "ngành AI", mà ghi kiểu "kênh dạy AI bằng tiếng Việt cho người không rành kỹ thuật".

## 10. Giọng văn của riêng bạn

Việc thứ hai trong phần chữ lâu hơn, nhưng theo Thanh là rất đáng. Gom năm bài bạn tự viết: một bài đăng, một kịch bản, một email, cái gì cũng được, miễn là câu chữ của bạn chứ không phải của AI. Đưa cho Claude, kèm theo danh sách những thứ bạn cấm.

Anh lấy ví dụ danh sách của mình. Anh cấm mở bài bằng câu "hôm nay mình sẽ nói về", cấm kết bằng câu "hy vọng video này sẽ hữu ích". Và có một bảng hơn 30 chữ tiếng Anh phải nói bằng tiếng Việt, ví dụ "build" thì nói là "làm", "output" thì nói là "kết quả".

![Bảng Danh sách từ bị cấm và từ thay thế: build, output, vibe, warm, leverage, distribution, moat, commodity, organic traffic](https://homus.dev/photos/EBzoOSRXJlA-1023.jpg)

Một phần bảng "Danh sách từ BỊ CẤM và từ thay thế" trong luật giọng văn của Thanh, hai cột "Không dùng" và "Thay bằng": build (động từ chung) thành làm, tạo, xây; output thành kết quả; vibe thành cảm giác, không khí làm việc; warm (tính từ mô tả AI) thành thân thiện; leverage thành đòn bẩy, tận dụng; distribution thành cách đưa sản phẩm đến tay khách hàng, kênh tiếp cận; moat thành lợi thế không ai copy được; commodity thành thứ ai cũng làm được; organic traffic thành người tự tìm đến, lượng truy cập tự nhiên.

Rồi thêm một câu cuối, và anh dặn đừng bỏ qua câu này:

```
Từ giờ mỗi lần mình sửa chữ của bạn thì cập nhật luôn vào bộ luật.
```

Nghĩa là nó sẽ tự khá lên mỗi lần bạn sửa. Tờ luật giọng văn của anh (file `tone-of-voice.md`, có từ 20/04/2026) mở đầu bằng mục "Nguyên tắc gốc": nói như đang giải thích cho một người bạn thông minh nhưng chưa biết kỹ thuật, không lên giọng chuyên gia. Ngay sau đó là: câu ngắn, nhịp gấp, mỗi câu một ý, dấu chấm nhiều hơn dấu phẩy. Anh nói đó đúng là tật nói của mình, và giờ Claude viết theo được.

## 11. Icon: đưa sẵn một bộ, đừng bắt nó vẽ

Trên tờ giấy còn hai ô trống, Thanh làm nhanh. Ô thứ nhất là icon. Anh thử bảo Claude tự vẽ năm icon cho trang nha khoa: cái răng, lịch hẹn, bác sĩ, em bé và cái điện thoại. Nhìn lướt thì cũng ổn. Nhưng mở ra xem kỹ từng cái thì nét chỗ dày 2.5, chỗ 2, chỗ 1; đầu nét chỗ vuông, chỗ tròn. Cái icon bác sĩ thì anh nhìn mãi không ra là bác sĩ. Thử năm cái thì còn tạm, nhưng nếu phải vẽ ba bốn chục cái cho cả một trang web thì chắc chắn sẽ lệch.

Nên nguyên tắc ở đây là: đừng bắt nó vẽ, hãy đưa sẵn cho nó. Vào [iconify.design](https://iconify.design), miễn phí, trong đó có hơn 200 bộ icon (trên màn hình ghi: tìm trong 370.243 icon từ 222 bộ). Chọn lấy một bộ. Anh nhấn mạnh chữ "một", vì anh từng thử tải bốn bộ về trộn vào nhau và kết quả nhìn như tờ rơi phát ngoài chợ. Mỗi bộ trong danh sách có ghi giấy phép (MIT, Apache 2.0, CC BY 4.0, ISC...) và số lượng icon. Riêng một bộ anh đang mở đã có gần 2.000 icon, cái nào cũng cùng một nét, dùng cả đời không hết.

Tải những icon cần dùng trong bộ đó về, đưa cho Claude, kèm câu: dùng bộ này cho toàn bộ thiết kế, không được tự vẽ icon. Bạn được hai cái lợi. Thứ nhất là có icon chuẩn ngay. Cái lợi thứ hai anh đã thấy tận mắt: bộ Lucide anh chọn lúc nãy không có icon cái răng. Anh đưa cho Claude bốn icon có sẵn và bảo nó vẽ thêm cái răng theo đúng phong cách bộ đó. Câu lệnh trên màn hình:

```
Bỏ 5 icon vừa rồi. Dùng bộ Lucide đính kèm cho lịch hẹn, bác sĩ, em bé, điện thoại. Bộ này không có icon cái răng, vẽ thêm cái răng theo đúng phong cách bộ này. Xếp lại 5 icon một hàng.
```

![Câu lệnh yêu cầu dùng bộ Lucide đính kèm và vẽ thêm icon cái răng, bên dưới là bốn icon Lucide lịch, ống nghe, em bé, điện thoại](https://homus.dev/photos/EBzoOSRXJlA-1143.jpg)

Câu lệnh đổi sang bộ Lucide, đính kèm bốn icon có sẵn: lịch, ống nghe (thay cho bác sĩ), em bé và điện thoại, cùng một độ dày nét và đầu nét tròn. Claude được yêu cầu vẽ thêm cái răng theo đúng phong cách bộ này.

Kết quả là một cái răng cùng khung, cùng độ dày nét, cùng đầu nét tròn như bốn cái kia. Đặt cạnh nhau rất hợp.

## 12. SVG cho icon và sơ đồ, ảnh minh hoạ thì nối ra ngoài

Ô thứ hai còn lại: hãy yêu cầu định dạng SVG. Thanh giải thích SVG là ảnh vẽ bằng công thức thay vì bằng điểm ảnh, nên phóng to bao nhiêu lần cũng không lo vỡ. Bạn có thể mở ra đổi màu bằng tay, và còn làm cho nó chuyển động được. Chỉ cần thêm một câu sau mỗi yêu cầu kiểu:

```
Làm icon và sơ đồ ở dạng SVG, giữ đường nét gọn để mình có thể sửa màu sau.
```

Còn riêng ảnh chụp người, ảnh chụp có nhiều chi tiết thì vẫn dùng file JPG. SVG lại không hợp với trường hợp này.

Ba loại hình ảnh trên tờ giấy và cách xử lý từng loại theo Thanh.

Về ảnh minh hoạ, Claude Design không tự tạo ảnh được. Để ý sáu trang đầu video: trang nào cũng để trống ô ảnh, có trang còn ghi rõ ảnh đang là ô trống, bạn kéo thả ảnh thật vào. Riêng phần tạo ảnh thì phải nối ra ngoài, và việc đó hoàn toàn làm được bằng Claude Code; anh nói sẽ quay lại ở cuối video.

## 13. Ghép lại, và mẹo trộn hai hệ thiết kế

Giờ ghép lại. Tờ giấy bạn vừa làm nằm sẵn trong mục Design systems, gồm mã màu, phông và luật viết chữ. Bộ icon đã chọn thì thả vào cùng chỗ đó. Lần sau khi mở một thiết kế mới, bạn chỉ cần chọn tờ giấy này ở ô Design system. Trên màn hình, tờ giấy "Việt Tâm Design System" có các mục như Colors, Typography, Spacing, Components, phần "Sources" ghi lại ảnh tham khảo đã thả vào, và phần "Content fundamentals".

Tiếp theo là mẹo Thanh thích nhất, cái sẽ tách bạn ra khỏi đám đông. Nếu bạn bê nguyên phong cách thiết kế của một thương hiệu lớn về, bạn sẽ được ngay một bản sao. Có thể rất đẹp, nhưng đó là của người ta, nhìn là biết bạn lấy từ đâu. Nên mẹo là đừng bê nguyên một cái. Hãy thả hai cái vào cùng lúc, rồi nói rõ cho nó biết lấy cái gì ở đâu.

Anh làm thử với văn phòng luật. Tờ khai ghi "Công ty Luật Hà Thành, văn phòng luật sư ở Hà Nội, tư vấn cho doanh nghiệp nhỏ...", thả vào hai ảnh, và ghi đúng một câu: lấy cách dàn chữ của ảnh thứ nhất (chữ to, đậm, nhiều khoảng trắng) và lấy bảng màu của ảnh thứ hai.

![Ba khung: ảnh 1 trang chủ Ghost lấy chữ, ảnh 2 trang chủ Framer lấy màu, kết quả trang văn phòng luật Hà Thành](https://homus.dev/photos/EBzoOSRXJlA-1324.jpg)

Trộn hai hệ: ảnh 1 là trang chủ Ghost ("Turn your audience into a business", chữ to đậm, nhiều khoảng trắng) dùng để lấy chữ; ảnh 2 là trang chủ Framer (nền gần đen, điểm xanh điện) dùng để lấy màu. Kết quả là trang văn phòng luật Hà Thành với tiêu đề "Pháp lý rõ ràng cho việc kinh doanh của bạn." căn giữa, nền trắng, nút xanh. Chú thích dưới: mang dáng của cả hai, không giống hẳn cái nào.

Claude làm đúng như vậy, và ghi luôn vào phần mô tả của tờ giấy: ảnh này lấy chữ, ảnh kia lấy màu. Trong "Luật Hà Thành Design System", phần nguồn ghi rằng trang marketing của Ghost là tham khảo cho "typographic layout" (chữ to đậm, nhiều khoảng trắng, căn giữa), còn trang marketing của Framer là tham khảo cho "color palette" (mặt nền gần đen, một màu nhấn xanh điện). Kết quả mang dáng của cả hai mà không giống hẳn cái nào. Theo Thanh, đó mới là cái của bạn.

## 14. Chạy lại đúng câu lệnh cũ: trước và sau

Xong, giờ quay lại đúng hai trang đầu video: nha khoa và văn phòng luật, hai website mà che tên đi thì không phân biệt được. Cùng một câu lệnh, không sửa một chữ nào. Chỉ khác một chỗ: lần này anh chọn tờ giấy thiết kế vừa làm ở ô Design system (trên màn hình là "Việt Tâm Design System", model Opus 5.5). Và đây là kết quả.

**Nha khoa trước.** Chữ tròn, đậm. Nút màu san hô. Tiêu đề: "Nha Khoa Việt Tâm khám răng cho trẻ em và cả nhà". Tên cộng nghề, đúng luật thứ nhất. Không có một chữ "tận tâm" nào trên cả trang. Nút chính ghi "Đặt lịch khám", và nó lặp lại nguyên văn ở ba chỗ, từ thanh menu trở xuống. Ngay dưới nút có một dòng nhỏ: "Đặt lịch không mất phí. Đổi hoặc huỷ lịch bằng một cuộc gọi." Năm luật anh dán vào lúc nãy, nó làm theo hết.

Câu mô tả đầu tiên nói thẳng với bố mẹ có con nhỏ: bé được làm quen với ghế khám trước khi điều trị, bố mẹ ngồi cạnh con suốt buổi. Đó là vì trong tờ khai anh đã ghi rõ khách hàng của mình là ai.

**Văn phòng luật.** Tiêu đề rõ ràng, đặt ở giữa trang: "Pháp lý rõ ràng cho việc kinh doanh của bạn." Nền trắng, điểm xanh, rất nghiêm túc và gọn gàng. Bên dưới là một dải số liệu (12, 400+, 24h).

![So sánh bốn trang: nha khoa và luật, không tờ giấy và có tờ giấy](https://homus.dev/photos/EBzoOSRXJlA-1423.jpg)

Đặt cạnh nhau: hàng trên là nha khoa không có tờ giấy (tiêu đề có chân "Chăm sóc răng miệng tận tâm, chính xác") và có tờ giấy ("Nha Khoa Việt Tâm khám răng cho trẻ em và cả nhà", chữ tròn đậm, nút san hô). Hàng dưới là văn phòng luật không có tờ giấy (khuôn chung chữ có chân bên trái, ô ảnh bên phải) và có tờ giấy (tiêu đề đậm căn giữa, nền trắng, nút xanh, dải số liệu 12 / 400+ / 24h).

Quan trọng nhất, hai trang này không còn giống nhau. Nó không còn là cái khuôn chung: chữ có chân bên trái, ô ảnh bên phải, nút đậm đứng cạnh nút sáng, những thứ mà ai gõ câu đó cũng nhận được. Cùng một con AI, cùng một câu lệnh, chỉ khác mỗi tờ giấy quy tắc.

## 15. Tầng cao hơn: thiết kế với Claude Code

Thanh tóm lại: đó là một số mẹo để thiết kế của bạn tránh được mùi AI, và mọi thứ vừa hướng dẫn đều chạy được trên trình duyệt web hoặc trên bản Claude app cài trên máy tính.

Còn một tầng cao hơn: làm thẳng với Claude Code, tức là Claude sửa thẳng các file thiết kế trên chính máy của mình, như website, thậm chí cả video. Anh điểm qua nhanh để mọi người thấy khả năng; chi tiết thì anh hẹn hướng dẫn rõ hơn ở một video sau. Trên màn hình là danh sách "Với Claude Code" gồm bốn mục.

![Thanh Trần nói về danh sách Với Claude Code: hoạt hình khớp lời nói, công cụ soi lại giao diện, ảnh minh hoạ, luật thiết kế của Apple](https://homus.dev/photos/EBzoOSRXJlA-1603.jpg)

Danh sách "Với Claude Code": (1) hoạt hình khớp lời nói, (2) công cụ soi lại giao diện, (3) ảnh minh hoạ, (4) luật thiết kế của Apple. Mục 4 đang được nói tới, chú thích ghi: cỡ chữ, vùng bấm cho ngón tay, tương phản tối thiểu.

**Một: hoạt hình khớp lời nói.** Đây là thứ đáng nhất theo anh. Ví dụ quay xong một video, bạn lấy bản lời thoại có mốc thời gian tới từng chữ, đưa cho AI và bảo nó tìm ra năm chỗ mà nếu thêm hoạt hình vào sẽ giúp người xem hiểu hơn, tra số liệu thật, rồi dựng hoạt hình minh hoạ khớp đúng số giây mình nói, xuất ra video. Anh cho biết chính video đang xem cũng được làm theo cách này.

**Hai: công cụ soi lại giao diện.** Có một số bộ công cụ miễn phí chuyên đi soi lại trang của bạn: soi khoảng cách, soi thứ bậc chữ to chữ nhỏ, soi độ tương phản cho người mắt kém, rồi sửa luôn. Bản rút gọn chỉ cần gõ kiểu "làm cái này đậm hơn" hay "làm cái kia nhẹ đi".

**Ba: ảnh minh hoạ.** Claude Design không tự tạo ảnh. Anh hay tạo ảnh bằng [Krea](https://www.krea.ai) hoặc [Higgsfield](https://higgsfield.ai). Mấy dịch vụ này gom gần hết các mô hình tạo ảnh lớn vào một chỗ, trả tiền theo từng lượt, và rẻ hơn mặt bằng chung khá nhiều. Quan trọng là chúng chạy được qua Claude Code: anh kết nối API với Claude Code rồi gõ một câu kiểu:

```
Tạo ảnh bìa cho video này theo phong cách thương hiệu, tỷ lệ ảnh 16:9, không có chữ trong ảnh.
```

**Bốn: luật thiết kế của Apple.** Apple công bố miễn phí toàn bộ bộ luật thiết kế giao diện của họ ([Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines)): cỡ chữ bao nhiêu, vùng bấm cho ngón tay cần rộng bao nhiêu, độ tương phản màu tối thiểu. Bạn có thể biến nó thành bộ luật cho AI của mình và giữ nguyên mọi con số. Khi đó, chỉ cần thiết kế giao diện cho điện thoại là nó tuân theo luật đó luôn, không phải đoán mò nữa.

Còn nếu cần chuyển động ở mức các công ty thiết kế hàng đầu đang làm, kiểu cuộn tới đâu hiện tới đó, thì chỉ cần bảo AI dùng [GSAP](https://gsap.com). Theo anh, thư viện này giờ đã miễn phí gần như toàn bộ.

## 16. Tóm lại một câu

Tóm lại một câu: AI không làm bạn giống người khác. Nó chỉ lấp chỗ bạn đang để trống. Khi bạn viết rõ ra một tờ giấy quy định, chỗ trống ấy được lấp đi.

Thông điệp cuối video: khác biệt duy nhất giữa hai kết quả là tờ giấy quy tắc đưa cho AI.

Thanh mời mọi người làm theo hướng dẫn, kẹt ở đâu thì để lại bình luận cho anh biết. Cứ thử đi, rồi xem thiết kế của bạn có còn mùi AI hay không. Anh hẹn gặp lại ở video sau.

## Nguồn và liên kết

- Tên gốc: Vì sao Claude Design làm ra thiết kế có mùi AI, và cách để nó làm ra thiết kế của bạn
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=EBzoOSRXJlA](https://www.youtube.com/watch?v=EBzoOSRXJlA)

- Kênh YouTube Thanh Trần - 5 Phút AI (Thanh Trần): [youtube.com/channel/UCTumIe5W_2OoKUEDAq3xsKQ](https://www.youtube.com/channel/UCTumIe5W_2OoKUEDAq3xsKQ)

- Anthropic giới thiệu Claude Design: [anthropic.com/news/claude-design-anthropic-labs](https://www.anthropic.com/news/claude-design-anthropic-labs)

- Refero Styles, thư viện hơn 2.000 design system và file DESIGN.md đọc được bằng AI: [styles.refero.design](https://styles.refero.design)

- Fontshare, phông miễn phí dùng cho kinh doanh: [fontshare.com](https://www.fontshare.com)

- Be Vietnam Pro trên Google Fonts: [fonts.google.com/specimen/Be+Vietnam+Pro](https://fonts.google.com/specimen/Be+Vietnam+Pro)

- Fontesk, phông chữ với nhiều loại giấy phép khác nhau: [fontesk.com](https://fontesk.com)

- Iconify, các bộ icon mã nguồn mở: [iconify.design](https://iconify.design)

- Lucide, bộ icon dùng trong video: [lucide.dev](https://lucide.dev)

- Apple Human Interface Guidelines: [developer.apple.com/design/human-interface-guidelines](https://developer.apple.com/design/human-interface-guidelines)

- GSAP, thư viện chuyển động cho web: [gsap.com](https://gsap.com)

Nguồn: https://homus.dev/talks/vi-sao-claude-design-lam-ra-thiet-ke-co-mui-ai-va-cach-de-no-lam-ra-thiet-ke-cua-ban · cập nhật 2026-10-13