UIUX-MCP

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

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

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

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

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

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 클라이언트 설정 파일에 다음을 추가하세요:

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

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

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

매개변수:

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

예시:

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

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

매개변수:

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

예시:

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

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

예시:

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

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

예시:

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