Hallmark - Biến UI do AI sinh ra thành thiết kế "có gu" trong Claude Code, Cursor, Codex

Tóm tắt nhanh:

Hallmark là một design skill dành cho Claude Code, Cursor và Codex, được thiết kế để chống lại UI “slop” – những giao diện trông giống hệt nhau do AI sinh ra.

Thay vì là một component library hay UI kit, Hallmark hoạt động như một lớp hướng dẫn (instruction layer) với nhiều theme, macrostructure và hàng chục tiêu chí kiểm tra chất lượng trước khi để AI xuất code.

Cài đặt Hallmark chỉ cần một lệnh npx skills add nutlope/hallmark hoặc copy SKILL.md vào thư mục cấu hình; sau đó bạn có thể dùng các verb build, audit, redesign, study để nâng chất lượng UI do AI tạo ra ngay trong IDE.

Nếu bạn đã từng để Claude Code hay Cursor sinh ra giao diện web, chắc hẳn sẽ thấy một pattern quen thuộc: layout na ná, màu pastel, card bo tròn, hero section với 2 cột và CTA trông giống hàng ngàn site khác. Đó chính là “AI slop” – giao diện thống kê trung bình mà model có xu hướng chọn vì an toàn.

Hallmark được tạo ra để chống lại điều này. Đây không phải là một bộ UI component, mà là một “design skill” – về bản chất là một bộ quy tắc và reference được inject vào AI coding assistant. Hallmark chọn macrostructure, gán theme, chạy một loạt slop-test gate và tự phản biện trước khi cho phép AI in ra kết quả cuối cùng, nhằm đảm bảo mỗi brief ra một UI khác, có tính cách và ngữ cảnh riêng.

Cách Hallmark hoạt động bên dưới

Thay vì can thiệp model hoặc fine-tune, Hallmark hoạt động ở tầng chỉ dẫn (skill layer). Nó làm việc với AI coding assistant qua vài ý tưởng chính:

Macrostructure: chọn khung xương cho trang (ví dụ single-column, split layout, gallery, timeline…) để tránh lặp lại cùng một skeleton.
Themes: gán cho mỗi brief một theme khác nhau (monospace dev tool, editorial, brutalist, dark studio…) thay vì đổi mỗi màu sắc.
Slop-test gates: chạy qua hàng chục gate kiểm tra về hierarchy, contrast, spacing, copywriting tone, v.v… Nếu UI vi phạm, Hallmark yêu cầu AI render lại.
Self-critique: trước khi “emit”, Hallmark buộc AI tự đánh giá thiết kế theo một số trục (philosophy, hierarchy, execution, variety…) để giảm nguy cơ “auto-pilot”.

Kết quả: hai trang được tạo từ Hallmark cho hai brief khác nhau trông như hai sản phẩm riêng biệt, không phải bản “colour-swap” của cùng một template.

Cài đặt Hallmark bằng ‘npx skills’

Cách cài đặt đơn giản nhất là dùng npx skills, áp dụng cho đa số môi trường hỗ trợ Claude Code, Cursor hoặc Codex:

npx skills add nutlope/hallmark

Lệnh này sẽ:

Tải SKILL.md cùng thư mục references/.
Đăng ký Hallmark như một skill có thể dùng chung cho các AI coding assistant tương thích.
Cho phép bạn dùng các verb đặc biệt của Hallmark trong prompt (build, audit, redesign, study…).

Khi cần cập nhật phiên bản mới, bạn chỉ việc chạy lại đúng lệnh trên; skills sẽ kéo về bản mới nhất của repo.

Cài đặt thủ công vằng SKILL.md

Nếu không dùng npx skills, bạn có thể cài Hallmark theo cách “thủ công” bằng cách copy file cấu hình skill vào đúng vị trí mà IDE mong đợi:

Claude Code
Copy toàn bộ SKILL.md và thư mục references/ từ repo Hallmark vào:
~/.claude/skills/hallmark/
Cursor
Mở repo Hallmark trên GitHub, copy phần body của SKILL.md (bỏ frontmatter).
Dán vào file:
.cursor/rules/hallmark.mdc
Cursor sẽ đọc rule này như một “rule file” bổ sung cho workspace.
Codex
Personal scope: ~/.codex/skills/hallmark/
Project scope: .codex/skills/hallmark/ trong folder project, để skill chỉ áp dụng cho repo đó.

Cách thủ công phù hợp nếu bạn muốn commit skill vào repo, chia sẻ cho cả team hoặc review diff mỗi khi cập nhật.

Cách gọi Hallmark trong Claude Code

Sau khi cài Hallmark, bạn không cần “import” gì thêm; thay vào đó, bạn sử dụng ngôn ngữ mà skill định nghĩa – chủ yếu xoay quanh các verb sau:

build: để Hallmark thiết kế UI mới từ một brief.
audit: review UI hiện tại và chỉ ra vấn đề về hierarchy, spacing, contrast, copy…
redesign: giữ nội dung nhưng thay đổi kiến trúc và phong cách.
study: phân tích một UI sẵn có, rút ra “DNA” để dùng làm reference.

Ví dụ prompt trong Claude Code:

