Design Intelligence for LLMs

Get better designs
from your LLM.

Turn your generic LLM output into distinctive, accessible, maintainable front-end code.

Download Rules ↓ Build Custom

5 LLM Formats

6 Pre-built Themes

∞ Custom Options

.cursorrules

philosophy: minimalist

typography:
  heading: "Instrument Serif"
  body: "Inter"
  scale: fluid-clamp

colors:
  primary: #1a1a1a
  accent: #6366f1
  surface: #f5f3ef

principles:
  - Avoid purple gradients
  - Never use Inter alone
  - Distinctive over generic
  - WCAG AA minimum

The problem with AI-generated designs

Without Rules

× Inter font, purple gradient hero
× Generic "Get Started" copy
× Cookie-cutter card layouts
× No accessibility considerations
× Inline styles everywhere

With Web Design Stack

✓ Distinctive typography pairing
✓ Cohesive design system
✓ Original layout approaches
✓ Built-in a11y patterns
✓ CSS custom properties

Choose your environment

Select your LLM to get the correct file format

Pre-built design systems

Curated rule sets for different aesthetic directions. Each includes typography, colors, spacing, and component patterns.

Minimalist Less is more.

Minimalist Modern

Clean lines, generous whitespace, subtle animations.

Make it
bold. Stand out

Bold & Vibrant

Strong colors, dynamic layouts, commanding presence.

Corporate Pro

Structured, trustworthy, enterprise-ready.

Creative Studio

Artistic, experimental, boundary-pushing.

// Dark mode first const theme = 'dark'; const accent = '#22d3ee';

Dark Mode First

Deep backgrounds, neon accents, dev-focused.

A story worth
telling

Editorial

Typography-driven, magazine-inspired, content-first.

Build your own

Configure your design system, generate a custom rules file.

Color Palette Define your brand colors

Primary

Accent

Highlight

Background

Text

Code Style Front-end framework preference

Vanilla HTML/CSS/JS Tailwind Utility-first React JSX + CSS

Typography Font pairing strategy

Headings

Body Text

Design Philosophy

Minimalist Expressive Functional Editorial

Motion

None Subtle Dynamic Playful

Accessibility

WCAG AA 4.5:1 contrast WCAG AAA 7:1 contrast

Additional Rules

Dark mode CSS variables Semantic HTML Mobile-first Performance tips SEO optimization

How it works

Choose format

Select your LLM environment—Cursor, Claude, Copilot, or Windsurf.

Pick or build

Download a pre-built theme or configure your own design system.

Drop & code

Add the file to your project root. Start building beautiful sites.

Your project deserves
better design.

Stop fighting generic output. Start with design rules that work.

Get Started ↑

Get better designs from your LLM.