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

   사이트 요청하기

   “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를 실행하는 셸에서 그 변수를 export하세요. 그렇지 않으면 서버가 도구 0개로 실패 상태로 표시돼요.

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에 나와 있어요.