KRDS UI/UX MCP Server

한국 정부 디지털 서비스를 위한 디자인 시스템인 **KRDS (Korea Responsive Design System)**를 AI 어시스턴트와 통합하여 사용할 수 있는 MCP (Model Context Protocol) 서버입니다.

🎯 주요 기능

1. 컴포넌트 검색 및 제공

65개 이상의 KRDS HTML 컴포넌트 검색
카테고리별 필터링 (Form, Navigation, Layout 등)
즉시 사용 가능한 HTML 코드 스니펫 제공

2. 디자인 토큰 관리

KRDS 디자인 토큰 검색 (색상, 간격, 타이포그래피)
CSS/SCSS 변수 형태로 제공
전체 색상 팔레트 조회

3. 코드 검증 및 개선

HTML/CSS 코드의 KRDS 가이드라인 준수 여부 검증
접근성 및 시맨틱 HTML 검사
개선 제안 및 대체 컴포넌트 추천

4. 리소스 정보

CSS, SCSS, 폰트, 이미지 등 리소스 파일 경로 제공
각 리소스 사용법 안내

📦 설치

Smithery를 통한 설치 (추천)

Smithery에서 원클릭으로 설치:

npx @smithery/cli install krds-uiux-mcp-server

또는 Smithery에서 직접 설치

수동 설치

# 프로젝트 클론
git clone https://github.com/your-repo/krds-uiux-mcp-server
cd krds-uiux-mcp-server

# 의존성 설치
npm install

# 빌드
npm run build

🚀 사용법

MCP 설정 (Claude Desktop 또는 Cursor)

MCP 클라이언트 설정 파일에 다음을 추가하세요:

Claude Desktop (`claude_desktop_config.json`)

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users/박호진/OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

Cursor (`.cursor/mcp.json` 또는 설정에서)

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users/박호진/OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

🛠️ 사용 가능한 도구

1. `search_krds_components`

KRDS 컴포넌트를 검색합니다.

매개변수:

query (선택): 검색 키워드 (예: "button", "input")
category (선택): 카테고리 (예: "Form", "Navigation")

예시:

"버튼 컴포넌트를 찾아줘"
"Form 카테고리의 모든 컴포넌트를 보여줘"

2. `get_component_code`

특정 컴포넌트의 전체 HTML 코드를 가져옵니다.

매개변수:

componentName (필수): 컴포넌트 이름 (예: "button", "text_input")

예시:

"button 컴포넌트의 코드를 보여줘"
"modal 컴포넌트 코드가 필요해"

3. `list_component_categories`

모든 컴포넌트 카테고리 목록을 가져옵니다.

예시:

"KRDS에 어떤 카테고리가 있어?"

4. `list_all_components`

모든 컴포넌트 이름 목록을 가져옵니다.

예시:

"사용 가능한 모든 컴포넌트를 보여줘"

5. `search_design_tokens`

디자인 토큰을 검색합니다.

매개변수:

type (선택): 토큰 타입 (예: "color", "spacing")
query (선택): 검색 키워드 (예: "primary", "blue")

예시:

"primary 색상 토큰을 찾아줘"
"spacing 토큰을 보여줘"

6. `get_color_palette`

전체 색상 팔레트를 가져옵니다.

예시:

"KRDS 색상 팔레트를 보여줘"

7. `get_token_stats`

디자인 토큰 통계를 가져옵니다.

예시:

"토큰 통계를 보여줘"

8. `validate_krds_compliance`

코드를 검증하고 개선 제안을 제공합니다.

매개변수:

code (필수): 검증할 HTML/CSS 코드

예시:

"이 HTML 코드가 KRDS 가이드라인을 따르는지 확인해줘"

9. `get_krds_resources`

리소스 파일 정보를 가져옵니다.

매개변수:

resourceType (필수): "css", "scss", "fonts", "images", "js" 중 하나

예시:

"KRDS CSS 파일 경로를 알려줘"
"폰트 리소스 정보를 보여줘"

💡 사용 예시

AI 어시스턴트에게 다음과 같이 요청할 수 있습니다:

컴포넌트 찾기
- "KRDS 버튼 컴포넌트를 찾아서 코드를 보여줘"
- "모달 창을 만들고 싶어, KRDS 컴포넌트가 있나?"
코드 검증
- "이 HTML이 KRDS 표준을 따르는지 확인해줘"
- "접근성 문제가 있는지 검토해줘"
디자인 토큰
- "primary 색상 값을 알려줘"
- "KRDS에서 사용하는 모든 색상을 보여줘"
리소스 정보
- "KRDS CSS를 프로젝트에 어떻게 추가하나요?"
- "사용 가능한 폰트는 어떤 게 있어?"

🏗️ 프로젝트 구조

krds-uiux-mcp-server/
├── src/
│   ├── index.ts                 # MCP 서버 진입점
│   ├── tools/
│   │   ├── component-search.ts  # 컴포넌트 검색 도구
│   │   ├── token-provider.ts    # 디자인 토큰 제공 도구
│   │   └── code-validator.ts    # 코드 검증 도구
│   ├── services/
│   │   ├── krds-loader.ts       # KRDS 패키지 로더
│   │   └── analyzer.ts          # 코드 분석기
│   └── types/
│       └── krds.ts              # 타입 정의
├── build/                       # 빌드 결과물
├── node_modules/
│   └── krds-uiux/              # KRDS 패키지
├── package.json
├── tsconfig.json
└── README.md

🔧 개발

빌드

npm run build

개발 모드

npm run dev

테스트 실행

# MCP Inspector로 테스트
npx @modelcontextprotocol/inspector node build/index.js

📚 KRDS 정보

KRDS (Korea Responsive Design System)는 대한민국 디지털 정부를 위한 공식 디자인 시스템입니다.

공식 웹사이트: www.krds.go.kr
GitHub: github.com/KRDS-uiux/krds-uiux
npm 패키지: krds-uiux

🤝 기여

이슈와 풀 리퀘스트는 언제나 환영합니다!

📄 라이센스

ISC

🚢 배포

Smithery에 배포하기

저장소 준비

git add .
git commit -m "Add smithery.yaml configuration"
git push

Smithery에 등록
- Smithery에 방문
- GitHub 저장소 연결
- 자동으로 빌드 및 배포됨

로컬 배포

npm run build

빌드된 build/index.js 파일을 MCP 클라이언트 설정에서 직접 참조할 수 있습니다.

🔗 관련 링크

KRDS UI/UX MCP Server

🎯 주요 기능

1. 컴포넌트 검색 및 제공

65개 이상의 KRDS HTML 컴포넌트 검색
카테고리별 필터링 (Form, Navigation, Layout 등)
즉시 사용 가능한 HTML 코드 스니펫 제공

2. 디자인 토큰 관리

KRDS 디자인 토큰 검색 (색상, 간격, 타이포그래피)
CSS/SCSS 변수 형태로 제공
전체 색상 팔레트 조회

3. 코드 검증 및 개선

HTML/CSS 코드의 KRDS 가이드라인 준수 여부 검증
접근성 및 시맨틱 HTML 검사
개선 제안 및 대체 컴포넌트 추천

4. 리소스 정보

CSS, SCSS, 폰트, 이미지 등 리소스 파일 경로 제공
각 리소스 사용법 안내

📦 설치

Smithery를 통한 설치 (추천)

Smithery에서 원클릭으로 설치:

npx @smithery/cli install krds-uiux-mcp-server

또는 Smithery에서 직접 설치

수동 설치

# 프로젝트 클론
git clone https://github.com/your-repo/krds-uiux-mcp-server
cd krds-uiux-mcp-server

# 의존성 설치
npm install

# 빌드
npm run build

🚀 사용법

