Hallmark: skill giúp agent code bớt tạo UI rập khuôn

Hallmark là design skill do Together AI thực hiện, dành cho Claude Code, Codex, Cursor và OpenCode. Công cụ đặt các gate về khả năng truy cập, dữ liệu thật và lỗi giao diện; đồng thời hỗ trợ audit hoặc redesign trang.

Bạn bảo coding agent “làm landing page đẹp”, rồi nhận lại hero chữ lớn, một từ tô màu, nhãn viết HOA giãn chữ, vài khung ảnh trống và form đăng ký đặt ở cuối trang. Code vẫn chạy, nhưng giao diện trông như được lắp từ một khuôn quen thuộc.

Hallmark là design skill do Together AI thực hiện cho Claude Code, Codex, Cursor và OpenCode. Mục tiêu của dự án là giúp agent tránh các dấu hiệu khiến UI có cảm giác được AI tạo hàng loạt, đồng thời đặt các kiểm tra về khả năng truy cập, dữ liệu và trải nghiệm trên thiết bị di động.

Với dev, founder hoặc người đang dùng agent để làm prototype và giao diện sản phẩm, đây là một lớp review đáng thử trước khi gửi bản demo.

Hallmark khác gì với prompt “thiết kế đẹp”?

Ý tưởng cốt lõi của Hallmark là giao diện phải phục vụ việc người truy cập cần hoàn thành.

Theo README, trang đặt lịch phải giúp người dùng đặt lịch; trang bán hàng phải giúp bán hàng; trang newsletter phải dẫn đến hành động đăng ký. Hành động chính cần được đặt theo ngữ cảnh của loại trang, thay vì lặp lại cùng một chuỗi section cho mọi website.

Hallmark cung cấp các theme được mô tả như “material”: mỗi theme có typography, màu sắc, bề mặt, texture và component riêng. Tuy nhiên, theme không định sẵn trang phải có nội dung gì hoặc các phần phải xuất hiện theo thứ tự nào. Vì vậy, hai brief khác nhau vẫn có thể tạo ra hai bố cục khác nhau dù dùng cùng một theme.

Công cụ chia kiểm tra thành ba tầng:

Floor: điều kiện không được bỏ qua, gồm tương phản màu, focus khi dùng bàn phím, reduced motion, không bịa dữ kiện và giao diện không vỡ trên điện thoại. Reflex: các thói quen mặc định mà model dễ lặp lại. Có thể vượt qua nếu có lý do được ghi nhận. Finish: chi tiết hoàn thiện, không chặn việc bàn giao.

README nêu những dấu hiệu Hallmark cố phát hiện, như eyebrow xuất hiện trên mọi tiêu đề, nhãn chữ HOA giãn ký tự, headline chỉ tô màu một từ, trang đầy khung trống hoặc chỉ toàn ảnh, hero không phù hợp với khung nhìn, form email vô nghĩa, hay form báo cảm ơn nhưng không thực sự gửi dữ liệu.

Cài vào workflow agent

Hallmark yêu cầu Node.js 18 trở lên. Để cài cho mọi project:

bash npx skills add nutlope/hallmark -g

Bỏ -g nếu chỉ muốn cài trong project hiện tại.

Nếu chỉ dùng với một harness, README đưa ví dụ:

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

Bạn có thể thay claude-code bằng codex, opencode, cursor hoặc github-copilot.

Sau khi cài, skill được đặt tại các vị trí sau:

| Harness | Vị trí cài đặt | Cách gọi | | --- | --- | --- | | Claude Code | ~/.claude/skills/hallmark | /hallmark <prompt> | | Codex CLI | ~/.agents/skills/hallmark | $hallmark <prompt> | | Cursor | Tự tìm các bản cài ở trên | /hallmark <prompt> | | OpenCode | Tự tìm các bản cài ở trên | /hallmark <prompt> |

Nếu lệnh gọi không hoạt động trong Cursor hoặc OpenCode, hãy kiểm tra trước hai thư mục cài đặt nêu trên. README cũng gợi ý gọi thẳng trong yêu cầu, chẳng hạn: “use hallmark to build …”.

Để render và kiểm tra giao diện bằng trình duyệt, bạn cần Puppeteer Core và Chrome:

bash npm i -g puppeteer-core

Không có Chrome hoặc Puppeteer Core, các kiểm tra tĩnh vẫn chạy; phần render và chụp ảnh sẽ không hoạt động.

Audit trang trước khi gửi demo

Giả sử bạn có landing page tại ./index.html. Chế độ audit được gọi như sau:

bash /hallmark audit ./index.html

Theo README, audit chỉ báo cáo vấn đề, không tự viết lại giao diện. Đây là lựa chọn phù hợp khi bạn muốn giữ code hiện tại và cần thêm một vòng kiểm tra trước khi chỉnh sửa.

