yu-369/vibecurb

AI defaults to the mean. Models are trained on millions of average websites. If you don’t constrain them, they will build an average website.

VibeCurb is the constraint.

It replaces your agent’s guesswork with strict rules and quality gates: real hierarchy, real typography, still production-ready. Instead of letting an agent arbitrarily generate UI, VibeCurb forces it to audit, extract, build, and verify against premium standards before writing a single line of code.

[!WARNING] These skills do not ask nicely. They are strict protocols that intentionally override standard AI generation defaults in favor of complex grids, deep contrast, and advanced typography. Do not use VibeCurb if you are looking for safe, generic layouts.

---

How it works

Every skill follows the same strict pipeline:

1. The Design Read: The agent reads your reference image, existing code, or brief and extracts design signals (typography, color, spacing, layout, atmosphere) before writing a single line.
2. Quality Gate 1: No code is generated until the extraction passes. The agent must prove it understands the design direction, palette, and spatial structure first.
3. Precise Build: The agent builds with exact fidelity to the extraction. Each skill has its own build sequence.
4. Visual Diff: The output is verified against the reference across composition, typography, color, motion, and responsiveness using PASS/FAIL tables.
5. Drift Rejection: Generic defaults, CSS keyword easings, AI-purple gradients, and placeholder patterns are caught and rejected inline.

---

The Skills

Different problems require different constraints. Load the specific skill pipeline tailored for your exact task.

---

Drop it in

VibeCurb isn’t a bulky dependency. One command injects production-grade design constraints directly into your agent’s context.

# View all available pipelines
$ npx vibecurb-cli list

# Install a specific skill
$ npx vibecurb-cli add visual-redesign

Or do it manually:

1. Clone this repo or download the specific SKILL.md file you need.
2. Place it inside your project’s .cursor/rules/ or .agents/skills/ folder.
3. Reference the skill in your prompt: “Based on the skill above…”

Works with: Cursor, Claude Code, v0, Codex, ChatGPT, Lovable, AI Studio, Gemini CLI, and any agent that reads markdown context.

---

The Prompt Architecture

Structure matters. If you ask for a layout without defining the aesthetic constraints first, the agent will hallucinate generic design choices. Use a narrative flow:

Based on the skill above, generate the  for a .

The website is for a . Because of that, I want the visual
to feel , with . Make it feel
.

. Think , utilizing a
. Keep it in  mode, using .

I want it to look . Generate the .

[!TIP] The agent can’t read your mind. If you tell it “make a sleek landing page,” it will give you a purple gradient and a centered glassmorphic card. Providing a strong reference image removes the guesswork.

---

Examples

---

When things go wrong

Agents drift back toward the mean over long conversations. Here is how you snap them back.

---

Contribute

PRs and feature requests are welcome.

• Found a bug? Open an Issue.
• Have a new skill idea? Submit a PR.