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. Thirteen themes and sixty-five 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

Thirteen 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 thirteen 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 by a coding agent from one prompt, and are shown as they came out.

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 / Roadmap

What exists, and what is next.