AI làm website xấu như chó? Chỉ cần đưa cho nó một file DESIGN.md

Trong bài viết này, AgentsNgon sẽ hướng dẫn bạn cách dùng Refero Styles như một nguồn tham chiếu để tạo UI có định hướng hơn. Bạn sẽ học được cách để xây dựng những website đẹp như: Apple, Linear, Notion, ElevenLabs hay Lamborghini,… Bạn không cần phải đưa cho Agents cả website của một thương hiệu nổi tiếng, chỉ cần đưa cho nó cách thương hiệu đó dùng màu, chữ, khoảng cách, component và những điều tuyệt đối không nên làm. Chỉ một thay đổi nhỏ trong brief, nhưng sẽ tạo ra khác biệt rất lớn ở bản thiết kế đầu tiên.

Refero Styles: “kho gu” để AI tham khảo

Refero Styles là thư viện các hệ thống thiết kế được trình bày cho AI agent. Trang thư viện hiện giới thiệu hơn 2.000 style có thể đọc bởi AI, đồng thời cho phép bạn tìm theo thương hiệu, phong cách, màu sắc, font hoặc category. Hiện tại, bạn có thể truy cập website và copy các file DESIGN.md hoàn toàn miễn phí. Vì website đang ở trạng thái Beta, số lượng và cách sắp xếp style có thể thay đổi theo thời điểm.

Khi mở một style, bạn thường sẽ thấy hai phần quan trọng:

• Ảnh chụp website hoặc sản phẩm thực tế để nhìn nhanh hướng art direction.
• Nội dung thiết kế ở dạng DESIGN.md, cùng một số định dạng xuất khác như Tailwind v4, CSS Variables và Design Tokens.

Một file DESIGN.md thường chứa:

• Màu nền, màu chữ, màu accent, màu trạng thái và tên token.
• Font chính, font phụ, cỡ chữ, độ đậm, line-height và letter-spacing.
• Đơn vị spacing, độ rộng tối đa của trang, khoảng cách giữa section và padding của card.
• Border radius, border, shadow, surface và cách tạo elevation.
• Quy tắc cho button, input, badge, card, nav, hero, bảng dữ liệu hoặc product mockup.
• Phần “Do” và “Don’t”, tức các nguyên tắc nên dùng và các lỗi cần tránh.
• Prompt mẫu để tạo những component phù hợp với style đó.

Nói nôm na, AI không còn phải đoán mò. “Dùng nền #f6f5f4, card trắng, card radius 12px và chỉ dùng xanh #0075de cho hành động chính” là một yêu cầu dễ làm đúng hơn rất nhiều so với “hãy làm cho trang web có gu”.

Vì sao file này làm AI bớt ngu hơn?

Mình thường tách bài toán thành hai phần: prompt là brief sản phẩm, còn DESIGN.md là brief thị giác.

Prompt sản phẩm trả lời các câu hỏi như:

• Website này dành cho ai?
• Người dùng cần làm gì?
• Trang nào cần xây?
• Có những trạng thái, dữ liệu và hành động nào?
• Những route, API hoặc business logic nào phải được giữ nguyên?

DESIGN.md trả lời một nhóm câu hỏi khác:

• Màu nào là màu nền, màu hành động và màu phụ?
• Heading nên lớn đến đâu, dùng font gì và nặng bao nhiêu?
• Các section nên thoáng hay dày?
• Card có bo góc không, có dùng shadow không?
• Có nên dùng gradient, icon trang trí hoặc một lưới card dày đặc không?

Khi hai phần này đi cùng nhau, AI có một không gian lựa chọn nhỏ hơn và rõ ràng hơn. Nó vẫn phải giải quyết bài toán sản phẩm của bạn, nhưng không còn phải tự đoán toàn bộ “gu” từ đầu.

Hướng dẫn chi tiết từng bước sử dụng Refero Styles để tạo website

Bước 1: Xác định đúng “công việc thiết kế”

Đừng bắt đầu bằng câu hỏi “thương hiệu nào nổi tiếng nhất?”. Hãy bắt đầu bằng màn hình bạn sắp xây:

• Landing page cần rõ ràng, ít thành phần và ưu tiên chuyển đổi.
• Dashboard cần mật độ thông tin, bảng dữ liệu và trạng thái rõ ràng.
• Website devtool thường cần nền tối, code UI và hierarchy chặt.
• Trang editorial cần typography, nhịp đọc và khoảng trắng.
• Website sản phẩm cao cấp cần hình ảnh lớn, ít component và tương phản mạnh.

Một thương hiệu nổi tiếng chưa chắc là tham chiếu phù hợp cho công việc của bạn. Hãy chọn theo mật độ, tông giọng, đối tượng người dùng và kiểu nội dung.

