Skip to content
StrictThemes

Themes and guardrails for AI-built UI

Give your coding agent a design system it has to follow.

A Strict theme is one DESIGN.md file: tokens an agent can read, rules a linter can check, and exports for shadcn, Tailwind and Nuxt UI. Twenty-three themes and 115 page prompts, all free.

Browse the themesRead the spec format
Install Strict One
npx shadcn@latest add https://strictthemes.com/r/strict-one.json

01 / Themes

Twenty-three themes, free to use.

Each one is a different job and a different look: a shop, a bank, a newspaper, a public service, a launch night. Every card below is drawn in its theme's own colors, fonts and corners.

Stock components, one theme

Strict One, on shadcn

Nothing in this box is styled by hand. Install a theme and the components you already have take its colors, corners and fonts.

See all twenty-three this way
Strict One

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed

02 / Page prompts

Paste one prompt. Get a finished page.

Every theme comes with five page prompts: full briefs for a landing page, an essay, a dashboard, a shop and more. The pages below were each built from one prompt, and are shown as they came out.

Or connect your agent to the MCP server
https://mcp.strictthemes.com/mcp

With that address in its MCP settings, an agent lists the themes and fetches a prompt by itself.

03 / How it works

A theme your agent reads, and a linter checks.

  1. Step 1

    One file

    A theme is a single DESIGN.md. Tokens sit at the top as YAML, and the reasoning behind them follows in plain prose. An agent reads both before it writes any UI.

  2. Step 2

    Any stack

    The same file exports to a shadcn registry item, a Tailwind CSS v4 theme, Nuxt UI, and W3C design tokens. Change the file and every export follows.

  3. Step 3

    Rules, not requests

    The strict block says what is allowed: which colors, which spacing, what contrast. The linter holds the theme to it, and Strict Check holds the pages an agent builds to it.

DESIGN.md
---
name: Strict One
colors:
  primary: "#1F3BFF"
  background: "#FFFFFF"
  foreground: "#111111"
typography:
  body:
    fontFamily: IBM Plex Sans
    fontSize: 16px
rounded:
  sm: 2px
  md: 4px
strict:
  contrast: AA
  colors:
    allow: tokens
  tells:
    purple-gradient: error
    emoji-icons: error
---

## Overview

Strict One is an editorial theme built on a
visible grid. Nothing is decorative.

04 / Strict Check

Then check what the agent built.

An agent that has read the theme can still drift from it. Strict Check reads the project's code, opens the built pages in a browser, and lists every color, size, space and corner that is not in the theme. Run it after each change, or let the agent run it and fix what it finds.

Run it in a project with a DESIGN.md
npx @strictthemes/check . --dist dist
No DESIGN.md yet? Measure a site you have and write one
npx @strictthemes/check generate https://your-site.example
The code
Off-theme classes, hand-written colors, fonts the theme does not declare, gradients and emoji. No build, no browser: fast enough to run after every edit.
The rendered pages
Colors, contrast, type, spacing and corners as the browser draws them, in every color mode, on a laptop and on a phone.
Where it runs
As a command, as an MCP server and a skill for coding agents, and as a job in CI.

Read the Strict Check guide

A report on a test page, shortened
Strict Check: Kiln

Source code
  colors           1 checked  1 off
  spacing          2 checked  1 off

Rendered pages: / in light and dark mode at 1280px and 375px
  colors          14 checked  8 off
  spacing         32 checked  8 off
  typography      24 checked  12 off
  contrast         8 checked  all on theme
  …

Errors in the source (2)
  color-off-token
    `bg-blue-500` is a Tailwind palette color, not one of the Kiln colors. …
    src/App.tsx:2
  spacing-off-scale
    `p-3` is 12px, which is not on the spacing scale (0, 1, 2, 4, 8, 16, 24, 40, 80px).
    src/App.tsx:2

Errors on the rendered pages (4)
  type-off-scale
    Text is 32px, which is not in the type scale (12, 16, 24, 38, 60px).
    h1 "Bowls"  [light, dark; 1280px, 375px]
  …

Failed: 67.7% of 93 measured values follow the theme. 6 errors, 0 warnings.

05 / Roadmap

What exists, and what is next.