MCP 설정 (Claude Desktop 또는 Cursor)

MCP 클라이언트 설정 파일에 다음을 추가하세요:

Claude Desktop (`claude_desktop_config.json`)

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users/박호진/OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

Cursor (`.cursor/mcp.json` 또는 설정에서)

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["C:/Users/박호진/OneDrive/Desktop/UIUX MCP/build/index.js"]
    }
  }
}

🛠️ 사용 가능한 도구

1. `search_krds_components`

KRDS 컴포넌트를 검색합니다.

매개변수:

query (선택): 검색 키워드 (예: "button", "input")
category (선택): 카테고리 (예: "Form", "Navigation")

예시:

"버튼 컴포넌트를 찾아줘"
"Form 카테고리의 모든 컴포넌트를 보여줘"

2. `get_component_code`

특정 컴포넌트의 전체 HTML 코드를 가져옵니다.

매개변수:

componentName (필수): 컴포넌트 이름 (예: "button", "text_input")

예시:

"button 컴포넌트의 코드를 보여줘"
"modal 컴포넌트 코드가 필요해"

3. `list_component_categories`

모든 컴포넌트 카테고리 목록을 가져옵니다.

예시:

"KRDS에 어떤 카테고리가 있어?"

4. `list_all_components`

모든 컴포넌트 이름 목록을 가져옵니다.

예시:

"사용 가능한 모든 컴포넌트를 보여줘"

5. `search_design_tokens`

디자인 토큰을 검색합니다.

매개변수:

type (선택): 토큰 타입 (예: "color", "spacing")
query (선택): 검색 키워드 (예: "primary", "blue")

예시:

"primary 색상 토큰을 찾아줘"
"spacing 토큰을 보여줘"

6. `get_color_palette`

전체 색상 팔레트를 가져옵니다.

예시:

"KRDS 색상 팔레트를 보여줘"

7. `get_token_stats`

디자인 토큰 통계를 가져옵니다.

예시:

"토큰 통계를 보여줘"

8. `validate_krds_compliance`

코드를 검증하고 개선 제안을 제공합니다.

매개변수:

code (필수): 검증할 HTML/CSS 코드

예시:

"이 HTML 코드가 KRDS 가이드라인을 따르는지 확인해줘"

9. `get_krds_resources`

리소스 파일 정보를 가져옵니다.

매개변수:

resourceType (필수): "css", "scss", "fonts", "images", "js" 중 하나

예시:

"KRDS CSS 파일 경로를 알려줘"
"폰트 리소스 정보를 보여줘"

💡 사용 예시

AI 어시스턴트에게 다음과 같이 요청할 수 있습니다:

컴포넌트 찾기
- "KRDS 버튼 컴포넌트를 찾아서 코드를 보여줘"
- "모달 창을 만들고 싶어, KRDS 컴포넌트가 있나?"
코드 검증
- "이 HTML이 KRDS 표준을 따르는지 확인해줘"
- "접근성 문제가 있는지 검토해줘"
디자인 토큰
- "primary 색상 값을 알려줘"
- "KRDS에서 사용하는 모든 색상을 보여줘"
리소스 정보
- "KRDS CSS를 프로젝트에 어떻게 추가하나요?"
- "사용 가능한 폰트는 어떤 게 있어?"

🏗️ 프로젝트 구조

krds-uiux-mcp-server/
├── src/
│   ├── index.ts                 # MCP 서버 진입점
│   ├── tools/
│   │   ├── component-search.ts  # 컴포넌트 검색 도구
│   │   ├── token-provider.ts    # 디자인 토큰 제공 도구
│   │   └── code-validator.ts    # 코드 검증 도구
│   ├── services/
│   │   ├── krds-loader.ts       # KRDS 패키지 로더
│   │   └── analyzer.ts          # 코드 분석기
│   └── types/
│       └── krds.ts              # 타입 정의
├── build/                       # 빌드 결과물
├── node_modules/
│   └── krds-uiux/              # KRDS 패키지
├── package.json
├── tsconfig.json
└── README.md

