Illustration of what hallmark does: A design skill that makes AI coding tools build web pages that don't look generic

Nutlope /

hallmark

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

Open on GitHub (opens in a new tab) Website (opens in a new tab)

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.

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

Commands are copied from the project's README. Read it on GitHub for the full setup.

More in Agent skills & plugins

See all
superpowers A set of skills that makes coding agents plan, test and review before they write code 303.8k9.7k mattpocock/skills Small, editable agent skills for planning, testing and reviewing code with AI 301k26.9k ECC Agents, skills, hooks and memory that add an engineering workflow to coding agents 286.6k15.8k andrej-karpathy-skills A CLAUDE.md file that tells Claude Code to ask first, keep code small, edit narrowly 222.6k6.2k anthropics/skills Anthropic's example Agent Skills: folders of instructions Claude loads per task 183.1k3.7k ponytail A skill that makes AI coding agents write the least code that works 173.7k22.8k gstack Slash-command skills that give Claude Code roles like reviewer, QA and release engineer 137.3k2.6k addyosmani/agent-skills A pack of 25 Markdown skills that guide AI coding agents from spec to ship 109.7k9.3k taste-skill Agent skills that steer AI coding tools toward better layout, type and motion 101.2k9.3k archify Agent skill that turns a description or a codebase into an interactive HTML diagram 87.8k11.8k

    ↑↓ to move, Enter to open, Esc to close