ds-pilot

디자인 시스템(컴포넌트 + 토큰)을 AI 에이전트에 노출하는 MCP 서버입니다. 에이전트가 중복 컴포넌트를 생성하거나 토큰으로 관리해야 할 값을 하드코딩하는 것을 방지합니다.

설치

npx @lyse-labs/ds-pilot init

이 작업은 다음을 수행합니다:

• 컴포넌트 디렉토리 및 토큰 파일 감지

• .mcp.json에 MCP 서버 구성

• CLAUDE.md에 디자인 시스템 지침 추가

사용법

MCP 서버 (AI 에이전트용)

npx @lyse-labs/ds-pilot serve --components ./src/components --tokens ./tokens.json

구성이 완료되면 AI 에이전트는 다음을 수행할 수 있습니다:

• search_components("button") — 기존 컴포넌트 찾기

• get_component_props("Button") — props, 타입, 기본값 확인

• list_tokens("color") — 모든 색상 토큰 나열

• get_token("color.primary") — 특정 토큰 값 가져오기

CLI (사용자용)

# List all components
npx @lyse-labs/ds-pilot list components --dir ./src/components

# List tokens filtered by type
npx @lyse-labs/ds-pilot list tokens --file ./tokens.json --type color

# Search components
npx @lyse-labs/ds-pilot search button --dir ./src/components

# Show component props
npx @lyse-labs/ds-pilot props Button --dir ./src/components

지원 형식

컴포넌트

• React (.tsx, .ts, .jsx, .js)

• Vue / Nuxt (.vue with <script setup lang="ts">)

• 타입, 기본값 및 구조화된 변형(variants)이 포함된 Props

• Named 및 Default exports

토큰

• DTCG JSON (W3C 표준)

• 일반 중첩 JSON (Figma 내보내기)

• CSS 사용자 정의 속성(Custom Properties)

• 별칭(Alias) 해석 및 그룹 메타데이터

작동 원리

1. 스캐너가 코드베이스를 읽고 컴포넌트 이름, props, 토큰 값을 추출합니다.

2. MCP 서버는 이 데이터를 AI 에이전트가 호출할 수 있는 도구로 노출합니다.

3. CLAUDE.md 지침은 에이전트에게 새로운 컴포넌트를 만들기 전에 기존 컴포넌트가 있는지 확인하도록 지시합니다.

에이전트는 추측을 멈추고 재사용을 시작합니다.

라이선스

MIT