A design skill for avoiding default AI styles
Hallmark is a design skill, not an application or component library. Together AI's Nutlope (Hassan El Mghari) released it as open source; its primary language is CSS, it was created on 2026-04-27 and it uses the MIT license.
It addresses a specific problem: large language models are trained into a set of default, "on-distribution" visual habits that make most AI-generated interfaces look alike. Hallmark uses structural variation and quality gates to avoid returning to these defaults.
It follows a fixed process: select a layout macrostructure, apply a theme rule-set, run 57 slop-test anti-pattern gates and perform pre-emit self-critique. The official design goal is for two Hallmark pages generated from two different requirements to feel like two different websites instead of recolored versions of the same template.
Hallmark supports three coding agents: Claude Code, Cursor and Codex. The repository centers on the rules in SKILL.md, with reference material in references/. The demo site usehallmark.com lists eight example projects covering 20 built-in themes and a "Custom" mode.
Select macrostructure
Apply theme rule-set
57 slop-test gates
Pre-emit self-critique
emit
Two pages that Hallmark generates for different requirements should feel like different websites, rather than color variations of one template.
One-command installation and paths for three tools
The fastest method is one-command installation through the skills package manager. It places Hallmark's SKILL.md and references/ in the corresponding locations.
# One-line installation (skills package manager)
npx skills add nutlope/hallmarkManual installation with SKILL.md and references/
For manual installation, copy SKILL.md and references/ from the repository's skills/hallmark/ into the directory for each tool. The three tools use different paths.
# Claude Code
~/.claude/skills/hallmark/
# Cursor(body only, excluding frontmatter)
.cursor/rules/hallmark.mdc
# Codex(personal or project scope)
~/.codex/skills/hallmark/ # Personal
.codex/skills/hallmark/ # Project scopeFour command verbs and four mechanisms
Hallmark has four command verbs. The default, with no verb, generates a new interface; audit, redesign and study each handle a type of existing material. All verbs share the same mechanisms: select macrostructure, apply a theme rule-set, run 57 slop-test gates and perform pre-emit self-critique. The eight cards below contain verbs in the first four and mechanisms in the last four.
Verb · 01
hallmark(預設)
Create a new interface
With no verb, generate a new UI: select macrostructure, apply a theme and run slop-test. Use this for requirements with no existing material, starting from scratch.
Verb · 02
hallmark audit <target>
Assess existing code
Score existing code for anti-patterns and produce a punch list that can be addressed item by item. Identify where an interface looks like AI output and what to fix first.
Verb · 03
hallmark redesign <target>
Rebuild while preserving content
Rebuild structure while preserving copy, information architecture and brand. Update layout and visual language; content remains unchanged.
Verb · 04
hallmark study <url>
Extract design DNA
Extract "design DNA" from a screenshot or URL: macrostructure, typography and color anchors. It can produce a portable design.md.
Mechanism · 05
macrostructure
Layout macrostructure selection
First choose the overall layout macrostructure instead of returning directly to the same default layout all LLMs were trained into.
Mechanism · 06
theme rule-sets
20 theme rule-sets
There are 20 built-in themes; each is a rule-set rather than a single style. Four on usehallmark.com can be cycled through with the T key.
Mechanism · 07
slop-test gates
57 anti-pattern gates
Run 57 slop-test anti-pattern gates before output, checking common features that look obviously AI-generated item by item and blocking failures.
Mechanism · 08
self-critique / Custom
Self-critique / Custom mode
Perform pre-emit self-critique before output. Custom mode generates bespoke colors and layouts without templates for requirements needing original design.
Verbs and usage scenarios
| Scenario | Verb | Output |
|---|---|---|
| Build a new UI from scratch | hallmark (default) | New interface with a theme, passing slop-test |
| Check where existing code looks like AI output | hallmark audit | Anti-pattern scores + punch list |
| Preserve content while changing structure and visuals | hallmark redesign | Rebuilt layout with copy and brand preserved |
| Extract a website's design style | hallmark study | Design DNA; can produce a portable design.md |
Eight usage points
These points come from the official Hallmark repository and usehallmark.com. Most misuse concerns the roles of the four verbs, Cursor's installation format and when to use Custom mode.
study before redesign for style transfer
To transfer a website's style to your project, first extract design DNA with hallmark study <url>, then run hallmark redesign on your target. study can produce design.md as an intermediate file.
Source · Official repo · docs/study-examples.md
Cursor installation uses only body, excluding frontmatter
When adding .cursor/rules/hallmark.mdc, copy only the body of SKILL.md without the frontmatter at the top. Claude Code and Codex use the complete SKILL.md.
Source · Official repo · README
Custom mode for original design
The 20 built-in themes cover most scenarios. For requirements calling for bespoke original colors and layouts, use Custom mode; it produces bespoke results instead of templates. The Cascadia Nightjar and The Mend Assembly on the demo site are examples.
Source · Official usehallmark.com
Cycle themes on the demo site with T
Cycle through four themes on usehallmark.com with the T key to quickly compare rule-sets on the same layout, then decide which to use in your project.
Source · Official usehallmark.com
audit produces a punch list to address item by item
Run hallmark audit <target> on existing code to score anti-patterns and produce a punch list. You can fix items individually instead of rebuilding the entire page.
Source · Official repo · README
Portable design.md across projects
The design.md produced by study is a portable design description. Store it in another project so subsequent generation can reference the same macrostructure, typography and color anchors, maintaining a consistent style across projects.
Source · Official repo · docs/study-examples.md
redesign preserves content and brand
redesign rebuilds only structure and visuals, preserving copy, information architecture and brand. Use it when content is sound but the layout looks too much like AI output, without rewriting the text.
Source · Official repo · README
recipes.md for complete workflows
The repository's docs/recipes.md contains complete operating workflows, while docs/study-examples.md has study examples. Reading these two files first is faster than working out verb combinations yourself.
Source · Official repo · docs/recipes.md
Hallmark's brief-to-interface process
In this illustrative workflow, ask Hallmark to build a landing page in Claude Code. It selects macrostructure, applies a theme rule-set, runs 57 slop-test gates, performs pre-emit self-critique and then emits output. Verb and mechanism names come from official documentation; the workflow content is illustrative.
$ You ›
Build a landing page for a B2B analytics tool, focused on "understand why
customers churn in five minutes". It should not look like a template.
claude: Claude(Hallmark)›
Before output, I will select the layout macrostructure, apply a theme,
and run slop-test. These are the reasons for the choices:
hl: → Selected: asymmetric hero + supporting data strip, without a centered hero
hl: → theme: Cold Snap(one of 20 built-in themes)
ok: → 54 / 57 passed · 3 fixes passed on retest
This version's weaknesses: low contrast in the data strip and an unclear call-to-action hierarchy.
Move the CTA to the right of the hero before emitting output.
ok: → Landing page emitted · macrostructure + Cold Snap theme
ok: → Passed 57 slop-test gates · Layout differs from the default template
claude: Claude ›
Would you like an audit of this page, or a study of your
existing website's design DNA to match the brand?
Before output, it selects macrostructure, applies a theme, runs 57 slop-test gates, and performs self-critique. It rejects the defaults that LLMs repeatedly produce.
Rule checks and output differences
Hallmark divides "avoiding AI design slop" into individually checkable steps without relying on a smarter model: avoid default layouts at the macrostructure level, unify visual language with theme rule-sets, block common anti-patterns with 57 gates and perform self-critique before emit. Each step follows rules without depending on inspiration.
Outputs from two different briefs differ because macrostructure and theme combinations already vary early in the process instead of changing colors only at the end. anti-slop consists of heuristic gates, not a guarantee; quality still depends on the brief's clarity.
Limits of structure, visuals and functional logic
Hallmark design workflow integration
Hallmark is an MIT-licensed open-source project with core rules in SKILL.md and reference material in references/. After basic generation works, several options extend it into a more complete design workflow.
Advanced integration options
1. Use study and design.md for brand alignment. hallmark study extracts design DNA from screenshots or URLs and produces a portable design.md. Bring it into other projects so subsequent generation can reference the same macrostructure, typography and color anchors.
2. Refresh existing pages with redesign. Run hallmark redesign on an existing target to preserve copy, information architecture and brand while rebuilding only structure and visuals. Use it when content is sound but the layout looks too much like AI output.
3. Prioritize fixes with audit. hallmark audit scores anti-patterns in existing code and produces a punch list, letting you address items by priority instead of rebuilding the entire page.
4. Use Custom mode for original design. When 20 built-in themes are insufficient, Custom mode generates bespoke colors and layouts without templates. The Cascadia Nightjar and The Mend Assembly on the demo site are examples.
5. Read custom-theme.md to customize the theme protocol. The repository's references/custom-theme.md explains the protocol for custom themes, letting you organize your design rules into a reusable theme rule-set.
Three official resources
① docs/recipes.md: Complete operating workflows and workflow examples. ② docs/study-examples.md: study examples and design.md usage. ③ usehallmark.com: Online demo of eight projects, 20 themes and Custom examples.
The goal is for pages with different requirements to look like different websites, rather than color variations of one template.