Hallmark: skill thiết kế để web do AI dựng không còn “nhìn là biết AI làm”
Tóm tắt
Hallmark (Nutlope/hallmark, MIT) là design skill cho Claude Code, Cursor và Codex. Nó chọn cấu trúc trang và theme có chủ đích, áp các mẫu component đa dạng, rồi chạy bài kiểm tra 65 tiêu chí (typography, tương phản, focus ring, copy trung thực…) trước khi bàn giao giao diện.
Bạn có thể nhận ra giao diện do AI dựng ngay từ cái nhìn đầu tiên: gradient tím–xanh, hàng card bo tròn giống hệt nhau, tiêu đề chung chung kiểu “Unlock the power of…”. Hallmark (Nutlope/hallmark, giấy phép MIT) là design skill cho Claude Code, Cursor và Codex nhắm vào đúng vấn đề này. Nó chọn cấu trúc trang và theme có chủ đích, áp các mẫu component đa dạng, rồi chạy bài kiểm tra 65 tiêu chí trước khi bàn giao giao diện.
Bốn chế độ
| Chế độ | Làm gì |
|---|---|
| Build (mặc định) | Dựng UI mới từ brief, chọn cấu trúc + theme, kiểm tra trước khi giao |
| Audit | Chấm điểm code có sẵn, trả danh sách việc cần sửa, không chỉnh code |
| Redesign | Giữ nội dung và cấu trúc thông tin, làm lại phần hình ảnh |
| Study | Phân tích ảnh chụp hoặc URL, xuất design.md cho công cụ khác |
Điều gì chống “AI slop”?
- Đa dạng có chủ đích: nhiều cấu trúc trang và theme theo nhóm phong cách, để các lần dựng liên tiếp không giống nhau.
- Có trí nhớ: ghi dự án vào
.hallmark/log.jsonđể lần sau đổi theme/cấu trúc. - Bài “slop test” 65 điểm: typography, tương phản, focus ring, copy trung thực… chỉ cần trượt một tiêu chí là chưa được giao.
- Từ chối brief mơ hồ và copy chung chung — buộc người dùng đưa ra thông tin thật.
Cài đặt
npx skills add nutlope/hallmarkQuy trình thử nghiệm gợi ý
- Chạy Audit trên landing page hiện có để biết nó đang “AI” ở đâu.
- Sửa các lỗi nổi bật nhất (thường là typography, tương phản và copy).
- Với trang mới, viết brief cụ thể: đối tượng, mục tiêu, giọng điệu, 3 thông điệp chính.
- Chạy Build, rồi kiểm tra thủ công accessibility và hiệu năng.
Giới hạn cần biết
- Skill giúp tránh lỗi phổ biến, nhưng nhận diện thương hiệu vẫn cần bạn định nghĩa (màu, logo, giọng nói).
- Bài kiểm tra tự động không thay thế người dùng thật hay kiểm thử khả năng truy cập.
- Kết quả vẫn phụ thuộc chất lượng brief: brief tệ cho giao diện tệ.
Áp dụng thế nào?
- Dev/Frontend: dùng Audit như một checklist review trước khi gửi PR giao diện.
- Tech Lead: kết hợp với design system của team; skill lo phần chống lỗi chung, design system lo nhất quán thương hiệu.
- PM: yêu cầu brief rõ ràng ngay từ đầu — đó cũng là đầu vào tốt nhất cho cả designer lẫn AI.