Hallmark: Your High-Taste AI Design Partner

That Familiar "AI-Generated" Page

You ask an AI to build you a landing page. A few seconds later, it hands you something that looks "pretty good":

At the top sits a full-width purple-to-blue gradient hero, a bold headline centered in the middle, a subheadline beneath it, and a rounded button. Scroll down and you hit three equal-width cards in a row, each topped with an icon: ⚡ here, 🔒 there, 📊 next to it, followed by a two-line title and three lines of copy. Keep going and you find "Trusted by 10,000+ teams," then a four-column footer capped off with a tiny line of copyright text.

It's clean, symmetrical, and the colors are harmonious. But stare at it for three seconds and one word bubbles up: fake.

You can't put your finger on what's wrong, but you know instantly that an AI made it.

So let me walk through where that "AI slop" actually comes from, and how an open-source project called Hallmark helps your work look more polished and distinctive.

And even if you never end up using it, you'll walk away with a checklist for spotting AI slop yourself.

AI Slop Isn't an Aesthetics Problem. It's a Statistics Problem.

Let's clear up the most common misconception first. Most people assume AI interfaces look bad because "the model has poor taste." Wrong. The real reason is baked into how the model works.

When a large language model generates anything, a web page included, it's really doing one thing: predicting the most likely next token. And "most likely" means it keeps regressing toward the mean of its training data.

How many landing pages has a model seen? Millions. And of those millions, what do the overwhelming majority look like?

• The fixed rhythm of Hero → three feature cards → CTA → Footer
• A font that's Inter, Roboto, or Open Sans, with the same typeface for both headings and body
• Purple-blue gradients, centered headlines, a 100vh full-screen hero
• A fondness for using built-in emoji as icons
• A line reading "Trusted by XX,000+ teams"

So the model faithfully, and statistically correctly, reproduces this mode. What we call "AI slop" is the average of that distribution itself. It isn't a bug. It's the inevitable result of the model doing its job well. Ask it to "make a landing page" and it hands you the shadow of every landing page ever, stacked on top of each other.

This also explains a counterintuitive phenomenon: no matter how detailed you make your prompt, you can't really cure it. Because what you're fighting isn't a single instruction, it's the gravity of millions of samples in the training data. You say "make it look designed," the model nods, then slides right back to that mode, because "a well-designed landing page" all looks pretty much the same in the data it has seen.

Visual Variety ≠ Structural Variety

Hallmark's core insight, and what fundamentally sets it apart from the "AI reskinning tools" on the market:

Swapping colors doesn't count as change. Swapping the skeleton does.

Plenty of tools claim to generate "multiple styles," but look closely and they've just taken the same Hero → three cards → CTA template and swapped out the colors and border radii. The structure is identical. This kind of "visual variety" doesn't fool the human eye, because we recognize "formulas" by structure, not color.

Hallmark puts it this way: two pages generated for two different needs should "feel like two different websites, not color variants of the same template." It insists on structural variety. That's the single most important line in this whole article.

What Is Hallmark, and What Can It Do?

Hallmark isn't a component library, and it isn't a website generator. It's a design discipline, built by the Together AI team, packaged as a skill that plugs into the AI coding assistant you already use, Claude Code, Cursor, and Codex all supported. Installing it is a one-liner:

npx skills add nutlope/hallmark

Once installed, whenever you ask the AI to "build a page / refactor this / study this website," Hallmark's rule set takes over before the AI starts working.

Its philosophy boils down to one sentence:

Don't try to write a cleverer prompt to "request" good design; use an explicit set of rules to fundamentally block the path the model takes back to its default mode.

Turning "Taste" Into a "Decidable Gate"

Hallmark maintains a pointed, itemized "AI tell list." It labels the features that most give away an AI's identity as "critical." A few of the most common examples:

