Download My 2 Claude Code Frontend Design Skills – Kill AI Slop

Every AI-designed website looks the same now. So I wrote the rules down

– Elizabeth Sramek

Somewhere around the point “vibe coding” stopped being a joke and became how half the internet gets built (call it late 2025, the exact date doesn’t matter), every AI-generated website started looking like the same website. Different logo, different copy, same everything else.

Cream or beige background. A purple-to-blue gradient blob floating behind the hero. Inter, set in a headline that’s technically fine and instantly forgettable. Rounded corners on absolutely everything. A three-column feature grid with an icon, a heading, and two lines of copy, repeated exactly three times. A glassmorphism navbar. An FAQ accordion right before the footer.

I could keep going, but you’ve seen it.

You’ve probably built it, by accident, more than once.

I got tired of fighting the prompt

For a while my workaround was the same as everyone else’s: collect prompt snippets, paste in a longer and longer list of “don’t do this, don’t do that,” re-explain the same taste from scratch at the start of every project, and hope the model held onto it past the third message. It worked, sort of, for exactly as long as I kept babysitting it.

At some point I stopped treating this as a prompting problem and started treating it as a documentation problem. If I already knew exactly which defaults I wanted banned and which visual language I wanted instead, that belonged in something durable, not in a chat message I’d have to reconstruct every time. Claude Code has a feature for exactly this, called a skill: a set of instructions that loads automatically when the work calls for it, instead of living and dying in one conversation.

So I wrote two of them.

Triumphoid Anti-Slop Frontend: the discipline

This one isn’t about one look. It’s a process, and it runs before a single line of code gets written. It makes the model state a one-sentence “design read” of the actual brief, declares a visual thesis instead of defaulting to whatever’s fashionable, and sets three dials that gate every layout and motion decision downstream: how much asymmetry, how much motion, how dense the page is.

Then it runs the brief against a genuinely long catalogue of things that quietly make a site look AI-made: beige-and-brass “premium artisan” palettes, the purple gradient glow, three identical feature cards, an eyebrow label above every single section, duplicate CTAs wearing different labels, div-based fake product screenshots standing in for real images, and an absolute, zero-tolerance ban on the em dash, because at this point it’s the single most reliable tell that a paragraph was never touched by a human editor.

Before anything is allowed to ship, it runs a mechanical pre-flight checklist: contrast, consistency locks on color and shape, hero composition limits, whether the motion on the page is actually justified or just there because it was easy to add. If a single box can’t be honestly ticked, it’s not done.

Triumphoid Industrial Frontend: the look

The second skill is opinionated on purpose. It’s what I reach for when the brief wants something raw and mechanical instead of another soft SaaS interface: the “Swiss manual” register, engineering documentation crossed with instrument-panel confidence.

It offers four selectable visual systems, and the rule is to commit to exactly one per project:

• Swiss Industrial Print, matte paper, carbon-black ink, one hazard-red accent, like a 1960s machinery manual.
• Tactical Telemetry, a near-black CRT with phosphor-white text and scanlines, built to feel like it’s reporting live data.
• Machine-Shop Signage, satin steel grey, safety yellow, hazard stripes, like a tag riveted to a piece of equipment.
• Blueprint Drafting, cyanotype blue with white linework, safety-orange accents, like an engineering drawing before CAD existed.

Under whichever archetype is picked, typography does almost all the structural work instead of imagery: an extreme-scale black-weight grotesque for the skeleton of the page, small tracked-out monospace for every piece of metadata and navigation, and a deliberately degraded serif used rarely, only for texture. Layout runs on a strict engineered grid with square corners and real borders, never a rounded card standing in for hierarchy. And motion is treated like instrumentation: one pinned scroll sequence, scroll-driven reveals tied to actual geometry instead of a fade, one consistent mechanical hover language, and nothing that moves just because a library made it easy to move.

This is the exact skill that built the site you’re reading this on

The freshly redesigned elizabethsramek.com wasn’t a mockup for this post. It’s the actual output of running Triumphoid Industrial Frontend, backstopped by Anti-Slop’s pre-flight checklist, on my own brief. If you’re looking at this site right now, you’re already looking at what these two skills produce when you let them run all the way through instead of stopping halfway.

Get them!

Both skills are free, open, and documented on GitHub:

• The general discipline for any brief

• The Swiss-manual/tactical visual system

Drop either one into your Claude Code skills folder and stop re-explaining your taste from scratch every time you open a new project.

All three preview mockups are published as Artifacts and ready to view:

Tactical Telemetry — Triumphoid Industrial Frontend archetype: CRT dark, phosphor white, scanlines, ASCII-bracket data panel.

Northfield Studio — Triumphoid Anti-Slop Frontend: an asymmetric architecture-studio hero (cold-luxury silver-grey + cobalt, condensed display type, no rounded cards, no gradient) showing the process skill applied to a non-industrial brief.

Swiss Industrial Print — Triumphoid Industrial Frontend archetype: matte paper, carbon ink, hazard red, bleeding extreme-scale type.

In WordPress, it includes the backend editor style too!