Gradients Studio

Gradients Studio MCP

为编码 Agent 提供渐变背景。用通俗语言描述背景（“深色、带颗粒感，有点像 Linear”），你的 Agent 就会预览并调整效果，然后将完成的文件以布局所需的精确尺寸放入代码库：网站主视觉图、OG 图片、发布公告或幻灯片。

• 服务： https://www.gradients.studio/mcp（远程、Streamable HTTP、无状态）
• 无需密钥即可开始： 无需账户即可使用预览、调色板和建议功能。
• 导出： 下载 URL 对应的精确尺寸文件需要免费 API 密钥；每月免费 5 次，Pro 版不限次数。
• 文档： https://www.gradients.studio/mcp · Agent 安装指南：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 等：**添加一个名为 gradients、URL 为上述地址的远程服务。各客户端的详细说明请见 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	将简短描述（“深色、高级感的金融科技主视觉图，略带复古风”）转换为两到三个初始设置。可理解用途、氛围、颜色、产品名称、风格和质感。	否
list_palettes	工作室的 16 种调色板、一些令人称赞的网站（Linear、Stripe、Raycast……）所用的调色板，以及针对常见用途调校的 6 种初始方案。使用密钥还可查看你保存的调色板。	否
render_gradient	使用工作室提供的全部调节选项进行渲染：色块、条纹、云朵或光线；颗粒；像素和抖动效果；形状叠加或你的 Logo SVG。不提供 size 时，会内联生成免费的 960px 预览。提供 size 时，会导出精确尺寸的文件，并生成有效期为 24 小时的下载 URL。	仅 size 需要

每个结果都包含设置（可将其发回以继续调整）和一个工作室链接，方便你在浏览器中接手操作。在 24 小时内再次请求相同的导出结果，会返回相同的 URL，且不收取任何费用。

提示词示例

• “给落地页添加一张深色、带颗粒感的主视觉背景，尺寸为 2560×1440，风格类似 Linear。”
• “根据 tailwind.config.ts 中的品牌色，制作一张 1200×630 的 OG 图片背景。”
• “为定价版块制作柔和的淡彩渐变背景；先预览三个选项。”
• “制作一张用于 LinkedIn 发布公告的背景，尺寸为 1080×1350，并将我们的 Logo 作为淡雅的轮廓图。”
• “为 404 页面生成一张带复古像素效果的壁纸。”

可制作内容

网站主视觉图	发布公告	演示文稿幻灯片

限制

• 无密钥时：每个地址每分钟最多 30 次调用，每天最多 300 次。
• 使用密钥时：预览免费；指定尺寸的导出会使用账户的月度额度（免费 5 次，Pro 版不限次数），所有套餐每天最多可导出 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：为 Agent 编写的安装说明

支持

[email protected] · 隐私 · 条款

此仓库中的文件采用 MIT 许可；请参阅 LICENSE。