SEED Design
DocsReactLynxAI IntegrationBreeze

Docs MCP

AI Agent가 SEED Design 문서에 직접 접근할 수 있는 MCP 서버를 제공합니다.

소개

@seed-design/docs-mcp는 SEED Design 문서를 위한 공식 MCP(Model Context Protocol) 서버입니다.

이 MCP 서버를 사용하면 AI Agent가 다음 정보에 직접 접근할 수 있습니다:

  • React 컴포넌트: 설치, props, 사용 예시
  • Design Guidelines: 컴포넌트 해부도, 속성, 사용 가이드라인
  • Foundation: 색상, 타이포그래피, 간격 등 디자인 토큰
  • Rootage: 디자인 토큰과 컴포넌트 스펙 원본 데이터
  • 아이콘: 아이콘 검색 및 사용법

Figma 연결 없이 독립적으로 실행되며, SEED Design을 사용하는 프로젝트에서 AI 도구의 문서 이해도를 높일 수 있습니다.

설치

~/Library/Application Support/Claude/claude_desktop_config.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-docs": {
      "command": "npx",
      "args": ["-y", "@seed-design/docs-mcp"]
    }
  }
}
{
  "mcpServers": {
    "seed-docs": {
      "command": "npx",
      "args": ["-y", "@seed-design/docs-mcp"],
      "type": "stdio"
    }
  }
}

Cursor MCP에 대해 자세히 알아보기

claude mcp add seed-docs npx @seed-design/docs-mcp

사용 가능한 도구

Discovery

discover_tools

사용 가능한 모든 도구를 탐색하고 각 도구의 용도를 확인합니다. MCP 서버에 처음 연결했을 때 호출하면 유용합니다.

파라미터:

이름타입설명
querystring (선택)도구를 필터링할 검색어 (예: 'installation', 'component')
categorystring (선택)카테고리 필터 (discovery, react, breeze, design-guidelines, rootage, icons)

예시:

discover_tools({ query: "component" })

React Components

list_react_components

사용 가능한 모든 SEED React 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 45 React components:

- ActionButton (action-button)
- AlertDialog (alert-dialog)
- Avatar (avatar)
- Badge (badge)
...

get_react_component

특정 React 컴포넌트의 상세 문서를 반환합니다. 설치 방법, props, 사용 예시가 포함됩니다.

파라미터:

이름타입설명
componentNamestring컴포넌트 이름 (kebab-case, 예: action-button, text-field)

예시:

get_react_component({ componentName: "action-button" })

get_react_changelog

SEED React 패키지의 변경 이력을 반환합니다. 버전 업그레이드 시 변경 사항을 확인할 때 유용합니다.

파라미터: 없음

React 섹션별 도구

React 문서의 각 섹션에 접근하는 도구들입니다. 각 섹션마다 list_*와 get_* 도구가 제공됩니다.

섹션list 도구get 도구설명
Getting Startedlist_react_getting_startedget_react_getting_started설치, CLI, 스타일링 설정
Stackflowlist_react_stackflowget_react_stackflowStackflow 통합 가이드
Developer Toolslist_react_developer_toolsget_react_developer_toolsCodemod, Figma 통합
Migrationlist_react_migrationget_react_migration마이그레이션 가이드
AI Integrationlist_react_ai_integrationget_react_ai_integrationAI 도구 통합
Updateslist_react_updatesget_react_updates버전 업데이트 정보

사용 예시

먼저 list_* 도구로 사용 가능한 문서를 확인합니다:

list_react_getting_started()

응답:

# SEED Design React - Getting Started Topics

- Installation - Vite (path: installation/vite)
- Installation - Manual (path: installation/manual)
- CLI - Commands (path: cli/commands)
- CLI - Configuration (path: cli/configuration)
- Styling - Theming (path: styling/theming)
- Styling - Tailwind CSS (path: styling/tailwind-css)

원하는 문서의 path를 사용해 상세 내용을 가져옵니다:

get_react_getting_started({ path: "installation/vite" })

Breeze

Breeze는 프로젝트에 바로 사용할 수 있는 유틸리티 UI 컴포넌트 모음입니다.

list_breeze_components

사용 가능한 Breeze 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 1 Breeze components:

- AnimateNumber (animate-number)

get_breeze_component

특정 Breeze 컴포넌트의 상세 문서를 반환합니다.

파라미터:

이름타입설명
componentNamestring컴포넌트 이름 (kebab-case, 예: animate-number)

예시:

get_breeze_component({ componentName: "animate-number" })

Design Guidelines

컴포넌트의 디자인 가이드라인 문서에 접근합니다. 해부도(anatomy), 속성, 사용 권장사항 등이 포함됩니다.

list_docs_components

디자인 가이드라인이 있는 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 25 component design guidelines:

- ActionButton (action-button)
- Avatar (avatar)
- BottomSheet (bottom-sheet)
...

get_docs_component

특정 컴포넌트의 디자인 가이드라인을 반환합니다.

파라미터:

이름타입설명
componentNamestring컴포넌트 이름 (kebab-case, 예: action-button)

