# KRDS Design System

Build interfaces that follow the Korea Responsive Design System (KRDS) faster. Search and insert official components, retrieve ready-to-use HTML, and explore color, spacing, and typography tokens. Va…

## Quick Start

```bash
# Connect this server (installs CLI if needed)
npx -y @smithery/cli@latest mcp add re-rank/uiux-mcp

# Browse available tools
npx -y @smithery/cli@latest tool list re-rank/uiux-mcp

# Get full schema for a tool
npx -y @smithery/cli@latest tool get re-rank/uiux-mcp search_krds_components

# Call a tool
npx -y @smithery/cli@latest tool call re-rank/uiux-mcp search_krds_components '{}'
```

## Direct MCP Connection

Endpoint: `https://uiux-mcp--re-rank.run.tools`

**Optional config:**
- `enableSuggestions` (query) — KRDS 컴포넌트 추천 사용 여부

## Tools (9)

- `search_krds_components` — KRDS 컴포넌트를 검색합니다. 검색어나 카테고리로 필터링할 수 있습니다.
- `get_component_code` — 특정 KRDS 컴포넌트의 전체 HTML 코드와 정보를 가져옵니다.
- `list_component_categories` — 모든 KRDS 컴포넌트 카테고리 목록을 가져옵니다.
- `list_all_components` — 모든 KRDS 컴포넌트 이름 목록을 가져옵니다.
- `search_design_tokens` — KRDS 디자인 토큰을 검색합니다 (색상, 간격, 타이포그래피 등).
- `get_color_palette` — KRDS 전체 색상 팔레트를 가져옵니다.
- `get_token_stats` — 디자인 토큰 통계 정보를 가져옵니다.
- `validate_krds_compliance` — HTML/CSS 코드를 분석하여 KRDS 가이드라인 준수 여부를 확인하고 개선 제안을 제공합니다.
- `get_krds_resources` — KRDS 리소스 파일 경로와 사용법을 가져옵니다.

```bash
# Get full input/output schema for a tool
npx -y @smithery/cli@latest tool get re-rank/uiux-mcp <tool-name>
```

---

Source: https://github.com/re-rank/UIUX-MCP