VibeCurb: Markdown Skill Files That Force AI Agents to Design Before They Code
VibeCurb - Injects taste into AI workflows to stop agents from generating boring, AI slop.
At a glance
- What is it?
- VibeCurb is an MIT-licensed set of design constraint files for coding agents. It works by making the agent extract typography, palette and layout from a reference before it writes any code, and the README is explicit that it is not for teams who want safe, generic layouts.
- Who is it for?
- Adopt VibeCurb if you already work with a coding agent that reads markdown context and you have a reference image or an existing front end you want pushed toward a stronger visual direction. Skip it if you want conservative, template-like output, or if your agent cannot load a rules file.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 46 days ago.
- What is it written in?
- Mainly JavaScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 19, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
The problem VibeCurb targets: models regress to the average website
The README opens with a claim about training data: models are trained on millions of average websites, so an unconstrained agent will produce an average website. VibeCurb is positioned as the constraint on that behaviour. The audience is narrow and specific. It is for people who already prompt a coding agent to build front end work and who are tired of the same purple gradient, the same centered glassmorphic card, the same dashboard template. The README names those exact outputs as failure modes. It is not a component library, not a CSS framework, and not a runtime dependency. There is nothing to import into your application bundle. The repository is a CLI plus a skills directory of markdown files that get loaded into an agent's context. That distinction matters when you evaluate the project: you are not adding a library to a build, you are adding text to a prompt.
How the skill pipeline works: Design Read, quality gates, visual diff
According to the README, every skill follows the same five-step pipeline. First comes the Design Read: the agent reads your reference image, existing code, or written brief and extracts design signals covering typography, color, spacing, layout and atmosphere. Second is Quality Gate 1: no code is generated until that extraction passes, and the agent has to demonstrate it understands the direction, palette and spatial structure. Third is the build, which the README says is done with exact fidelity to the extraction, and notes each skill has its own build sequence. Fourth is a Visual Diff, where output is checked against the reference across composition, typography, color, motion and responsiveness using PASS/FAIL tables. Fifth is Drift Rejection, which catches generic defaults, CSS keyword easings, AI-purple gradients and placeholder patterns inline. The mechanism is prompt architecture rather than executable code. The markdown file tells the agent what order to do things in and what counts as a failure, and the agent's own generation is what enforces it. That is the central trade-off of the project: the constraint is only as strong as the model's willingness to follow it.
The seven skills and what each one is scoped to
The skills are split across four categories. On the frontend side, awwwards-hero generates a hero section from a brief or reference, and awwwards-sections extends that to pricing cards, bento grids and footers so the lower page matches the hero rather than being an afterthought. pixel-perfect takes a screenshot of any website and asks the agent to reproduce it with fonts, colors and spacing matched. visual-redesign is the one aimed at existing codebases: you hand over working but visually weak React code and the README says the JS is not touched, so the change is confined to styling. awwwards-motion covers scroll reveals, kinetic typography and micro-interactions. Two skills sit in image generation: imagegen-frontend produces images and textures that can be fed back in as the reference brief for the other skills, and brandkit-gen forces the agent to settle logos and brand assets before UI work begins. The scoping is deliberate. Loading a hero skill when you need a footer is a mismatch, and the README frames skill selection as the first decision.
Installing VibeCurb and running a first redesign
The CLI is published as vibecurb-cli and the README shows npx as the entry point, so there is no global install step. The first command lists the available pipelines. The README gives this example, and the output is the set of skill names you can install.
npx vibecurb-cli listOnce you know which pipeline you want, you add it by name. The README uses visual-redesign as the example.
npx vibecurb-cli add visual-redesignThe manual route is also documented: clone the repository or download the specific SKILL.md file, then place it inside your project's .cursor/rules/ or .agents/skills/ folder. After that you reference the skill in your prompt with a phrase like "Based on the skill above...". The README lists Cursor, Claude Code, v0, Codex, ChatGPT, Lovable, AI Studio, Gemini CLI and any agent that reads markdown context as supported. The package.json confirms the runtime shape: it declares type as module, points bin.vibecurb at ./index.js, and depends on chalk, inquirer and ora, which is a terminal prompt stack rather than anything that touches your application code. Note that the README does not document an uninstall command, so removal means deleting the file you placed in .cursor/rules/ or .agents/skills/.
Where VibeCurb breaks down: drift, weak references and the wrong jobs
The README has a section titled "When things go wrong" and it is honest about the failure mode: agents drift back toward the mean over long conversations. The fixes it offers are all conversational. If output looks like a standard dashboard template, you reply that the agent ignored the skill file and tell it to re-read the drift constraints. If typography feels weak, you tell it the scale is too safe and to increase contrast between the h1 and body text. If the agent rushes to code, you tell it to stop and run the Design Read first. This tells you something important about the design: there is no automated enforcement layer. Nothing in the repository validates the output. The PASS/FAIL tables in the Visual Diff step are produced by the agent itself, which means the same model that drifted is the one grading the drift. The README also carries a warning that the skills do not ask nicely and intentionally override standard generation defaults in favour of complex grids, deep contrast and advanced typography, with an explicit instruction not to use VibeCurb if you want safe, generic layouts. That is a real constraint on adoption, not a marketing line. If your product needs a conventional, predictable interface, this is the wrong tool. The prompt architecture section adds a second limitation: the agent cannot read your mind, and without a strong reference image you are back to guessing.
What VibeCurb is not: the alternative approach
The clearest alternative is a component library with a design system, such as shipping a Tailwind configuration plus a set of pre-built components. The difference in approach is fundamental. A component library constrains output by removing choice: the button already exists, so the agent composes from a fixed vocabulary and the result is consistent by construction. VibeCurb constrains output by instructing the agent, which leaves the full space of CSS available and relies on the model to respect the brief. The component library gives you predictability and a slower path to anything unusual. VibeCurb gives you range and accepts that the same agent can ignore the file. There is a second alternative worth naming: writing your own rules file. The README's manual instructions describe placing a SKILL.md in .cursor/rules/ or .agents/skills/, which is exactly what you would do with a hand-written style guide. VibeCurb's value in that comparison is the specific content of the seven skills and the pipeline structure, not the mechanism of loading markdown into an agent. If you already maintain a detailed design brief, the marginal gain is smaller than the README implies.
Maintenance, licence and the cost of adopting a prompt-based tool
The repository is MIT licensed, which permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is the permissive end of the spectrum and it means you can fork the skills and edit them for your own house style without asking anyone. It is not legal advice, and if you redistribute a modified skills directory you should read the LICENSE file in the repository root yourself. On maintenance, the last push to the main branch was on 2026-08-05, and the repository is not archived. There are no releases retrieved, and package.json pins version 1.0.0 with caret ranges on chalk, inquirer and ora, so dependency updates arrive through those ranges rather than through tagged releases. The upgrade cost has an unusual shape for a tool like this. There is no API surface to break and no migration path to follow, because the deliverable is text. The real cost is re-tuning: when a model provider changes generation behaviour, a skill file that produced a specific result may need its wording adjusted, and the README's drift-rejection language is the part most exposed to that. Budget for reading the skill files rather than treating them as a black box.
Editorial conclusion
Adopt VibeCurb if you already work with a coding agent that reads markdown context and you have a reference image or an existing front end you want pushed toward a stronger visual direction. Skip it if you want conservative, template-like output, or if your agent cannot load a rules file. Before committing, verify three things: that npx vibecurb-cli list runs on your Node version, that your agent actually reads from .cursor/rules/ or .agents/skills/, and that the skill you pick matches the deliverable you need, since the README warns the protocols override standard generation defaults rather than negotiating with them.
Frequently asked questions
What is VibeCurb and how does it work?
VibeCurb is a set of markdown skill files plus a CLI that injects design constraints into a coding agent's context. Each skill follows the same pipeline: a Design Read that extracts typography, color, spacing and layout from a reference, a quality gate that blocks code until the extraction passes, a build, a Visual Diff against the reference, and inline rejection of generic defaults.
Is VibeCurb free or paid?
The repository is MIT licensed and the README does not describe any paid tier. The CLI is invoked with npx vibecurb-cli, so there is no purchase step documented for installing a skill.
Which agents does VibeCurb work with?
The README lists Cursor, Claude Code, v0, Codex, ChatGPT, Lovable, AI Studio and Gemini CLI, and adds that it works with any agent that reads markdown context. The manual install path places a SKILL.md inside .cursor/rules/ or .agents/skills/.
Why does the agent keep producing generic layouts after installing a skill?
The README states that agents drift back toward the mean over long conversations and gives a reply for each symptom. For template-looking output it suggests telling the agent it ignored the skill file and to re-read it and apply the drift constraints.
Community notes