Bước 2: Tìm theo thương hiệu, mood hoặc thuộc tính thị giác

Gõ một từ khóa vào ô Search DESIGN.md examples, rồi bấm Search. Bạn có thể tìm Notion, Linear, Lamborghini, ElevenLabs, dark, editorial, clean SaaS, monochrome hoặc tên một font. Cứ coi đây như lúc bạn lướt Pinterest để tìm moodboard, chỉ khác là kết quả đi kèm luôn phần hướng dẫn cho AI.

Hãy mở vài kết quả và so sánh nhanh. Đừng chọn style chỉ vì ảnh preview bắt mắt. Hãy xem nó có giải quyết được bài toán của trang bạn đang xây hay không.

Bước 3: Nhìn vào hệ thống, không chỉ nhìn vào ảnh

Trang chi tiết cho bạn thấy ảnh chụp, mô tả phong cách và toàn bộ nhóm token. Ví dụ, bản Notion được mô tả theo hướng “warm paper notebook”: nền off-white ấm, typography sans có trọng lượng editorial, màu sắc được dùng như những điểm nhấn, card có border mảnh và không dùng shadow cho nội dung.

Đọc ít nhất bốn khu vực sau:

1. Color Palette: màu nào dành cho canvas, card, text và action.
2. Typography: font, type scale, weight, line-height và letter-spacing.
3. Spacing & Shape: đơn vị khoảng cách, max-width, radius và cách tạo bề mặt.
4. Guidelines: các nguyên tắc Do/Don’t giúp tránh những lựa chọn làm style bị loãng.

Bước 4: Chọn Compact hay Extended

Ở nhiều trang style, Refero cho chọn Compact hoặc Extended.

• Compact phù hợp khi bạn muốn một brief ngắn để AI nắm nhanh tinh thần chính.
• Extended phù hợp khi đang xây một màn hình quan trọng, cần token chi tiết, prompt component và các quy tắc đầy đủ.

Nếu bạn đang bắt đầu một dự án mới, hãy dùng bản Extended để agent có đủ bối cảnh. Nếu chỉ muốn chỉnh một nút, một card hoặc một section nhỏ, bản Compact có thể đã đủ.

Bước 5: Chọn định dạng phù hợp với công cụ của bạn

Refero hiện hiển thị nhiều định dạng bên cạnh DESIGN.md:

• DESIGN.md: lựa chọn nên dùng đầu tiên cho Cursor, Claude Code, Codex, v0 hoặc Lovable.
• Tailwind v4: tiện nếu dự án của bạn đã dùng Tailwind v4 và muốn lấy theme trực tiếp.
• CSS Variables: tiện để đưa token vào file CSS của dự án.
• Design Tokens: phù hợp khi bạn muốn xem token theo cấu trúc riêng của hệ thống.

Bước 6: Copy hoặc tải file DESIGN.md

Trong khu vực xuất nội dung, bạn có thể bấm Copy để lấy nội dung vào clipboard hoặc bấm nút .md để tải file DESIGN.md về máy.

Cách làm thủ công dễ kiểm soát nhất:

1. Bấm Download DESIGN.md.
2. Đổi tên nếu cần, nhưng nên giữ chính xác tên DESIGN.md.
3. Đặt file ở thư mục gốc của project, cạnh package.json, README.md hoặc thư mục source chính.
4. Mở AI coding agent trong đúng project đó.
5. Nói rõ với agent rằng nó phải đọc file trước khi viết hoặc chỉnh UI.

Nếu chỉ cần thử nhanh, bạn có thể bấm Copy rồi dán trực tiếp vào cuộc trò chuyện. Với dự án dài hơi, đặt file trong repo sẽ tốt hơn vì agent và các thành viên khác có thể dùng lại cùng một nguồn tham chiếu.

Bước 7: Đưa cho AI cả style lẫn bài toán sản phẩm

Đây là prompt mẫu bạn có thể dùng sau khi đã đặt DESIGN.md ở thư mục gốc:

Hãy đọc file DESIGN.md ở thư mục gốc trước khi viết hoặc chỉnh bất kỳ code UI nào.

Mục tiêu sản phẩm:
– Sản phẩm: [mô tả sản phẩm]
– Người dùng chính: [đối tượng]
– Màn hình cần xây: [landing page / dashboard / pricing / settings / …]
– Hành động quan trọng nhất: [CTA hoặc tác vụ chính]
– Nội dung bắt buộc: [danh sách nội dung]

Hãy dùng DESIGN.md làm hệ thống định hướng thị giác, gồm màu sắc, typography,
spacing, layout, component weight và các quy tắc Do/Don’t. Không sao chép
nguyên website nguồn, logo, tên thương hiệu, nội dung, hình ảnh hoặc bố cục
độc quyền của nguồn tham chiếu. Hãy chuyển tinh thần thiết kế thành giao diện
riêng cho sản phẩm của tôi.

