framingui

FramingUI

コーディングエージェントが逸脱できないデザインシステム。

インストール · デモ · 仕組み · 無料で使える範囲 · framingui.com

---

エージェントに「設定ページを作って」と頼むと、その日にモデルが思いついたものが出てきます。デフォルトの青いボタン、1つの画面に3種類の角丸、フォーカス状態のない手作りのドロップダウン。コードは動きます。画面の出来は散々です。

FramingUI はエージェントスキルです。トークン駆動のデザインシステムをパッケージ化し、コーディングエージェント（Claude Code、Codex）が周辺で場当たり的に作るのではなく、システムを基盤として画面を組み立てられるようにします。閉じた語彙体系——コンポーネント、レイアウトトークン、機械で検証できる画面レシピ、強い意見を持つ単一のテーマ——に加え、インストール不要のバリデーターが、エージェントの逸脱を明確にエラーとして知らせます。エージェントはテーマのデザイン DNA を読み、カタログから画面を組み立て、結果を検証し、完成と判断する前にレンダリングされた画面を自ら批評します。

サーバー不要。アカウント不要。テレメトリーなし。データとプレーンな Node スクリプトをまとめたフォルダーです。

エージェントがこれを使って作るもの

プロンプト1つずつ、デザインへのフィードバックは不要です。すべて editorial-tech テーマの無料カタログから組み立てています。

「売上ダッシュボードを作って」	「ブログの記事ページを作って」

「アカウント設定ページを作って」	ライセンス対象のプレビュー：会話パック

4つ目の画面では、ライセンス対象の conversation ドメインパックを使用しています。スレッドの状態、ストリーミング、入力欄が含まれています。無料で使える範囲を示すため、ここに掲載しています。

インストール（30秒）

Claude Code — プロジェクトのルートから実行します。

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

OpenAI Codex — 同じ tarball を .agents/skills に展開します。

または、このリポジトリをクローンして、skill/framingui をスキルディレクトリにコピーします。Claude Code と Codex は自動的に検出します。それ以降、「画面を作る／コンポーネントを追加する／テーマを適用する」という依頼はすべて、このシステムを通じて処理されます。

エージェントが組み立てた画面を実際にレンダリングするには、コンポーネントライブラリをプロジェクトに追加します。

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

次に、スコープとテーマ CSS を設定します。スキル内の INSTALL.md で、エージェントまたはユーザー自身が設定を進められます。また、node .claude/skills/framingui/scripts/doctor.mjs . を実行すると設定を検証し、不足しているものを正確に確認できます。

MCP を使いたい場合 同じバリデーターとカタログは MCP サーバーとしても公開されています。MCP を話すもののスキルを読み込まないクライアント向けに、@framingui/mcp（npx @framingui/mcp、stdio）を利用できます。

仕組み

1. doctor.mjs がプロジェクトごとに一度、環境を確認します。パッケージ、FramingUIScope の境界、テーマ CSS が実際に読み込まれているかをチェックします。設定に不備がある場合は明確にエラーとなり、デフォルトのカラーパレットが黙って適用されることはありません。
2. エージェントはテーマを読み込みます（assets/themes/editorial-tech.json）。デザイン DNA、ムードを表すキーワード、レシピごとの注記は、提案ではなく厳守すべき制約です。
3. 閉じた語彙体系から画面を組み立てます。30個のコンポーネント、12個のシェル／8個のページ／17個のセクションパターン、必須領域と状態を定めた9個の画面レシピが含まれます。定義されていないトークンを作ると、検証エラーになります。
4. validate-screen.mjs / layout.mjs が結果を機械的にチェックします。雰囲気ではなく終了コードで判定します。レシピにより、「設定画面にはこれらの領域と状態が必要」という条件を機械的に検証できます。
5. エージェントは完了を宣言する前に、デザイン DNA に照らしてレンダリングし、スクリーンショットを撮り、自ら批評します。

エージェントが使うコマンド（すべてプレーンな Node で実行でき、インストールは不要です）。

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

無料で利用できる内容（およびライセンスが必要な内容）

無料プランは、意図的に最小限で、親しみやすく、安定した内容になっています。内容は増えることはあっても減ることはないため、今日リリースした画面は、今後もずっと検証できます。

	無料	ライセンス対象
コンポーネント	30 — 20 個のコンポーネントからなる画面コントラクト一式に、フォーム／フィードバック／レイアウトの必須要素を追加	62 — Sidebar、Command、Combobox、DataTable、DatePicker、Sheet、Popover、会話用 8 コンポーネント一式などを追加
テーマ	editorial-tech	9 種類のスタイル
レイアウトトークンとレシピ	すべて	すべて
ドメインパック	—	conversation（アシスタント向け UI）
更新	安定した無料チャンネル	継続的なリリース

エージェントがライセンス対象の機能を使おうとすると、正体不明の「unknown component」ではなく、実際の名称と所在を示す LICENSE_REQUIRED エラーが返され、模倣して独自実装しないよう明確に指示されます。カタログ全体は framingui.com でサブスクリプションライセンスとして提供しています。ウェイトリストに登録すると、提供開始時にメールが 1 通だけ届きます。

よくある質問

ドキュメントだけでなく、なぜスキルなのですか？ エージェントはドキュメントを読み込まず、パターンマッチングを行います。スキルによって、語彙、制約、バリデーターをエージェントの作業領域に取り込めます。また、バリデーターにより、違反すると終了コードが返されます。

使用状況は外部に送信されますか？ いいえ。すべてローカルで動作します。任意のジャーナル（.framingui/journal/）がマシンの外部に送信されることはありません。記録されるのはルール ID と終了コードのみで、コードは記録されません。

商用利用できますか？ はい。このバンドルは MIT ライセンスです。ライセンス対象のカタログは、別個の商用製品です。

ライセンス

このリポジトリ内のすべての内容はMITライセンスです。skill/framingui は FramingUI のソースシステムから生成されています。不具合のある画面の課題報告やスクリーンショットを歓迎します。