• Purple gradient hero: a purple-to-blue or purple-to-pink background gradient plus centered white text. "This is the single most recognizable AI aesthetic, bar none."
• Inter everywhere: the same Inter/Roboto for headings and body, with no font pairing.
• Three-column icon cards: three equal-width cards, each topped with an icon.
• Gradient text headings: gradient headlines made with background-clip: text.
• Full-screen centered hero: min-height: 100vh, everything centered, one line of text and one big button.
• Italic emphasis words: a roman heading with one or two italicized words for emphasis.

Hallmark gives every classic AI-slop pattern a name, and those named traits are documented in the skill's reference docs. When Hallmark's audit command runs against an AI-generated interface, it uses these named traits to flag whether any AI slop is present.

So how does it block them? Hallmark has four layers of defense.

Layer 1: Pick the Skeleton First, Not the Colors

This is the most critical step, and it goes straight at "structural variety." Before loading any design rule set, Hallmark forces the AI to first pick one of 21 named "macrostructures." These aren't color schemes; they're the skeletal forms of a page, where the heading goes, how body copy is laid out, what serves as dividers, the tone of the buttons, how the hero image is handled, all bundled into a single named choice.

• Stat-Led: for cases where data is the core highlight to emphasize.
• Workbench: for cases centered on functional operations and workflow demos.
• Manifesto: for cases that present a statement or set of values.
• Letter: for cases that need to present content in an epistolary style.
• Bento Grid: for cases with lots of subdivided content, or multiple entry points of equal importance.
• …

You can browse more macrostructures here.

There's also a mandatory diversification rule here: within the same project, two consecutive generations may not use the same macrostructure. Hallmark also checks the project for any history (see Layer 3), and if it finds one, it must pick something different. That's why two pages made by Hallmark "don't look alike."

Before picking, check the target codebase for a /Hallmark · macrostructure: · .../ comment in any existing CSS file. If you find one, your pick must be a different macrostructure. No two consecutive Hallmark outputs in the same project share a macrostructure.

Layer 2: 20 Themes + a Custom Branch

Once the skeleton is set, it's time to "get dressed." Hallmark ships with 20 named themes: Specimen, Terminal, Midnight, Garden, Newsprint, Brutal, and more. Each theme is a full OKLCH palette + font pairing + textural language. They rotate in clusters across 4 "genres" (editorial / modern-minimal / atmospheric / playful).

When your request carries a clear brand intent (you name a brand color, hand over a batch of specific mood words, or flat-out say "make it unique"), it will mix a bespoke OKLCH palette + free-font pairing just for you.

Layer 3: Self-Critique + Project Memory

Before running those 58 gates, Hallmark also requires the AI to first score its own design along 6 axes, 1–5 points each. Any axis below 3 means it has to rework the design before moving on:

Axis	What it asks
Philosophy	Does the page take a clear stance, or is it just a layout?
Hierarchy	Can you tell primary from secondary from tertiary within 2 seconds? Or is everything equal weight?
Execution	Are the details, stroke widths, whitespace, focus rings, contrast, all within spec?
Specificity	Does it look highly relevant to this specific request, or like a "one-size-fits-all" generic page?
Restraint	Has every element that doesn't need to exist been removed?
Variety	Does this output differ structurally from earlier outputs in the project, or did it just swap colors?

Hallmark writes a .hallmark/log.json in the project root, recording which skeleton and which theme each generation used. On the next run it reads this file first, ensuring the new page differs from the recent few.

This is the mechanism that lets "structural variety" hold up across multiple pages, it gives the AI a memory of "what I did last time."

Layer 4: 58 Slop-Test Gates

This is the core of how Hallmark turns "taste" into "engineering." Before delivering any page, the AI must run the output through 58 slop tests, and the answer to every single one must be "no."

A few examples:

• Is the heading font Inter / Roboto / Open Sans / system default?
• Is there a purple-blue gradient? Including a gradient heading via background-clip: text?
• Is there a three-equal-column, icon-over-title card grid?
• Is the hero "everything centered"?
• Are the headings or display type italic?
• Did it use transition: all? Is hover:scale-105 used all over the page?
• Does the page scroll horizontally at 320px mobile width? Does clickable text wrap onto two lines?
• Did it use emoji like ✨🚀⚡ as feature icons?

