Hallmark: Skill giúp AI hết làm giao diện na ná nhau

Mở đầu: nhìn một phát biết ngay “hàng AI”

Bạn đã từng thấy kiểu trang này chưa: hero nền gradient tím, tiêu đề có một từ tô màu khác, phía dưới là ba thẻ tính năng giống hệt nhau, cuối trang là form đăng ký email mà bấm “Gửi” xong chỉ hiện lời cảm ơn chứ không gửi đi đâu cả. Nhìn thì sạch sẽ, nhưng mười trang như một.

Theo README chính thức của Hallmark, đó chính là những “dấu vết” khiến một trang web trông như do máy làm ra: dòng nhãn nhỏ nằm trên mọi tiêu đề, chữ in hoa giãn cách, một từ tô màu trong tiêu đề, hero lệch khỏi màn hình, form đăng ký ở cuối mọi trang, và form cảm ơn nhưng không gửi gì cả. Vấn đề không phải AI viết code dở. Vấn đề là AI luôn trượt về cùng một khuôn mẫu mặc định, vì đó là thứ nó đã thấy nhiều nhất.

Hallmark ra đời để chặn đúng chỗ đó. Theo mình, đây là skill đáng cài nhất cho những ai đang dùng AI coding agent để làm giao diện, vì nó không bắt bạn viết prompt dài hơn, mà bắt agent tuân theo một bộ luật thiết kế rõ ràng trước khi giao sản phẩm.

Hallmark là gì?

Theo README chính thức, Hallmark là một design skill cho Claude Code, Codex, Cursor và OpenCode, với triết lý gói gọn trong một câu: một skill thiết kế “từ chối trông như do AI tạo ra”. Dự án do Together AI phát triển, phát hành theo giấy phép MIT, và đang nằm trên GitHub Trending trong những ngày cuối tháng 10/2026.

Tính đến lúc mình kiểm tra qua GitHub API, repo đã có hơn 36.000 sao và lần cập nhật gần nhất là ngày 22/10/2026. Con số này sẽ còn thay đổi, nhưng nó cho thấy skill này không phải một repo thử nghiệm ít người dùng, mà đang được cộng đồng agent dùng thật.

Điểm khác biệt đầu tiên cần nói rõ: Hallmark không phải thư viện component, cũng không phải công cụ sinh website. Bạn không nhận về một bộ nút bấm hay một template có sẵn để lắp vào. Bạn nhận về một bộ kỷ luật thiết kế mà agent của bạn phải tuân theo mỗi khi làm giao diện.

Vì sao giao diện AI cứ na ná nhau?

Trước khi nói về cách Hallmark sửa lỗi, cần hiểu vì sao lỗi này lặp lại. Khi bạn bảo agent “làm một landing page đẹp”, nó không có khái niệm “đẹp” của riêng bạn. Nó chọn phương án an toàn nhất trong dữ liệu nó từng thấy: hero ở giữa, ba thẻ tính năng, nút bo tròn, gradient tím. Đổi màu sang xanh hay cam cũng không cứu được, vì khung xương vẫn y nguyên. Như nhiều bài phân tích về AI-slop đã chỉ ra, mắt người nhận ra công thức qua cấu trúc, không phải qua màu sắc.

Hallmark tấn công đúng vào cấu trúc. Theo tài liệu của dự án, mỗi theme của Hallmark là một “chất liệu” gồm giấy, kiểu chữ, màu sắc, bề mặt và component riêng, nhưng theme không bao giờ quy định trang chứa gì và sắp xếp theo thứ tự nào. Nhờ vậy, hai prompt khác nhau dùng cùng một theme vẫn cho ra hai trang khác nhau, chứ không phải hai bản đổi màu của cùng một template.

Hallmark hoạt động ra sao?

Quy trình làm trang của Hallmark, theo README chính thức, gồm bốn bước chính.