Trong quy trình build được mô tả, sloplint có thể render trang ở tám kích thước. Sau đó, một subagent với ngữ cảnh mới sẽ review kết quả.

Bạn cũng có thể chạy lint trực tiếp từ terminal:

bash node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render

README không công bố một định dạng report cố định. Vì vậy, bạn vẫn nên tự mở bản render để đánh giá các câu hỏi mang tính sản phẩm như hierarchy của hero, độ rõ của CTA hay mức độ phù hợp với thương hiệu. Đây là các tiêu chí review hữu ích, nhưng không nên nhầm chúng với những gate được README mô tả trực tiếp.

Khi nào nên dùng redesign?

Nếu muốn làm lại hệ thống thiết kế và bố cục, hãy dùng:

bash /hallmark redesign ./src/app

Hallmark mô tả rằng redesign sẽ giữ lại content và wiring, đồng thời thay đổi hệ thống thiết kế và layout. Trước khi làm lại, sloplint --before ghi nhận link, field, handler và heading; sau đó sloplint --kept sẽ báo lỗi nếu một trong các phần này bị mất.

Điều này đặc biệt đáng lưu ý với trang có form, liên kết hoặc luồng tương tác mà bạn không muốn agent vô tình làm đứt khi chỉnh giao diện.

Bạn có thể kiểm soát mức độ thay đổi bằng yêu cầu tự nhiên:

text /hallmark redesign ./src/app

Giữ layout hiện tại. Chỉ restyle để tăng hierarchy, cải thiện typography và bỏ các chi tiết trông như template AI. Giữ nguyên mọi form, link và handler.

README cũng nêu từ khóa “polish” cho trường hợp chỉ muốn xử lý các dấu hiệu khiến UI trông máy móc, thay vì làm lại toàn bộ trang.

Brief có dữ liệu thật sẽ hữu ích hơn

Quy trình Hallmark bắt đầu bằng việc đọc project, gồm font, palette, framework và file design.md nếu có. Sau đó, nó hỏi về material như ảnh, screenshot và số liệu thật, với nguyên tắc không tự bịa dữ kiện.

Một brief nên nêu rõ mục tiêu, CTA, nguồn nội dung và các ràng buộc phải giữ lại:

text Use Hallmark to build a <loại trang> cho <sản phẩm>.

Mục tiêu chính của khách truy cập: <hành động cần hoàn thành>. Nội dung, ảnh, screenshot và số liệu chỉ được dùng từ: <vị trí dữ liệu>. CTA chính là: <CTA>. Yêu cầu bắt buộc: giữ <ràng buộc thương hiệu hoặc chức năng>. Không bịa testimonial, logo khách hàng, số liệu, tính năng hoặc ảnh sản phẩm.

Hallmark có thể đề xuất ba theme phù hợp và chọn anatomy của trang dựa trên công việc trang cần làm. Nếu sản phẩm có yêu cầu riêng, bạn có thể nói “custom”.

Theo README, chế độ custom bỏ theme, component plan và palette recipe; công cụ chỉ bám vào Floor, các gate và hướng dẫn trong direction.md để tìm một ý tưởng riêng cho khách hàng.

Giấy phép và ảnh: điều cần biết

Hallmark được phát hành theo giấy phép MIT. Đây là điểm đáng chú ý nếu bạn muốn fork dự án, điều chỉnh workflow hoặc tích hợp nó vào quy trình sản phẩm của mình, với điều kiện tuân thủ giấy phép.

Thư viện ảnh của dự án liệt kê 755 ảnh có giấy phép mở từ Wikimedia Commons và không lưu file ảnh trong kho. Hallmark cho biết sẽ ghi credit cho ảnh được dùng trên trang. Các ảnh có thể mang giấy phép CC0, public domain, CC BY hoặc CC BY-SA.

README cũng nói dự án không dùng ảnh từ Unsplash, Pexels hay Pixabay vì điều khoản của các nguồn này không cho phép công cụ AI chọn ảnh. Trước khi dùng ảnh trong sản phẩm, vẫn nên kiểm tra giấy phép cụ thể và bối cảnh sử dụng của từng ảnh.

Checklist trước khi merge

Trước khi đưa UI do agent tạo vào nhánh chính, hãy rà nhanh:

CTA chính có khớp với việc người dùng đến trang để làm không? Hero có truyền đạt giá trị trước khi người dùng phải cuộn không? Form, link và handler có còn hoạt động sau redesign không? Mobile, contrast, focus và reduced motion đã được kiểm tra chưa? Nội dung, ảnh và số liệu có phải dữ liệu thật thay vì dữ liệu do AI tự điền?

Hallmark không thay thế gu thiết kế hay đánh giá từ người dùng thật. Nhưng như một vòng kiểm tra bổ sung, nó có thể giúp coding agent bớt xuất xưởng những giao diện đúng công thức mà thiếu lý do rõ ràng.