AI导哈

UI/UX设计系统服务器

一个整合韩国响应式设计系统(KRDS)与AI辅助工具的MCP服务器，提供组件搜索、设计令牌管理、代码验证及资源信息等功能，适用于韩国政府数字服务开发。

  • by re-rank
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 re-rank/UIUX-MCP

使用说明

KRDS UI/UX MCP服务器

用于韩国政府数字服务的设计系统**KRDS（Korea Responsive Design System）**是可与AI助手集成使用的模型上下文协议（MCP）服务器。

🎯 主要功能

1. 搜索和提供组件

  • 搜索65个以上的KRDS HTML组件
  • 按类别过滤（表单、导航、布局等）
  • 提供即时可用的HTML代码片断

2. 管理设计令牌

  • 搜索KRDS设计令牌（颜色、间距、字体排版）
  • 以CSS/SCSS变量的形式提供
  • 查看所有调色板

3. 代码验证和改进

  • 验证HTML/CSS代码是否符合KRDS准则
  • 检查辅助功能和语义HTML
  • 建议改进和替代组件

4. 资源信息

  • 提供CSS、SCSS、字体、图像等资源文件路径
  • 介绍如何使用每个资源

📦 安装

通过Smithery安装（推荐）

在Smithery上一键安装：

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

🚀 用法

MCP设置（Claude Desktop或Cursor）

在MCP客户端配置文件中添加以下内容：

克劳德桌面(claude_desktop_config.json)

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

光标(.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助手：

  1. 查找元件

    • “找到KRDS按钮组件，给我看看代码”
    • “想制作MODAL窗口，有KRDS组件吗？”

  2. 代码验证

    • “请确认这个HTML是否符合KRDS标准”
    • “请检查是否存在接近性问题”

  3. 设计令牌

    • “告诉我primary颜色值”
    • “展示KRDS使用的所有颜色”

  4. 资源信息

    • “如何将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）是韩国数字政府的官方设计系统。

🤝 贡献

欢迎随时关注热点和全员任务！

📄 许可证

国际学生委员会

🚢 发布

部署到Smithery

  1. 准备存储库

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

  2. 在Smithery注册

    • 史密瑟里访问
    • 连接GitHub存储库
    • 自动构建和部署

本地部署

npm run build

构建的 build/index.js 可以直接从MCP客户端设置引用文件。

🔗 相关链接

相关 MCP