What Is Hallmark? Getting Your Coding Agent to Build Pages That Don't Look Templated, Setup and Cost

You ask your coding agent for a new page; Hallmark has the agent first pick one of 21 named page layouts, dress it in a theme and run it through quality gates called the "slop test" before handing it over. It also has verbs that score an existing page (audit), rebuild its structure (redesign) and extract the logic of a design you like (study). It is a free, MIT-licensed design kit made of a single skill; you install it with npx skills add nutlope/hallmark, and the repository has no hooks, MCP or executable scripts. Turkish support is not stated in the official documentation.

What it does: Has your coding agent build the page on a layout and run it through a quality test
Type: Single skill (kit)
Where: Claude Code, Cursor, Codex
Install: npx skills add nutlope/hallmark
Hooks and scripts: None; Markdown files only
Turkish: Not stated in the official documentation
Cost: Free, MIT-licensed

What does Hallmark do?

Pages built by AI often look alike. Hallmark is an instruction set that tells the agent to choose a page layout (macrostructure) and a theme before it starts, and to run its own work through quality gates before it finishes. A skill is a ready-made set of instructions that tells the agent how to do a job.

Code pages that don't look templatedWhat you get: HTML and CSS page or componentNeeds a separate setup List AI patterns on a pageWhat you get: Ranked list of findingsNeeds a separate setup

Who it's for: people who have Claude Code, Cursor or Codex code web pages and don't want the result to look like a template. If you don't write code, it won't help you.

The numbers differ between sources: the README says 57 quality gates, SKILL.md says 58; the README lists 21 themes, the site footer 20. An open GitHub issue discusses that the skill carries 106 reference files as a single unit and is quite large (about 690 KB).

How do you install Hallmark?

Install or update (same command)› npx skills add nutlope/hallmark

The command downloads and runs Vercel Labs' separate command-line tool called "skills" and asks which agent folders to install into. Restart the agent.

Cursor: put the body of SKILL.md (without the front matter) into the .cursor/rules/hallmark.mdc file. Codex: copy SKILL.md and the references folder into ~/.codex/skills/hallmark/ (personal) or .codex/skills/hallmark/ (project).

An open GitHub issue (#22) reports that with the rules-file method in Cursor, the reference files are ignored.

How do you use Hallmark?

Once installed, you just ask for an interface; the site says "Ask your agent for a UI". The verbs are optional: audit (score it, make no edits), redesign (keep content and brand, change the structure) and study (extract the logic of a design).

Page from scratch"/hallmark build A booking-focused one-page website for a boutique hotel"

Score an existing page"hallmark audit ./index.html"

Rebuild the structure"hallmark redesign ./index.html"

Hallmark can't be split into parts: it is a single skill, and the verbs live in the same SKILL.md. A request to split it is an open GitHub issue.

Which programs does Hallmark work in?

Claude CodeYes	Named in the README and package.json; ~/.claude/skills/hallmark/.
CursorYes	The README gives the rules-file path; the site says "auto-detected".
CodexYes	The README gives the skill folder path.
claude.ai web and Claude DesignUnclear	Not stated in the documentation.

"Not in the documentation" does not mean it doesn't work.

What does Hallmark read and write?

Reads

The existing code in the project (package.json, tailwind.config, CSS files, DESIGN.md if present) and any screenshot you provide. In study's URL mode, it reads the HTML and CSS of the public page you give it through the agent's web tool.

Writes

HTML and CSS files; a .hallmark/ folder in the project (pre-scan cache and which layout and theme were used). It only appends to an existing global stylesheet.

Deleting

The skill instructions tell it not to delete production files unless you ask and to ask for confirmation before deleting. This is an instruction, not a technical lock.

Internet and data

The README and SKILL.md describe no feature that sends data to its own server and no telemetry; the repository has no hooks, scripts or MCP.

Recorded security advisories

The GitHub advisory list is empty, and there is no SECURITY.md. An empty list does not mean it is safe.

Is Hallmark free?

Yes. It is MIT-licensed open source; the README, LICENSE and site mention no paid plan, subscription or service tier. The coding tool (Claude Code, Cursor, Codex) and the model are paid for separately.

Allowed

Use, copy, modify and distribute it, including commercially (MIT)

Not allowed

Remove the copyright and license notice from copies

Source: LICENSE and README. This is not legal advice.

Common problems and fixes

What happens	What to do
"No valid skills found" error	An issue reported and closed in May 2026 (#1, #4); install the current version.
Reported by users After installation, the agent can't open some links inside SKILL.md	Open GitHub issue (#76): because the installer copies only the skill folder, three relative links stay broken.
Reported by users Reference files are ignored in Cursor	Open GitHub issue (#22); no official fix.
Reported by users The skill is very large and uses a lot of context every time	Open GitHub issue (#50); the skill is a single unit and can't be split.

How do you uninstall Hallmark?

Delete the skill folder: ~/.claude/skills/hallmark/ for Claude Code, ~/.codex/skills/hallmark/ for Codex, .cursor/rules/hallmark.mdc for Cursor. The documentation gives no uninstall command for Hallmark; the .hallmark/ folder created in your project stays, and you delete it by hand.

Frequently asked questions

What is Hallmark?

A free design kit made of a single skill that gets your coding agent to build pages that don't look templated. It first picks one of 21 page layouts, dresses it in a theme and runs it through quality gates.

Is Hallmark free?

Yes, it is MIT-licensed open source; there is no paid plan or service tier. The coding tool and the model are paid for separately.

Which programs does Hallmark work in?

The README gives installation steps for Claude Code, Cursor and Codex. You install it with npx skills add nutlope/hallmark; there are manual copy paths too.

Will Hallmark delete my existing site and rewrite it from scratch?

The skill instructions tell it not to delete production files unless you ask and to ask for confirmation before deleting. audit only scores, and redesign changes the structure but keeps the content and brand. Still, keep your project in git.

Can I copy another site's design with Hallmark?

The study verb extracts a page's structure and typography logic and rebuilds it with your own content. Copying someone else's images and text is a different matter; respect copyright.

Related guides

Sources

Not clear in the official sources: Number of quality gates (57 or 58) and themes (20 or 21) · whether it can be used in claude.ai web and Claude Design · behavior with Turkish requests · Windows-specific installation. Each is covered in the relevant section along with what you can do.