Repolode
Submit
Nutlope

Nutlope/hallmark

A design skill for Claude Code, Cursor, and Codex that guides AI coding agents toward UI that doesn't look AI-generated.

View on GitHubWebsite
Stars
30,386
Forks
1,566
Open issues
49
Last commit
2 months ago

What is it?

Hallmark is a design skill that plugs into AI coding assistants such as Claude Code, Cursor, and Codex. It helps the assistant pick a page structure for a given brief, apply one of twenty-one themes, and run a set of fifty-seven checks against common generic AI design patterns before returning the result.

Beyond building new UI, it offers three other modes: auditing existing code against the same anti-patterns and returning a punch list, redesigning a page while keeping its copy and information architecture, and studying a screenshot or URL to extract its layout, type pairing, and colour anchor. The study mode can also output a portable design.md file for use with other AI tools.

Installation works through npx skills add, or by copying the SKILL.md file and references folder into the relevant tool's skills or rules directory. The project is MIT licensed.

Key features

  • 01Chooses a page macrostructure based on the brief before writing code.
  • 02Offers twenty-one themes plus a Custom mode for briefs without a fitting theme.
  • 03Runs fifty-seven anti-pattern checks and a self-critique before output.
  • 04Audits existing code and returns a punch list without editing it.
  • 05Extracts layout, type pairing, and colour from a screenshot or URL into design.md.

Use cases

  • Having an AI coding assistant build a landing page or product UI that doesn't look generic.
  • Reviewing an existing front-end codebase for common AI-generated design patterns.
  • Redesigning a site's look while keeping its copy and structure.
  • Turning a design you admire into a reusable design brief for other tools.

Quick start

  1. 1

    Install the skill with npx

    npx skills add nutlope/hallmark
  2. 2

    Open your AI coding tool (Claude Code, Cursor, or Codex) and ask it to build UI; the skill applies automatically

Things to know

  • It is a set of prompt rules for AI coding agents, so it only helps if you already use one of the supported tools.
  • Its output quality depends on the underlying AI model and the brief you give it.

Topics

#ai-agent#claude-code#cursor#design-system#css#prompt-engineering#ui-design

FAQ

What is hallmark?
A design skill for Claude Code, Cursor, and Codex that guides AI coding agents toward UI that doesn't look AI-generated. Hallmark is a design skill that plugs into AI coding assistants such as Claude Code, Cursor, and Codex. It helps the assistant pick a page structure for a given brief, apply one of twenty-one themes, and run a set of fifty-seven checks against common generic AI design patterns before returning the result.
Is hallmark free to use? What license does it have?
hallmark is open source under the MIT license. Check the license terms before using it in commercial products.
Is hallmark still maintained?
Updated within 6 months. The last commit to hallmark was on Aug 6, 2026.
What can I use hallmark for?
Having an AI coding assistant build a landing page or product UI that doesn't look generic. Reviewing an existing front-end codebase for common AI-generated design patterns. Redesigning a site's look while keeping its copy and structure. Turning a design you admire into a reusable design brief for other tools.
How do I install hallmark?
Install the skill with npx: npx skills add nutlope/hallmark Open your AI coding tool (Claude Code, Cursor, or Codex) and ask it to build UI; the skill applies automatically
Where can I get hallmark?
The source code and installation instructions are on GitHub: https://github.com/Nutlope/hallmark

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects