跪拜 Guibai
← All articles
AI · Open Source · News

Hallmark: A Design Skill That Shuts Down the AI-Slop Defaults in Generated Pages

By 冬奇Lab ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Unconstrained coding assistants produce a recognizably flat default look on every page; Hallmark replaces subjective "design taste" with machine-checkable gates, so teams can fail a build in CI or an editor hook on an eyebrow label or a fake form instead of eyeballing each output.

Summary

Hallmark exists to make assistant-generated pages stop looking generated. Instead of nudging models with fancier prompts, it writes the telltale signs of "AI slop" into rules — eyebrow kickers above headings, letterspaced uppercase labels, one gradient word in a title, card-inside-card layouts, a mail-capture box on every page, submit buttons that do nothing — and then checks them with tooling. The build flow starts with a preflight that reads the project's fonts, palette, and locked design.md, then deals three of 48 material themes while a log prevents consecutive builds from converging. Only the hero is built first; after a fresh-context subagent reviews it, the rest of the page follows.

The checker is sloplint, a zero-dependency script that renders pages in a real browser and measures above-the-fold fit, contrast, focus rings, section rhythm, and whether text collides with edges. Gates are tiered into Floor (never waivable), Reflex (waivable with a recorded reason), and Finish (advisory). A separate fresh-context reviewer, whose criteria the builder never sees, gives a final ship or rebuild verdict. For existing pages, `/hallmark redesign` records every link and form field before touching anything, then fails the rebuild if any of them disappears. Photos come from a 755-image Wikimedia Commons library, credited on the page, and fabricated numbers, testimonials, and logos are banned outright.

Takeaways
— Hallmark runs as a Skill in Claude Code, Codex CLI, Cursor, and OpenCode, installed via `npx skills add nutlope/hallmark -g` (Node 18+, Chrome and puppeteer-core required for browser checks).
— The 48 themes are material definitions — paper, type, colors, surfaces, components, texture — each under 8 KB, and a build gets three dealt themes picked from a log to avoid convergence.
— sloplint checks every page at 8 widths and measures contrast, focus rings, hero fit, section rhythm, and text clipping; it emits FAIL, REFLEX, WAIVED, WARN, ANSWERED, or NOTE per gate.
— Floor rules are never waivable; the list includes no fabricated metrics or logos, no purple-to-blue gradients, no `transition: all`, and no `:focus-visible` gaps.
— A fresh-context subagent gives the final verdict (recapture, rebuild, fix, or ship), and SKILL.md instructs the builder to never open the review file.
— redesign records every link, form field, event handler, and heading with `sloplint --before`, then fails the rebuild if `sloplint --kept` finds any of it missing.
— The photo library is 755 openly licensed images from Wikimedia Commons only, credited in the footer; Unsplash and Pexels are rejected because their terms forbid AI tool selection.
— Repo metrics on 2026-10-27: about 37,900 stars, 1,970 forks, v2.0.0, MIT license, created 2026-04-27 by Nutlope (Hassan El Mghari) under Together AI.
Conclusions

Turning aesthetic judgment into a numbered, machine-checkable gate list means the author is betting that "AI flavor" has stable fingerprints, and the roadmap shows those fingerprints drift — cream paper and pill buttons already read as generated.

The waiver ledger turns a design dispute into an auditable record: you can disagree with a rule, but the exception is logged with protecting evidence, and three repeat waivers are pushed back as "your house style."

The redesign failure-on-loss rule is a meaningful safety precept for any agent-driven refactor: record the whole old state before rewriting, and treat any drop as a failed outcome.

The subagent reviewer working in a fresh context, with the builder barred from seeing the review criteria, is a deliberate guard against the model gaming its own grader.

Concepts & terms
Skill
A packaged capability for coding assistants like Claude Code or Codex CLI, installed into a folder (e.g. `~/.claude/skills/`) and invoked by a slash command or an inline mention. Hallmark is a Skill that bundles rules, scripts, and a prompt workflow.
Gate tiers (Floor / Reflex / Finish)
Hallmark's system for classifying design rules: Floor rules can never be waived and fail a build, Reflex rules are model defaults that can be waived with a recorded reason, and Finish rules only give advisory feedback without blocking delivery.
sloplint
A zero-dependency linting script Hallmark ships, named after "slop" (AI-generated visual noise) plus lint. It reads HTML, CSS, framework components, and Tailwind classes, and with `--render` uses a real browser to measure contrast, focus rings, above-the-fold fit, and other layout properties against the gate list.
From the discussion
Featured comments
西索种西瓜 1 likes

The rule forbidding `transition: all` in Floor is harsh, but rightly so. Models default to writing `transition: all .3s`, animating width and height together, causing layout jitter that's hard to debug. The fake form rule is also practical: clicking submit only shows a thank-you, the request never actually fires — that's really common in landing pages. Rules divided into Floor / Reflex / Finish are more reliable than just telling the prompt to 'make it design-savvy'.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