Anti-Slop Design Skills for Coding Agents: Impeccable, Hallmark, Taste Skill, Interfaces Skills and frontend-design

In this blog post, we will see why anti-slop design skills for coding agents took over GitHub Trending this week, what each of the five main ones actually does, and a 40 line script that shows what a “slop linter” checks under the hood. Every version, licence and star count below was checked on November 5, 2026.

Table of Contents

1. The short answer
2. Why design skills are trending this week
3. What a slop linter checks, in 40 lines of Python
4. Impeccable
5. Hallmark
6. Taste Skill
7. Interfaces Skills
8. Anthropic frontend-design
9. Side by side
10. Which one I would install first
11. FAQ
12. How this ties to ai.dosa.dev

The short answer

Anti-slop design skills are folders of instructions, and often scripts, that a coding agent loads before it builds UI. They ban the default look (Inter, purple gradients, card grids) and many lint the result. Start with Impeccable for existing apps, Hallmark or Taste Skill for new marketing pages, and Interfaces Skills for reviews.

Why design skills are trending this week

Four of the top twelve repositories on GitHub’s weekly trending list for October 30 to November 5 are design skills for coding agents:

• Impeccable: about 103,300 stars, up roughly 10,900 in the week.
• Hallmark: about 48,300 stars, up roughly 7,600. Together AI announced a ground-up v2 rebuild on October 22.
• Taste Skill: about 110,000 stars, up roughly 5,900, with v2.5.0 tagged on November 4.
• Interfaces Skills (jakubkrehel/skills): about 10,900 stars, up roughly 1,900, ranked eighth for the week.

Hallmark also has a Hacker News thread, and the skills CLI from Vercel Labs that most of these install through shipped v1.7.5 and v1.7.6 on November 2 and 3. So that is GitHub Trending, release notes, Hacker News and the installer’s own changelog all pointing at one problem: agents ship working UI that everyone can tell was generated.

Anthropic’s own frontend-design skill names the pattern: “a big number with a small label, supporting stats, and a gradient accent is the default treatment.” Ask five agents for a landing page and you get the same hero, the same three feature cards and the same violet-to-blue gradient.

What a slop linter checks, in 40 lines of Python

Before the tools, here is the core idea with the Python standard library only. The page below has every tell people complain about: Inter, a tracked-caps “eyebrow” label, gradient headline text and grey text on purple.

