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 分

    請在儲存庫或註冊中心條目中宣告授權條款。