Hallmark

A design skill that makes AI coding assistants build web pages that don't look machine-made.

Stars: 45.5k
Forks: 2.4k
Licence: MIT
Language: CSS
Last update: 7 days ago
Type: Dev tool

What it is

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 also supports redesigning or auditing an existing page.

Build a new landing page from a prompt, choosing one of several themes
Redesign an existing page with /hallmark redesign while keeping its content and wiring
Audit an existing page with /hallmark audit to get a report without changes
Lint any HTML or CSS page with the sloplint script, optionally rendering it in a browser

Great for

Developers who use Claude Code, Codex, Cursor or OpenCode to build landing pages or app screens
People who want AI-built pages to avoid generic layouts and stock-looking styling
Teams redesigning an existing page while keeping its content and links
Builders who want a page lint step that checks widths and a fresh-context review

Not ideal for

People who do not use one of the supported AI coding assistants, since the skill is designed for them
Anyone expecting a hands-off design tool with no review, because the README describes a checked build process and suggests reviewing results
Projects needing a non-web design output, since the README focuses on web pages

Step-by-step guide: how to use HallmarkInstall, first run, examples, tips and FAQs

Hallmark vs Taste Skill

How to get it

1
Install with a package manager
You'll need: Node.js 18 or later · An AI coding assistant such as Claude Code, Codex, Cursor or OpenCode · Optional: puppeteer-core and Chrome for browser checks
Install the skill for all projects
npx skills add nutlope/hallmark -g
Install the browser checks (optional)
npm i -g puppeteer-core
2
Run it
- Install the skill with the npx command in the README
- Open your AI coding assistant in a project
- Invoke it with /hallmark <prompt> or describe a new build and name hallmark
- Optionally lint a page with node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render
3
Get the most out of it
- Use /hallmark audit <path> first to see issues without changing files
- Use /hallmark redesign <path> with 'keep the layout' for a restyle or 'polish' for only the tells
- Install the browser checks so sloplint --render and screenshots work
- Add a locked design.md in the project so Hallmark reads your fonts and palette during pre-flight
- Install the edit-time Floor check for Claude Code with install-hook.mjs

Downloads

Source code (.zip)main branch · straight from GitHub Official website & docswww.usehallmark.com/

Strengths

Clear checks: the README lists Floor, Reflex and Finish tiers for contrast, focus, layout and common AI tells
Works across several AI coding assistants and has a standard install command
Redesign mode checks that links, fields and headings are not lost

Trade-offs

Browser checks need extra setup (puppeteer-core and Chrome); without them only static checks run
The README does not show detailed before-and-after results, so output quality is hard to judge from the text alone
Rules and themes are opinionated, so teams with a fixed brand may need to adjust them

How it compares

Project	Stars	Type	Level	Updated	Best for
hallmark (this)	45.5k	Dev tool	intermediate	7 days ago	Developers who use Claude Code, Codex, Cursor or OpenCode to build landing pages or app screens
taste-skill	108k	AI model / agent	beginner	6 days ago	Developers using Claude Code or Codex who want less generic frontend output

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.