UXKIN

UXKIN：AI コーディングエージェント向けの実際の UI リファレンス

Claude、Claude Code、Cursor、Codex、GitHub Copilot、あらゆる MCP クライアントから、 実際の iOS アプリ画面、ユーザージャーニー全体、ウェブサイトのデザインシステムを検索できます。 エージェントが作る UI が AI のありきたりなデザインではなく、実際の製品のように見えるようにします。

実際の画面 500,000 件以上 · UI 要素 30k 件以上 · ウェブサイトのデザインシステム 15k 件以上。それぞれに DESIGN.md が付属

UXKIN を見る →

https://github.com/user-attachments/assets/bc320cda-4a43-4baa-bdb9-cfdaccef6e49

ウェブサイト · ドキュメント · Claude ディレクトリ · 料金 · サポート

---

理由

コーディングエージェントに設定画面、ペイウォール、ランディングページの作成を頼むと、 どこも同じようなグラデーション、カードのグリッド、曖昧なコピーといった、 最もありふれた選択肢で隙間を埋めてしまいます。UXKIN は、より優れた参考資料を提供します。 実際にリリースされた製品が同じ画面やフローをどのように扱っているか、また実際のウェブサイトで使われている色、書体、コンポーネントを参照できます。

クイックスタート

内容	対象	費用
no-ui-slop skill	エージェントがありきたりで、いかにもAIらしいUIをリリースしないようにするルール	無料、アカウント不要
build-ui skill	新しい画面、ダッシュボード、仕上げ、簡素化、レビューのための段階的なワークフロー。確認済みの結果で完了します	無料、アカウント不要
ios-screens skill	ネイティブらしいiPhone画面：ナビゲーション、シート、Dynamic Type、ダークモード、権限	無料、アカウント不要
design-md skill	プロジェクトで実際に使われているものをもとにDESIGN.mdを作成し、新しい画面にも一貫性を持たせます	無料、アカウント不要
ui-from-screenshot skill	スクリーンショットやモックアップから、独自のコンポーネントを使って一致するUIを作成し、並べて比較します	無料、アカウント不要
ui-states skill	エージェントが見落としがちな状態（空、読み込み中、エラー、オフライン、長いコンテンツ）を作成します	無料、アカウント不要
uxkin-research skill	デザインを始める前に、エージェントが実際のアプリ、フロー、デザインシステムを見つけて比較する方法	検索にはUXKINプランが必要です（skill自体はMITライセンスです）
UXKIN MCP server	エージェントが作成中に実際の画面、ユーザージャーニー、デザインシステムを検索できます	UXKINプラン
UI Check GitHub Action	すべてのプルリクエストで、動作しないボタン、欠けている状態、場当たり的な色、アクセシビリティの基本項目を検出します	無料
AI Slop Detector	ウェブサイトがどれほどAI生成らしく見えるか、何を変更すべきかを確認できます	無料
UXKIN for Figma	UXKINを検索し、画面や一連のフローをキャンバスに配置し、サイトの色や書体を取り込みます	Figma Communityに近日公開

1. 無料のskillをインストールする

npx skills add uxkin/agent

これですべての7つがインストールされます。または、エージェントのskillsフォルダーにコピーしてください。

• skills/no-ui-slop：プロダクトに合ったUIの構築方法です。単独でアカウント不要で使えます。UXKINサーバーに接続すると、実際の参考例を調べるタイミングもエージェントに伝えます。
• skills/uxkin-research：デザイン前の調査方法です。平易な言葉でUXKINライブラリを検索し、一連のユーザージャーニーを開き、複数のアプリを比較して共通点を報告します。
• build-ui：UIの各種作業（新しい画面、ダッシュボード、仕上げ、簡素化、レビュー）の計画です。スマートフォンとデスクトップのサイズでレンダリングし、修正して再確認すると完了します。
• ios-screens：SwiftUI、UIKit、React Native、Expo、FlutterでネイティブなiPhone UIを作成し、小型と大型のiPhone、ライトモードとダークモードで確認します。
• design-md：プロジェクトを読み込み、そのDESIGN.mdを作成（または更新）します。色の役割、文字サイズのスケール、余白、コンポーネント、エージェント向けのルールを記述します。
• ui-from-screenshot：スクリーンショットやモックアップを独自のコンポーネントで再現し、結果を画像と比較して差異を修正します。
• ui-states：画面のすべての状態（初回利用、空、読み込み中、エラー、オフライン、成功）を見つけて作成し、それぞれを確認します。

