流畅UI-MCP服务器
项目介绍
🚀 Fluent UI MCP 服务器
一个全面的 模型上下文协议 (MCP) 服务器，为 Fluent UI React 组件开发提供智能辅助。此服务器作为您的 AI 助手，帮助您创建、验证和维护遵循 v9 设计系统模式的 Fluent UI 应用程序。
什么是 MCP？ 模型上下文协议使 AI 助手能够安全地访问外部数据源和工具。此服务器通过深入的 Fluent UI 知识扩展了 AI 的能力。
✨ 主要特性
🧠 智能组件知识
- 📚 包含 50 多个 Fluent UI v9 组件的综合数据库
- 🔍 智能组件搜索与发现
- 📖 完整的属性、插槽和使用文档
- 💡 实际案例和最佳实践
- 🎯 上下文感知推荐
🎨 设计系统掌握
- 🌈 跨越 6 类别（颜色、字体、间距、阴影、边框、动画）的 45 多个设计令牌
- ✅ 令牌验证和使用指南
- 🎭 符合可访问性的语义颜色系统
- 📏 一致的间距和字体比例
- 🎬 动画和运动指南
🛠️ 高级代码生成
- ⚡ 生成完整的 v9 组件实现
- 🪝 创建符合 Fluent UI 模式的自定义钩子
- 💅 使用
makeStyles和设计令牌生成样式 - 📝 具有完整类型安全性的 TypeScript 接口
- 🏗️ 基于模板的常见模式构建
✅ 智能验证与分析
- 🔍 实时组件验证以符合设计规范
- ♿ 符合可访问性检查（WCAG 2.1）
- 📊 模式分析评分（0-100）
- 🚨 反模式检测和警告
- � 可操作的改进建议
🚀 快速开始
预备条件
- Node.js 18+
- npm 或 yarn
- 兼容 MCP 的客户端
安装与设置
# 克隆或下载服务器
cd fluentui-mcp-server
# 安装依赖
npm install
# 构建服务器
npm run build
# 测试服务器
npm run test
运行服务器
# 启动 MCP 服务器
npm start
# 或在开发模式中运行并启用热重载
npm run dev
🔧 可用工具
服务器提供了组织成 4 类别的 12 种强大工具：
📚 组件知识工具
get_component_info
获取关于任何 Fluent UI 组件的综合信息。
{
"name": "get_component_info",
"arguments": {
"componentName": "Button"
}
}
返回： 完整的组件文档，包括描述、属性、插槽、示例和可访问性指南。
search_components
根据功能、类别或关键词查找组件。
{
"name": "search_components",
"arguments": {
"query": "表单输入",
"category": "inputs",
"limit": 5
}
}
get_component_props
获取特定组件的详细属性信息。
{
"name": "get_component_props",
"arguments": {
"componentName": "Avatar",
"propName": "size"
}
}
get_component_examples
检索组件的使用示例。
{
"name": "get_component_examples",
"arguments": {
"componentName": "Card",
"exampleType": "advanced"
}
}
🎨 设计系统工具
get_design_tokens
按类别访问设计令牌，并附带使用指南。
{
"name": "get_design_tokens",
"arguments": {
"category": "colors",
"includeUsage": true
}
}
类别： colors, typography, spacing, shadows, borders, motion
validate_design_tokens
检查代码中的令牌使用情况并提出改进建议。
{
"name": "validate_design_tokens",
"arguments": {
"code": "const styles = makeStyles({ color: '#0078d4' });"
}
}
🛠️ 代码生成工具
generate_component
生成带有 TypeScript 的完整组件实现。
{
"name": "generate_component",
"arguments": {
"componentName": "CustomCard",
"componentType": "layout",
"requirements": "用于用户资料的卡片组件，包含头像和简介"
}
}
组件类型： form-input, layout, feedback, navigation
generate_component_hook
创建符合 Fluent UI 模式的自定义钩子。
{
"name": "generate_component_hook",
"arguments": {
"componentName": "CustomButton",
"hookType": "state-management"
}
}
generate_component_styles
生成带有设计令牌的 makeStyles 实现。
{
"name": "generate_component_styles",
"arguments": {
"componentName": "CustomCard",
"slots": ["root", "header", "content", "footer"]
}
}
✅ 验证与分析工具
validate_component_design
全面的设计验证并评分。
{
"name": "validate_component_design",
"arguments": {
"componentCode": "const Button = () => { ... }",
"componentName": "Button"
}
}
返回： 验证分数（0-100），发现的问题和改进建议。
check_accessibility
分析组件的可访问性合规性。
{
"name": "check_accessibility",
"arguments": {
"componentCode": "const Component = () => { ... }"
}
}
analyze_component_patterns
检测组件代码中的模式和反模式。
{
"name": "analyze_component_patterns",
"arguments": {
"componentCode": "const Component = () => { ... }"
}
}
📦 组件数据库
服务器包含了跨越所有类别的 50 多个 Fluent UI v9 组件的综合知识：
<details> <summary><strong>🔤 输入组件 (15+)</strong></summary>- 按钮（+ 变体：复合按钮、菜单按钮、拆分按钮、切换按钮）
- 复选框、单选框、开关 - 选择控件
- 输入框、文本区域、旋钮 - 文本输入组件
- 组合框、下拉菜单、选择器 - 选择组件
- 滑块、评分 - 值输入组件
- 搜索框、标签选择器 - 高级输入模式
- 头像、头像组 - 用户表示
- 徽章、计数徽章、状态徽章 - 状态指示器
- 文本、标签 - 字体组件
- 图像、骨架屏 - 媒体和加载状态
- 列表、数据网格、表格 - 数据展示
- 树、折叠面板 - 层次数据
- 卡片（+ 变体：卡片头部、卡片预览、卡片底部）
- 分割线、抽屉 - 空间划分
- 对话框、模态框 - 覆盖层组件
- 字段、字段组 - 表单布局
- 面包屑、链接 - 导航辅助
- 菜单、菜单列表 - 动作菜单
- 导航、标签列表 - 主导航
- 工具栏、命令栏 - 动作工具栏
- 消息栏、信息栏 - 系统消息
- 弹出通知、临时反馈 - 临时反馈
- 气泡提示、工具提示 - 上下文信息
- 教学气泡 - 教育覆盖层
- 进度条、旋转加载 - 加载状态
🎨 设计令牌系统
访问完整的 Fluent UI 设计令牌系统，跨越 6 类别的 45 多个令牌：
🌈 颜色 (8 个令牌)
colorNeutralForeground1; // #242424 - 主要文本
colorNeutralBackground1; // #ffffff - 默认背景
colorBrandBackground; // #0078d4 - 主要品牌
colorStatusSuccessBackground1; // 成功状态
colorStatusErrorBackground1; // 错误状态
// ... 更多
📝 字体 (9 个令牌)
fontFamilyBase; // 'Segoe UI', 系统字体
fontSizeBase100; // 10px
fontSizeBase200; // 12px
fontSizeBase300; // 14px
fontWeightRegular; // 400
fontWeightSemibold; // 600
// ... 完整比例
📏 间距 (11 个令牌)
spacingHorizontalXS; // 2px
spacingHorizontalS; // 4px
spacingHorizontalM; // 8px
spacingHorizontalL; // 12px
spacingHorizontalXL; // 16px
// ... 完整间距比例
🌫️ 阴影 (4 个令牌)
shadow2; // 微弱的提升
shadow4; // 卡片提升
shadow8; // 对话框提升
shadow16; // 最大提升
🔲 边框 (7 个令牌)
borderRadiusNone; // 0px
borderRadiusSmall; // 2px
borderRadiusMedium; // 4px
borderRadiusLarge; // 6px
strokeWidthThin; // 1px
strokeWidthThick; // 2px
🎬 动画 (6 个令牌)
durationUltraFast; // 50ms
durationFaster; // 100ms
durationFast; // 150ms
durationNormal; // 200ms
curveAccelerateMax; // 缓入曲线
curveDecelerateMax;
💡 使用示例
示例 1：获取组件信息
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "get_component_info", "arguments": {"componentName": "Button"}}}' | node dist/server.js
示例 2：生成自定义组件
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"componentName": "UserCard", "componentType": "layout", "requirements": "显示用户头像、姓名和角色的卡片"}}}' | node dist/server.js
示例 3：验证组件设计
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "validate_component_design", "arguments": {"componentCode": "const Button = () => <button>点击</button>", "componentName": "Button"}}}' | node dist/server.js
🏗️ 架构
服务器结构
src/
├── server.ts # 主 MCP 服务器实现
├── types.ts # TypeScript 接口
└── tools/
├── component-tools.ts # 组件知识与搜索
├── design-tools.ts # 设计令牌与验证
├── generation-tools.ts # 代码生成模板
└── validation-tools.ts # 设计与可访问性验证
data/
├── components.json # 组件数据库
└── patterns.json # 设计模式与模板
关键技术
- MCP SDK：模型上下文协议实现
- TypeScript：完整的类型安全性和 IntelliSense
- Node.js：运行环境
- JSON-RPC 2.0：通信协议
🔧 开发
开发流程
# 安装依赖
npm install
# 开发模式并启用热重载
npm run dev
# 为生产构建
npm run build
# 运行测试
npm test
# 代码检查
npm run lint
# 类型检查
npm run type-check
项目脚本
npm start- 启动 MCP 服务器npm run dev- 开发模式并使用 tsxnpm run build- TypeScript 编译npm test- 测试服务器功能npm run lint- ESLint 代码检查
测试服务器
# 测试服务器启动并列出工具
npm run test
# 手动测试使用 curl/echo
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | node dist/server.js
🤝 集成
MCP 客户端集成
此服务器兼容任何 MCP 客户端。以下是集成方法：
Claude Desktop
添加到您的 claude_desktop_config.json：
{
"mcpServers": {
"fluentui": {
"command": "node",
"args": ["/path/to/fluentui-mcp-server/dist/server.js"]
}
}
}
自定义 MCP 客户端
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
const client = new Client(
{
name: "my-app",
version: "1.0.0",
},
{
capabilities: {},
}
);
const transport = new StdioClientTransport({
command: "node",
args: ["./dist/server.js"],
});
await client.connect(transport);
📋 验证规则
服务器实现了全面的验证规则：
设计验证
- ✅ 正确使用设计令牌
- ✅ 一致的间距和字体
- ✅ 颜色对比度合规
- ✅ 组件组合模式
可访问性验证
- ✅ ARIA 属性和角色
- ✅ 键盘导航支持
- ✅ 焦点管理
- ✅ 屏幕阅读器兼容性
- ✅ 颜色对比度比率（WCAG 2.1）
代码质量验证
- ✅ TypeScript 类型安全性
- ✅ Fluent UI v9 模式
- ✅ 性能最佳实践
- ✅ 组件组合
🚀 贡献
我们欢迎贡献！以下是开始的方法：
1. 分叉并克隆
git clone https://github.com/yourusername/fluentui-mcp-server.git
cd fluentui-mcp-server
2. 创建功能分支
git checkout -b feature/new-component-support
3. 修改
- 在
data/components.json中添加新组件 - 在
src/tools/中实现新工具 - 为新功能添加测试
- 更新文档
4. 测试修改
npm run build
npm test
npm run lint
5. 提交拉取请求
- 确保所有测试通过
- 为新功能添加文档
- 遵循现有的代码风格
贡献领域
- 🆕 新组件：增加更多的 Fluent UI 组件
- 🛠️ 增强工具：改进现有工具的能力
- 📊 更好的验证：增加更多的验证规则
- 🎨 设计模式：扩展模式库
- 📖 文档：改善指南和示例
📄 许可
MIT 许可证 - 详情见 LICENSE 文件。
🔗 相关资源
- 📚 Fluent UI React 组件 - 官方文档
- 🎨 设计令牌 - 令牌系统指南
- 🏗️ 组件实现指南 - 开发模式
- 🔄 迁移指南 - v8 到 v9 迁移
- 🔌 模型上下文协议 - MCP 规范
- 🤖 Claude Desktop - 兼容 MCP 的 AI 助手
<div align="center">
为 Fluent UI 社区打造的 ❤️
使用 [