MCP 服务器

服务器地址为 https://www.design-extractor.com/api/mcp，使用 streamable HTTP，接受两种凭据：通过标准 MCP 授权流程（OAuth 2.1）使用你的账户登录，或以 Authorization: Bearer dx_... 形式发送的个人 API 密钥。通过它，智能体可以对公开网站发起提取、等待提取完成、读取完成的 DESIGN.md、查看价格和你的余额，以及列出你之前提取过的内容。结果也会像其他提取一样出现在我的提取中。

对于 Claude Code 和 Codex，还有一个插件，把服务器和 apply-designmd 技能打包在一起：它会引导智能体提取一个参考网站，并把令牌映射到 Tailwind、CSS 变量或令牌文件中。源码和安装说明见 Magentix-Studio/design-extractor-plugin。

claude.ai、Claude Desktop、ChatGPT、Claude Code 和 Codex 无需密钥即可连接：客户端会从服务器 URL 发现登录入口，你在浏览器中批准一次，客户端就会持有一个自动刷新的令牌。无需粘贴，也无需轮换。

1. 1

   在连接器设置中添加服务器 URL

   claude.ai 和 Claude Desktop：Settings、Connectors、Add custom connector，然后粘贴 https://www.design-extractor.com/api/mcp。ChatGPT：Settings、Connectors、Create，使用同一个 URL。

2. 2

   在授权页面上批准

   客户端会在浏览器中打开 Design Extractor。如果还没登录，请先登录，查看智能体请求的权限，然后批准。它发起的提取会像其他提取一样消耗你的积分。

3. 3

   让它提取一个网站

   说一句“Extract the design of stripe.com”（提取 stripe.com 的设计）就够了。这个智能体会出现在你账户页面的“已连接的智能体”中，点一下即可断开。在 claude.ai 中添加的连接器也会自动出现在 Claude Code 中，所以批准一次就能同时覆盖两者。

Claude Code 和 Codex 在终端中也以同样的方式登录：不带密钥添加服务器，然后在客户端提示时进行认证。具体命令见 Claude Code 和 Codex 部分。

一条命令即可为当前项目注册服务器，无需密钥。加上 --scope user 即可在所有项目中使用。

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

然后运行 /mcp，选择 design-extractor，再选择 Authenticate。在打开的页面中登录并批准；Claude Code 会保存令牌并自动续期。

或者安装插件，它会添加服务器和 apply-designmd 技能。插件的服务器也以同样方式登录：安装后运行 /mcp，选择插件的服务器并进行认证。

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor

如果要改用 API 密钥（适用于无法打开浏览器的机器），请把它作为请求头传入，并跳过认证步骤。

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \
  --header "Authorization: Bearer dx_..."

检查 /mcp 是否显示 design-extractor 已连接。通过 claude mcp add 添加后，工具名称为 mcp__design-extractor__extract_design 等；如果服务器来自插件，则为 mcp__plugin_design-extractor_design-extractor__extract_design。

不带密钥添加服务器，Codex 会立即打开登录页面。在打开的页面中登录并批准；之后如有需要，可以用 codex mcp login design-extractor 重新登录。

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

或者从插件市场安装同一个插件。在 Codex CLI 中，/plugins 会打开浏览界面，你可以在那里安装和启用插件市场中的条目；如果它的服务器要求认证，codex mcp login design-extractor 会打开登录页面。

codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

如果要改用 API 密钥，请指定存放密钥的环境变量名，并在启动 Codex 的 shell 中导出它；否则服务器会显示为失败，且没有任何工具。

export DESIGN_EXTRACTOR_API_KEY=dx_...

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \
  --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY

也可以在 ~/.codex/config.toml 中手动写入同样的声明；如果想直接内联密钥，请使用 http_headers = { "Authorization" = "Bearer dx_..." }。

[mcp_servers.design-extractor]
url = "https://www.design-extractor.com/api/mcp"
bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY"

把服务器添加到项目中的 .cursor/mcp.json，或者添加到 ~/.cursor/mcp.json 以用于所有项目。如果你不想把密钥写进文件，Cursor 也支持在请求头的值中使用 ${env:DESIGN_EXTRACTOR_API_KEY}。

{
  "mcpServers": {
    "design-extractor": {
      "url": "https://www.design-extractor.com/api/mcp",
      "headers": {
        "Authorization": "Bearer dx_..."
      }
    }
  }
}

在 options.mcpServers 中传入服务器，带上 type: "http" 和请求头，并用通配符允许它的工具，让智能体无需权限确认即可调用。

import { query } from "@anthropic-ai/claude-agent-sdk";

for await (const message of query({
  prompt: "Extract the design system of https://example.com and summarize its colors",
  options: {
    mcpServers: {
      "design-extractor": {
        type: "http",
        url: "https://www.design-extractor.com/api/mcp",
        headers: {
          Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`,
        },
      },
    },
    allowedTools: ["mcp__design-extractor__*"],
  },
})) {
  if (message.type === "result" && message.subtype === "success") {
    console.log(message.result);
  }
}

通过服务器进行的提取，费用与在网站上完全相同。Lite 提取一个页面，Pro 会抽样网站的关键页面。当前价格来自 get_pricing（撰写本文时 Lite 为 6 积分，Pro 为 10 积分），你的余额来自 get_credits。余额不足以支付所选档位时，extract_design 会拒绝并说明原因；请在价格页面充值。

请求提取你最近提取过的网站时，会复用你已有的提取，而不是发起新的提取，回复中会说明未扣除积分；只有其他人提取过的网站，仍按其档位价格收费。可以先运行 list_my_extractions 查看已有的内容。

有些网站只响应来自特定国家的访问者。当提取因此失败时，get_extraction 会列出可以加载该页面的国家，智能体可以使用 extract_design 并带上 country 重试。从其他国家提取的费用为档位价格加附加费，两者都由 get_pricing 列出。