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 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/URL, xuất design.md cho công cụ khác |
Điều gì chống “AI slop”?
- 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.
- Ghi nhớ dự án trong
.hallmark/log.jsonđể lần sau đổi theme/cấu trúc. - Bài “slop test”: chỉ cần trượt một tiêu chí là không được giao.
- Từ chối brief mơ hồ và copy chung chung.
Cài đặt
npx skills add nutlope/hallmarkÁp dụng thế nào?
- Dùng Audit trước trên landing page hiện có để biết đang “AI” ở đâu.
- Kết hợp với design system của team: 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.
- Vẫn kiểm tra accessibility và hiệu năng thực tế sau khi build.
Tham khảo: Giới thiệu Hallmark (mer.vin)