가이드

MCP로 코딩 에이전트에게 필요할 때마다 디자인 사양 제공하기

에이전트는 문서를 가져오듯 디자인 사양도 가져올 수 있어요. Design Extractor MCP 서버를 연결하면, 에이전트가 하나의 작업 안에서 공개 사이트의 DESIGN.md를 추출하고, 추출을 기다리고, 파일을 읽고, 그걸로 UI를 만들 수 있어요.

파일을 옮겨 복사할 필요도, 브라우저 탭을 열 필요도 없어요. 프롬프트에서 사이트 이름만 말하면 사양이 에이전트의 컨텍스트에 들어와요.

대상 독자: 에이전트와 에이전트 워크플로를 만드는 개발자. 업데이트: .

이 가이드에서 얻는 것

  • 계정 로그인이나 API 키로 Claude Code, Codex, Cursor, claude.ai에 연결된 MCP 서버.
  • 에이전트가 따르는 도구 흐름: 확인, 추출, 대기, 읽기.
  • 추출부터 UI까지 전체 과정을 에이전트가 수행하게 하는 프롬프트.
  • 비용과 미리 고려해야 할 제한 사항.

에이전트가 받는 것

서버는 https://www.design-extractor.com/api/mcp에 있고 streamable HTTP를 사용해요. 이 서버를 통해 에이전트는 공개 사이트의 추출을 시작하고, 기다렸다가, 완성된 DESIGN.md를 읽고, 가격과 잔액을 확인하고, 이전에 추출한 목록을 볼 수 있어요. 모든 추출은 다른 추출과 마찬가지로 사이트의 내 추출 목록에도 나타나요.

파일은 사이트에서 만드는 것과 같아요. 맨 위에는 색상, 타이포그래피, 간격, 반경, 컴포넌트 토큰이, 그 아래에는 사용 규칙이 있어요. Google의 DESIGN.md 사양을 따르기 때문에 에이전트가 다른 사양처럼 읽을 수 있어요.

서버 연결하기

클라이언트를 고르세요. Claude Code, Codex, claude.ai, Claude Desktop, ChatGPT는 계정으로 로그인하고, Cursor와 스크립트는 API 키를 사용해요.

  1. 서버를 한 번만 추가하세요. 키는 필요 없어요.

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

  2. /mcp를 실행하고 design-extractor를 고른 뒤 Authenticate를 선택하세요. 열리는 페이지에서 로그인하고 승인하세요.

  3. 사이트를 요청하세요: “stripe.com 디자인 추출해 줘”.

Claude Code, Codex, claude.ai, Claude Desktop, ChatGPT는 계정으로 로그인해요. Cursor, n8n, 스크립트는 계정 페이지에서 발급한 개인 API 키를 사용해요.

Claude Code와 Codex용으로는 플러그인도 있어요. 서버와 apply-designmd 스킬을 묶은 것으로, 이 스킬은 에이전트가 참고할 사이트를 추출하고 그 DESIGN.md를 코드베이스에 적용하는 과정을 안내해요. 설치한 뒤 Claude Code에서 /mcp 명령을 실행하고 플러그인의 서버를 인증하세요.

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

모든 클라이언트, Agent SDK 코드 조각, 키 설정은 MCP 서버 문서 페이지에 있어요.

도구와 호출 순서

도구하는 일
list_my_extractions최신순으로 정렬된 내 추출 목록. 이미 가진 사이트에 두 번 결제하지 않도록 먼저 호출하세요.
get_pricing현재 추출 비용(크레딧).
get_credits남은 크레딧 잔액.
extract_design공개 URL의 추출을 시작하고 크레딧을 사용해요. 사이트의 주요 페이지를 샘플링하려면 tier에 PRO를 전달하세요. 추출이 대기열에 들어가자마자 반환돼요.
get_extraction사이트 이름이나 URL을 받아요. 추출이 진행되는 동안에는 상태를, 그다음에는 DESIGN.md 전체 텍스트를 반환해요. 실패한 추출은 이유를 알려 줘요.

추출에는 최소 1분이 걸리므로, 흐름은 시작한 뒤 폴링하는 방식이에요. 서버가 에이전트에게 직접 알려 주니, 여러분은 사이트 이름만 말하면 돼요.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