1. Đọc dự án trước, hỏi một lần duy nhất. Trước khi vẽ, Hallmark đọc font, palette, framework của dự án và hỏi một lần về chất liệu thật: ảnh, screenshot, con số thật. Nguyên tắc được ghi rõ trong tài liệu là “không gì được bịa ra”. Trang không có số liệu thật thì đừng tự chế số liệu cho đẹp.

2. Chia ba theme phù hợp, rồi vẽ khung xương theo “việc cần làm”. Công cụ theme.mjs deal gợi ý ba theme phù hợp với prompt và chưa trùng với những lần chạy trước trong cùng dự án. Sau đó, trang được dựng xoay quanh việc mà khách truy cập đến để làm: trang đặt lịch thì phải đặt được lịch, trang bán hàng thì phải bán được hàng, trang đăng ký nhận tin thì phải đăng ký được thật. Hành động chính nằm đúng chỗ mà thể loại trang đó thường đặt, và trang kết thúc ở hành động đó, chứ không kết thúc bằng một form đăng ký email vô thưởng vô phạt.

3. Vẽ hero riêng, duyệt lạnh rồi mới làm phần còn lại. Hero được dựng độc lập, render và xem xét với “con mắt lạnh” trước khi phần còn lại của trang tồn tại. Cách này tránh tình trạng làm xong cả trang mới phát hiện hero lệch, rồi phải sửa dây chuyền.

4. Kiểm tra trong trình duyệt thật, ở tám chiều rộng màn hình. Lệnh sloplint --render kiểm tra trang ở tám kích thước khác nhau, sau đó một subagent với ngữ cảnh mới sẽ xem lại toàn bộ trang một lần nữa trước khi bàn giao. Mỗi trang thành phẩm là HTML và CSS tự chứa, và quyết định thiết kế được đóng dấu ngay trong comment CSS đầu tiên của file.

Ba tầng kiểm tra

• Floor (sàn): những lỗi không bao giờ được xuất xưởng — tương phản kém, thiếu trạng thái focus, không tôn trọng chế độ giảm chuyển động, bịa dữ kiện, giao diện mobile vỡ. Vi phạm tầng này thì không có chuyện “cứ ship đã”.
• Reflex (phản xạ): những mặc định mà model hay trượt vào — chính là các dấu vết AI-slop kể trên. Một bản dựng có lý do chính đáng vẫn có thể vượt qua một cổng Reflex, nhưng lý do phải được ghi lại rõ ràng.
• Finish (hoàn thiện): những chi tiết thủ công, tinh tế. Tầng này không bao giờ chặn việc phát hành, chỉ giúp trang trông “có tay nghề” hơn.

Cách phân tầng này thực tế hơn kiểu “cấm tuyệt đối mọi thứ” hay “gợi ý chung chung”.

Ảnh thật, có ghi nguồn

Một chi tiết đáng chú ý trong phiên bản v2: Hallmark kèm theo 755 bức ảnh có giấy phép mở, được chọn theo từng chủ đề và ghi nguồn công khai ngay trên trang. Theo README chính thức, kho ảnh này lấy từ Wikimedia Commons, mỗi ảnh giữ giấy phép riêng của nó, và dự án không dùng ảnh từ các trang stock mà điều khoản cấm công cụ AI chọn ảnh.

Cài đặt Hallmark trong 5 phút

Điều kiện duy nhất theo README chính thức là Node 18 trở lên. Nếu bạn đã có Node, toàn bộ việc cài đặt chỉ là một lệnh:

npx skills add nutlope/hallmark -g

Cờ -g cài skill cho mọi dự án. Bỏ cờ này đi nếu bạn chỉ muốn cài cho dự án hiện tại. Muốn cài cho đúng một công cụ, thêm cờ --agent, ví dụ:

npx skills add nutlope/hallmark -g --agent claude-code

Các giá trị --agent được tài liệu liệt kê gồm claude-code, codex, opencode, cursor và github-copilot. Sau khi cài, skill sẽ nằm ở vị trí mà từng công cụ tự tìm thấy:

Lưu ý một điểm quan trọng theo README chính thức: các bước kiểm tra trong trình duyệt thật (như sloplint --render hay chụp screenshot) cần thêm puppeteer-core và trình duyệt Chrome:

npm i -g puppeteer-core

Không có Chrome, các bước kiểm tra tĩnh vẫn chạy bình thường, nhưng bạn sẽ mất đi lớp kiểm tra “nhìn bằng mắt thật” — mà theo mình đó lại là lớp giá trị nhất của Hallmark. Vì vậy nếu máy bạn chưa có Chrome, hãy cài thêm trước khi đánh giá skill này.

Ngoài cách cài bằng npx, Hallmark còn hỗ trợ cài dưới dạng plugin của Claude Code:

/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

Sau đó skill được gọi dưới dạng /hallmark:hallmark. Nếu bạn thích quản lý file thủ công, tài liệu cũng hướng dẫn clone repo rồi chạy node skills/hallmark/scripts/install.mjs, lệnh này sẽ kiểm tra toàn bộ theme và tài liệu tham khảo trước khi sao chép. Muốn kiểm tra một trang bất kỳ mà không cần chạy cả quy trình dựng trang, dùng trực tiếp:

node skills/hallmark/scripts/sloplint.mjs <file-hoac-thu-muc> --render

Nếu agent không tự kích hoạt skill, bạn chỉ cần nói rõ trong prompt, ví dụ: “dùng hallmark để dựng trang này”. Theo mình, câu này nên nằm trong prompt đầu tiên của mỗi lần làm giao diện, thay vì đợi agent tự đoán.

Dùng Hallmark như thế nào?

Dựng trang mới

Chỉ cần mô tả trang bạn muốn, kèm theo chất liệu thật nếu có:

/hallmark dựng landing page cho quán cà phê rang xay tại Hà Nội,
nhấn mạnh đặt bàn trực tuyến, dùng ảnh thật của quán

Agent sẽ tự chọn theme, dựng hero, kiểm tra và bàn giao. Bạn không cần chỉ định theme, trừ khi đã xem trước 48 theme trên usehallmark.com và ưng một theme cụ thể.

Thiết kế lại trang cũ mà không mất nội dung

Đây là tính năng mà theo mình nhiều đội sẽ dùng nhiều nhất. Thay vì đập đi làm lại, Hallmark có lệnh redesign giữ nguyên nội dung và logic:

/hallmark redesign ./src/app
/hallmark redesign ./index.html

Theo README chính thức, một lần redesign đầy đủ sẽ giữ lại nội dung và đường dây chức năng, chỉ thay hệ thống thiết kế và bố cục. Trước khi làm, sloplint --before ghi lại toàn bộ link, field, handler và tiêu đề; sau khi làm, sloplint --kept sẽ báo lỗi nếu bất kỳ thứ nào trong số đó biến mất. Bản bàn giao là ảnh so sánh trước và sau đặt cạnh nhau. Muốn giữ nguyên bố cục mà chỉ đổi phong cách, bạn nói thêm “giữ nguyên bố cục”. Muốn sửa nhẹ, nói “chỉ sửa các dấu vết AI-slop”.

Kiểm tra trang cũ mà không sửa gì

Nếu bạn chưa muốn đụng vào code, chỉ muốn biết trang hiện tại “AI-slop” đến mức nào, dùng lệnh audit:

/hallmark audit ./index.html

Lệnh này chỉ báo cáo, không sửa file. Theo mình, đây là cách thử Hallmark ít rủi ro nhất: chạy audit lên trang chủ hiện tại của bạn, đọc danh sách lỗi, rồi mới quyết định có redesign hay không.

Ưu điểm và hạn chế, nói thẳng

Ưu điểm:

