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