Trước khi code, hãy tóm tắt ngắn:
1. Palette và màu dành cho hành động chính.
2. Typography và type scale cần dùng.
3. Spacing, max-width, radius, border và shadow.
4. Những lựa chọn mặc định của AI cần tránh theo phần Don’t.

Sau đó hãy xây màn hình [tên màn hình].
Giữ nguyên business logic, route, API, state, dữ liệu và các chức năng đang chạy.
Không thêm card, gradient, icon, màu accent hoặc animation nếu DESIGN.md không
ủng hộ chúng. Ưu tiên một hierarchy rõ ràng và một focal point chính cho mỗi
viewport.

Cuối cùng, kiểm tra responsive ở mobile và desktop, rồi báo cáo những token và
component đã áp dụng từ DESIGN.md.

Điểm quan trọng nhất trong prompt là tách hai phần:

• DESIGN.md quyết định ngôn ngữ thị giác.
• Brief của bạn quyết định sản phẩm, nội dung, người dùng, hành động và giới hạn kỹ thuật.

Đừng giao toàn bộ quyết định cho file tham chiếu. Một style đẹp nhưng không phù hợp với sản phẩm vẫn có thể tạo ra UX tệ.

Website cũ trông nhạt? Dùng DESIGN.md để đại tu lại website

Bạn không nhất thiết phải xây mới từ đầu. Nếu website đang chạy nhưng nhìn generic, hãy đưa file tham chiếu vào project rồi dùng prompt hẹp hơn:

Đọc DESIGN.md trước khi đề xuất thay đổi.

Hãy audit UI hiện tại theo 5 nhóm: typography, màu sắc, spacing, component weight
và visual hierarchy. Chỉ ra những điểm đang lệch khỏi DESIGN.md.

Sau đó đề xuất một pass cải thiện có phạm vi hẹp:
– Giữ nguyên route, API, state, dữ liệu, business logic và các chức năng đang chạy.
– Không dựng lại toàn bộ ứng dụng nếu không cần.
– Ưu tiên sửa những điểm tạo cảm giác generic nhất.
– Chỉ thêm hoặc thay đổi token/component có lý do rõ ràng.
– Kiểm tra ở 390px và desktop sau khi chỉnh.

Trước khi sửa code, hãy liệt kê file sẽ thay đổi và lý do.

Cách này đặc biệt hữu ích khi bạn đã có một sản phẩm thật và chỉ muốn làm typography, khoảng cách, hierarchy hoặc trọng lượng component nhất quán hơn.

Đừng tin bản demo ngay: checklist trước khi chốt

Một file DESIGN.md giúp AI bắt đầu tốt hơn, nhưng không thay thế việc kiểm tra output. Hãy xem lại:

• AI có thực sự đọc file không, hay chỉ tạo lại template quen thuộc?
• Màu accent có bị dùng ở mọi nút và mọi icon không?
• Có gradient, shadow, pill hoặc card nào xuất hiện mà file đã cấm không?
• Heading, body text và line-height có đúng tinh thần không?
• Một viewport có quá nhiều card hoặc quá nhiều focal point không?
• Giao diện có đọc được ở mobile 390px và desktop không?
• Contrast, focus state, keyboard navigation và reduced motion có ổn không?
• Business logic, route, API, state và dữ liệu có bị thay đổi ngoài phạm vi không?
• Hình ảnh, logo và nội dung có phải là tài sản của sản phẩm bạn không?

Kết luận

AI rất giỏi biến yêu cầu thành code, nhưng “đẹp” không phải là một specification đủ chặt. Khi bạn đưa thêm một hệ thống màu, type scale, spacing, component và Do/Don’t, agent sẽ có ít khoảng trống hơn để rơi về những mẫu giao diện đại trà.

Nếu muốn thử ngay, bạn chỉ cần đi theo sáu bước này:

1. Mở styles.refero.design.
2. Tìm một style gần với loại sản phẩm và màn hình bạn đang xây.
3. Mở trang chi tiết, đọc phần Guidelines và chọn Compact hoặc Extended.
4. Copy hoặc tải DESIGN.md về project.
5. Đưa cho AI cùng một brief sản phẩm cụ thể.
6. Kiểm tra output trên mobile, desktop và các trạng thái thật.

Điều bạn nên lấy không phải là website của Linear, Notion, ElevenLabs hay Lamborghini. Hãy lấy cách họ ra quyết định: dùng màu nào, đặt chữ ở đâu, tạo nhịp khoảng cách ra sao và điều gì tuyệt đối không nên thêm vào.