You can view all 58 gates in full here.

Hallmark's Four Modes of Behavior

Hallmark has 1 default behavior and 3 verbs, which happen to cover the three most common situations an indie developer runs into.

Fresh Design (Default)

You don't need to memorize any command, just say "help me build a landing page for X." But the first thing Hallmark does is ask you three questions, a step it treats as non-skippable discipline:

Before I get started, I need three things:

1. Audience, who's going to use this? What do they already know?
2. Purpose, what's the single action this page should drive? (Sign up? Subscribe? Read? Buy?)
3. Tone, pick a style: editorial / brutalist / soft / utilitarian / luxe / playful / technical / austere.

You can also just say "you decide," and it'll infer for you, explicitly telling you what it inferred so you can course-correct.

Then it announces its choices to your face, "Skeleton: Workbench. Theme: Midnight. Difference from last time: different display font + accent color", before it starts writing code. Once done, it runs the 58 gates and finally hands you a preview summary you can scan in 5 seconds.

Auditing an Existing Design

This is the most underrated verb. If you've got a site that "just feels off somewhere but you can't say where," just run:

hallmark audit ./src/pages/index.astro

It only reads your current design, scores it against that AI tell list, and outputs a tiered list of issues. It won't touch any code.

[critical] Purple gradient hero — index.astro:42
  The most recognizable AI aesthetic
  → Switch to a single anchor color, drop the gradient background
[major] Inter everywhere — globals.css:8
  A one-font page is a template page
  → Pair it with a distinctive display font
...
Summary — 3 critical · 5 major · 2 minor
Verdict — [ships as slop | reads as AI-generated | close, fix the minors]

For a team with no designer, this is like getting a design review for free. You could even use just this verb and treat it as a checklist tool.

Borrowing from Someone Else's Great Design

See a website or screenshot you love and think, "I want to learn from it without copying it"?

hallmark study <screenshot | URL>

You paste or upload a design image you admire, or paste the URL of a reachable page. Hallmark extracts its DNA, including the overall architecture, the archetypal paradigm, the font pairing, and the primary color baseline, and generates a diagnostic report.

You can choose to rebuild your own content on the extracted design core, export a reusable design.md core document, or just keep the diagnostic report and stop there.

If you think this command lets you clone someone else's website, you'll be disappointed. Hallmark refuses pixel-perfect cloning and refuses paid template sites (ThemeForest, Framer/Webflow templates, Dribbble shots are flat-out rejected). It extracts "structure and taste," not "someone else's specific pixels." For fonts it only names a "role + candidates," and for imagery it never lifts the original, generating only structurally equivalent placeholders or asking you to supply your own assets.

Redesign

Whether after an audit or a study, once you're clear that the design you want isn't the current style, you can move into the redesign phase.

hallmark redesign <target> [--mood <name>]

This command extracts the target's content and design intent, then redesigns the visual structure. Worth noting: redesign behaves differently from a fresh design (i.e. the command with no arguments), it's more restrained:

• It only reworks the visual and interaction layers, and by default won't delete production files unless you explicitly ask, or you've approved a file-level plan that spells out the deletions.
• By default it edits the specified page/component files in place, or adds new components/markup and wires them into existing routes.
• If the rework requires removing multiple components, replacing the route tree, or consolidating the whole app into a single brand-new page, it must pause and confirm with you first.
• It treats PDFs, READMEs, .md docs, technical docs, transcripts, and slide decks as reference material for understanding the product, not as page body copy by default. Unless you explicitly ask it to reproduce the text verbatim, it will summarize and rewrite the content.
• Before editing starts, it lists every file it plans to modify, create, and delete; any file deletion requires your explicit confirmation.

This is what "structural variety" looks like when it lands on one specific requirement.

A Real-World Example