예시:

get_docs_component({ componentName: "action-button" })

Foundation

색상, 타이포그래피, 간격 등 디자인 기초 토큰에 대한 문서를 제공합니다.

list_foundation

사용 가능한 Foundation 주제 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 12 foundation topics:

**Color**:
  - Palette (color/palette)
  - Semantic (color/semantic)

**Typography**:
  - Overview (typography/overview)

**General**:
  - Spacing (spacing)
  - Elevation (elevation)
...

get_foundation

특정 Foundation 주제의 상세 문서를 반환합니다.

파라미터:

이름타입설명
topicstring주제 경로 (예: spacing, color/palette, typography/overview)

예시:

get_foundation({ topic: "color/palette" })

Rootage

SEED Design의 Rootage 스펙(디자인 토큰 및 컴포넌트 스펙의 원본 JSON 데이터)에 접근합니다.

get_rootage

Rootage 리소스를 반환합니다. 경로 없이 호출하면 사용 가능한 모든 리소스 목록을 반환합니다.

파라미터:

이름타입설명
pathstring (선택)리소스 경로 (예: /color.json, /components/action-button.json)

예시:

리소스 목록 조회:

get_rootage()

특정 리소스 조회:

get_rootage({ path: "/components/action-button.json" })

Icons

SEED Design 아이콘을 검색하고 사용법을 확인합니다.

list_icons

아이콘 목록을 반환합니다. 타입, 변형, 서비스별로 필터링할 수 있습니다.

파라미터:

이름타입설명
typestring (선택)아이콘 타입 (monochrome, multicolor)
variantstring (선택)모노크롬 아이콘 변형 (line, fill)
servicestring (선택)멀티컬러 아이콘의 서비스 카테고리 (예: 중고거래, 부동산)
limitnumber (선택)반환할 최대 개수 (기본값: 50, 최대: 200)

예시:

list_icons({ type: "monochrome", variant: "line", limit: 20 })

search_icons

키워드로 아이콘을 검색합니다. 영어와 한국어 검색을 모두 지원합니다.

파라미터:

이름타입설명
querystring검색어 (예: arrow, 화살표, shopping)
typestring (선택)아이콘 타입 필터
limitnumber (선택)반환할 최대 개수 (기본값: 20, 최대: 100)

예시:

search_icons({ query: "화살표" })

예시 응답:

Found 15 icons matching "화살표":
View in browser: https://seed-design.io/docs/foundation/iconography/library?search=화살표

- icon_arrow_left_line [monochrome] (line)
  Matched: arrow, 화살표, left
- icon_arrow_right_line [monochrome] (line)
  Matched: arrow, 화살표, right
...

get_icon_details

특정 아이콘의 상세 정보와 React 컴포넌트 import 문을 반환합니다.

파라미터:

이름타입설명
iconNamestring아이콘 이름 (예: icon_arrow_left_line)

예시:

get_icon_details({ iconName: "icon_arrow_left_line" })

예시 응답:

# icon_arrow_left_line

**Type:** monochrome
**Variant:** line
**Keywords:** arrow, left, back, 화살표, 왼쪽

## Usage

### React
\`\`\`tsx
import { IconArrowLeftLine } from "@karrotmarket/react-monochrome-icon"

<IconArrowLeftLine />
\`\`\`

## Documentation

View this icon: https://seed-design.io/docs/foundation/iconography/library?icon=icon_arrow_left_line

프로그래매틱 사용

@seed-design/docs-mcp는 npm 패키지로 설치하여 커스텀 MCP 서버에 통합할 수 있습니다.

설치

npm install @seed-design/docs-mcp
# 또는
bun add @seed-design/docs-mcp

사용 예시

import { server } from "@seed-design/docs-mcp/server";
import { initializeTools } from "@seed-design/docs-mcp/tools";

// 도구 초기화
await initializeTools(server);

// 원하는 transport와 함께 사용
// 예: stdio, HTTP, SSE 등

개발

로컬에서 개발하거나 테스트할 때 사용하는 명령어입니다.

# 의존성 설치
bun install

# 개발 모드 실행 (stdio)
bun run dev

# 빌드
bun run build

# 린트
bun run lint

# 타입 검사
bun run typecheck

MCP Inspector로 테스트

MCP Inspector를 사용하면 브라우저에서 도구를 테스트할 수 있습니다:

npx @modelcontextprotocol/inspector bun ./dist/stdio.js

Last updated on

Figma MCP

AI Agent를 활용해 Figma 디자인을 React 코드로 변환하는 Model Context Protocol(MCP)를 제공합니다.

On this page

소개설치사용 가능한 도구Discoverydiscover_toolsReact Componentslist_react_componentsget_react_componentget_react_changelogReact 섹션별 도구사용 예시Breezelist_breeze_componentsget_breeze_componentDesign Guidelineslist_docs_componentsget_docs_componentFoundationlist_foundationget_foundationRootageget_rootageIconslist_iconssearch_iconsget_icon_details프로그래매틱 사용설치사용 예시개발MCP Inspector로 테스트