Gradients Studio

studio.gradients由 gradients.studio 发布官方发布者v1.1.0更新于 Nov 2, 2026

Gradient backgrounds with real grain, pixel and dither finishes. Free previews, no key needed.

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

Gradients Studio 可根据自然语言描述生成渐变背景图（网站首屏、OG 图、幻灯片），预览免费，按尺寸导出需 API 密钥。

可以做什么
  • 把一段自然语言需求转成两三个可直接用于渲染的起始设置
  • 浏览工作室调色板、知名产品网站所用配色，以及针对常见用途调好的起点
  • 渲染渐变背景，支持色块、条纹、云层或射线，颗粒质感、像素与抖动效果，以及形状或 Logo 叠加
  • 不给尺寸时返回免费的 960 像素内嵌预览，给出尺寸时返回精确尺寸导出与下载链接
  • 返回所用设置和工作室链接，便于继续调整或在浏览器中接手
适用场景
适合编码助手需要为网站首屏、OG 图、发布贴、幻灯片、应用商店素材或壁纸生成背景图，并希望按布局所需精确尺寸直接产出、从简短描述而非设计工具起步的场景。
运行要求
需要连接该服务的远程 Streamable HTTP 端点，本地无需构建或运行。预览、调色板和建议无需账号。精确尺寸导出需要工作室账号的免费 API 密钥，通过 Authorization Bearer 请求头发送（使用 Claude Code 插件时也可设置 GRADIENTS_STUDIO_KEY 环境变量）。
安装前请注意
API 密钥只显示一次，并以 Authorization Bearer 请求头发送，请勿写入共享配置。按尺寸导出会消耗账户每月额度（免费 5 次，Pro 不限），且所有方案每天上限 200 次，重度使用可能需要付费方案。像素与抖动效果仅在 Pro 方案可导出。下载链接 24 小时内有效。提示词与需求会发送到该托管服务。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Gradients Studio，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/studio.gradients%2Fmcp/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "gradients-studio": {
      "type": "http",
      "url": "https://www.gradients.studio/mcp"
    }
  }
}

README

[Gradients Studio MCP]

Gradients Studio MCP

Gradient backgrounds for coding agents. Describe the background in plain words ("dark, grainy, a bit like Linear") and your agent previews it, adjusts it, and drops the finished file into your repo at the exact size the layout needs: a website hero, an OG image, a launch post, a slide.

[Gradients Studio MCP]

  • Server: https://www.gradients.studio/mcp (remote, Streamable HTTP, stateless)
  • No key to start: previews, palettes and suggestions work without an account.
  • Exports: exact-size files with a download URL need a free API key; 5 free a month, unlimited on Pro.
  • Docs: https://www.gradients.studio/mcp · agent install guide: llms-install.md

This repository holds the server's public listing files and docs only. The service itself is hosted; there is nothing to build or run.

Install

Claude Code

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

Or as a plugin, which adds a skill that tells Claude when to reach for it:

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

Cursor: Add to Cursor, or add to ~/.cursor/mcp.json:

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

Codex

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

VS Code

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

Gemini CLI

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

Windsurf, Cline, Claude Desktop and others: add a remote server named gradients with the URL above. Per-client details are in llms-install.md.

Add a key for exports

  1. Create a key at https://www.gradients.studio/app?keys=1 (sign in, then account menu → API keys). It is shown once.
  2. Send it as Authorization: Bearer <key>:
bash
claude mcp remove gradientsclaude mcp add gradients --transport http https://www.gradients.studio/mcp --header "Authorization: Bearer <key>"

In JSON configs, add "headers": { "Authorization": "Bearer <key>" } next to "url". With the Claude Code plugin, set GRADIENTS_STUDIO_KEY in your environment instead.

Tools

ToolWhat it doesKey
suggest_settingsTurns a brief ("dark, premium fintech hero, a bit retro") into two or three starting settings. Understands jobs, moods, colors, product names, styles and finishes.No
list_palettesThe studio's sixteen palettes, palettes behind sites people admire (Linear, Stripe, Raycast…), and six tuned starting points for common jobs. Your saved palettes too, with a key.No
render_gradientRenders with every dial the studio has: blobs, stripes, clouds or rays; grain; pixel and dither finishes; shape overlays or your logo SVG. Without size: a free 960px preview inline. With size: an exact-size export and a download URL valid for 24 hours.Only for size

Every result includes the settings (send them back to iterate) and a studio link to take over in the browser. Asking for the same export again within 24 hours returns the same URL and costs nothing.

Example prompts

  • "Add a dark, grainy hero background to the landing page, 2560×1440, something like Linear."
  • "Make a 1200×630 OG image background in our brand colors from tailwind.config.ts."
  • "Give the pricing section a soft pastel gradient background; preview three options first."
  • "Make a LinkedIn launch post background, 1080×1350, with our logo as a subtle outline."
  • "Generate a retro pixel-finish wallpaper for the 404 page."

What it makes

Website heroLaunch postDeck slide
[Website hero][Launch post][Deck slide]

Limits

  • Without a key: 30 calls a minute and 300 a day per address.
  • With a key: previews are free; sized exports use the account's monthly pool (5 free, unlimited on Pro), with a cap of 200 sized exports a day on every plan.
  • Pixel and dither finishes preview free and export on Pro.

Files in this repo

  • server.json: the MCP Registry entry
  • .claude-plugin/, .mcp.json, skills/: the Claude Code plugin and its marketplace
  • .codex-plugin/: the Codex plugin
  • gemini-extension.json, GEMINI.md: the Gemini CLI extension
  • glama.json: the Glama listing
  • llms-install.md: install instructions written for agents

Support

[email protected] · Privacy · Terms

The files in this repository are MIT licensed; see LICENSE.

来源：README.md，提交 0357a0d

工具

3

render_gradient

Render a gradient background

Render a gradient background image (website hero, OG image, launch post, slide, wallpaper) with Gradients Studio's renderer: blobs, stripes or clouds, real grain, pixel and dither finishes, shape overlays. Workflow: start from suggest_settings or list_palettes, call this WITHOUT `size` for a free 960px preview (returned inline, no API key needed), adjust the `settings` you get back, and pass `size` (exact pixels, e.g. [1200, 630] for an OG image, [2560, 1440] for a hero) once the person is happy. A sized export needs an API key; it uses one of the account's monthly exports (5 free, unlimited on Pro) and returns a URL that is valid for 24 hours; asking for the same export again within that time returns the same URL for free. Every result includes `settings` (send them back to iterate) and `studioUrl` (open it to take over in the browser). Use `overlaySvg` with the raw text of a logo SVG to draw it as concentric outlines over the gradient. For the soft mesh look keep blur at 700–900 and contrast at 130; saturated mid-tone colors render best, muddy ones come out dull.

输入参数blurseedsizegrainsheenstylecolors必填detaileffectformatoverlaycontrast另有 23 个

list_palettes

List palettes and starting points

Palettes to start from: the studio's sixteen, the ones behind product sites people admire (Linear, Stripe, Raycast, …), the account's saved palettes (with an API key), and six tuned starting points for common jobs (website hero, launch post, deck slide, product screenshot, integrations grid, App Store shot) with their full settings. Pass any of these to render_gradient. No key needed.

无需输入参数。

suggest_settings

Suggest settings from a brief

Turn a plain-language brief ('dark, premium, fintech hero, a bit retro') into two or three starting settings for render_gradient. Understands jobs (hero, launch post, slide, screenshot, integrations, app store), moods and colors, product names (Linear, Stripe, Raycast…), styles (blobs, stripes, clouds) and finishes (retro/pixel, print/dither, terminal/glyph dither, film/grain, smooth). You are the taste layer: preview the candidates and adjust. No key needed.

输入参数brief必填aspectRatio

版本历史

2
  1. v1.1.0最新Oct 19, 2026
  2. v1.0.1Sep 21, 2026

评分

已满足适用检查项的 90%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分

    请在仓库或注册中心条目中声明许可证。