I used Hallmark to design a "personal travel album" page. Take a look at the two different versions below.

Version one:

---

Version two:

A Self-Check Checklist for AI Interfaces

Even if you don't install Hallmark today, the checklist below will help you spot, at a glance during code review, the tells you (or an AI) have planted.

Structure Layer

• [ ] Is my page yet another Hero → three cards → CTA → Footer? Swap the skeleton.
• [ ] Does every section have an 01 / FEATURES eyebrow label on top? Drop them all by default.
• [ ] Do all the sections share the exact same whitespace rhythm? Vary it.

Visual Layer

• [ ] Is there a purple-blue gradient? (backgrounds and text both count) Drop it, use a single anchor color.
• [ ] Are heading and body the same Inter? Pair it with a distinctive display font.
• [ ] Is the hero everything-centered + full-screen height? Break the symmetry, shift left or right.
• [ ] Are there italic emphasis words in the headings? Switch to weight or color instead.
• [ ] Did you use pure #000 / #fff? Nudge them slightly toward your anchor color.
• [ ] Are the feature icons ✨🚀⚡ emoji? Swap in a consistent icon library, or just use text.

Interaction Layer

• [ ] Did you use transition: all? Specify the exact properties.
• [ ] Does every card hover:scale-105? One element, one signal.
• [ ] Does the focus ring fade in? It must appear instantly (keyboard users need it).
• [ ] Did a "save succeeded" celebration toast pop up? For effects the user can already see, stay silent.

Responsive Layer

• [ ] Does it scroll horizontally at 320px mobile width?
• [ ] Do the button / nav labels wrap onto two lines? Shorten the copy or use nowrap.

Detail Layer

• [ ] Are the quotes straight " or curly "? Are dashes -- or —?
• [ ] Are placeholder names "Jane Doe," and products "Acme / Nexus"? Swap in specific names that fit the context.

The checklist itself is worth its weight, it breaks a "senior designer's intuition" down into checkable actions.

When Should You Use Hallmark?

If any one of the situations below fits you, Hallmark is worth a try:

• You're an indie developer / a small team with no designer, and you need a landing page that doesn't look mediocre.
• You're moving fast on an MVP and want it to look professionally designed.
• You have an old site that "just feels off," and you want to build an alternate version to look at before deciding whether to refactor.
• You saw a design you liked and want to borrow its design thinking (rather than copy it outright).

---

If you are interested in Claude code or Codex skills, please find the blog here for more details.

---

FAQ

Q: Is Hallmark a component library or a website generator?

No. It gives you neither ready-made components nor a directly generated website. It's a "design discipline," packaged as a skill that takes over the AI assistant you already use, blocking "AI slop" with an explicit set of rules before the AI gets to work.

Q: If I write a more detailed prompt, can I avoid "AI slop"?

Hardly. "AI slop" is the inevitable result of the model regressing toward the mean of its training data. What you're fighting isn't a single instruction, but the gravity of millions of samples. You say "make it look designed," the model nods, then slides right back to that mode. Hallmark's approach is to use explicit rules to block that retreat at the root.

Q: Which AI coding assistants does it support?

Claude Code, Cursor, and Codex all work. Installing takes just one line: npx skills add nutlope/hallmark.

Q: What's the difference between audit, study, and redesign?

audit only reads the current design and scores it against the AI tell list, without changing code; study extracts the design "DNA" of a screenshot or URL for you to borrow rather than copy; redesign redesigns the visual structure and, by default, doesn't delete production files. With no arguments, it's "fresh design" mode.

Q: Can study clone someone else's website directly?

No. Hallmark refuses pixel-perfect cloning and refuses lifting from paid template sites. It extracts "structure and taste," never lifts the original imagery, and generates only structurally equivalent placeholders or asks you to supply your own assets.

Q: If I don't install Hallmark, is this article still useful?

Yes. The "self-check checklist for AI interfaces" here is itself a checkable list that lets you spot, at a glance during code review, the tells you or an AI have planted.