Uizze

UIZZE · コーディングエージェントのための、より良い UI

あなたのプロダクトらしいインターフェースを構築しましょう。 Codex、Claude Code、Cursor、GitHub Copilot に、集中して取り組める UI ワークフローを提供します。オプションで、80 万件以上の実際の Web および iOS 画面を参考にできます。

UIZZE を見る → · ワークフローを試す · MCP に接続 · PR チェックを追加

UIZZE の導入前と導入後を見る

20 秒のモバイル UI 比較：左が UIZZE なし、右が UIZZE ありです。

https://github.com/user-attachments/assets/d7ee2275-8e7f-474c-a2e4-b45759b86996

次の画面を UIZZE で構築 →

Claude Code、Cursor、Copilot で請求画面を試す：インストールして、指示文をコピーし、オプションの参考情報検索に接続して、結果を確認します。

次の画面から始めましょう

無料の UI デザインスキルをインストールします。

npx skills add https://uizze.com --skill ui-design

次に、エージェントに実際のタスクを依頼します。

Use ui-design to improve our billing settings page. Make the current plan,
payment method, and invoices easy to scan. Reuse our components and design
tokens. Include loading, empty, error, and permission states. Inspect the
result at desktop and mobile sizes and fix what breaks.

このスキルはアカウントや MCP 接続がなくても使えます。既存のプロジェクトで始めましょう。指示文、コンポーネント、デザインシステムが作業の指針になります。

タスク	無料スキル	依頼内容
Uizze で UI/UX を構築・改善する	uizze-ui	Uizze UI Pack：プロジェクトに合わせて作業し、役立つ場面では Uizze のツール一式を活用する
インターフェースを構築または再デザインする	ui-design	明確な階層、動作するインタラクション、ユーザーに必要な各状態
ありきたりな初稿を改善する	anti-ui-slop	プロダクトに合ったコンテンツ、意図的なレイアウト、仕上がりのレビュー
UI に関する判断を調査する	ui-radar	焦点を絞った参考情報のワークフロー。最新情報の取得には有料 MCP に接続する
画像やスクリーンショットを再現する	image-to-ui	参考画像と同じビューポートで照合した、1:1 の実装

焦点を絞ってレビューするには、代わりに anti-ui-slop をインストールします。

npx skills add https://uizze.com --skill anti-ui-slop

UI Taste と iOS Design は https://uizze.sh からのみ配布され、このリポジトリにはミラーされていません。既存の uizze.com インストール元は、anti-ui-slop、ui-design、ui-radar で引き続き利用できます。Image to UI は GitHub ネイティブです。

Uizze UI Pack

エージェントを使って UI/UX を構築・改善するための、公式 Uizze スキルです。

npx skills add uizze/uizze --skill uizze-ui

プロジェクトのコードやアセットを活用しながら、デザインシステム、 実際のアプリの事例、ライセンス付きフォント、アイコン、モーションやインタラクションの詳細に Uizze を活用できます。 ローカルでの UI/UX 作業に、Uizze アカウントや MCP 接続は必要ありません。

画像を再現する

実装したいスクリーンショットやモックアップがありますか？ Image to UI をインストールします。

npx skills add uizze/uizze --skill image-to-ui

次に、画像を添付して依頼します。

Use image-to-ui to implement this screenshot in our existing app.
Match it 1:1 rather than redesigning it. Render at the same viewport,
compare the result with the reference, and correct visible differences.

これは短く自己完結したスキルであり、新たなデザインフレームワークではありません。 アカウントや MCP 接続がなくても使え、MIT ライセンスが含まれています。

UI Taste またはネイティブ iOS のガイダンスを使う

より明確な方向性と仕上げの見直しが必要な Web または iOS インターフェースの場合：

npx skills add https://uizze.sh --skill ui-taste

ネイティブ iPhone の画面、ナビゲーション、フォーム、アクセシビリティの場合：

npx skills add https://uizze.sh --skill ios-design

どちらのスキルにも、参照先のプレイブック、ライセンス、通知が含まれています。既存のバナーや手順に変更はなく、ローカルのワークフローを使うためにアカウントや MCP 接続は必要ありません。

会話に実在するプロダクトの参考例を取り入れる

