디자인 시스템 MCP

AI 코딩 도구가 리블 디자인 시스템의 컴포넌트·토큰·레이아웃 규칙을 읽게 하는 MCP 서버예요.

읽기 전용인증 없음

설치#

터미널

claude mcp add --transport http reevl-ds https://reevl.co.kr/api/mcp-ds

claude_desktop_config.json

{
  "mcpServers": {
    "reevl-ds": {
      "type": "http",
      "url": "https://reevl.co.kr/api/mcp-ds"
    }
  }
}

~/.cursor/mcp.json

{
  "mcpServers": {
    "reevl-ds": {
      "url": "https://reevl.co.kr/api/mcp-ds"
    }
  }
}

터미널

code --add-mcp '{"name":"reevl-ds","type":"http","url":"https://reevl.co.kr/api/mcp-ds"}'

list_components
List components
List the public UI components of the Reevl design system.
get_component
Get component
Full documentation of one component: description, props (type/default/required, generated from TypeScript), usage and example code (the exact source of the live previews), do/don't, accessibility, platform differences, docs URL.
get_tokens
Get design tokens
Design tokens with values and roles.
get_layout_rules
Get layout rules
Responsive layout rules: breakpoints (phone ≤767, tablet 768-1023, PC ≥1024), app shell per range, content widths and grid steps, safe-area and keyboard variables, z-index layers.
search_design_system
Search design system
Search components, foundations and patterns by keyword (Korean or English).

프롬프트

리블 디자인 시스템으로 단지 카드 만들어줘 - 카드 골격과 스탯 행을 써서

프롬프트

버튼과 칩의 props를 알려 주고, 필터 줄을 만드는 예시 코드를 줘

이 사이트의 디자인 시스템 문서에 있는 것만 읽기 전용으로 줘요. 분당 60회까지예요.