UIUX-MCP

Overview

This MCP server provides comprehensive access to KRDS (Korea Responsive Design System), enabling AI assistants to help developers create accessible and consistent government digital services. It offers tools for searching over 65 HTML components, accessing design tokens (colors, spacing, typography), validating code compliance with KRDS guidelines, and retrieving resource file paths. The server supports both component-based development and code review workflows, making it valuable for teams building Korean government digital services.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• search_krds_componentsquery?: string, category?: string

  Search for KRDS components with optional keyword and category filters.

  Try:버튼 컴포넌트를 찾아줘Try:Form 카테고리의 모든 컴포넌트를 보여줘
• get_component_codecomponentName: string

  Get the full HTML code for a specific KRDS component.

  Try:button 컴포넌트의 코드를 보여줘Try:modal 컴포넌트 코드가 필요해
• list_component_categories

  Get a list of all component categories in KRDS.

  Try:KRDS에 어떤 카테고리가 있어?
• list_all_components

  Get a list of all available component names in KRDS.

  Try:사용 가능한 모든 컴포넌트를 보여줘
• search_design_tokenstype?: string, query?: string

  Search for design tokens like colors, spacing, and typography.

  Try:primary 색상 토큰을 찾아줘Try:spacing 토큰을 보여줘
• get_color_palette

  Get the complete color palette of KRDS.

  Try:KRDS 색상 팔레트를 보여줘
• get_token_stats

  Get statistics about design tokens in KRDS.

  Try:토큰 통계를 보여줘
• validate_krds_compliancecode: string

  Validate HTML/CSS code for KRDS compliance and get improvement suggestions.

  Try:이 HTML 코드가 KRDS 가이드라인을 따르는지 확인해줘
• get_krds_resourcesresourceType: string

  Get information about resource files like CSS, SCSS, fonts, images, and JS.

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

Comparable tools

Installation

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

git clone https://github.com/your-repo/krds-uiux-mcp-server
cd krds-uiux-mcp-server
npm install
npm run build

{
  "mcpServers": {
    "krds-uiux": {
      "command": "node",
      "args": ["/path/to/your/build/index.js"]
    }
  }
}

FAQ

What is KRDS?

KRDS (Korea Responsive Design System) is the official design system for South Korean government digital services, providing consistent UI components and design tokens.

Can I use this MCP server outside of Korean government projects?

While designed specifically for KRDS, some components and design patterns may be adaptable for other projects, though full compliance might not be possible without the complete KRDS implementation.

Compare UIUX-MCP with