Skills I give coding agents so their pages don't look generated

You can spot an AI-built landing page from across the room. Purple-to-blue gradient, a centered hero that says “Unlock your potential,” three identical cards with an icon on top of each, a glassy navbar. The copy has a dash every other sentence. None of it is wrong, exactly. It’s the average of every page the model has seen, which is why it looks like nobody made it.

Agents follow written rules well, so most of the fix is giving them better rules. These are the ones I load when an agent works on one of my sites, this one included.

Design rules

Taste Skill is a set of agent skills aimed squarely at the boilerplate look. It pushes on layout, typography, spacing, and motion, and it steers the agent away from its reflex defaults before any CSS gets written. It installs with npx skills add.

Impeccable gives the agent a design vocabulary. Instead of “make it look better,” it can reason about hierarchy, rhythm, and register, and it has commands for critique and polish passes. The piece I find most useful is the detector, which can check UI changes in a pull request and return an exit code. A rule your build enforces doesn’t depend on the agent remembering it.

anti-slop covers UI, text, and code in one ruleset. UI Skills is a catalog you can browse or pull from with npx ui-skills or an MCP server, full of small, specific rules like giving every control a touch target of at least 44 by 44 pixels. make-interfaces-feel-better handles what comes after the layout is right: easing, hover and press states, the little bit of motion that makes a button feel pushed.

Copy rules

Design is half of it. Generated text has its own tells, and they’re easy to list once you’ve noticed them. “Seamless,” “robust,” “leverage.” “It’s not just X, it’s Y.” Lists that always come in threes. A bold label in front of every bullet. Wikipedia’s Signs of AI writing page is the best public catalog I know, and the humanizer skill turns that kind of catalog into something an agent can run. I put anything public through it, including this post.

My own rules on top are short. No em dashes anywhere a visitor can see them. No numbers, testimonials, or client logos I can’t back up. One label per action, so the contact button says “Email me” everywhere instead of three slightly different phrases.

References, not templates

Component libraries like shadcn/ui, Magic UI, Aceternity, and HeroUI are good building blocks. The trouble starts when every agent pulls the same hero section from the same library, and you’re back to the generic look. I use them for primitives and look elsewhere for layout.

Refero’s style collection is good for studying how real products handle a given kind of page. Study it, then build your own. For motion, Motion, GSAP, Lenis, and Anime.js all have solid docs. Tell the agent which one you want before it reaches for whatever showed up most in its training data.

Context7 helps here too. It feeds the agent current docs for a library, so it doesn’t write against an API from two versions ago.

How I combine them

One design skill, one copy skill, a short list of hard rules specific to the site, and screenshots at phone and desktop widths before anything ships. Loading every design skill at once mostly gets you an agent that hedges between them. Pick the one whose taste fits what you’re building, and make the rest of your rules concrete enough that a script could check them.