7onicDESIGN SYSTEM

MCP Server

AI 코딩 에이전트가 7onic 규칙대로 UI를 만들게 하는 MCP 서버. 토큰 검색, 41개 컴포넌트 카탈로그, 레이아웃 레시피, validate_code 규칙 검증을 제공합니다.
llms.txt 기반 연동은 AI Integration (Components) 와 AI Integration (Tokens) 를 참조하세요.

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

Claude Code 플러그인 — 1커맨드로 MCP 서버 설치 (npm install 불필요, 약 3MB).

Tools & Resources

도구 9종, 리소스 3종, 프롬프트 1종 제공. 쿼리는 영어·일본어·한국어를 지원합니다.

컴포넌트 탐색

41개 컴포넌트 검색, Props/variants 조회, 검증된 JSX 예시 제공.

list_componentsget_componentget_component_examples

토큰

토큰 검색·조회, 원시 값(hex/px/ms)의 최근접 토큰 제안.

search_tokensget_tokensuggest_tokens

구성과 검증

반응형 레이아웃 레시피, 디자인 규칙 검증, 토픽별 가이드라인.

get_layout_patternvalidate_codeget_guidelines
Resources (3종)

코어 AI 규칙, 토큰 치트시트, 컴포넌트 카탈로그를 Markdown으로 제공.

Prompt: create_prototype

프로토타입 구축 가이드 워크플로 (탐색 → 토큰 → 레이아웃 → 검증 루프).

How It Works

Figma 토큰이 유일한 소스. 같은 토큰 이름이 CSS 변수, Tailwind 클래스, 컴포넌트까지 흐르기 때문에 AI가 생성한 코드는 디자인에서 어긋나지 않습니다.

1. 컴포넌트 발견

list_components / get_component — 생 HTML 대신 7onic 컴포넌트 우선.

2. 토큰 해결

search_tokens / suggest_tokens — 원시 값을 쓰기 전에 반드시 토큰 확인.

3. 레이아웃 구성

get_layout_pattern — 4/8/12 컬럼 그리드와 토큰 gap 레시피.

4. 검증 루프

validate_code — 에러 0이 될 때까지 수정 후 납품.

도구 쿼리와 validate_code 위반 메시지는 영어·일본어·한국어를 지원합니다.

Setup

Claude Code는 플러그인으로 1커맨드. 그 외 MCP 지원 에이전트는 수동 설정으로 사용할 수 있습니다.

Claude Code 플러그인

권장

마켓플레이스 추가와 설치를 1커맨드로 실행. 서버는 자기완결 번들이라 의존성 설치가 발생하지 않습니다.

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

기타 에이전트 (수동 설정)

레포지토리를 clone 하고 MCP 설정(.mcp.json 등)에 stdio 서버로 등록합니다. dist 가 커밋되어 있어 빌드가 필요 없습니다.

git clone https://github.com/itonys/7onic.git
{
  "mcpServers": {
    "7onic-design": {
      "command": "node",
      "args": ["/path/to/7onic/mcp/dist/index.js"]
    }
  }
}

경로는 clone 위치에 맞게 변경하세요. Node.js 20 이상이 필요합니다.

validate_code

생성 코드를 14개 규칙으로 기계 검증합니다. 대표 검출 예:

프리미티브 컬러 (시맨틱 우선)

bg-blue-500 → bg-primary

임의 값 (토큰 외 수치)

p-[17px] → p-4

dark: 프리픽스 (자동 테마 전환)

dark:bg-gray-900 → bg-background

line-height 덮어쓰기 (토큰은 쌍)

text-sm leading-relaxed → text-sm

생 HTML (컴포넌트 우선)

<button className="..."> → <Button>

인라인 스타일

style={{ color: '#333' }} → token classes

위반 메시지와 수정 제안은 locale 인자(en/ja/ko)로 3언어 지원. 유저가 명시 승인한 커스텀 값은 ds-ignore 주석으로 억제할 수 있습니다.

Notes & Limits

사용 시 유의사항

  • 이 툴은 디자인 시스템 규칙 준수를 돕는 것으로, 100% 검출을 보장하지 않습니다. validate_code 가 잡지 못하는 위반이 있을 수 있습니다.
  • 프로토타입·데모·사내 툴 구축에 특히 유용합니다. 프로덕션 코드는 반드시 사람의 리뷰를 거치세요.
  • 최종 UI·디자인 판단은 툴이 아니라 팀의 디자이너/오너가 내리세요.