FramingUI

The design system your coding agent can't drift from.

Install · Demos · How it works · Free scope · framingui.com

Ask an agent to "build a settings page" and you get whatever the model dreamt that day: default-blue buttons, three border radii on one screen, a hand-rolled dropdown with no focus states. The code runs. The screen is slop.

FramingUI is an agent skill: a token-driven design system packaged so that coding agents (Claude Code, Codex) compose screens from it instead of around it. A closed vocabulary — components, layout tokens, machine-checkable screen recipes, one strongly-opinionated theme — plus zero-install validators that fail loudly when the agent strays. Your agent reads the theme's design DNA, composes from the catalog, validates the result, and self-critiques the rendered screen before calling it done.

No server. No account. No telemetry. A folder of data and plain-node scripts.

What an agent ships with it

One prompt each, zero design feedback rounds — composed entirely from the free catalog in the editorial-tech theme:

"Build a revenue dashboard"	"Build our blog's article page"

"Build the account settings page"	Licensed preview: the conversation pack

The fourth screen uses the licensed conversation domain pack — thread states, streaming, composer. It's shown here so you know where the free line sits.

Install (30 seconds)

Claude Code — from your project root:

mkdir -p .claude/skills
curl -L https://framingui.com/get/skill | tar -xz -C .claude/skills

OpenAI Codex — same tarball into .agents/skills instead.

Or clone this repo and copy skill/framingui into your skills directory. Claude Code and Codex auto-discover it; from then on, any "build a screen / add a component / apply the theme" request routes through the system.

To actually render what the agent composes, add the component library to your project:

npm install https://framingui.com/get/ui

Then wire the scope + theme CSS — the skill's own INSTALL.md walks your agent (or you) through it, and node .claude/skills/framingui/scripts/doctor.mjs . verifies the wiring and tells you exactly what's missing.

Prefer MCP? The same validators and catalog are exposed as an MCP server — @framingui/mcp (npx @framingui/mcp, stdio) — for clients that speak MCP but don't load skills.

How it works

1. doctor.mjs checks the environment once per project — packages, the FramingUIScope boundary, theme CSS actually loaded. Broken wiring is a hard fail, not a silent default palette.
2. The agent reads the theme (assets/themes/editorial-tech.json) — its design DNA, mood keywords, and per-recipe notes are hard constraints, not suggestions.
3. It composes from the closed vocabulary: 30 components, 12 shells / 8 pages / 17 section patterns, 9 screen recipes with required regions and states. Inventing a token is a validation error.
4. validate-screen.mjs / layout.mjs check the result mechanically — exit codes, not vibes. Recipes make "a settings screen must have these regions and states" machine-checkable.
5. The agent renders, screenshots, and self-critiques against the design DNA before declaring done.

The commands your agent will use (all plain node, zero install):

node .claude

... [View full README on GitHub](https://github.com/soo-kate/framingui-skill#readme)