How to use Hallmark: install the design skill for Claude Code, Codex, Cursor

What Hallmark does and who it is for

Hallmark is a design skill you add to AI coding assistants such as Claude Code, Codex, Cursor and OpenCode. It guides the assistant to build web pages from one of fifty design materials, then checks the result in a browser against common tells of AI-generated design.

It suits developers who build landing pages or app screens with one of these assistants, and teams redesigning a page while keeping its content and links. It is not a hands-off design tool: the README describes a checked build process and suggests reviewing the results.

Install Hallmark with Node.js

You need Node.js 18 or later and an AI coding assistant such as Claude Code, Codex, Cursor or OpenCode. To install the skill for all projects, run the command below. Leave out the -g flag to install into the current project only.

To use the browser checks, which include sloplint --render and screenshots, also install puppeteer-core and Chrome. Without them, the static checks still run.

• Install the skill for all projects, or drop -g to install for the current project only.
• Optional: install the browser checks with puppeteer-core and Chrome.
• To target one assistant, add --agent with claude-code, codex, opencode, cursor or github-copilot.

Build a page with Hallmark

Invoke the skill with /hallmark followed by your prompt in Claude Code, or with $hallmark in Codex CLI. In Cursor and OpenCode you can use /hallmark too. You can also describe a new build and the skill should trigger on its own. If it does not, name it in your prompt, for example: use hallmark to build a landing page.

A build follows a fixed sequence. Pre-flight reads the project and asks once for material such as photos, screenshots or real numbers. The hero is built and reviewed before the rest of the page exists. Then sloplint checks the page at eight widths, and a subagent reviews it with fresh eyes.

• Pre-flight reads fonts, palette, framework and any locked design.md, and asks for material once.
• theme.mjs deal offers three themes that fit the prompt; draw deals the page's anatomy from its job.
• The hero is rendered and reviewed on its own first.
• sloplint --render checks eight widths, then a fresh-context subagent reviews the page.

Choose a theme or use custom

Hallmark ships fifty themes. Each theme is a material, meaning paper, type, colour, surfaces and its own texture, and it never dictates page content or order. Two prompts in the same theme still produce different pages.

If none of the themes fit, say custom. Hallmark then drops the themes and designs from your prompt alone, under the same rules and checks.

• Each theme is one file of at most 8 KB in references/themes/, with a picture beside it.
• A build reads exactly one theme file.

Redesign or audit an existing page

Hallmark does not start from an existing design unless you name it. A full redesign keeps the content and wiring and changes the system and layout. Say keep the layout for a restyle, or polish to fix only the tells. Audit only reports and changes nothing.

Before a redesign, sloplint --before records every link, field, handler and heading. sloplint --kept then fails the redesign if one went missing.

• redesign rebuilds the page and keeps its content and wiring.
• audit only reports.
• polish changes only the tells; keep the layout restyles without moving the layout.

Lint any page with sloplint

You can run the lint step on any file or directory, not only pages built by Hallmark. The README says the gates come in three tiers: Floor checks never ship (contrast, focus, reduced motion, invented facts, broken phone layout), Reflex gates are defaults a model falls into and can be overruled with a reason, and Finish checks are craft detail that never blocks a ship.

• Floor: contrast, focus, reduced motion, invented facts, broken phone layout.
• Reflex: common model defaults; a build with a reason may overrule one on the record.
• Finish: craft detail that never blocks a ship.