ui-craft v1が登場複数AI環境でUIを本番品質に仕上げ

AIコーディングエージェントはコードを速く書けますが、UIは紫のグラデーションやバウンスアニメーションなど「AIっぽい見た目」に偏りがちです。2026年6月26日、AIエージェント向けのデザインエンジニアリングシステム「ui-craft」がv1.0.0を公開しました。Claude Code専用のスキルから、Go製CLIインストーラ付きのクロスハーネス対応システムへと進化しています。

この記事では、ui-craft v1の変更点と、複数のAIコーディング環境でUI設計の「センス」を導入する方法を解説します。

ui-craft v1で何が変わったか
インストール手順と対応環境
スキル・MCPゲート・レビューエージェントの3層構成
既存のインストール方法との違い

v1で何が変わったか

https://github.com/educlopez/ui-craft

開発者のEdu Calvo氏は、2026年6月29日のX投稿で「Claude Code専用スキルから本格的なシステムへ数週間かけて作り上げ、v1をリリースした」と述べています。v1.0.0のリリースノートによると、ui-craftは「インストールするスキル」から「インストールするシステム」へと位置づけが変わりました。

最大の変更点は、Go言語で書かれた単一の静的バイナリ「ui-craft」CLIの登場です。このCLIがClaude Code、Cursor、Codex、Gemini、OpenCodeの5種類のAIコーディング環境（ハーネス）を自動検出し、各環境のネイティブ設定にスキル、コマンド、MCPゲート、レビューエージェント、デザインメモリを一括で書き込みます。インストール時にNode.jsは不要です。

配布はHomebrew（macOS/Linux）とScoop（Windows）に対応。macOS/Linuxでは brew install --cask educlopez/tap/ui-craft でバイナリを入れ、続けて ui-craft install を実行する流れになります。v1.0.3（2026年6月29日）までに3回のパッチが出ており、シンボリックリンク環境でのインストール失敗なども修正されています。

なぜ「AIスロップ」対策が必要か

AIコーディングエージェントは、デザイン知識がないままUIを生成するため、グラデーション付きボタン、ALL CAPS見出し、バウンスイージングなど、どのプロジェクトでも似た見た目になりがちです。ui-craftはこれを「AIスロップ（slop）」と呼び、33ルールで検出します。

ui-craftはテンプレート集やコンポーネントライブラリではありません。レイアウト、タイポグラフィ、カラー、アクセシビリティなど31ドメインにわたる設計ルールをエージェントに注入する「デザインエンジニアリング知識」が本体です。すべてのUIは「AIが作ったとバレるか？」という問いでテストされ、バレる場合は作り直す方針を取ります。

3層構成で段階的に使える

https://skills.smoothui.dev/

ui-craftは用途に応じて3つのレイヤーで使い分けられます。

レイヤー1：インストールするだけ

UIの依頼を通常どおり行うだけで、エージェントが階層構造やデザイントークンを意識したUIを生成します。追加の操作は不要です。

レイヤー2：スラッシュコマンドで操作

/start でプロジェクトの状態を読み取り、22個のスラッシュコマンド（/craft、/sddesign、/finalize など）で特定の作業に集中できます。ダッシュボード構築、UI監査、仕上げなど、用途別のパスを選べます。

レイヤー3：MCPゲートとCI連携

4つのMCPゲート（check_anti_slop、tokens_lint、acceptance_bar、score_ui）と2つのレビューエージェント（design-reviewer、a11y-auditor）で、0〜100点の品質スコアを算出します。基準を下回ればブロックされ、/finalize --converge では基準を満たすまで自動で修正を繰り返します。

インストール方法

CLI経由が推奨です。macOS/Linuxでは次の2コマンドで完了します。

brew install --cask educlopez/tap/ui-craft
ui-craft install

ui-craft install は対話型TUIでコンポーネントを選択するか、--yes フラグで非対話インストールも可能です。インストール前に既存設定のバックアップを自動取得し、途中で失敗した場合はロールバックされます。

Claude Codeユーザーは、プラグイン方式も選べます。

/plugin marketplace add educlopez/ui-craft
/plugin install ui-craft

CursorやCodexなど他の環境では npx skills add educlopez/ui-craft でも導入できます。ただしv1ではCLIがライフサイクル管理の中心であり、クロスハーネス一括設定はCLIが担います。

既存インストール方法との違い

方法	対象環境	特徴
`ui-craft install`（CLI）	5種すべて	MCPゲート、レビューエージェント、デザインメモリを一括設定
Claude Codeプラグイン	Claude Codeのみ	MCPサーバーを自動配線、CLI不要
`npx skills add`	Agent Skills対応環境	スキルとコマンドのみ、MCPは手動設定

v1以前はClaude Code向けの体験が中心でしたが、v1でCursor、Codex、Gemini、OpenCodeにも同じ品質基準を適用できるようになりました。プロジェクトはMITライセンスで公開されており、GitHubリポジトリのスター数は68（2026年6月29日時点）です。

カスタマイズの仕組み

ui-craftはビルド前にDiscoveryフェーズを実行し、CSS変数やTailwind設定など既存のデザインシステムを分析します。デザインシステムが既にある場合はそれを尊重し、ない場合はスタイルやアクセントカラーなど4つの質問で方針を決めます。

CRAFT_LEVEL（品質の厳しさ）、MOTION_INTENSITY（アニメーション量）、VISUAL_DENSITY（情報密度）の3つの数値パラメータ（1〜10）で挙動を調整できます。Minimal、Editorial、Dense Dashboardの3つのスタイルバリアントも用意されています。

AIコーディングでUIを扱う開発者にとって、ui-craft v1は「エージェントにデザインのセンスを渡す」ための実用的な選択肢です。HomebrewかScoopでCLIを入れ、ui-craft install を1回実行するだけで、普段使っているAI環境にそのまま組み込めます。