uxloom

UXLoom

生成ツールが画面を6つ作りました。UXLoomは、状態があと9つ足りないことを証明します。

AI 生成ツール（v0、Lovable、Figma Make、Claude）は、ハッピーパスの画面を生成します。 UXLoomは批評レイヤーです。ユーザージャーニーをステートマシンとしてモデル化し、 画面を状態コントラクトを持つノードとして扱い、本番コードを1行も書く前に、 到達不能な画面、行き止まり、エラー／空／読み込み状態の欠落、WCAG コントラストの 不適合、タッチターゲットのサイズ不足、ローカライズ時にあふれるラベルなど、 不足しているものを機械的に証明します。

エージェントネイティブな設計です。インターフェースは MCP サーバーで （Claude Code、Codex、あらゆる MCP クライアントで動作します）、エージェントスキルも含まれています。

決定論的な設計です：同じ入力なら、バイト単位で同一のレポートを出力します。 シード済みの欠陥カタログで packages/bench のベンチマークを実施し、 適合率と再現率は 1.000、プロセス間で SHA-256 が安定し、1000画面でも5ms未満です。 これにより、LLM の判断では代替できない、デザインの完全性を CI のゲートにできます。

ウェブサイト： uxloom.dev · npm： uxloom · MCP レジストリ： io.github.uxloom-dev/uxloom ·

パッケージ

パッケージ	内容
@uxloom/journeygraph	オープンなデザイン・アズ・データ形式。ジャーニーをステートマシンとして、画面を必須状態を持つノードとして表現します
@uxloom/critics	バリデーター。ジャーニーの完全性、状態の網羅性、WCAG コントラスト、タッチターゲット、テキストの拡張を検証します
uxloom	MCP サーバーとエージェントスキル。エージェントが使用するインターフェースです

初めての方は、クイックスタートから始めてください — 前提条件、 Claude Code の手順、エージェントへの伝え方、トラブルシューティングを掲載しています。

クイックスタート（エージェント向け）

# Claude Code
claude mcp add uxloom -- npx -y uxloom

# Codex CLI
codex mcp add uxloom -- npx -y uxloom

プロジェクトファイル（uxloom.project.json）はワークスペース内に置き、git に追加します。 デザインはデータであり、仕様対象のコードの隣でバージョン管理されます。

クイックスタート（人間と CI）

npx uxloom init      # one-command setup: MCP config + agent skill + starter file
npx uxloom preview   # live mocks (themed, commentable, EDITABLE in the browser)
npx uxloom export    # shareable HTML — plus --svg (Figma/Penpot import; add
                     #   --manifest for the round-trip key) and --png (playwright)
npx uxloom check     # design completeness — exit 1 on errors, CI-ready
npx uxloom audit     # implementation drift — web AND native (Swift/Kotlin/
                     #   Dart/Java markers); --live verifies the real DOM;
                     #   --design <file|dir> audits a Figma/Penpot export vs the contract
npx uxloom diff      # human-readable design diffs for PR review

エビデンスに基づく設計：コントラクトのすべての判断に、その根拠（推論、長所・短所を含む却下した代替案、出典、確信度）を含められます。採用後は critic によって適用され、最大 3 ラウンドの範囲を限定した design_review ループで反復されます。また、プレビューのエビデンスパネル（ⓘ）とエクスポートでステークホルダーに提示されます。設計は単に検証するだけでなく、その判断の妥当性を説明します。

エージェントが扱えるコメント：レビュー担当者がプレビューにピン留めコメントを追加して「→ agent」をクリックします。コメントは、あらゆる生成 AI モデルが完全なコンテキストを参照して処理できる作業項目になります。comment_context は、ピン留めされたレイアウトブロック、画面コントラクト、ジャーニーの参照情報、その画面の現在の指摘事項を返します。モデルはコメントに対応し、メモを添えてプレビュー上で解決できます。フィードバックへの対応はワンクリックです。

CI にネイティブ対応しています。check と audit は --json、--sarif（GitHub コードスキャン）、--github（インライン PR アノテーション）を受け付けます。既存プロジェクトにも対応しています。--update-baseline で既存の指摘事項を固定し、新たなずれだけをブロックできます。uxloom.config.json では、アクセシビリティの基準に合わせてしきい値を調整できます。ドキュメント全文：uxloom.dev/docs.html。

CI に追加すれば、ハッピーパスだけの設計がマージされることはありません。

- run: npx uxloom check design/uxloom.project.json

ワークフロー（packages/mcp-server/skills/ にスキルとしても同梱）： project_init → brief_start/brief_answer → journey_define → screen_register → project_validate → 修正 → エラーがゼロになるまで繰り返し → coverage_report。

実際に問題を検出できますか？

tools/dogfood.mjs は実際の MCP サーバーを介して 3 つの製品をそれぞれ 2 回処理します。まず、ハッピーパス生成ツールが画面を作成し、次に検証レポートに基づいて修正します。成果物は examples/ にあります。

製品	生成時（ハッピーパス）	修正後
shopmweb — e コマースのチェックアウト（mWeb + Android）	エラー 9 件、警告 6 件	0 / 0
taskflow — SaaS のサインアップ／オンボーディング（Web）	エラー 1 件、警告 6 件	0 / 0
ridenow — 配車予約（iOS + Android、オフライン利用が多い環境）	エラー 3 件、警告 7 件	0 / 0

検出された問題：到達不能なプロモーション画面、行き止まりになる認証状態、設計されていない 5 つの決済／エラー状態、コントラスト比 2.4:1 のボタン、Android の 40px のタッチターゲット、ドイツ語で崩れるチェックアウトのラベル、そして 3 製品すべてで不足していたオフライン状態です。エラーも警告もゼロにすることは、正直な方法で実現できます。ベースラインの状態が本当に適用できない場合、画面で根拠を文書化した exemptions を宣言でき、矛盾する免除は指摘されます。

開発

npm install
npm run typecheck
npm test

ステータス

リリース済みで、継続的にメンテナンスされています。npm および公式 MCP レジストリで提供されており、ベンチマークのスコアカードは各 GitHub リリースで公開されています。JourneyGraph 形式（formatVersion: "0.1"）は 1.0 まで変更される可能性があります。リリースは RELEASING.md に従い、すべてのサーフェスで CI によるずれのチェックを実施します。

ライセンス

MIT