FramingUIGet access
Menu

The living design system for coding agents

Send the agent.
The system keeps it on-theme.

Your agents build every new screen from a closed, token-driven vocabulary — two certified themes, a 20-component contract, machine-checked recipes — and validate it before you ever review it. You subscribe to the system staying alive.

Get accessSee what shipped recently
skill/framingui · new screenContract valid

Build the billing screen

doctor okdesignDNA readrecipe matchself-critique pass

How it works

One skill. Every screen. The same five gates.

The agent skill runs this workflow for every new screen your agents build — so the hundredth screen matches the first one.

  1. 01
    doctor.mjs

    Doctor checks the wiring

    Scope boundary mounted, theme CSS loaded, packages current. Broken wiring hard-fails before a line of UI code is written — no silent fallback to the default palette.

    The gate

    Exit 0, or a named fix.

  2. 02
    designDNA

    The agent reads the theme

    Mood keywords, principles, forbidden moves, radius language, recipe notes. The theme’s personality becomes a hard constraint on every visual decision, not a suggestion.

    The gate

    Constraints internalized before composing.

  3. 03
    vocabulary

    Compose from the closed vocabulary

    20 screen-contract components, 12 shells, 8 page tokens, 17 section patterns, recipe class strings verbatim. Nothing invented, nothing hand-rolled that the system already ships.

    The gate

    Only tokens the validator knows.

  4. 04
    layout.mjs

    Validate the layout contract

    The AgenticLayoutContract records recipe match, required regions and states, primary-action placement, and responsive transformations. Edit and re-validate until exit 0.

    The gate

    A machine-checked contract.

  5. 05
    screenshot

    Render and self-critique

    Screenshot the real screen, critique it against the theme’s designDNA — radius language, borders versus surfaces, padding scale — fix what fails, and re-check.

    The gate

    Evidence, not a claim.

Put this behind your agents

What's inside

A closed vocabulary, not a component dump.

Everything an agent needs to compose a screen — and a validator that refuses everything else.

  1. 01

    Two certified themes

    editorial-tech, the near-monochrome editorial voice, and signal-terminal, the dense dark instrument. Each carries designDNA — mood, principles, forbidden moves — plus ready-made recipe classes and pre-generated --fui-* variables. Agents read it before they compose.

    designDNA · recipes · CSS variables
  2. 02

    20-component screen contract

    A closed component vocabulary from buttons to command palettes, each with typed props, accessibility notes, and token bindings the themes actually define.

    components.json · typed props · a11y
  3. 03

    Layout vocabulary

    12 shells, 8 page tokens, and 17 section patterns — every one translated into real responsive markup with region tables and breakpoints, not just a name in a doc.

    shells · pages · section patterns
  4. 04

    9 screen recipes

    Machine-checkable grammars per job-to-be-done: required regions and states, where the primary action lives, and the patterns a screen of that job must never use.

    recipe.mjs · validated grammars
  5. 05

    Domain packs

    Opt-in vocabulary for whole problem domains. The conversation pack ships thread layouts, streaming states, and eight assistant-surface components.

    conversation · pack add
  6. 06

    The agent skill + validators

    SKILL.md plus zero-install validators — doctor, layout, recipe, pack — that agents run on every new screen. Works in Claude Code and OpenAI Codex unchanged.

    SKILL.md · doctor · layout · recipe

Why a subscription

The vocabulary is alive.

A design system for agents is only as good as its latest build. Subscribers pull the newest skill builds and @framingui/ui tarballs the day they ship.

  • New components are absorbed when real screens surface a missing pattern — the vocabulary grows by evidence, not by accretion.
  • Themes are certified against machine checkers and human verdicts; visual-quality audits land continuously.
  • Recipes and domain packs ship as new screen jobs get named — conversation surfaces arrived this way.
  • A stale snapshot rots quietly. The skill itself documents that failure mode and hard-fails on outdated builds.

The promise

Cancel and keep what you earned.

Every release published while you were subscribed stays yours: the downloads keep working with your license key. Updates stop — nothing already earned disappears.

Read how the plans work

Two plans, one system

Put the system behind your agents.

Solo or Team, the product is the same: the current build of the system, and every build after it while you stay subscribed.

See pricing