125 lines
3.4 KiB
Markdown
125 lines
3.4 KiB
Markdown
1/
|
||
|
||
I curated 7,842 lines of markdown to fight AI slop.
|
||
|
||
Not a product. Not a framework. A **skill file** for AI agents that build websites.
|
||
|
||
Because every AI agent I work with produces the same five patterns:
|
||
|
||
Purple-to-blue gradients. Centered hero. Three identical feature cards. "Trusted by 10,000+." Lorem ipsum in disguise.
|
||
|
||
That's not design. That's the default output of an LLM. 🧵
|
||
|
||
---
|
||
|
||
2/
|
||
|
||
The patterns are predictable because they're in every training set ten thousand times.
|
||
|
||
`linear-gradient(135deg, #667eea 0%, #764ba2 100%)` is the visual shorthand for "an AI made this."
|
||
|
||
`border-radius: 9999px` on every button is the structural shorthand for the same thing.
|
||
|
||
If your output looks like this, it doesn't matter how good your prompt was. It reads as generated.
|
||
|
||
---
|
||
|
||
3/
|
||
|
||
So I wrote a skill that says "no."
|
||
|
||
Not in a hand-wavy way. With **28 specific anti-patterns**, each with an example and a replacement.
|
||
|
||
Not "avoid generic design." Instead: *Purple-to-blue gradients are slop. Replace with warm paper + ink + editorial red.*
|
||
|
||
Not "use good typography." Instead: *Fraunces + Inter + JetBrains Mono. Hero at 60–160px. Display tracking -0.035em. All-caps tracking +0.14em.*
|
||
|
||
---
|
||
|
||
4/
|
||
|
||
It's modular. 18 files. Each loadable independently.
|
||
|
||
```
|
||
SKILL.md Identity, principles, process
|
||
aesthetics.md 7 style directions
|
||
*-patterns.md 22 sub-styles (Linear, NYT Mag, Bandcamp, ...)
|
||
typography.md Type system
|
||
color.md Token system
|
||
layout.md Grids, spacing, responsive
|
||
anti-patterns.md What to reject
|
||
components.md What to build
|
||
motion.md What to animate
|
||
content.md What to write
|
||
a11y + perf The floors most agents skip
|
||
checklist.md Pre-ship QA
|
||
```
|
||
|
||
The agent pulls only what it needs. Doesn't burn context on irrelevant guidance.
|
||
|
||
---
|
||
|
||
5/
|
||
|
||
The most important file is `aesthetics.md`.
|
||
|
||
It defines 7 directions — Refined Minimal, Editorial, Swiss, Brutalist, Soft, Technical, Playful — and tells the agent to **pick one, commit to it, don't mix them.**
|
||
|
||
Because "modern web design" as a single style is itself AI slop. The best sites are opinionated. The skill teaches the agent to be opinionated.
|
||
|
||
---
|
||
|
||
6/
|
||
|
||
It also teaches the agent to **write specific copy.**
|
||
|
||
❌ "Empowering businesses to thrive"
|
||
✅ "Ship features 3x faster"
|
||
|
||
❌ "Welcome to [Brand]"
|
||
✅ "Design that doesn't need explaining."
|
||
|
||
❌ "Fast. Simple. Beautiful."
|
||
✅ "A magazine for readers, not scrollers."
|
||
|
||
The cardinal rule: write the way you'd talk to a smart friend, not a marketing department.
|
||
|
||
---
|
||
|
||
7/
|
||
|
||
Last thing: a pre-ship checklist of 70+ items.
|
||
|
||
Not "does it look good?" — that's vibes. Specific questions:
|
||
|
||
- Hero headline 60–160px?
|
||
- One accent color, used <10% of pixels?
|
||
- No `transition: all`?
|
||
- Focus-visible defined on every interactive element?
|
||
- Real names, real numbers, no lorem ipsum?
|
||
- `prefers-reduced-motion` honored?
|
||
- Would a senior designer ship this?
|
||
|
||
If 6+ answers are "no" — keep iterating.
|
||
|
||
---
|
||
|
||
8/
|
||
|
||
It's open source. MIT license.
|
||
|
||
If you build AI agents that touch frontend — Cursor, Claude Code, Cline, custom — this should be in your context window.
|
||
|
||
If you design and use AI as a tool, this is the missing piece between "AI-generated" and "AI-assisted."
|
||
|
||
Link in next tweet. /fin
|
||
|
||
---
|
||
|
||
9/
|
||
|
||
[link to repo / gist]
|
||
|
||
If it works for you, ship something good with it. That's the thanks.
|
||
|
||
If it doesn't — open an issue. The skill is meant to evolve with the slop it pushes against.
|