エージェントが特定のデザイン課題への実在するプロダクトの対応方法を確認する必要がある場合は、UIZZE を使ってください。たとえば、情報量の多い設定ページ、権限フロー、請求書の表、iOS のオンボーディング画面などです。

オプションの有料 MCPを使うと、エージェントを厳選された参考例や素材の検索に接続できます。

ツール	エージェントが取得できるもの
find_ui_references	UIZZE のウェブおよび iOS ライブラリから、結果ごとに最大 3 件の全画面の参考例
find_ui_materials	ホストされたフォント、アイコン、アニメーションアイコン、または明示的にリクエストされたパックを最大 3 件

Find references for a team permissions screen with inherited roles and
restricted actions. Explain which decisions would help our workflow,
then implement them using our existing components and visual language.

UIZZEでエージェントトークンを作成し、MCP セットアップガイドに従ってください。参考例をデザインに活用し、エージェントは独自のプロダクトのスタイルに合わせてインターフェースを構築します。検索で役立つ情報が得られなかった場合は、プロジェクトの作業を続けてください。

いつもの開発環境で使う

環境	こちらから始める
Codex、Claude Code、Cursor	インストールして最初のタスクを試す
GitHub Copilot	Awesome Copilot の UIZZE プラグイン
Cline	Cline で Uizze に接続する
Gemini CLI	Uizze 拡張機能をインストールする
Antigravity	Uizze カスタムプラグインをインストールする
VS Code、Windsurf / Cascade、Zed	ネイティブ MCP 接続手順
MCP クライアント	GitHub MCP Registry · 接続ガイド
GitHub のプルリクエスト	UI Slop Gate Action · 実際の出力例を確認する

プルリクエストで未完成の UI を検出する

無料のUI Slop Gateは、変更されたフロントエンドのソースをチェックし、反応しないコントロール、状態マーカーの欠落、ハードコードされた色、汎用的なダッシュボード要素の組み合わせを検出します。検出結果はコードの横とワークフローの概要に表示されます。

permissions:
  contents: read

steps:
  - uses: actions/checkout@v7
    with:
      fetch-depth: 2
      persist-credentials: false
  - uses: uizze/uizze@v1
    with:
      fail-on: error

アカウント、API キー、ソースのアップロードは不要です。公開された Action が変更前後の例をチェックする様子を確認し、ワークフロー全体をコピーしてください。これは慎重に設計されたソースチェックです。レンダリング結果の確認に加えて、通常のアクセシビリティおよびユーザビリティのチェックも併用してください。

実例を見ながら画面を作る

• 無料の UI タスク概要ビルダー：タスク、ユーザー、成果を記述し、具体的なエージェント用プロンプトをコピーまたはダウンロードできます。アカウントは不要です。
• SaaS ダッシュボードのガイド：情報の階層を比較し、読み込み、空、エラー、割り当ての状態を試せます。
• DESIGN.md テンプレート：デザインの仕様書をダウンロードし、設定画面や請求画面に適用できます。
• 空の状態の例：初回利用、該当なし、サービス障害、アクセス不可を見分けられます。
• iOS のオンボーディングとリカバリー：小規模なブラウザープロトタイプを試し、ネイティブの SwiftUI スターターを確認できます。

これらは架空のデータを使った、UIZZE 独自の学習用サンプルです。エージェントごとのセットアップ、比較、レビューのワークフローについては、すべてのガイドを見るをご覧ください。

リポジトリを確認する

• 実践的なエージェントのワークフロー：請求設定、データテーブル、権限画面、ネイティブ iOS。
• プルリクエストのチェックを再現する：ソース、検出結果、ローカルコマンド。
• Next.js スターター：製品固有のインターフェース向けに、既存の出発点を用意しています。
• Storybook の統合：コンポーネントと並べて UI の状態を確認できます。
• 公開配布：メンテナンスされているインストール方法とカタログへのパス。

本番環境のメタデータ：スキルインデックス · MCP マニフェスト · サーバーカード · ドキュメント。

ライセンス

Uizze が作成したリポジトリのコードとテキストは、より具体的な表示が適用される場合を除き、MIT ライセンスを適用します。同梱されているスキルのプレイブックには、Apache-2.0 ライセンスおよびサードパーティの表示が引き続き適用されます。スキルパッケージを再配布する前に、ライセンスマップをご確認ください。