Hallmark: A Design Skill That Keeps AI-Generated UIs from Looking AI-Generated

The AI Slop Problem Hallmark Addresses

AI coding agents generate interface code quickly, but they generate it from patterns learned from a large corpus of existing web UIs. The result is that many AI-generated pages share recognizable visual fingerprints: the same type scales, the same card layouts, the same gradient hero sections, the same muted gray-and-blue palettes. The README describes this as being on-distribution: the agent produces the average of what it was trained on.

Hallmark is a design skill that sits between the coding agent and its output. Before generating or returning any interface, the skill runs 57 defined slop tests on the result and applies a pre-emit self-critique. The goal is to prevent the agent from defaulting to these on-distribution patterns.

The README states that two pages by Hallmark for two different briefs should feel like different sites, not color-swaps of the same template. The mechanism for achieving this is a combination of theme selection (21 themes, each with a distinct macrostructure) and the slop gate that refuses on-distribution defaults.

Hallmark was made by Together AI and released as an MIT-licensed open-source skill. Version 1.1.0 is the current release as of the package.json in the repository.

Four Verbs: Build, Audit, Redesign, and Study

Hallmark exposes four operations. The README presents them in a table.

The default verb, invoked without any command, builds new UI. Hallmark picks a macrostructure for the brief, applies the full rule set, runs the slop test, and returns the result.

The audit verb, used as hallmark audit followed by a target, scores existing code against the anti-patterns. It produces a punch list without making edits. This is useful for evaluating code that was generated before Hallmark was installed, or for auditing third-party UI code.

The redesign verb, used as hallmark redesign followed by a target, discards the existing structure while keeping the copy, information architecture, and brand, then rebuilds with a different fingerprint. This is the operation for a page that is functional but looks generic.

The study verb, used as hallmark study followed by a screenshot or URL, extracts the design DNA from a page the team admires: its macrostructure, type pairing, and color anchor. The README states it refuses pixel-clones and paid templates. Study can optionally produce a portable design.md file for handoff to other AI tools.

The 21 Themes and the Custom Mode

Hallmark selects from 21 themes when generating a page. Each theme defines a macrostructure (the overall structural approach to the layout), a type pairing, and a color anchor. The press T keybinding on the live demo at usehallmark.com cycles through themes.

The README names several example themes through its showcase pages: Hum (used for a sourdough app), Cobalt (for an extraction API), Carnival (for a record label), Lumen (for an AI tool), Garden, Riso, and others. Each theme is stamped into the CSS comment of the generated page. The full set of generated examples lives in the site/_tests/ directory of the repository.

Custom mode is a newer addition. When a brief carries creative intent that none of the 21 catalog themes fits, Hallmark switches to Custom and designs from scratch: a made-to-measure palette, type choice, and layout. The same 57 slop tests apply in Custom mode. The README describes Custom as a quiet branch: vanilla briefs never trigger it. The protocol for Custom mode lives in skills/hallmark/references/custom-theme.md.

The distinction between catalog themes and Custom mode matters for teams with strong brand requirements. Catalog themes give predictable results from a defined visual vocabulary. Custom mode produces something unique for a specific brief but is harder to audit for brand consistency across multiple pages.

Installing Hallmark into Claude Code, Cursor, or Codex

The recommended install uses the skills CLI tool:

npx skills add nutlope/hallmark

Re-running this command updates Hallmark to the latest version. The README notes this as the preferred method.

For manual installation, the required files are SKILL.md and the references/ directory from skills/hallmark/. The destination depends on the coding agent:

For Claude Code, place the files in:

~/.claude/skills/hallmark/

For Cursor, the README instructs placing the body of SKILL.md (without frontmatter) into:

.cursor/rules/hallmark.mdc

For Codex, two options exist: the personal install goes to ~/.codex/skills/hallmark/, and the project-scoped install goes to .codex/skills/hallmark/ within the project directory.

Worked examples for common tasks are in docs/recipes.md. Study examples showing how the hallmark study verb extracts design DNA are in docs/study-examples.md. Both files are in the repository root's docs/ directory.

What the Slop Tests and Pre-Emit Critique Actually Check

The README states that Hallmark runs 57 slop-test gates plus a pre-emit self-critique before returning any generated page. The README does not enumerate all 57 tests in its top-level description. The full rule set is in skills/hallmark/SKILL.md and the references/ directory.

The framing in the README describes the tests as checking for on-distribution defaults: patterns that every LLM was trained into and therefore produces by default. The term 'slop' in the README refers to this category of generic, recognizable AI output.

The pre-emit self-critique is a separate step from the slop tests. Before the agent returns the generated code to the user, Hallmark instructs it to evaluate the result against the design principles and make corrections. This self-critique step is internal to the skill invocation, not visible as a separate operation.

The approach has a concrete limitation: it works within the boundaries of what a coding agent can evaluate about visual design through code. Hallmark does not render the page and evaluate it visually. The tests operate on the code itself. Teams who need visual QA in a browser environment will still need a separate review process.

Where Hallmark Is the Wrong Tool

Hallmark is a design skill, not a component library. It generates complete pages from briefs; it does not provide a set of reusable components that a team can import and compose. Teams who need a design system with shared primitives such as buttons, inputs, and cards that are consistent across dozens of pages should use a component library instead.

Hallmark does not manage application state, routing, or data fetching. It generates static or near-static HTML and CSS pages. The generated output is self-contained HTML and CSS stamped with a macrostructure comment. Adding interactivity beyond what the agent generates is left to the developer.

The skill's effectiveness depends on the coding agent using it correctly. If the agent's session context does not load the skill before generating UI, the slop tests and theme selection do not run. Teams using project-scoped installs in .cursor/rules/ or .codex/skills/ can ensure consistent loading, but the ~/.claude/skills/ personal install applies only when the agent is run in that environment.

The RELATED SEARCHES data for Hallmark is dominated by searches for the Hallmark Channel (a television network) and Hallmark greeting cards. The name collision means teams searching for documentation may need to be more specific in their queries, and search-engine-based discovery of Hallmark-the-skill is harder than for tools with unique names.

Maintenance and License

The repository received its last push on 2026-08-06, which is 53 days before 2026-09-28. That is within six months, so the project is not stale by calendar. The version in package.json is 1.1.0. There are no GitHub Releases in the repository; the current version is tracked through package.json.

The license is MIT. The README states: use it, fork it, ship it. The package.json lists the license explicitly as MIT.

Hallmark is made by Together AI, as stated in the README. The repository is at github.com/Nutlope/hallmark. The live demo and full set of generated examples are at usehallmark.com.

The ROADMAP.md file in the repository root contains planned future work, but the README does not excerpt its planned features.

Editorial conclusion

Hallmark is for teams using Claude Code, Cursor, or Codex who find that every generated UI looks like the same default template. The tool addresses that problem directly through a specific mechanism: 57 defined slop tests, 21 themes, and a pre-emit self-critique. It is not a component library and it does not manage state or data. Teams that need a design system with reusable components should look elsewhere. Before installing, verify that your coding agent supports skills loaded from a SKILL.md file and a references/ directory: Claude Code, Cursor, and Codex each have different install paths documented in the README. The last push was on 2026-08-06.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository