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助手：
- 查找元件
- “找到KRDS按钮组件，给我看看代码” - “想制作MODAL窗口，有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）是韩国数字政府的官方设计系统。
- 官方网站： www.krds.go.kr
- github：
- npm软件包：
krds-uiux
🤝 贡献
欢迎随时关注热点和全员任务！
📄 许可证
国际学生委员会
🚢 发布
部署到Smithery
- 准备存储库
git add .
git commit -m "Add smithery.yaml configuration"
git push- 在Smithery注册
- 史密瑟里访问 - 连接GitHub存储库 - 自动构建和部署
本地部署
npm run build构建的 build/index.js 可以直接从MCP客户端设置引用文件。