sparkbites-mcp

sparkbites-mcp

An MCP (Model Context Protocol) server that exposes Sparkbites — a curated directory of 500+ design-forward websites — and the design-bites library of DESIGN.md files to any MCP-compatible AI agent (Claude Desktop, Cursor, Cline, Continue, Zed, and more).

With this server your agent can:

• Search the Sparkbites directory for inspiration by keyword, tag, tech stack, color, or font.
• Look up full details for a website (colors, fonts, stacks, screenshot, DESIGN.md availability).
• List every website that has a DESIGN.md file available.
• Fetch the raw DESIGN.md content as design reference.
• Install a DESIGN.md file directly into your project.

Install

No install step — run it with npx:

npx -y sparkbites-mcp

Or install globally:

npm install -g sparkbites-mcp
sparkbites-mcp

The server speaks MCP over stdio, so it's meant to be launched by an MCP client, not run directly.

Client configuration

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "sparkbites": {
      "command": "npx",
      "args": ["-y", "sparkbites-mcp"]
    }
  }
}

Cursor

Open Cursor Settings → MCP → Add new MCP server:

{
  "mcpServers": {
    "sparkbites": {
      "command": "npx",
      "args": ["-y", "sparkbites-mcp"]
    }
  }
}

Cline (VS Code)

Edit Cline's MCP settings and add:

{
  "mcpServers": {
    "sparkbites": {
      "command": "npx",
      "args": ["-y", "sparkbites-mcp"],
      "disabled": false
    }
  }
}

Continue

Add to ~/.continue/config.json:

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "sparkbites-mcp"]
        }
      }
    ]
  }
}

Zed

Add to your Zed settings.json:

{
  "context_servers": {
    "sparkbites": {
      "command": {
        "path": "npx",
        "args": ["-y", "sparkbites-mcp"]
      }
    }
  }
}

Tools

search_bookmarks

Search the Sparkbites directory.

Arg	Type	Description
query	string	Text to search in name and description
tags	string[]	Filter by tag names
stacks	string[]	Filter by tech stack names
colors	string[]	Filter by color family (Red, Blue, Purple, etc)
fonts	string[]	Filter by font family names
limit	number	Max results (1-50, default 10)

get_bookmark

Get full details for a single bookmark.

Arg	Type	Description
name	string	Bookmark name (e.g. "Linear", "Stripe")

list_design_systems

List all websites with an available DESIGN.md file.

Arg	Type	Description
search	string	Fuzzy filter on domain names
limit	number	Max results (1-300, default 50)

get_design_md

Fetch the raw DESIGN.md content for a domain.

Arg	Type	Description
domain	string	Domain like linear.app or stripe.com

install_design_md

Download a DESIGN.md and write it to disk.

Arg	Type	Description
domain	string	Domain like linear.app
path	string	Optional target path. Defaults to ./DESIGN.md, or ./{domain}/DESIGN.md if one already exists.

Resources

• sparkbites://bookmark/{name} — Markdown summary of a bookmark.
• sparkbites://design-md/{domain} — Raw DESIGN.md content for a domain.

Prompts

• use-design-reference — Instructs the agent to fetch and follow the DESIGN.md for a given domain during the task.

Configuration

Env var	Default	Description
SPARKBITES_API_URL	https://sparkbites.dev	Override the API base URL (useful for local development).

Example prompts

"Use the Sparkbites MCP to find 5 minimalist portfolio sites with dark themes."

"Look up Linear on Sparkbites and install its DESIGN.md into my project."

"List every DESIGN.md available and pick one that matches a developer tools aesthetic."

License

MIT