Hallmark, build a single-page marketing site for a privacy-first note-taking app.

Constraints:
- FE stack: Next.js + Tailwind CSS
- Audience: indie hackers, developers
- Tone: opinionated, minimal, not “SaaS pastel”
- Include sections for hero, features, pricing, FAQ, and a closing CTA.

Then emit the full page as a Next.js page component.

Claude Code, với Hallmark, sẽ không chỉ tạo một layout “mặc định” mà cố gắng chọn macrostructure, theme và chạy self-critique trước khi xuất code JSX/Tailwind.

Sử dụng Hallmark trong Cursor

Trong Cursor, Hallmark được dùng qua rule file .cursor/rules/hallmark.mdc. Sau khi cấu hình, bạn có thể:

Đặt “Hallmark” trong prompt như một persona.
Gợi ý rõ verb muốn dùng, ví dụ: “Use Hallmark to audit this layout” hoặc “Use Hallmark to redesign the UI”.
Đưa kèm code sẵn có để skill có ngữ cảnh.

Ví dụ prompt trong Cursor:

Use Hallmark to audit the following React + Tailwind landing page.

Goals:
- Make it feel like a serious infra tool, not a generic SaaS template.
- Increase visual hierarchy between hero, feature callouts, and social proof.
- Avoid card grids that look like Bootstrap defaults.

Please:
1. Explain the main issues you see.
2. Propose a new structure and theme in prose.
3. Output the updated JSX + Tailwind code.

Hallmark sẽ đóng vai trò reviewer, sau đó đề xuất chỉnh sửa và cuối cùng là phát ra code mới với cấu trúc rõ ràng hơn.

Case study nhanh: Từ “AI slop” thành landing page có gu

Giả sử bạn đang build một landing page cho SaaS log observability nội bộ. Bản đầu tiên do AI sinh ra có layout rất “an toàn”: hero hai cột, màu tím nhạt, grid 3 card, CTA “Get started”. Khi đưa qua Hallmark với verb redesign, bạn có thể yêu cầu:

Hallmark, redesign this page.

Context:
- Product is a log observability tool for teams that care about latency and costs.
- Target audience: staff+ engineers and SREs.
- Mood: quiet, dark, ultra-technical, no cute illustrations.

Keep:
- Copy content and sections.
Change:
- Layout, theme, typography, and how we present pricing.

Emit the full updated page.

Hallmark sẽ cố tránh pattern phổ biến, ví dụ: chuyển sang layout single-column với focus vào terminal screenshot, dùng typography mang hơi hướng editor, palette tối, nhấn mạnh con số và biểu đồ thay vì illustration hoạt hoạ.

Kết hợp Hallmark với quy trình thiết kế và dev hiện có

Hallmark không thay thế designer hoặc frontend dev, mà:

Giảm thời gian từ brief → bản draft UI có thể review.
Giúp AI coding assistant sinh ra output “ít xấu hơn” ngay từ đầu, giảm số vòng refactor.
Tạo một ngôn ngữ chung giữa designer và dev (macrostructure, theme, gate…) khi review.

Một workflow gợi ý:

Designer viết brief, guideline và moodboard ở mức khái quát.
Dev dùng Hallmark với verb build để tạo 2-3 variation UI từ cùng brief.
Cả team review, chọn một hướng gần đúng.
Dùng verb redesign + chỉnh tay để refine.
Thi thoảng dùng audit để kiểm tra regression khi refactor hoặc thêm tính năng.

Mẹo tối ưu khi dùng Hallmark cho AI UI

Để tận dụng tối đa Hallmark, bạn có thể áp dụng một vài tips:

Mô tả rõ tệp người dùng (ai dùng sản phẩm, bối cảnh, tone): brief càng rõ, skill càng có dữ liệu để chọn macrostructure phù hợp.
Nói thẳng điều bạn không muốn: “no pastel SaaS gradients”, “avoid boring 3-column feature grids”, “don’t use hero illustration clichés”.
Gắn chặt stack frontend: nêu rõ bạn dùng Next.js/React, Tailwind, shadcn/ui… để Hallmark emit code đúng stack.
Lặp lại với verb khác: nếu kết quả build chưa ưng, thử chuyển sang redesign hoặc study một site reference rồi yêu cầu “apply this DNA”.
Kết hợp với linting/preview: sau khi Hallmark tạo code, chạy thêm lint, formatter và preview để rà lại responsive, trạng thái edge-case.

Trong bối cảnh AI coding assistant đang trở thành “đồng dev” ở nhiều team, câu hỏi không còn là “AI có viết được code UI không?” mà là “UI đó có đáng để ship không?”. Hallmark đưa ra một câu trả lời khá thực tế: thêm một lớp skill chuyên về thiết kế, áp đặt tiêu chuẩn và buộc AI rời xa vùng mẫu số chung.

Nếu bạn đang dùng Claude Code, Cursor hay Codex cho front-end, đặc biệt là các landing page, dashboard admin, tool nội bộ… việc thử Hallmark chỉ tốn vài phút cài đặt, nhưng có thể giúp code UI bước qua được một ngưỡng quan trọng: từ “trông giống mọi site khác” sang “ít nhất trông có chủ đích và có gu hơn hẳn”.