If you have ever asked an AI coding agent to build a landing page, you know the result: the same purple gradient, the same eyebrow label above every heading, the same grid of generic cards. It looks clean for five seconds and forgettable forever. Hallmark exists to fix exactly that. It is an open source design skill for Claude Code, Codex, Cursor, and OpenCode that refuses to let a generated frontend look AI-generated, by giving the agent design taste, a theme system, and a real-browser quality gate before anything ships.
Key Takeaways
Hallmark is a free, MIT-licensed design skill that works with Claude Code, Codex, Cursor, and OpenCode.
It deals one of fifty human-crafted themes per build, so two prompts in the same theme still produce different pages.
Every build is linted in a real browser with sloplint and reviewed with fresh eyes before it ships.
It can also redesign or audit an existing page, keeping its content, links, and forms intact.
Install it with one command:
npx skills add nutlope/hallmark -g.
What Hallmark actually is
Hallmark is not a website builder and not a component library. It is a skill, a set of instructions, references, and scripts that an AI coding agent follows while it designs and builds a page. The project lives at nutlope/hallmark on GitHub, it is made by Together AI, and it has gathered more than 39,000 GitHub stars. Its own site, usehallmark.com, shows the same prompt built with and without Hallmark, with the linter's issue counts beside each version.
The core idea is simple: an agent without design guidance falls back on the patterns it has seen most often, and those patterns are exactly what readers now recognize as AI slop. Hallmark replaces that default with a floor, a set of themes, and a review loop, so the agent has to make real design decisions instead of repeating the average of the internet.
Watch the 30-second repo signal: Watch the 30-second repo signal.
What counts as AI design slop
Hallmark's linter, sloplint, checks for a specific list of tells, and reading that list is the fastest way to understand the project. It flags the eyebrow label above every heading, labels written in tracked capitals, one colored word in a headline, a page made only of empty frames or only of photographs, a hero that misses the screen, an email sign-up at the end of every page, and a form that says thanks without sending anything. These are small things individually, but together they are the signature look of generated pages.
The gates come in tiers. The Floor never ships: contrast, focus states, reduced motion support, invented facts, and a broken phone layout are hard failures. Reflex gates cover the defaults a model falls into, and a build with a reason may overrule one on the record. Finish checks cover craft detail that never blocks a ship. That tiering matters, because it keeps the skill from becoming a rigid template: it blocks real defects, questions lazy defaults, and leaves polish to judgment.
How a build runs
A Hallmark build follows a fixed sequence, and the sequence is where most of the quality comes from.
Pre-flight reads the project. It checks fonts, palette, framework, and a locked
design.md, then asks once for the material it needs: photos, screenshots, and real numbers. Nothing is invented.Three themes are dealt. The
theme.mjsscript offers three themes that fit the prompt, and the build picks one. Thedrawstep then lays out the page's anatomy from its job, so a booking page books, a shop sells, and a newsletter subscribes.The hero is built alone. It is rendered and reviewed cold before the rest of the page exists, so a weak hero cannot hide inside a long page.
The page is linted and reviewed.
sloplint.mjs --renderchecks the page at eight widths, then a subagent reviews it with fresh eyes. Each page is self-contained HTML and CSS, stamped in its first CSS comment with the decisions it took.
This order, design before code, theme before layout, hero before the rest, is the opposite of how most agents work when left alone, which is to generate everything at once and hope it looks fine.
Fifty themes, not fifty templates
Version 2 of Hallmark ships fifty themes, and the distinction between a theme and a template is the point. Each theme is a material: paper, type, color, surfaces, its own components, and texture, with a picture of a finished page beside it. A theme never says what a page contains or in what order, so two prompts in one theme make two different pages. Each theme is a single file of at most 8 KB, and a build reads exactly one.
There is also a custom mode. Say custom and Hallmark drops the themes entirely: no plan, no components, no palette recipe, only the floor, the gates, and a short direction to find one idea that only this client has and let it run the page. That keeps the skill useful for brands that already have a strong identity and do not want to look like a theme demo.
Photographs get the same honest treatment. Hallmark ships a library of 755 openly licensed photos, picked per subject and credited on the page, drawn from Wikimedia Commons rather than stock sites whose terms bar AI tools from picking their images. No API key is needed, and an image key is optional.
Redesign and audit for pages you already have
Hallmark never starts on a design that already exists unless you name it. The commands are explicit:
/hallmark redesign ./src/apprebuilds a page and keeps its content and wiring./hallmark audit ./index.htmlonly reports, without changing anything.
A full redesign keeps the content and the wiring and changes the system and the layout. Say keep the layout for a restyle, or polish for only the tells. Before a redesign, sloplint --before records every link, field, handler, and heading, and sloplint --kept fails the redesign if one went missing. The handoff is a side-by-side before and after, so you can see what actually changed.
Install it in one line
Installation is a single command:
npx skills add nutlope/hallmark -g
The -g flag installs it for every project; leave it off to install into the current one. It needs Node 18 or later. The browser checks, sloplint --render and screenshots, also need puppeteer-core and Chrome; without them, the static checks still run. If the skill does not fire on its own, name it: tell the agent to use Hallmark to build the page.
What Hallmark does not do
Hallmark is honest about its limits, and those limits are worth knowing before you install it. It designs pages, not entire products: it will not plan your backend, write your business logic, or fix a broken product strategy. It works inside the agents it supports, Claude Code, Codex, Cursor, and OpenCode, so it is not a general design tool for every workflow. And it cannot rescue content that does not exist: pre-flight asks for real material precisely because invented photos and numbers are part of the slop it exists to remove. If you feed it a vague prompt with no material, expect it to ask questions first.
Why it matters
AI coding agents made building a page cheap, and cheap pages all started to look the same. Hallmark is interesting because it treats that sameness as a quality bug with a checklist, not as a matter of taste you argue about. A floor that never ships, fifty materials instead of one default look, and a review with fresh eyes before release: that is a small process, but it is the difference between a page that looks generated and one that looks designed.
If you build frontends with an AI agent, try it on your next landing page and compare the result with the agent alone. The difference is the whole argument. For a related take on giving agents design ability, read UI-Skills: Give Your AI Agent Real Design Engineering Skills.
Read this article in Indonesian: Baca artikel ini dalam Bahasa Indonesia.
FAQ
Is Hallmark free?
Yes. It is open source under the MIT license, so you can use it, fork it, and ship with it.
Which AI coding agents does Hallmark support?
Claude Code, Codex, Cursor, and OpenCode. It is invoked as /hallmark <prompt> in most of them, or $hallmark <prompt> in Codex.
Do I need an API key?
No. Photographs come from its own library of openly licensed pictures, and an image key is optional.
Can Hallmark redesign my existing site?
Yes, when you ask by name with /hallmark redesign <path>. It keeps your content, links, and forms and rebuilds how the page looks. It never touches an existing site on its own.
How is Hallmark different from a UI component library?
A component library gives you ready-made pieces. Hallmark gives your agent a design process: themes, gates, a real-browser lint pass, and a fresh-eyes review, so the finished page is designed rather than assembled.