The Design Constraint Engine for AI-Generated Frontend Code

Design your color, type, spacing, radius and shadow systems — then export them as strict, AI-ready rules that Claude, Cursor and Copilot actually follow.

Start Designing Explore Builders
Works with
  • Claude
  • Cursor
  • Copilot
  • v0
  • Bolt
tokens.css
/* tokens.css */
:root {
  --color-primary: #912D6E;
  --space-4: 1rem;
  --radius-md: 8px;
  --text-lg: 1.125rem;
}
// tailwind.config
theme: {
  colors: { primary: '#912D6E' },
  spacing: { 4: '1rem' },
  borderRadius: { md: '8px' },
}
# Design constraints
- Use --color-primary (#912D6E); never raw hex.
- Spacing must be multiples of 4px.
- Radius: md = 8px. Use the type scale only.

AI writes great logic. It drifts on UI.

Coding assistants hallucinate utility classes, invent spacing, and hardcode colors — quietly eroding your design system one generation at a time.

Spacing drift

Arbitrary padding and margins pile up, and layouts slowly fall out of rhythm.

Type inconsistency

Missing hierarchy, random sizes, and off line-heights make text feel unsettled.

Random colors

Hardcoded hex values instead of semantic tokens break theming and dark mode.

How it works

Four steps to turn your design decisions into constraints your AI obeys.

1

Define

Set your color, type, spacing, radius and shadow systems in the builders.

2

Preview

See your tokens applied to real sections before you commit.

3

Export

Generate CSS, Tailwind, JSON — or AI-ready rules and agent instructions.

4

Feed your AI

Drop the constraints into Claude, Cursor or Copilot for consistent UI.

Six builders. One design language.

Every builder outputs the same structured tokens, so your whole system stays in sync.

Palette Builder

Build semantic, themeable color systems with light and dark modes.

Color

Typography Builder

Craft responsive, mathematically consistent type scales.

Typography

Font Pairing Builder

Find font combinations that work together in harmony.

Typography

Spacing Builder

Generate a structured spacing scale that keeps layouts in rhythm.

Layout

Radius Builder

Set a personality-first corner-radius system, from sharp to pill.

Layout

Shadow Builder

Design elevation-driven shadow systems with believable depth.

Effects

Animation builder, SVG tools, and templated design languages are on the roadmap.

From tokens to real pages.

A design language is hard to judge as a list of values. Apply it to real layouts and you can see immediately whether it holds up.

Section Studio

152 section layouts — heroes, pricing, FAQ, testimonials, footers — across 15 section types, every one rendered in your own tokens.

Browse sections

Page Templates

64 complete page templates built from those sections, for software, shops, agencies, restaurants and more — ready to export as AI-ready code.

See page templates

Export it the way your tools expect.

One design system, every format. Ship production CSS, drop tokens into Tailwind, or hand your AI a precise rulebook it can't ignore.

  • Production-ready CSS variables
  • Tailwind & JSON token output
  • AI prompts & agent rule files
:root {
  --color-primary: #912D6E;
  --color-secondary: #4F5091;
  --space-4: 1rem;
  --radius-md: 8px;
}
module.exports = {
  theme: { extend: {
    colors: { primary: '#912D6E' },
    spacing: { 4: '1rem' },
  }},
}
{
  "color": { "primary": "#912D6E" },
  "space": { "4": "1rem" },
  "radius": { "md": "8px" }
}
# Use this design system
Always style with these tokens. Use
--color-primary for primary actions, keep
spacing on a 4px grid, and never
introduce raw hex values or arbitrary sizes.
# .cursorrules / agent rules
- Import tokens.css; reference variables only.
- Reject hardcoded colors, spacing, radii.
- Headings must use the defined type scale.
- Respect light/dark token pairs.

Stop fighting your AI's UI.

Give it constraints it can't break. Build your design system in minutes.

Start Building