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)는 대한민국 디지털 정부를 위한 공식 디자인 시스템입니다.
🤝 기여
이슈와 풀 리퀘스트는 언제나 환영합니다!
📄 라이센스
ISC
🚢 배포
Smithery에 배포하기
-
저장소 준비
git add .
git commit -m "Add smithery.yaml configuration"
git push
-
Smithery에 등록
- Smithery에 방문
- GitHub 저장소 연결
- 자동으로 빌드 및 배포됨
로컬 배포
npm run build
빌드된 build/index.js 파일을 MCP 클라이언트 설정에서 직접 참조할 수 있습니다.
🔗 관련 링크
