design-inspiration

MCP server that searches Dribbble, Behance, Awwwards, Mobbin, and Pinterest for UI design inspiration. Built for Claude Code but works with any MCP client.

Uses the Serper API (Google search) with site: filters to scope results to design platforms only. Can also extract actual design tokens (colors, fonts, spacing) from any live website via headless browser.

Find inspiration, then extract exact tokens from sites you like.

Why

I wanted Claude to pull design references while building UI — look at real Dribbble shots, find color palettes, browse layout patterns — without leaving the terminal. The existing options either required Playwright (heavy) or didn't return image URLs I could actually download and view.

The search side wraps Serper's image and web search endpoints with pre-configured site filters. Simple.

The token extraction side came from a different itch: I'd find a site I liked on Dribbble, open it, and then manually eyedrop colors and inspect fonts. Now I just point design_extract_tokens at the URL and get the exact values back.

Tools

design_search_images — Image search across design platforms. Returns image URLs, dimensions, source links. Good for finding visual references for a specific UI pattern.

design_search_references — Web search scoped to design sites. Returns article titles, snippets, links. Better for finding case studies, design system docs, or pattern explanations.

design_search_styles — Searches for a specific aesthetic direction (color palette, typography, layout, animation). Runs both image and web search in parallel, returns combined results.

design_extract_tokens — Extracts design tokens from a live website. Point it at any URL and get back colors, typography, spacing, border radii, and shadows. Supports dark_mode and mobile flags. Requires dembrandt installed globally (npm install -g dembrandt).

The three search tools accept a sites parameter to filter to specific platforms, and a num parameter to control result count.

Setup

You need a Serper API key for the search tools. Free tier gives you 2,500 searches with no credit card.

1. Sign up at serper.dev
2. Copy your API key

For token extraction, install dembrandt globally:

npm install -g dembrandt

Claude Code

claude mcp add design-inspiration -e SERPER_API_KEY=your-key-here -- node /path/to/design-inspiration-mcp-server/dist/index.js

Any MCP client (stdio)

{
  "design-inspiration": {
    "type": "stdio",
    "command": "node",
    "args": ["/path/to/design-inspiration-mcp-server/dist/index.js"],
    "env": {
      "SERPER_API_KEY": "your-key-here"
    }
  }
}

Build from source

git clone https://github.com/YonasValentin/design-inspiration-mcp-server.git
cd design-inspiration-mcp-server
npm install
npm run build

How it actually works

Each tool builds a search query by appending site:dribbble.com OR site:behance.net OR ... to whatever you searched for. Then it hits Serper's /images or /search endpoint and formats the response.

The design_search_styles tool runs both endpoints in parallel (Promise.all) to get images and articles for the same query.

design_extract_tokens shells out to dembrandt (via child_process.execFile) with --json-only, parses the JSON output, and formats it into markdown + structured data. 60-second timeout. No extra npm dependencies — dembrandt runs as a global CLI and child_process is built-in.

Results are returned as both markdown (for display) and structured JSON (for programmatic use). Responses get truncated at 25,000 characters to avoid flooding the context window.

Usage tips

Search for specific UI patterns, not generic terms:

# good
"fintech dashboard dark mode"
"mobile onboarding flow card swipe"
"saas pricing page comparison table"

# too vague
"nice website"
"good design"

You can download the returned image URLs and have Claude view them directly:

curl -sL "https://cdn.dribbble.com/..." -o /tmp/reference.jpg

Then ask Claude to read the image file — it can see and describe the design.

License

MIT

Declarative 3D asset workflow

References can declare that a site concept needs 3D assets. design_prepare_references validates the requirement and returns an assetPlan; it does not create files, call Blender, or invoke another MCP.

When an asset plan contains route: "blender", the host application or agent must route that task to the available Blender MCP. This is host-level routing, not an invocation performed by this server. Preserve the asset ID and acceptance requirements in the Blender task.

Use examples/blender-asset-task.json as the handoff shape. Include subject, visual intent, camera, composition, materials, lighting, animation, web-ready output formats, performance limits, and acceptance expectations. Web outputs normally include compressed .glb or .gltf plus a .png or .webp fallback. Acceptance verifies clean-viewer loading, framing, materials, animations, and performance budgets.

Expected handoff: design_prepare_references -> assetPlan.route = "blender" -> host application -> Blender MCP -> native site implementation and browser QA.

Do not replace a declared 3D requirement with CSS or a placeholder without user approval. If Blender is unavailable, report the blocked asset task and retain the declarative handoff.

Declarative 2D animation workflow

References can also declare animated SVG or Lottie deliverables. The server validates the animation requirements and returns an assetPlan route; it does not call SVGator or Lottie Creator itself.

Use kind: "animated-svg" for a web-native animated SVG, or kind: "lottie" when Lottie is the primary delivery format. Set preferredTool to "svgator" or "lottie-creator" when the default route should be overridden. Without an explicit tool, animated SVG routes to SVGator and Lottie routes to Lottie Creator.

Animation requirements can include duration, loop behavior, trigger, reduced-motion behavior, and file or path budgets. The host application must route assetPlan.route = "svgator" to the connected SVGator MCP or assetPlan.route = "lottie-creator" to Lottie Creator MCP, then preserve the asset ID and acceptance requirements during implementation.

See examples/svgator-asset-task.json for a complete handoff shape. The expected flow is design_prepare_references -> assetPlan.route = "svgator" -> host application -> SVGator MCP -> export -> native site implementation and browser motion QA.