My Vibe Design.
Design system + QA gate for AI builders

Stop AI design drift.

Turn any visual reference into production tokens and agent rules — then audit what Lovable, v0 or Cursor actually built, and fix it in one prompt.

Define my system — freeAudit a screenshot

No card needed · Pro $15/mo when you want unlimited

How it works — one loop, no drift

  1. 01Free

    Define your system

    Pick a direction or borrow a real screen. Or import your brand guidelines. Get Tailwind tokens and a DESIGN.md your AI follows.

    Start defining →
  2. 02Free

    Build anywhere

    Paste the brief into Lovable, v0, Cursor, Bolt or Claude — or let agents pull it live over MCP.

    Get the brief →
  3. 03Pro: unlimited

    Audit the output

    Upload a screenshot of what your AI built. Get a fidelity score, ranked violations and a repair prompt.

    Run an audit →
For AI agents

Connect over MCP (compile_vibe_brief) or the HTTP API — agents fetch your system before every UI task. Agent docs

See plans — from $0Get an API key
01 · Directionthree answers, then pick a system
How should it feel? Pick up to three
02 · Choose a direction

Three different design systems — not colour variants. Each one changes palette, type, rhythm and every control together. Picking one updates the preview and the brief instantly; you can art-direct it afterwards.

Split
Soft Optimist
Syne × Plus Jakarta

Rounded, buoyant, candy accents and spring physics.

Why this works
  • Generous radii and spring motion read as forgiving — it lowers the perceived cost of trying something.
  • A bright accent pair keeps empty and onboarding states cheerful instead of clinical.
Never do this
  • Never use a dark near-black background or a hairline 1px border aesthetic.
  • Never use condensed or all-caps display type.
Kinetic type
Gallery Brutal
Archivo Black × IBM Plex

Concrete ground, Klein-blue shock, exposed structure.

Why this works
  • Exposed structure signals confidence — the layout itself becomes the brand asset.
  • One hyper-saturated accent on a concrete neutral produces maximum recall from minimum ornament.
Never do this
  • Never soften with shadows, blur, glass or gradients.
  • Never use a radius above 0px anywhere.
Manifesto
Quiet Swiss
JetBrains Mono × Work Sans

Hairline grid, near-monochrome, type does every job.

Why this works
  • A single accent and a strict grid make content the only thing competing for attention — ideal when credibility matters more than spectacle.
  • Monochrome plus one hue survives real content: long headlines, dense tables and user-generated copy never break the palette.
Never do this
  • Never add a second accent hue, gradient fill or coloured shadow.
  • Never centre body copy or use decorative icon sets.
Already have a brand? · Import your guidelines

Turn your brand book into a system

Upload a style guide or manifesto, or link to one. We pull out colours, fonts, spacing and the dos and don'ts — you review before anything changes.

Free account needed — one import is free, Pro is unlimited.

02b · Optional · Borrow a screen

Borrow a screen from an exclusive library

A curated set of high-performing websites and apps — real shipping products.

Direction (01–02) decides

The taste: palette, type, surface, rhythm, components.

A borrowed screen decides

The structure: layout, hierarchy, section order. It never overwrites your taste.

They stack, they don't compete — pick a direction first, then optionally borrow a skeleton for it. Skip this entirely and nothing changes about your brief.

✦ Exclusive library — borrow from real, high-performing apps. Pick a screen; your palette and fonts still apply.
·
Live preview · everything you pick, you seeLanding page
Studio.
WorkStudioJournalContact
Start shipping a point of view.

organic · editorial — no template aesthetic.

01
Built for taste
Anti-template by design.
02
Live preview
See feel, not just colors.
03
Tool-tuned
v0, Cursor, Lovable, Figma.
Get the brief
Stay in the loop
Quietly alive
Clay + Antique · Young Serif/Mulish · manifesto · stacked btn · boxed input · Considered pace · Spacious · Sharp · Raw · imagery 3/5
Brief ready · token sheet
Palette
Clay + Antique
Accent
#e8a850
Background
#1c1410
Foreground
#f5ebd9
Display face
Young Serif
Body face
Mulish
Type scale
1.25 with deliberate off-scale display sizes
Display size
clamp(56px, 9vw, 168px)
Body size
17-18px / 1.65
Tracking
-0.015em,
Spacing base
golden-ratio spacing off a 16px base (16 / 26 / 42 / 68 / 110 / 178)
Radius
Sharp 0px
Density
Spacious
Motion
Considered
Easing
cubic-bezier(0.22, 1, 0.36, 1) at 500-700ms
Spring
stiffness 150, damping 22

Agent rules · keeps your AI on-system

Drop this file in your repo. Cursor, Claude Code and Lovable read it on every task, so new screens stay on your tokens.

# DESIGN.md — Design system for AI coding agents

Direction: Custom direction · Palette: Clay + Antique · Type: Young Serif × Mulish
Generated by My Vibe Design — https://myvibedesign.kognexity.com

## Hard rules
- Use ONLY these colour tokens. No other hex, rgb or oklch values in components.
  - background: #1c1410
  - foreground: #f5ebd9
  - muted: #a08868
  - accent: #e8a850
  - accent-2: #2d201a
- Display font: "Young Serif". Body font: "Mulish".
  Load: https://fonts.googleapis.com/css2?Young+Serif&family=Mulish:wght@300;400;500&display=swap
- Type scale: 1.25 with deliberate off-scale display sizes — a hand-set feel, not a computed one. Display size clamp(56px, 9vw, 168px), tracking -0.015em, irregular optical spacing permitted. Body 17-18px / 1.65.
- Spacing base unit: 10px (Spacious). Every gap and padding is a multiple of it.
- Corner radius: 0px (Sharp 0px). Do not mix radii.
- Motion: 220ms, easing cubic-bezier(0.22, 1, 0.36, 1) at 500-700ms. Considered pace.

## Anti-rules
- NEVER: introduce colours, fonts or radii that are not listed above.
- NEVER: default to Inter, purple-to-indigo gradients, or generic SaaS hero layouts.

## Before you finish any UI task
1. Check every new colour against the token list above.
2. Check fonts, radius and spacing against this file.
3. If you drifted, fix it before reporting done.
4. Optional: run a drift audit at https://myvibedesign.kognexity.com/audit
Target

Universal designer-grade brief — paste into any AI agent, builder, or design tool