• Miễn phí, giấy phép MIT, dùng được ngay. Không cần tài khoản, không cần đổi công cụ đang dùng. Một lệnh cài là agent nào cũng hiểu.
• Kiểm tra trong trình duyệt thật, không chỉ đọc code. Nhiều lỗi giao diện chỉ lộ ra khi render ở chiều rộng khác nhau, và Hallmark bắt đúng chỗ này.
• Phân tầng kiểm tra hợp lý. Lỗi ảnh hưởng người dùng thì cấm tuyệt đối, lỗi phong cách thì cho phép vượt qua có lý do. Agent không bị khóa cứng vào một gu thẩm mỹ duy nhất.
• Audit không sửa, redesign không mất nội dung. Hai tính năng này giúp bạn thử nghiệm an toàn trên dự án đang chạy, thay vì phải đánh cược cả trang web.
• Tôn trọng dữ kiện và bản quyền ảnh. Không bịa số liệu, ảnh có giấy phép mở và ghi nguồn rõ ràng.

Hạn chế, theo mình bạn cần biết trước:

• Cần Chrome mới kiểm tra đủ. Nếu môi trường của bạn không có Chrome, bạn chỉ dùng được một nửa sức mạnh của skill.
• Đầu ra là HTML/CSS tự chứa. Với dự án React, Vue hay framework khác, bạn vẫn cần một bước chuyển đổi và tích hợp thủ công. Hallmark giúp bạn có bản thiết kế đúng, chứ chưa thay bạn viết component cho framework đó.
• Theme đẹp nhưng vẫn cần gu của bạn. Skill ngăn trang trông “máy móc”, nhưng nó không thay được việc bạn quyết định trang của mình nên nói gì, nhấn mạnh điều gì. Prompt mô tả càng rõ việc cần làm và đối tượng phục vụ, kết quả càng khác biệt.
• Chưa thay được designer cho sản phẩm lớn. Với hệ thống thiết kế có sẵn, có brand guideline chặt chẽ, Hallmark phù hợp hơn ở vai trò kiểm tra và làm mới, chứ không phải nguồn chân lý duy nhất.

Hallmark so với các cách làm khác

Theo mình, Hallmark không đối đầu với designer hay thư viện component. Nó lấp đúng khoảng trống ở giữa: những trang mà trước đây bạn đành chấp nhận “trông cũng được” vì không đủ thời gian thuê thiết kế, giờ có một lớp kiểm tra chất lượng tối thiểu trước khi xuất xưởng.

Kết luận

AI-slop không phải lỗi thẩm mỹ vặt. Nó là dấu hiệu cho thấy một trang web được sinh ra mà không có quyết định thiết kế nào cả: không ai chọn cấu trúc, không ai chịu trách nhiệm về nội dung, không ai kiểm tra ở màn hình điện thoại. Hallmark giải quyết đúng ba chỗ đó bằng luật rõ ràng, kiểm tra trong trình duyệt thật và người xem xét với ngữ cảnh mới trước khi bàn giao.

Theo mình, cách thử nhanh nhất là chạy một lệnh audit lên trang bạn đang có, rồi đọc danh sách lỗi với con mắt tỉnh táo. Nếu danh sách đó khiến bạn gật gù vì toàn lỗi mình từng thấy mà không gọi tên được, thì Hallmark chính là công cụ bạn đang thiếu. Cài đặt chỉ mất năm phút, giấy phép MIT, và lần tới khi nhờ agent làm giao diện, bạn sẽ không còn nhận về một bản sao gradient tím nữa.

Bài viết liên quan trên phamnam.me: nếu bạn quan tâm đến các skill cho AI agent nói chung, có thể đọc thêm bài về skill kiểm tra bảo mật của Cloudflare cho AI agent — một skill khác cũng dùng triết lý “agent kiểm tra agent”, nhưng cho mảng bảo mật thay vì thiết kế.

Link repo gốc: https://github.com/Nutlope/hallmark — giấy phép MIT, do Together AI phát triển.