AI导哈

设计令牌提取API

ThemeContext MCP是一个通过AI助手从任何网站提取设计令牌的API服务，支持多种IDE集成。

  • by bidfox
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 bidfox/themecontextmcp

使用说明

主题上下文MCP

使用AI助手从任何网站提取设计令牌。将您最喜欢的IDE连接到ThemeContext API。

快速开始

1.获取API密钥

注册地址： themecontext.com 获取您的API密钥。

2.连接IDE

Claude Code 
claude mcp add --header "X-API-Key: YOUR_API_KEY" --transport http themecontext https://themecontext.com/mcp
Cursor

添加到 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "themecontext": {
      "serverUrl": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
VS Code

添加到您的 settings.json:

{
  "mcp.servers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
VS Code with Continue

添加到 ~/.continue/config.json:

{
  "mcpServers": [
    {
      "name": "themecontext",
      "transport": {
        "type": "http",
        "url": "https://themecontext.com/mcp",
        "headers": {
          "X-API-Key": "YOUR_API_KEY"
        }
      }
    }
  ]
}
Zed

添加到 ~/.config/zed/settings.json:

{
  "context_servers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Roo Code

添加到您的Roo代码MCP配置中：

{
  "mcpServers": {
    "themecontext": {
      "type": "streamable-http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Cline

通过MCP设置添加：

{
  "mcpServers": {
    "themecontext": {
      "type": "streamableHttp",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Kilo Code

添加到 mcp_settings.json 或 .kilocode/mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}
Amazon Q Developer CLI

添加到您的Amazon Q配置中：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Copilot CLI

添加到 ~/.copilot/mcp-config.json:

{
  "mcpServers": {
    "themecontext": {
      "type": "http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Warp

首选 Settings > AI > Manage MCP servers 并添加：

{
  "themecontext": {
    "url": "https://themecontext.com/mcp",
    "headers": {
      "X-API-Key": "YOUR_API_KEY"
    }
  }
}
JetBrains AI Assistant

首选 Settings > Tools > AI Assistant > MCP 并添加为JSON格式：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Augment Code

添加到VS代码 settings.json:

{
  "augment.advanced.mcpServers": [
    {
      "name": "themecontext",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  ]
}
Gemini CLI

添加到 ~/.gemini/settings.json:

{
  "mcpServers": {
    "themecontext": {
      "httpUrl": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Visual Studio 2022

添加到MCP设置中：

{
  "mcpServers": {
    "themecontext": {
      "type": "http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
LM Studio

添加到 mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Qodo Gen

在聊天界面中，点击“+添加新MCP”并配置：

{
  "themecontext": {
    "url": "https://themecontext.com/mcp",
    "headers": {
      "X-API-Key": "YOUR_API_KEY"
    }
  }
}
BoltAI

首选 Settings > Plugins 并添加：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}
Opencode

添加到您的Opencode配置中：

{
  "mcp": {
    "themecontext": {
      "type": "remote",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      },
      "enabled": true
    }
  }
}

3.开始使用

"Show me popular theme extractions"
"Get the color palette from github.com"
"Extract design tokens from https://stripe.com"
"Give me stripe.com's theme in Tailwind format"

可用工具

工具 说明
search-extractions 搜索可用的主题提取（流行、最近或按查询）
get-theme 获取域的设计标记（JSON、CSS或Tailwind格式）
extract-theme 从新网站提取设计令牌

输出格式

  • JSON -原始设计令牌
  • 层叠样式表 -CSS自定义属性（变量）
  • 顺风 -顺风CSS配置

例子

看 示例.md 查看详细的使用示例。

支持

许可证

麻省理工学院-见 许可证

相关 MCP