![\"One](\"assets/framingui-reel.gif\")
\n\n \n
The design system your coding agent can't drift from.
\n\n\n Install ·\n Demos ·\n How it works ·\n Free scope ·\n framingui.com\n
\n\n---\n\nAsk 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.\n\nFramingUI 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.\n\nNo server. No account. No telemetry. A folder of data and plain-node scripts.\n\n## What an agent ships with it\n\nOne prompt each, zero design feedback rounds — composed entirely from the free catalog in the `editorial-tech` theme:\n\n| \"Build a revenue dashboard\" | \"Build our blog's article page\" |\n|---|---|\n|  |  |\n\n| \"Build the account settings page\" | Licensed preview: the conversation pack |\n|---|---|\n|  |  |\n\n*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.*\n\n## Install (30 seconds)\n\n**Claude Code** — from your project root:\n\n```bash\nmkdir -p .claude/skills\ncurl -L https://framingui.com/get/skill | tar -xz -C .claude/skills\n```\n\n**OpenAI Codex** — same tarball into `.agents/skills` instead.\n\nOr 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.\n\nTo actually render what the agent composes, add the component library to your project:\n\n```bash\nnpm install https://framingui.com/get/ui\n```\n\nThen wire the scope + theme CSS — the skill's own [`INSTALL.md`](skill/framingui/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.\n\n**Prefer MCP?** The same validators and catalog are exposed as an MCP server — [`@framingui/mcp`](mcp/) (`npx @framingui/mcp`, stdio) — for clients that speak MCP but don't load skills.\n\n## How it works\n\n1. **`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.\n2. The agent **reads the theme** (`assets/themes/editorial-tech.json`) — its design DNA, mood keywords, and per-recipe notes are hard constraints, not suggestions.\n3. 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.\n4. **`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.\n5. The agent **renders, screenshots, and self-critiques** against the design DNA before declaring done.\n\nThe commands your agent will use (all plain node, zero install):\n\n```bash\nnode .claude/skills/framingui/scripts/doctor.mjs . # environment check\nnode .claude/skills/framingui/scripts/validate-screen.mjs s.json # screen definition gate\nnode .claude/skills/framingui/scripts/layout.mjs validate c.json # layout contract gate\nnode .claude/skills/framingui/scripts/recipe.mjs list # screen grammars\nnode .claude/skills/framingui/scripts/pack.mjs list # domain packs\n```\n\n## What's free (and what's licensed)\n\nThe free tier is deliberately **minimal, lovable, and stable**: it only ever grows, so a screen you ship today keeps validating forever.\n\n| | Free | Licensed |\n|---|---|---|\n| Components | **30** — the full 20-component screen contract + form/feedback/layout essentials | **62** — adds Sidebar, Command, Combobox, DataTable, DatePicker, Sheet, Popover, the 8-component conversation suite, and more |\n| Themes | `editorial-tech` | 9 voices |\n| Layout tokens & recipes | All of them | All of them |\n| Domain packs | — | `conversation` (assistant surfaces) |\n| Updates | Stable free channel | Continuous releases |\n\nWhen your agent reaches for something licensed, it doesn't get a mystery \"unknown component\" — it gets a `LICENSE_REQUIRED` error naming the real thing and where it lives, with strict instructions **not** to hand-roll an imitation. The full catalog is subscription-licensed at [framingui.com](https://framingui.com) — join the waitlist and you'll get exactly one email at launch.\n\n## FAQ\n\n**Why a skill and not just docs?** Agents don't read docs; they pattern-match. A skill puts the vocabulary, the constraints, and the validators in the agent's working set — and the validators make violations cost an exit code.\n\n**Does this phone home?** No. Everything is local. The optional journal (`.framingui/journal/`) never leaves your machine and records rule IDs and exit codes, never your code.\n\n**Can I use it commercially?** Yes — this bundle is MIT. The licensed catalog is a separate commercial product.\n\n## License\n\n[MIT](LICENSE) for everything in this repository. `skill/framingui` is generated from the FramingUI source system — issues and screenshots of misbehaving screens are very welcome.\n", "bytes": 6164, "sha": "2426dc3e114de297f8de486cbd811cec3930b6e495883d4c121b54ea8029177d", "repo_slug": "soo-kate/framingui-skill", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_soo_kate_framingui_2ae7437c/readme" }