どれも単独で使えます。UXKINサーバーに接続すると、実際の画面、フロー、デザインシステムも調べられます。以下のプラグインにはno-ui-slopとuxkin-researchが含まれます。ほかの5つは上記のコマンドでインストールします（.agents/skillsにあります）。

2. UXKIN MCP サーバーに接続する

サーバーは https://uxkin.com/mcp（Streamable HTTP）でホストされています。ほとんどのアプリでは、UXKIN アカウントでサインインできます。コピーするトークンはありません。

アプリ	手順
Claude（ウェブ、デスクトップ、モバイル）	Claude のディレクトリにある UXKIN を開き、Connect をクリックして、ログイン後に Allow をクリックします
Claude Code	claude mcp add --scope user --transport http uxkin https://uxkin.com/mcp を実行し、/mcp → uxkin → Authenticate を選択します
Cursor	uxkin.com/cursor-ui-design からワンクリックでインストールし、uxkin の横にある Login をクリックします
Codex	codex mcp add uxkin --url https://uxkin.com/mcp を実行し、続いて codex mcp login uxkin を実行します（またはCodex プラグインをインストールします）
GitHub Copilot（VS Code）	コマンドパレット → MCP: Add Server → HTTP → https://uxkin.com/mcp の順に選択し、求められたらサインインします（ガイド）
Lovable、Bolt、Devin Desktop	上記の URL を使ってカスタム MCP サーバーを追加します（Lovable、Bolt、Devin Desktop / Windsurf）
その他の MCP クライアント	https://uxkin.com/mcp を追加してサインインするか、uxkin.com/docs の設定手順に従います

検索には UXKIN のプランが必要です（月額または買い切り）。 アプリはいつでもアカウントから切断できます。

試してみる

接続したら、エージェントに次のように依頼できます。

• 「UXKIN を使って、実際の瞑想アプリのオンボーディングフローを探し、共通点を教えてください。」
• 「UXKIN を使って、実際のアプリがサブスクリプションのキャンセルにどう対応しているかを見せてから、自分のキャンセル画面を改善してください。」
• 「UXKIN で明るくシンプルな SaaS デザインシステムを見つけ、そのスタイルでランディングページのヒーローを作成してください。」
• 「ペイウォールを作る前に、UXKIN で実際のペイウォールを3つ調べ、それぞれからどの要素を取り入れるか説明してください。」

ツール

ツール	返される内容
find_ui_references	実際の iOS アプリ画面、ユーザージャーニー（オンボーディングやサブスクリプションのキャンセルなど、複数画面にわたるフロー）、ウェブサイト
find_ui_materials	実際のウェブサイトのデザインシステム：役割別の色、タイポグラフィ、コンポーネント、および最上位の検索結果の完全な DESIGN.md
get_journey	1つのジャーニーの全画面を順番に表示
list_collections / get_collection	uxkin.com のコレクションに保存したリファレンス

すべてのツールは読み取り専用です。

アプリにコマンドとして表示できる、すぐに使えるプロンプトも用意されています（ Claude Code では /mcp__uxkin__research_flow など）。

プロンプト	エージェントに依頼する内容
research_flow	実際のアプリがあるフロー（オンボーディング、チェックアウト、ペイウォールなど）にどう対応しているかを調べ、1つ提案します
find_design_system	プロダクトと雰囲気に合う、実際のウェブサイトのデザインシステムを探します
review_my_ui	プロジェクト内の画面を実際のアプリと比較し、修正案を提案します
build_from_collection	uxkin.com に保存したリファレンスをもとに作成を始めます

このリポジトリの内容

