Hallmark provides a design framework for AI coding assistants to ensure generated user interfaces look intentionally crafted rather than generic. It helps frontend engineers avoid common AI design patterns during the creation of new apps or the redesign of existing pages.
The skill enables the extraction of design DNA—including macrostructure, type-pairing, and color anchors—from screenshots or URLs to inform more precise UI audits and implementations.
Follow the documented setup, then try a first task.
Installs: Hallmark skill · Claude Code, Cursor, Codex
In a terminal, run the documented installer command. Re-run it later to update Hallmark.
npx skills add nutlope/hallmark
Installs: Hallmark skill, including SKILL.md and its references · Claude Code
Manually copy `skills/hallmark/SKILL.md` and the `skills/hallmark/references/` directory into `~/.claude/skills/hallmark/`.
Installs: Personal Hallmark skill, including SKILL.md and its references · Codex
Manually copy `skills/hallmark/SKILL.md` and the `skills/hallmark/references/` directory into `~/.codex/skills/hallmark/`.
Installs: Project-scoped Hallmark skill, including SKILL.md and its references · Codex
Run from: The root of the Codex project where Hallmark should be available
From the intended project context, manually copy `skills/hallmark/SKILL.md` and the `skills/hallmark/references/` directory into that project's `.codex/skills/hallmark/` directory.
Uses hallmark
Use the hallmark skill to audit `<target>`. Replace `<target>` with the path to an existing page or UI file. Score it against Hallmark's anti-pattern list and return a ranked punch list only; do not edit any files.
Claude
Codex
Cursor
Amp