실전 예시: Supabase

에이전트에게 supabase.com 스타일로 만들어 달라고 요청했다고 해 볼게요. get_extraction 도구가 추출 완료를 보고하면 DESIGN.md 전체를 텍스트로 반환해요. 갤러리의 Supabase DESIGN.md는 같은 방식의 Pro 추출로 만들어졌으니, 에이전트의 컨텍스트에 무엇이 들어오는지 보여 줘요. 이렇게 시작해요:

갤러리에 있는 Supabase DESIGN.md의 앞부분으로, 그룹별로 토큰 몇 개만 남겼어요.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Supabase 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. Supabase DESIGN.md 전체 읽기

토큰 아래에는 에이전트가 규칙과 레시피를 읽는 섹션이 이어져요: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Components 섹션에만 HTML과 CSS로 된 레시피 49개가 있어서, 에이전트는 버튼이나 카드를 추측하지 않고 측정된 값으로 다시 만들어요.

프롬프트

도구, 사이트, 그리고 파일로 무엇을 할지 명시하세요. 아래 프롬프트는 이 가이드를 위해 작성했어요. 사이트와 작업을 바꿔서 쓰세요.

한 작업에서 추출하고 만들기

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

고르기 전에 비교하기

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

직접 에이전트를 만들고 있나요? Agent SDK의 mcpServers 옵션에 API 키와 함께 서버를 전달하고 mcp__design-extractor__* 패턴을 허용하세요. 전체 코드 조각은 MCP 문서에 있어요.

크레딧과 제한 사항

  • 사이트와 같은 크레딧. 사이트에서 시작하든 에이전트가 시작하든 Pro 추출은 10크레딧이 들어요. 요금 페이지에서 충전하세요.
  • 최근 내 추출은 중복 청구 없음. 최근에 추출한 사이트를 요청하면 그 추출을 재사용해요.
  • 공개 페이지만 가능. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 지원하지 않아요.
  • 키. 활성 API 키는 최대 5개이고, 각각 1년 동안 유효하며 계정 페이지에서 폐기할 수 있어요. 로그인한 클라이언트는 토큰을 스스로 갱신해요. 연결 해제도 같은 페이지에서 할 수 있어요.

FAQ

MCP로 코딩 에이전트에 디자인 사양 제공하기: 자주 묻는 질문

시도해 보기 전에 많이 묻는 질문에 짧게 답해 드려요.

네. 같은 계정, 같은 선불 크레딧을 사용해요. Pro 추출은 10크레딧이 들어요. 에이전트는 get_pricing 도구로 현재 비용을, get_credits 도구로 잔액을 확인할 수 있어요. 잔액이 부족하면 extract_design 도구가 거부하고 그 사실을 알려 줘요.

로그인하는 클라이언트라면 필요 없어요. claude.ai, Claude Desktop, ChatGPT, Claude Code, Codex는 동의 페이지를 한 번 열고, 스스로 갱신되는 토큰을 보관해요. Cursor, n8n, 스크립트, Agent SDK는 계정 페이지에서 발급한 개인 API 키를 사용해요.

최소 1분이에요. extract_design 도구는 바로 반환돼요. 에이전트는 1분 정도 기다린 뒤, DESIGN.md가 준비될 때까지 25초마다 사이트 이름으로 get_extraction 도구를 호출해요.

최근에 추출한 사이트라면 아니에요. 다시 요청하면 기존 추출을 재사용하고, 응답에 크레딧이 청구되지 않았다고 표시돼요. 다른 사람만 추출한 사이트는 여전히 정상 가격이 들어요. list_my_extractions 도구로 이미 가진 항목을 볼 수 있어요.

아니요. 서버가 URL로 페이지를 캡처하기 때문에, 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 지원하지 않아요. 공개 미리보기를 배포하거나 실제 사이트를 추출하세요.

연결하기 전에 DESIGN.md를 먼저 보고 싶으세요?

사이트에서 추출을 한 번 실행해 보세요. 에이전트는 서버를 통해 같은 파일을 받아요.

웹사이트에서 DESIGN.md 추출하기

관련 가이드

모든 DESIGN.md 가이드 보기