• no-ui-slop と uxkin-research のスキル（skills）。ほかの5つのスキルは、npx skills add uxkin/agent で個別にインストールします。
• Claude（.claude-plugin）、Cursor（.cursor-plugin）、Codex（.codex-plugin）向けの UXKIN プラグイン、Kiro power（POWER.md）、Google Antigravity プラグイン（plugin.json）、Gemini CLI 拡張機能（gemini-extension.json）：スキルと MCP サーバーをまとめてインストールできます。
• 公式 MCP Registry に公開されている MCP サーバーの掲載情報（server.json）。
• UXKIN 独自のデザインシステム（DESIGN.md）：UXKIN はライブラリ内のすべてのウェブサイトについて DESIGN.md をエクスポートしており、UXKIN 自体もそのうちの1つを使って構築されています。エージェントに渡して、形式を実際に確認してください。
• UXKIN の掲載先（DISTRIBUTION.md）：すべてのレジストリ、アプリストア、ディレクトリと、それぞれの状況を確認できます。
• 使用例（examples）：各アプリの設定ファイル、AGENTS.md または CLAUDE.md 用のプロジェクト指示、プロンプトの例、実例（アカウント削除、サブスクリプション解約、モバイルのオンボーディング）が含まれており、UXKIN を使うとエージェントの動作がどう変わるかを確認できます。

Claude プラグインとして使う

1回のインストールで、スキルと UXKIN サーバーが追加されます。スキルはすぐに使えます。ライブラリを検索するには、サーバーに接続してください（Claude が UXKIN のページを開くので、ログインして Allow をクリックします）。Claude Code では、/mcp と入力し、uxkin を選択して Authenticate を選びます。

Claude Code では、GitHub から直接追加することもできます。

claude plugin marketplace add uxkin/agent
claude plugin install uxkin@uxkin

Cursor プラグインとして使う

インストール後、Cursor の MCP 設定で uxkin の横にある Login をクリックし、UXKIN にログインして Allow をクリックします。

Codex プラグインとして使う

codex plugin marketplace add uxkin/agent
codex plugin add uxkin@uxkin
codex mcp login uxkin

最後のコマンドを実行すると UXKIN のページが開くので、ログインして Allow をクリックします。

Google Antigravity プラグインとして使う

git clone https://github.com/uxkin/agent uxkin
agy plugin install ./uxkin

次に /mcp と入力し、uxkin を選択して Authenticate を選びます。UXKIN のページが開くので、ログインして Allow をクリックします。サーバーだけを追加するには、mcp_config.json を ~/.gemini/config/mcp_config.json に配置します。

Kiro power として使う

Kiro で Powers パネルを開き、Add Custom Power → Import power from GitHub の順に選択して、https://github.com/uxkin/agent を入力します。Kiro から uxkin の認証を求められたら、Authenticate をクリックし、UXKIN にログインして Allow をクリックします。

Gemini CLI 拡張機能として使う

gemini extensions install https://github.com/uxkin/agent

次に Gemini CLI を起動して /mcp auth uxkin と入力します。UXKIN のページが開くので、ログインして Allow をクリックします。

送信されるデータ

スキルはローカルで実行され、データを一切送信しません。MCP サーバーが受け取るのは、エージェントが送信する検索語（例：「瞑想アプリのオンボーディング」）、結果の上限数、サインイン情報のみで、uxkin.com から一致するリファレンスを返します。コード、ファイル、会話を読み取ることはありません。詳しくはプライバシーポリシーをご覧ください。

ドキュメントとサポート

• ドキュメント：各アプリのセットアップ方法と、各ツールが返す内容を確認できます。
• ガイド：Claude Code、Cursor、Codex、Copilot、Lovable、Bolt などで、より優れた UI を作る方法を紹介します。
• サポート、または [email protected] までメールでお問い合わせください。
• アフィリエイトプログラム：UXKIN を紹介した人からの支払いごとに、30%を獲得できます。

貢献とセキュリティ

スキル、セットアップ手順、使用例の修正を歓迎します。CONTRIBUTING.mdをご覧ください。セキュリティ上の問題を報告する場合は、SECURITY.mdをご覧ください。

ライセンス

このリポジトリ内のスキルおよびファイルは、MIT ライセンスで提供されています。UXKIN ライブラリ自体（画面、ジャーニー、デザインシステム）はホスト型サービスであり、このリポジトリには含まれていません。詳しくは利用規約をご覧ください。MIT ライセンスの対象はここにあるコードとテキストであり、UXKIN の名称やロゴの使用を許可するものではありません。

Claude Market MCP directoryに掲載されています