Gradients Studio

Gradients Studio MCP

コーディングエージェント向けのグラデーション背景です。「暗めで、粒子感があり、少しLinearのような感じ」といった言葉で背景を説明すると、エージェントがプレビューを表示して調整し、レイアウトに必要な正確なサイズで完成ファイルをリポジトリに追加します。ウェブサイトのヒーロー画像、OG画像、ローンチ投稿、スライドなどに利用できます。

• サーバー： https://www.gradients.studio/mcp（リモート、Streamable HTTP、ステートレス）
• 開始時にキーは不要： プレビュー、パレット、候補の提案はアカウントなしで利用できます。
• エクスポート： ダウンロードURL付きの正確なサイズのファイルには無料のAPIキーが必要です。月5回まで無料で、Proでは無制限です。
• ドキュメント： https://www.gradients.studio/mcp · エージェントのインストールガイド：llms-install.md

このリポジトリには、サーバーの公開掲載ファイルとドキュメントのみが含まれています。サービス自体はホストされているため、ビルドや実行は不要です。

インストール

Claude Code

claude mcp add gradients --transport http https://www.gradients.studio/mcp

または、Claudeがいつこのツールを使うべきかを示すスキルを追加するプラグインとしてインストールできます。

/plugin marketplace add anusandhan/gradients-studio-mcp
/plugin install gradients-studio@gradients-studio

Cursor： Cursorに追加するか、~/.cursor/mcp.json に追加します。

{
  "mcpServers": {
    "gradients": { "url": "https://www.gradients.studio/mcp" }
  }
}

Codex

codex mcp add gradients --url https://www.gradients.studio/mcp

VS Code

code --add-mcp '{"name":"gradients","type":"http","url":"https://www.gradients.studio/mcp"}'

Gemini CLI

gemini extensions install https://github.com/anusandhan/gradients-studio-mcp

Windsurf、Cline、Claude Desktopなど： 上記のURLを使用して、gradients という名前のリモートサーバーを追加します。クライアントごとの詳細はllms-install.mdをご覧ください。

エクスポート用のキーを追加する

1. https://www.gradients.studio/app?keys=1 でキーを作成します（サインイン後、アカウントメニュー → API keys）。キーは一度だけ表示されます。
2. Authorization: Bearer <key> として送信します。

claude mcp remove gradients
claude mcp add gradients --transport http https://www.gradients.studio/mcp --header "Authorization: Bearer <key>"

JSON設定では、"url" の隣に "headers": { "Authorization": "Bearer <key>" } を追加します。Claude Codeプラグインでは、代わりに環境変数 GRADIENTS_STUDIO_KEY を設定します。

ツール

ツール	機能	キー
suggest_settings	簡単な説明（「暗めで、高級感のあるフィンテックのヒーロー画像、少しレトロ」など）から、2〜3個の初期設定を作成します。用途、ムード、色、製品名、スタイル、仕上げを理解します。	不要
list_palettes	スタジオの16種類のパレット、人気サイト（Linear、Stripe、Raycastなど）で使われているパレット、一般的な用途向けに調整された6種類の初期設定を表示します。キーがあれば、保存済みのパレットも表示されます。	不要
render_gradient	スタジオにあるすべての調整項目を使ってレンダリングします。ブロブ、ストライプ、雲、光線、粒子感、ピクセルやディザの仕上げ、図形のオーバーレイ、またはロゴのSVGに対応しています。size を指定しない場合は、960pxの無料プレビューがインラインで表示されます。size を指定すると、正確なサイズでエクスポートされ、24時間有効なダウンロードURLが返されます。	size の場合のみ

すべての結果には設定（反復調整のために送り返せます）と、ブラウザーで編集を引き継ぐためのスタジオリンクが含まれます。同じエクスポートを24時間以内に再度リクエストした場合は、同じURLが返され、料金はかかりません。

プロンプトの例

• 「ランディングページに、暗くて粒子感のあるヒーロー背景を追加して。サイズは2560×1440で、Linearのような感じに。」
• 「tailwind.config.ts のブランドカラーを使って、1200×630のOG画像の背景を作って。」
• 「価格セクション用に、柔らかなパステルカラーのグラデーション背景を作って。まず3つの候補をプレビューして。」
• 「LinkedInのローンチ投稿用の背景を作って。サイズは1080×1350で、ロゴを控えめなアウトラインとして入れて。」
• 「404ページ用に、レトロなピクセル仕上げの壁紙を生成して。」

作成例

ウェブサイトのヒーロー画像	ローンチ投稿	プレゼンテーションスライド

制限

• キーなしの場合：1分あたり30回、アドレスごとに1日あたり300回までです。
• キーありの場合：プレビューは無料です。サイズ指定のエクスポートにはアカウントの月間枠（無料で5回、Proでは無制限）が使われます。すべてのプランで、サイズ指定のエクスポートは1日あたり200回までです。
• ピクセルおよびディザ仕上げのプレビューは無料です。エクスポートはProで利用できます。

このリポジトリ内のファイル

• server.json： MCP Registry のエントリー
• .claude-plugin/、.mcp.json、skills/：Claude Code プラグインとそのマーケットプレイス
• .codex-plugin/：Codex プラグイン
• gemini-extension.json、GEMINI.md：Gemini CLI 拡張機能
• glama.json：Glama の掲載情報
• llms-install.md：エージェント向けのインストール手順

サポート

[email protected] · プライバシー · 利用規約

このリポジトリ内のファイルは MIT ライセンスで提供されています。詳細は LICENSE をご覧ください。