framingui で何ができる？

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

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.
The agent reads the theme (assets/themes/editorial-tech.json) — its design DNA, mood keywords, and per-recipe notes are hard constraints, not suggestions.
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.
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.
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/skills/framingui/scripts/doctor.mjs .            # environment check
node .claude/skills/framingui/scripts/validate-screen.mjs s.json   # screen definition gate
node .claude/skills/framingui/scripts/layout.mjs validate c.json   # layout contract gate
node .claude/skills/framingui/scripts/recipe.mjs list         # screen grammars
node .claude/skills/framingui/scripts/pack.mjs list           # domain packs

What's free (and what's licensed)

The free tier is deliberately minimal, lovable, and stable: it only ever grows, so a screen you ship today keeps validating forever.

	Free	Licensed
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
Themes	`editorial-tech`	9 voices
Layout tokens & recipes	All of them	All of them
Domain packs	—	`conversation` (assistant surfaces)
Updates	Stable free channel	Continuous releases

When 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 — join the waitlist and you'll get exactly one email at launch.

FAQ

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.

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.

Can I use it commercially? Yes — this bundle is MIT. The licensed catalog is a separate commercial product.

License

MIT for everything in this repository. skill/framingui is generated from the FramingUI source system — issues and screenshots of misbehaving screens are very welcome.

インストール

framingui をクライアントに追加します。お使いのものを選んでください。

claude mcp add mcp -- npx -y @framingui/mcp

codex mcp add mcp -- npx -y @framingui/mcp

amp mcp add mcp -- npx -y @framingui/mcp

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ]
    }
  }
}

Add to `claude_desktop_config.json`, then restart Claude Desktop.

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ]
    }
  }
}

Add to `~/.cursor/mcp.json`, or `.cursor/mcp.json` for a single project.

code --add-mcp '{"name":"mcp","command":"npx","args":["-y","@framingui/mcp"]}'

Or add the block manually to `.vscode/mcp.json` under `servers`.

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ]
    }
  }
}

Add to `~/.codeium/windsurf/mcp_config.json`.

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ]
    }
  }
}

Add to `cline_mcp_settings.json` via the MCP Servers panel.

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ]
    }
  }
}

Add to `~/.gemini/settings.json`.

{
  "mcpServers": {
    "mcp": {
      "type": "local",
      "command": "npx",
      "args": [
        "-y",
        "@framingui/mcp"
      ],
      "tools": [
        "*"
      ]
    }
  }
}

Add to `~/.copilot/mcp-config.json`, or run `/mcp add` inside the CLI.

{
  "context_servers": {
    "mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@framingui/mcp"
        ]
      }
    }
  }
}

Add to your Zed `settings.json`.

npx -y @framingui/mcp

Run `goose configure`, choose **Add Extension → Command-line Extension**, and paste this command.

スコア

39 / 100

情報不足

ドキュメント25/25
メンテナンス19/25
信頼性13/20
機能0/15
導入のしやすさ12/15

Documents what it does and how to connect
Has a resolvable package or endpoint
Exposes at least one tool, prompt or resource
README has substantive content
Includes a code example
Documents its configuration
Mentions credentials or security posture
Last commit 9 days ago
Has a release history
Repository is not archived
Licensed MIT
Namespace verified in the official MCP registry
Claimed by its owner
Published under an organisation
0 tool(s) documented
Provides prompt templates
Provides resources
12 documented install method(s)
Published to a package registry
Offers a hosted endpoint — no local install

評価基準の全文を読む →

バージョン履歴

バージョン	公開日
0.1.0最新	2026年8月18日