Sleek MCP Server認証済み注目

Sleek MCP Server とは？

Sleek MCP Server は、AI モバイルアプリデザインツール Sleek が公式にホストしている MCP サーバーです。アプリの内容を普段の言葉で伝えると、編集可能な本物のモバイルアプリ画面がチャット内に画像で返ってきます。コーディングエージェントは、その画面をもとに実際のアプリを構築できます。

サーバーは Sleek のインフラ上の https://sleek.design/api/mcp で動いているため、インストールは不要です。サインインはブラウザでの OAuth で行います。sleekdotdesign/mcp リポジトリにあるのはマニフェストとドキュメントだけで、サーバーのコードは含まれていません。

Sleek MCP Server の使い方

まず sleek.design で無料アカウントを作成します。次に下の URL をクライアントに追加し、ブラウザが開いたらサインインします。

https://sleek.design/api/mcp

Sleek はすべてのクライアントで OAuth を推奨しています。sleek.design/agents/setup で発行できる API キーは、OAuth に対応していないクライアント向けの最後の手段です。キーを設定すると、クライアントはブラウザでのサインインを提示しなくなります。

Claude Code

claude mcp add --transport http sleek https://sleek.design/api/mcp
claude mcp login sleek

/mcp からサインインすることもできます。プラグインとして使う場合は、/plugin marketplace add sleekdotdesign/mcp の後に /plugin install sleek@sleek を実行します。API キーを使うしかない場合は、キーを環境変数に入れ、シングルクォートで囲んでください。こうすると Claude Code はキーの値ではなく変数への参照を保存します。

claude mcp add --transport http sleek https://sleek.design/api/mcp \
  --header 'Authorization: Bearer ${SLEEK_API_KEY}'

Claude Desktop と claude.ai

Customize → Connectors を開いて + をクリックし、Add custom connector を選んで https://sleek.design/api/mcp を入力します。Advanced settings は空のまま Add をクリックし、Sleek にサインインしてアクセスを承認します。Team や Enterprise プランでは、Owner が Organization settings → Connectors で一度追加すれば、メンバーは Connect をクリックするだけで使えます。

Cursor

~/.cursor/mcp.json または .cursor/mcp.json に次の設定を追加します。サーバーを有効にすると、Cursor が OAuth サインインを開始します。

{ "mcpServers": { "sleek": { "url": "https://sleek.design/api/mcp" } } }

VS Code

.vscode/mcp.json に url を指定してリモートサーバーを追加し、表示に従ってサインインします。

{ "servers": { "sleek": { "type": "http", "url": "https://sleek.design/api/mcp" } } }

Codex

codex mcp add sleek --url https://sleek.design/api/mcp
codex mcp login sleek

Sleek MCP Server の主な機能

• 1 回のリクエストでアプリ全体をデザインできます。デザインエージェントがすべての画面をまとめて計画するので、画面同士が 1 つのデザインシステムを共有します。
• 画面はチャット内に画像で表示されるため、アプリを切り替えずに確認できます。
• 1 つの画面だけをその場で編集できます。例：「Add to cart ボタンを固定の下部バーに移動して」
• get_component で画面の生成 HTML を取得し、コーディングエージェントに引き渡せます。
• プロジェクトのリンクから、ネイティブで編集可能なレイヤーとして Figma に書き出したり、HTML や Tailwind CSS を使った React として書き出したりできます。どちらも全プランで使えます。
• list_references で厳選されたスタイルのリファレンスを選べます。
• 一覧表示、読み取り、レンダリングは無料です。クレジットを消費するのはデザイン実行だけです。

Sleek MCP Server のツール

サーバーは 11 個のツールを提供しています。

• プロジェクト：list_projects、create_project、get_project。delete_project はプロジェクトを完全に削除します。confirm: true が必要で、ユーザーがプロジェクト名をはっきり示した後にだけ実行すべきです。
• 画面：list_components はプロジェクト内の画面を一覧表示し、get_component は画面の HTML を取得します。screenshot は最大 4 画面を 1 枚の画像にレンダリングします。
• デザイン実行：design は要件全体を 1 つのメッセージとして受け取ります。オプションの入力は screenId、referenceId、imageUrls、idempotencyKey、wait です。get_design_run で実行状況を確認し、cancel_design_run で実行を止めます。
• スタイル：list_references は参考にできる厳選されたアプリスタイルを返します。

Sleek MCP Server のユースケース

• 新しいアプリを一度にデザインする：「Sleek で植物ショップのアプリをデザインして。オンボーディング、おすすめの植物を並べたホーム、植物の詳細、カート、プロフィール。温かみのあるミニマルなスタイルで」
• 既存のデザインを無料で見る：「植物ショップのプロジェクトからカートとプロフィールの画面を見せて」
• 狙った箇所だけを編集する：「植物の詳細画面で価格を大きくして」
• dark fintech や brutalist などのリファレンスを選んで、特定の雰囲気にそろえる。
• コードに引き渡す：コーディングエージェントに get_component で各画面の HTML を取得させ、実際のアプリを構築させる。

Sleek MCP Server のトラブルシューティング

• サインイン前なのに Claude Code で sleek が接続済みと表示される：これは想定どおりです。ツールの検出にはログインが不要で、認証はツールの実行時に確認されます。
• API キーが使えず、OAuth の案内も出ない：拒否されたキーは接続の失敗として扱われます。キーを直すか、ヘッダーを削除して OAuth を使ってください。
• ブラウザで URL を開くと 405 が返る：仕様どおりです。このエンドポイントは POST しか受け付けません。
• design が実行中のデザインと競合する：1 つのプロジェクトで同時に動かせるのは 1 回の実行だけです。get_design_run で状況を確認するか cancel_design_run を呼び出してから、もう一度試してください。