🔧 개발

빌드

npm run build

개발 모드

npm run dev

테스트 실행

# MCP Inspector로 테스트
npx @modelcontextprotocol/inspector node build/index.js

📚 KRDS 정보

KRDS (Korea Responsive Design System)는 대한민국 디지털 정부를 위한 공식 디자인 시스템입니다.

공식 웹사이트: www.krds.go.kr
GitHub: github.com/KRDS-uiux/krds-uiux
npm 패키지: krds-uiux

🤝 기여

이슈와 풀 리퀘스트는 언제나 환영합니다!

📄 라이센스

ISC

🚢 배포

Smithery에 배포하기

저장소 준비

git add .
git commit -m "Add smithery.yaml configuration"
git push

Smithery에 등록
- Smithery에 방문
- GitHub 저장소 연결
- 자동으로 빌드 및 배포됨

로컬 배포

npm run build

빌드된 build/index.js 파일을 MCP 클라이언트 설정에서 직접 참조할 수 있습니다.

KRDS UI/UX MCP Server

KRDS UI/UX MCP Server

🎯 주요 기능

1. 컴포넌트 검색 및 제공

2. 디자인 토큰 관리

3. 코드 검증 및 개선

4. 리소스 정보

📦 설치

Smithery를 통한 설치 (추천)

수동 설치

🚀 사용법

MCP 설정 (Claude Desktop 또는 Cursor)

Claude Desktop (claude_desktop_config.json)

Cursor (.cursor/mcp.json 또는 설정에서)

🛠️ 사용 가능한 도구

1. search_krds_components

2. get_component_code

3. list_component_categories

4. list_all_components

5. search_design_tokens

6. get_color_palette

7. get_token_stats

8. validate_krds_compliance

9. get_krds_resources

💡 사용 예시

🏗️ 프로젝트 구조

🔧 개발

빌드

개발 모드

테스트 실행

📚 KRDS 정보

🤝 기여

📄 라이센스

🚢 배포

Smithery에 배포하기

로컬 배포

🔗 관련 링크

KRDS UI/UX MCP Server

🎯 주요 기능

1. 컴포넌트 검색 및 제공

2. 디자인 토큰 관리

3. 코드 검증 및 개선

4. 리소스 정보

📦 설치

Smithery를 통한 설치 (추천)

수동 설치

🚀 사용법

MCP 설정 (Claude Desktop 또는 Cursor)

Claude Desktop (claude_desktop_config.json)

Cursor (.cursor/mcp.json 또는 설정에서)

🛠️ 사용 가능한 도구

1. search_krds_components

2. get_component_code

3. list_component_categories

4. list_all_components

5. search_design_tokens

6. get_color_palette

7. get_token_stats

8. validate_krds_compliance

9. get_krds_resources

💡 사용 예시

🏗️ 프로젝트 구조

🔧 개발

빌드

개발 모드

테스트 실행

📚 KRDS 정보

🤝 기여

📄 라이센스

🚢 배포

Smithery에 배포하기

로컬 배포

🔗 관련 링크

Claude Desktop (`claude_desktop_config.json`)

Cursor (`.cursor/mcp.json` 또는 설정에서)

1. `search_krds_components`

2. `get_component_code`

3. `list_component_categories`

4. `list_all_components`

5. `search_design_tokens`

6. `get_color_palette`

7. `get_token_stats`

8. `validate_krds_compliance`

9. `get_krds_resources`

Claude Desktop (`claude_desktop_config.json`)

Cursor (`.cursor/mcp.json` 또는 설정에서)

1. `search_krds_components`

2. `get_component_code`

3. `list_component_categories`

4. `list_all_components`

5. `search_design_tokens`

6. `get_color_palette`

7. `get_token_stats`

8. `validate_krds_compliance`

9. `get_krds_resources`