{"slug": "i-built-skill-md-file-to-stop-ai-from-generic-ui-slop", "title": "I built skill.md file to stop AI from Generic UI SLOP", "summary": "A 17-year-old developer built VibeCurb, a collection of constraint skill files that force AI coding agents to think about design before writing code. The system uses a four-phase pipeline—design read, quality gate, precise build, and visual diff—to prevent generic UI output. VibeCurb works with Cursor, Claude Code, Codex, and other markdown-reading agents.", "body_md": "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`\n\n, done. It's not broken. It's just mediocre by default.\n\nI'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.\n\nEvery skill follows the same four-phase pipeline:\n\n**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.\n\n**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.\n\n**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.\n\n**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.\n\nThere's also an inline **drift rejection** layer. It catches known AI defaults (CSS keyword easings like `ease-in-out`\n\n, AI-purple `#7c3aed`\n\ngradients, generic glassmorphic cards, placeholder `Lorem ipsum`\n\ncontent) and flags them before they make it into the output.\n\nEach skill constrains a specific problem space:\n\n`awwwards-hero`\n\n`awwwards-sections`\n\n`awwwards-motion`\n\n`prefers-reduced-motion`\n\ngating, no exceptions.`pixel-perfect`\n\n`visual-redesign`\n\n`imagegen-frontend`\n\n`brandkit-gen`\n\nEach `SKILL.md`\n\nis a standalone markdown file with YAML frontmatter. No runtime dependency, no npm package to install. You drop the file into `.cursor/rules/`\n\n, `.agents/skills/`\n\n, or paste it directly into a conversation. Any agent that reads markdown context can consume it.\n\n```\n# CLI install\nnpx vibecurb-cli add awwwards-hero\n\n# Or just copy the SKILL.md file manually\n```\n\nEach 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.\n\nWorks with Cursor, Claude Code, Codex, ChatGPT, Gemini CLI, v0, Lovable, AI Studio. Anything that reads markdown context.\n\nA 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.\n\nAI defaults to the mean. VibeCurb is the constraint that pulls it off the mean.\n\nLive Showcase: [vibecurb.pages.dev](https://vibecurb.pages.dev)\n\nGitHub: [github.com/Yu-369/VibeCurb](https://github.com/Yu-369/VibeCurb)", "url": "https://wpnews.pro/news/i-built-skill-md-file-to-stop-ai-from-generic-ui-slop", "canonical_source": "https://dev.to/yu-369/i-built-skillmd-file-to-stop-ai-from-generic-ui-slop-599o", "published_at": "2026-08-05 15:44:02+00:00", "updated_at": "2026-08-05 16:00:15.850211+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "generative-ai"], "entities": ["VibeCurb", "Cursor", "Claude Code", "Codex", "ChatGPT", "Gemini CLI", "v0", "Lovable"], "alternates": {"html": "https://wpnews.pro/news/i-built-skill-md-file-to-stop-ai-from-generic-ui-slop", "markdown": "https://wpnews.pro/news/i-built-skill-md-file-to-stop-ai-from-generic-ui-slop.md", "text": "https://wpnews.pro/news/i-built-skill-md-file-to-stop-ai-from-generic-ui-slop.txt", "jsonld": "https://wpnews.pro/news/i-built-skill-md-file-to-stop-ai-from-generic-ui-slop.jsonld"}}