# hallmark

> A design skill that makes AI coding tools build web pages that don't look generic

- Repository: https://github.com/Nutlope/hallmark
- Category: Agent skills & plugins
- Stars: 30,857 · Forks: 1,600 · Language: CSS · License: MIT
- Experience: Beginner friendly
- Page: https://ir.adyog.com/repos/nutlope/hallmark/

AI coding tools tend to produce the same safe-looking landing pages, because they fall back on the most common design patterns they were trained on. Hallmark is a set of instructions (a skill) that you install into your coding tool to steer it away from those defaults.

For a new brief, it chooses a macrostructure (the overall shape of the page), dresses it in one of twenty-one themes, and runs fifty-seven checks plus a self-critique before handing the page back. If no theme fits, a Custom mode designs the palette, type and layout from scratch. The output is self-contained HTML and CSS.

The README says two pages from different briefs should feel like different sites rather than colour swaps of one template. Beyond building, it can audit existing code, redesign a page, and study a screenshot or URL for its design traits.

## What it does

- **Four verbs**: The default builds new UI. `audit` scores existing code and gives a punch list without editing. `redesign` keeps copy, information architecture and brand but rebuilds the structure. `study` extracts the design traits from a screenshot or URL.
- **Twenty-one themes**: Each brief gets a macrostructure and a theme chosen to fit it. The live demo lets you press T to cycle through the themes.
- **Slop-test gates**: Fifty-seven checks and a pre-emit self-critique run before the result is returned, to catch common AI-default patterns.
- **Custom mode**: When a brief has creative intent no catalog theme fits, Hallmark designs a made-to-measure palette, type and layout instead.
- **Study without cloning**: The study verb pulls out macrostructure, type pairing and colour anchor, refuses pixel-clones and paid templates, and can write a portable design.md for other AI tools.

## What you could build

- Generate a landing page for a product or brand that doesn't look like a stock template.
- Audit an existing front end and get a list of AI-style design anti-patterns to fix.
- Redesign a page while keeping its copy, structure of information and brand.
- Study a site you admire and produce a design.md to hand to another AI tool.
- Browse the example pages to see how different briefs turn into different layouts.

## Who it's for

Developers and designers who build web pages with Claude Code, Cursor or Codex and want less generic results; basic comfort with installing a skill is enough.

## Get started

Run the install command, which adds the skill to your coding tool, and re-run it to update. You can also copy SKILL.md and the references folder by hand into the skills folder of Claude Code or Codex, or into Cursor's rules as hallmark.mdc.

```
npx skills add nutlope/hallmark
```

Tags: design, claude-code, cursor, codex, frontend