<!doctype html>
<html><head><style>
body { font-family: Inter, sans-serif; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; }
h1 { background: linear-gradient(90deg, #8b5cf6, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: #9ca3af; background: #6d28d9; }
</style></head><body>
<p class="eyebrow">Introducing</p>
<h1>Ship faster with AI</h1>
<p class="muted">The all-in-one platform for modern teams.</p>
</body></html>

And a tiny checker with four pattern rules plus a real WCAG contrast calculation:

import re
import sys

RULES = {
    "generic-font": r"font-family:\s*['\"]?(Inter|Roboto|Arial)\b",
    "gradient-text": r"background-clip:\s*text",
    "purple-blue-gradient": r"linear-gradient\([^)]*#(8b5cf6|7c3aed|6d28d9)[^)]*#(3b82f6|2563eb)",
    "tracked-caps-label": r"text-transform:\s*uppercase;\s*letter-spacing:\s*0\.[1-9]",
}


def hex_to_luminance(hex_color):
    rgb = [int(hex_color[i:i + 2], 16) / 255 for i in (0, 2, 4)]
    lin = [c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4 for c in rgb]
    return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]


def contrast(fg, bg):
    a, b = sorted([hex_to_luminance(fg), hex_to_luminance(bg)], reverse=True)
    return (a + 0.05) / (b + 0.05)


css = open(sys.argv[1]).read()
findings = [name for name, pattern in RULES.items() if re.search(pattern, css, re.I)]

for fg, bg in re.findall(r"color:\s*#([0-9a-f]{6});\s*background:\s*#([0-9a-f]{6})", css, re.I):
    ratio = contrast(fg, bg)
    if ratio < 4.5:
        findings.append(f"low-contrast ({ratio:.2f}:1, needs 4.5:1)")

for finding in findings:
    print("FAIL", finding)
print(f"{len(findings)} findings")
sys.exit(2 if findings else 0)

I ran python3 slopcheck.py slop.html with Python 3.12.16, and the output is as shown below:

FAIL generic-font
FAIL gradient-text
FAIL purple-blue-gradient
FAIL tracked-caps-label
FAIL low-contrast (2.80:1, needs 4.5:1)
5 findings

It exits with code 2, the same convention Impeccable’s detector uses for “findings present”, so you can drop it into CI.

What surprised me is how far 40 lines gets you, and how fast it stops. The contrast check is objective. The other four are just “this is what the average page looks like.” A page can pass all five and still look generated, because layout sameness (hero, three cards, testimonial, CTA) is not a regex. That gap is where the real tools differ: some add more rules, some add a rendered browser check, and some add a second agent with fresh context to judge the result.

Impeccable

What it does: Impeccable gives your agent a design vocabulary of 24 commands such as critique, audit, polish, bolder, quieter and harden, plus a deterministic detector with 62 rules that runs with no LLM and no API key. critique ranks fixes against usability heuristics, and audit ranks accessibility, performance, theming and responsive findings from P0 (blocking) to P3 (polish).

Who it is for: Teams with an existing product UI who want the agent to fix and review, not reinvent the brand. It is also the only one here with a CI story.

Facts: Apache 2.0, by Paul Bakaus, latest release skill-v4.8.0 (October 26, 2026), about 103,300 GitHub stars, free. Installs into Claude Code, Cursor, Codex CLI, Copilot, Gemini CLI, OpenCode, Devin and more.

Try it

1. From your project root, install the skill and accept the design hook when asked:

npx impeccable install

2. Reload your agent and run /impeccable init (in Codex, $impeccable init). It writes a PRODUCT.md the other commands read.

3. Run the detector without the agent, on source or on a running page:

npx impeccable detect src/
npx impeccable detect http://localhost:3000
npx impeccable detect --github src/

The last form turns each finding into a GitHub Actions annotation on the offending line, which arrived in 4.8.0.

Honest limitation

The npm package is a launcher that downloads a platform engine binary. 4.8.0 added digest checks on that download, which is good, but it means a locked-down CI runner needs network access on first run. And a clean detector scan only means the 62 rules passed; the docs say so themselves and point you to critique for the rest.

Hallmark

What it does: Hallmark builds new pages. It deals three themes from a catalogue of about fifty materials (paper, type, colour, surfaces), builds one idea per screen, then lints it with sloplint (static checks, plus a real browser at eight widths with --render). A cold review pass comes last. Gates come in tiers: Floor (never ships, such as contrast or a broken phone layout), Reflex (model defaults you can overrule with a reason) and Finish (craft detail).

Who it is for: Anyone generating marketing or product pages from a prompt, especially with open models. /hallmark redesign ./site and /hallmark audit ./index.html cover existing pages, but only when you name it.

Facts: MIT, made by Together AI (Hassan El Mghari), v2.0.0 in package.json announced October 22, 2026, about 48,300 GitHub stars, free, no API key needed. There are no GitHub Releases; versions live in the skill files.

Try it

1. Install globally for every supported agent (Node 18 or later):

npx skills add nutlope/hallmark -g

2. For the browser render checks, add Puppeteer core. You also need Chrome installed:

npm i -g puppeteer-core

3. In Claude Code, run /hallmark a site for a small bike repair shop that takes bookings. In Codex, use $hallmark.

Honest limitation

The Hacker News thread was blunt: several commenters said the README gallery still “looks like slop” and that every design skill they tried converges. Hallmark’s answer is a log in .hallmark/log.json so consecutive builds are dealt different directions, but that only helps across your own builds, not across everyone’s. Without Puppeteer and Chrome you only get the static tier of checks.

Taste Skill

What it does: Taste Skill (design-taste-frontend) is art direction for websites, built from a study of 247 curated sites from One Page Love and Awwwards. A script deals three of 20 researched directions and the agent picks one, pulls real, credited pictures from open collections, then checks the page in a browser at 1440, 1024, 768 and 390 pixels. v2.5.0 rebuilt it around “company websites at the figma.com and x.ai bar” with 19 HTML product UI fragments for software pages.

Who it is for: Developers who want a polished one-off marketing site and are willing to spend tokens on it.

Facts: MIT, by Leonxlnx, latest release v2.5.0 (November 4, 2026), about 110,000 GitHub stars, free, no API keys. Needs Node 22 or later and Chrome, Edge or Chromium.

Try it

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

In Claude Code you can install it as a plugin instead with /plugin marketplace add Leonxlnx/taste-skill, then /plugin install taste-skill@taste-skill.

Honest limitation

Cost. The README says a build takes roughly 30 to 45 minutes and “a few hundred thousand tokens.” That is fine for a launch page and silly for a settings screen. It also needs network access to find pictures, so offline or air-gapped agents get a weaker result.

Interfaces Skills

What it does: Design engineer Jakub Krehel’s pack of about 20 skills. better-interface routes a screen through better-accessibility (WCAG 2.2), better-layout, better-writing, better-typography, better-colors and better-ui, then returns one ranked report. interface-review handles a branch, PR or uncommitted change and reports only what that change introduced, and explain-interface explains how a reference site was built.

Who it is for: Product teams who want evidence-backed reviews rather than a new art direction. It is the opposite of Hallmark: it improves what exists.

Facts: MIT, about 10,900 GitHub stars, last push November 2, 2026, free. skills.sh lists about 345,000 total installs across the pack.

Try it

npx skills add jakubkrehel/skills

Then ask your agent to “run better-interface on the checkout flow.” Its own rule is “Evidence, not taste”: “a density, radius or voice you merely disagree with is not a finding.”

Honest limitation

There is no linter or browser harness here. It is all instructions, so quality depends on your model actually opening the screens it claims to review. interface-review is user-invoked only, so another skill cannot chain into it automatically.

Anthropic frontend-design

What it does: One SKILL.md and no scripts. It casts the agent as the design lead at a studio whose client “has already rejected proposals that felt cliché or templated”, asks it to ground choices in the subject’s own world, and warns that “a big number with a small label, supporting stats, and a gradient accent is the default treatment.”

Who it is for: Everyone, as a baseline. It costs almost no context and does not fight the bigger skills.

Facts: Lives in anthropics/skills (about 187,600 stars, up roughly 3,000 this week). The frontend-design folder ships its own Apache 2.0 LICENSE.txt. Free. Also published as frontend-design@claude-plugins-official.

Try it

npx skills add anthropics/skills --skill frontend-design

Or, inside Claude Code, install frontend-design from the official plugin marketplace that Claude Code adds on first launch.

Honest limitation

No verification step. It tells the agent what to avoid but never checks that it did. Pair it with a detector (Impeccable’s, or the script above) if you want anything enforceable.

Side by side

Skill	Best at	Checks its own output	Licence	Stars (Nov 5)
Impeccable	Fixing and reviewing existing UI, CI	62 deterministic rules, source or URL	Apache 2.0	~103.3k
Hallmark	New pages from a prompt	sloplint at 8 widths plus fresh reviewer	MIT	~48.3k
Taste Skill	High-effort marketing sites	100+ browser checks at 4 widths	MIT	~110k
Interfaces Skills	Ranked design reviews	No, instructions only	MIT	~10.9k
frontend-design	Cheap baseline	No	Apache 2.0 (folder)	~187.6k (repo)

Which one I would install first

1. I have a real app and want it to look less generated: Impeccable, and wire npx impeccable detect --github into CI.
2. I am generating a new landing page: Hallmark if you want speed and themes, Taste Skill if you can spend 30 to 45 minutes and the tokens.
3. I want design review on PRs: Interfaces Skills with interface-review.
4. I want something today with zero risk: frontend-design.

What I would skip: installing three of these into one repo. They all try to own “build a new page”, and their instructions conflict. Pick one builder, optionally one reviewer.

One honest caveat on my testing: my sandbox had outbound npm and GitHub access blocked, so I ran the Python example above but could not run the installers. Every install command here is copied from each project’s current README or docs, all updated within the last two weeks.

FAQ

What is AI slop in frontend design?

It is the look an agent produces when nothing steers it: Inter or Roboto everywhere, purple-to-blue gradients, gradient headline text, tracked-caps labels above every heading and a grid of identical cards. Models produce it because it is the statistical average of the web pages they were trained on.

Do design skills work with Codex and Cursor, not just Claude Code?

Yes. All five follow the Agent Skills SKILL.md format, and the skills CLI installs to Claude Code, Codex, Cursor, OpenCode and dozens more. In Codex you invoke them with $name instead of /name.

Are agent skills safe to install?

Treat them like any dependency. Snyk’s ToxicSkills study scanned 3,984 skills from ClawHub and skills.sh in February 2026 and found 36.82% had at least one security flaw and 13.4% had a critical one. Read the SKILL.md and any scripts before installing, and prefer well-known authors like the five here.

Can I lint AI-generated UI without an LLM?

Yes. npx impeccable detect src/ runs 62 deterministic rules with no model or API key, and Hallmark’s sloplint script runs standalone too. The 40 line script in this post shows the same idea for a handful of rules.

Which design skill uses the fewest tokens?

Anthropic’s frontend-design, because it is a single markdown file with no scripts or browser loop. Taste Skill is at the other end, at a few hundred thousand tokens per full build by its own estimate.

How this ties to ai.dosa.dev

Four of the five are already in the directory’s Developer Productivity & Workflow category: Impeccable, Hallmark, Taste Skill and Interfaces Skills. They all install through skills.sh, which is listed too.

If you want general purpose skills rather than design ones, our agent skills libraries roundup covers Superpowers, Matt Pocock Skills and Anthropic’s repo. And since every skill adds context, the context compression tools post is a good next read.

Happy Testing!

Which tell gives away AI-generated UI for you first: the gradient, the font, or the three identical cards?

---

Sources checked on November 5, 2026: GitHub weekly trending snapshots for October 30 to November 5 (githot.dev, gitstock.org); pbakaus/impeccable README, README.npm.md, skill-v4.8.0 release notes and impeccable.style detector docs; Nutlope/hallmark README, SKILL.md v2.0.0, usehallmark.com and Hacker News item 49058547; Leonxlnx/taste-skill README, LICENSE and v2.5.0 release notes; jakubkrehel/skills README, better-interface SKILL.md and skills.sh page; anthropics/skills frontend-design SKILL.md; vercel-labs/skills README and v1.7.5/v1.7.6 release notes; Snyk ToxicSkills report (February 5, 2026).