UIUX-MCP

概述

这个MCP服务器提供对KRDS（韩国响应式设计系统）的全面访问，使AI助手能够帮助开发者创建可访问且一致的政府数字服务。它提供搜索65个以上HTML组件、访问设计令牌（颜色、间距、排版）、验证代码是否符合KRDS指南以及检索资源文件路径的工具。该服务器既支持基于组件的开发，也支持代码审查工作流，对构建韩国政府数字服务的团队非常有价值。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• search_krds_componentsquery?: string, category?: string

  Search for KRDS components with optional keyword and category filters.

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

  Get the full HTML code for a specific KRDS component.

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

  Get a list of all component categories in KRDS.

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

  Get a list of all available component names in KRDS.

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

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

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

  Get the complete color palette of KRDS.

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

  Get statistics about design tokens in KRDS.

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

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

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

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

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

可对比工具

安装

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

什么是KRDS？

KRDS（韩国响应式设计系统）是韩国政府数字服务的官方设计系统，提供一致的UI组件和设计令牌。

我可以在韩国政府项目以外的项目中使用这个MCP服务器吗？

虽然专门为KRDS设计，但某些组件和设计模式可能适用于其他项目，但如果没有完整的KRDS实现，可能无法完全符合标准。

UIUX-MCP 对比