MCP Server

GradientDeck MCP

Connect GradientDeck to an AI coding agent when you want design references and copy-ready CSS to be available inside the implementation workflow.

Livehttps://mcp.gradientdeck.com/mcp

Connect your agent

Claude

Claude

Anthropic's Claude — the Claude Code CLI and the claude.ai / Desktop app.

Docs ↗
1

Claude Code (CLI)

Run in your terminal (project or user scope).

bash
claude mcp add --transport http gradientdeck https://mcp.gradientdeck.com/mcp
2

Claude.ai & Desktop (Connectors)

Settings → Connectors → Add custom connector.

  1. 1.Open Settings → Connectors → Add custom connector.
  2. 2.Paste the URL: https://mcp.gradientdeck.com/mcp
  3. 3.Leave authentication blank — GradientDeck is public & read-only.

Agent logos by LogoKit

What you can ask

“Recommend a design direction for a fintech dashboard.”
“Find a dark blue/purple mesh gradient for a SaaS hero.”
“Generate a Tailwind glassmorphism pricing card.”
“Create an accessible brand palette from #7c3aed.”
“Critique a component for contrast and hierarchy.”
“Generate a full design system from #10b981.”

What's inside

17,000+ assets

Gradients, patterns, CSS animations, animated icons, color palettes, Tailwind colors, mesh/shadow/glass presets.

Code generators

Gradients, text gradients, patterns, blobs, mesh, glassmorphism, shadows, palettes, and full UI treatments — as CSS/Tailwind/React/SVG.

A design advisor

recommend_design, critique_design, explain_concept, color_theory, and generate_design_system — judgment grounded in the catalog.

Read-only & stateless — no accounts, no database, no user data. Public endpoint, no auth. Health check at /health.
01

What the server is best at

It is strongest when you need a design asset or a design judgment fast: a gradient, a shadow, a palette, an accessibility check, or a full direction grounded in the catalog.

  • Use the catalog tools for concrete assets.
  • Use the generator tools for code-ready output.
  • Use the advisory tools when you need a decision, not just a snippet.
02

What to do after setup

Do not stop at the connection screen. Send one real prompt, verify the output, and then move into a design task that needs a decision, not a demo.

  • Try a catalog query first.
  • Then ask for a recommendation or critique.
  • Finish by generating a concrete UI treatment.
03

What makes it different

The tools are opinionated around real design work. They are not a generic endpoint list; they are a workflow for turning design intent into usable output.

  • The content is specific to design decisions.
  • The page is linked to real articles and examples.
  • The setup instructions are client-specific, not copy-pasted boilerplate.
Questions
Why does this page talk about the tools so much?

Because the value here is the workflow. A setup page that explains the tool classes, the use cases, and the next step is more useful than a page that only shows a URL.

Is the page content original enough to matter for AdSense?

It is materially better than a thin landing page because it gives a human reader setup guidance, use cases, and context that they can actually use.