AI Integration

AI 도구와 함께 사용하기

Featuring Design System은 세 가지 방식으로 AI 코딩 도구에 문서를 제공합니다.

방식	설명	용도
llms.txt	전체 라우트 및 카테고리 개요	빠른 참조, 구조 파악
skill.md	핵심 규칙, 패턴, 치트시트 (~2K 토큰)	Agent 컨텍스트에 상시 로드
MCP 서버	문서 검색 + 개별 페이지 조회	상세 정보, 코드 생성

MCP 서버

Docs MCP

디자인 시스템 문서를 검색하고 개별 페이지를 조회합니다. 가이드, 토큰 값, 설치, 접근성, 마이그레이션 정보를 제공합니다. 배포된 프로덕션 서버에 상시 접속 가능합니다.

Claude Code CLI

claude mcp add featuring-docs --transport http https://front-core.featuring.co/api/mcp

또는 설정 파일에 직접 추가

.mcp.json (프로젝트 공유) 또는 claude_desktop_config.json (Claude Desktop)

{
  "mcpServers": {
    "featuring-docs": {
      "url": "https://front-core.featuring.co/api/mcp"
    }
  }
}

Scope는 기본 local(본인 전용)로 등록됩니다. 팀 전체가 공유하도록 하려면 --scope project를 덧붙여 레포 루트의 .mcp.json에 저장 후 커밋하세요. 모든 프로젝트에 쓰려면 --scope user.

제공 도구

Tool	설명
`list_pages`	섹션별 페이지 목록 (`components`, `design-tokens`, `guide`, `charts`, `icons`)
`get_page`	slug 경로로 페이지 전체 마크다운 조회
`search`	제목/설명/본문 키워드 검색
`get_tokens`	디자인 토큰 카테고리별 조회 (colors, spacing, radius 등)

Storybook MCP

컴포넌트 props, Story 코드, 인터랙션 테스트를 제공합니다. @storybook/addon-mcp는 로컬 storybook dev 서버에서만 엔드포인트를 노출하며, 정적 배포(Vercel 등)에는 포함되지 않습니다. 따라서 각자 자신의 머신에서 Storybook을 실행한 상태에서만 응답합니다.

# 1. Storybook 실행 (별도 터미널)
pnpm dev:storybook

# 2. MCP 등록 — Storybook이 켜져 있을 때만 응답
claude mcp add featuring-storybook --transport http http://localhost:6006/mcp

개인 로컬 환경 의존이라 --scope local(기본값)로 두는 것을 권장합니다. 팀 공유가 목적이라면 Docs MCP를 사용하세요.

제공 도구

Tool	설명
`preview-stories`	변경한 Story의 미리보기 URL 반환
`get-storybook-story-instructions`	Story 작성 가이드 조회
`run-story-tests`	Interaction / a11y 테스트 실행
`list-all-documentation`	전체 컴포넌트 · docs ID 목록
`get-documentation`	컴포넌트 props · 예시 · Story 전체 조회
`get-documentation-for-story`	특정 Story variant 조회

Skill (Claude Code)

핵심 패턴과 규칙을 Agent 컨텍스트에 상시 로드합니다. docs 빌드 시 자동 생성되며, YAML frontmatter(name, description)를 포함해 Claude Code의 자동 skill invocation 대상이 됩니다.

# 프로젝트에 Skill 추가 — Claude Code canonical 경로
mkdir -p .claude/skills/featuring-ds
curl -o .claude/skills/featuring-ds/SKILL.md https://front-core.featuring.co/skill.md

전역(모든 프로젝트)으로 쓰려면 ~/.claude/skills/featuring-ds/SKILL.md에 설치.

포함 내용:

설치 및 설정 방법
$css prop 문법, 반응형 breakpoints
Compound component 패턴
disabled 패턴, 접근성 규칙
컴포넌트 마이그레이션 현황

Cursor

Cursor IDE에서 @Docs 기능을 사용하여 디자인 시스템 문서를 참조할 수 있습니다.

Docs 추가: Settings → Features → Docs → Add new doc
URL 입력: https://front-core.featuring.co/llms.txt
사용하기: 채팅에서 @Docs로 참조

프롬프트 예시

Button.Root 컴포넌트를 사용해서 아이콘 버튼을 만들어줘

semantic color 토큰 중에서 에러 상태를 나타내는 색상을 알려줘

Modal 컴포넌트로 확인/취소 모달을 구현해줘