I built skill.md file to stop AI from Generic UI SLOP

Here's the problem. Every AI coding agent (Cursor, Codex, Claude Code, whatever) is trained on millions of websites. Most of those websites are average. So when you prompt "build me a landing page," the model gives you the average of everything it's seen: a centered hero, a purple gradient, three equal feature cards, Inter font, ease-in-out, done. It's not broken. It's just mediocre by default.

I'm 17 and I got tired of fighting this in every conversation. So I built VibeCurb: a collection of strict constraint skill files, that force AI agents to actually think about design before they touch code.

How it works

Every skill follows the same four-phase pipeline:

1. Design Read - The agent reads your reference image, existing codebase, or brief and extracts design signals: typography, palette, layout, focal element, spacing. No code is written here.

2. Quality Gate - The extraction has to pass before the agent is allowed to generate anything. It must prove it understands the design direction, not just spit out defaults.

3. Precise Build - Code generation happens against the extraction, not against the model's built-in idea of what a "website" looks like. Each skill has its own build sequence.

4. Visual Diff - The output is checked against the reference using PASS/FAIL tables across composition, typography, color, motion, and responsiveness. If it drifts, it gets caught.

There's also an inline drift rejection layer. It catches known AI defaults (CSS keyword easings like ease-in-out, AI-purple #7c3aed gradients, generic glassmorphic cards, placeholder Lorem ipsum content) and flags them before they make it into the output.

The skills

Each skill constrains a specific problem space:

• awwwards-hero - Hero sections only. Six documented architectures (Cinematic Center, Editorial Split, etc.) with implementation blueprints. The agent picks one and commits.
• awwwards-sections - Pricing tables, bento grids, feature highlights, footers. Same pipeline, different element constraints.
• awwwards-motion - Full motion system. Spring physics, scroll-linked choreography, mandatory animation maps for every visible element. 60fps enforcement. prefers-reduced-motion gating, no exceptions.
• pixel-perfect - Screenshot in, exact code replica out. Every font, color, and spacing value matched.
• visual-redesign - Feed it ugly-but-functional code, get back something that looks designed without breaking any logic.
• imagegen-frontend and brandkit-gen - Generate premium reference images and identity boards that feed into the other skills as input.

The technical bit

Each SKILL.md is a standalone markdown file with YAML frontmatter. No runtime dependency, no npm package to install. You drop the file into .cursor/rules/, .agents/skills/, or paste it directly into a conversation. Any agent that reads markdown context can consume it.

# CLI install
npx vibecurb-cli add awwwards-hero

# Or just copy the SKILL.md file manually

Each phase gates the next. The agent can't skip ahead because the instructions explicitly block code generation until prior phases pass. It's not a suggestion, it's a hard protocol.

Works with Cursor, Claude Code, Codex, ChatGPT, Gemini CLI, v0, Lovable, AI Studio. Anything that reads markdown context.

Why constraints, not prompts

A prompt says "make it look good." A constraint says "extract the palette first, prove you understand the typography hierarchy, then build against the extraction, then diff against the reference." The difference is that constraints are verifiable. The agent either passed the quality gate or it didn't. There's no ambiguity.

AI defaults to the mean. VibeCurb is the constraint that pulls it off the mean.

Live Showcase: vibecurb.pages.dev
GitHub: github.com/Yu-369/VibeCurb

Comments

[Reid Marlow]

Per-project is the right default. The missing piece for me is usually a tiny negative prompt for the project too. Not just “make it less generic”, but banned shapes like centered hero, three cards, gradient blob. Have you found the skill file works better as constraints, or as a short library of approved patterns?

[Lohit sai Ganta]

It's both. The awwwards-hero skill has a strict library of 6 approved architectures, and the agent has to commit to one. But the negative constraints are what actually stop the slop. I explicitly bannedload bunch of things which make the output design worse

[Dmitry Sergeev]

finally someone addressing the generic tailwind look. do you think a global rules file works better than per-project ones?

[Lohit sai Ganta]

Telling it "make it look good" never works. You have to literally ban the default utility classes and force it to commit to a real design structure before it writes any code. That's what my skills help with

[Lohit sai Ganta]

Per-project, 100%.

If you set VibeCurb skills globally, AI will hallucinate

Global rules are fine for baseline stuff ("always use TypeScript", "never use any"). But design constraints are highly context-dependent. You don't want 'em to conflict

Keep them scoped. Drop the specific SKILL.md, or just paste it straight into the chat when you are building that specific component.Use 'em where you need them, not everywhere.

[Dmitry Sergeev]

finally someone addressing the slop. do you think adding specific design system docs to the skill.md helps it stay more consistent?

[Dmitry Sergeev]

actually a smart way to handle this. i've been fighting with cursor to stop using those generic tailwind utility classes for everything lol

[Lohit sai Ganta]

Thanks a lot, asking AI to "make it look good" never works. You have to literally ban the defaults and force it to commit to a real design structure before it writes any code. That's what my skills do.