内容
# 流畅界面构建工具：打造无缝的 Fluent 2 用户界面，自动化
[](https://github.com/Rohithreddy7123/fluent-ui-plugin/actions/workflows/ci.yml)
[](LICENSE)
[](CONTRIBUTING.md)
[](https://github.com/Rohithreddy7123/fluent-ui-plugin/discussions)
> 代理 · 技能 · MCP 工具，帮助开发者、设计师和 UI 工程师正确、快速地在 **Web**、**Power BI** 和 **Power Platform** 上实施 **Microsoft Fluent 2 (Fluent UI 2.0)**，适用于任何 AI IDE。
**🌐 实时网站（本身是一个 Fluent UI React v9 应用，使用此插件构建）：[rohithreddy7123.github.io/fluent-ui-plugin](https://rohithreddy7123.github.io/fluent-ui-plugin/)** · **[安装和使用指南](GUIDE.md)** · **[每主机矩阵](hosts/README.md)**
**版本：** 1.0.0 · **许可证：** MIT · **Fluent 2 是核心**：这里的一切都应用相同的设计语言（令牌，Segoe UI 类型斜坡，间距，圆角半径，高度，运动，可访问性）。
---
## 为什么存在
Fluent 2 庞大且精确：正确的组件，正确的令牌，正确的主题和可访问性，每次都是如此。手动完成这些工作很慢且容易出错。`fluent-ui` 将官方 Fluent 2 设计系统转化为 **可靠的、可执行的帮助**：应用 **设计语言基础**（颜色，排版，布局，高度，图标，运动，形状，材料，内容，负责任的 AI），查找真正的组件和令牌值，生成品牌主题，生成有效的 Power BI 主题和 **PBIP/PBIR** 项目，并获得 Power Apps / Power Pages / PCF 指导，以便用户在无需手动设计的情况下设计无缝的界面。
除了绿地之外，它还：
- **采用/迁移现有的 UI 到 Fluent 2**：Fluent UI v8 到 v9（保留 Fluent 1 和 Fluent 2），从其他设计系统和硬编码值到令牌。
- **可选用户预设（`fluent.config.json`）+ 持久内存**：代理尊重您的品牌/可访问性/形状/大小预设，并记住您的决定；默认情况下完全零配置（无需设置）。
## 内容
### 🤖 代理 (`agents/`)
| 代理 | 角色 |
|---|---|
| `fluent-ui-builder` | 主要路由器，跨所有表面构建和委托 |
| `fluent-web-engineer` | Fluent 2 网页应用（React v9 / Web 组件） |
| `fluent-powerbi-designer` | Fluent 主题 + PBIP/PBIR 报告 |
| `fluent-power-platform-engineer` | Power Apps，Power Pages，PCF |
| `fluent-migration-engineer` | 采用/迁移现有的 UI 到 Fluent 2（Fluent UI v8 到 v9，其他设计系统，硬编码到令牌） |
| `fluent-design-reviewer` | 审计 UI 对抗 Fluent 2 + a11y |
### 📚 技能 (`skills/`)
`fluent-web-ui` · `fluent-theming` · `fluent-design-tokens` · `fluent-design-language` · `fluent-accessibility` · `fluent-ai-copilot-ui` · `fluent-powerbi-theme` · `fluent-pbip-report` · `fluent-powerapps` · `fluent-powerpages` · `fluent-pcf-component` · `fluent-migration` · `fluent-design-review` · `fluent-config`
### 🛠️ MCP 工具 (`mcp/`, Node + TypeScript)
| 工具 | 功能 |
|---|---|
| `fluent_search_components` / `fluent_get_component` | 搜索目录；获取真正的道具，导入，可访问性，示例，用法做/不要 |
| `fluent_list_tokens` / `fluent_get_token` | 精确的令牌值（颜色/类型/间距/半径/阴影/运动），浅色/深色/HC |
| `fluent_generate_theme` | 品牌十六进制到 Fluent `BrandVariants` 斜坡 + `createLightTheme`/`createDarkTheme` |
| `fluent_generate_powerbi_theme` | 有效的，Fluent 对齐的 Power BI 报告主题 JSON |
| `fluent_scaffold_pbip` | Fluent 主题 **PBIP/PBIR** Power BI 项目 |
| `fluent_powerbi_visuals` | 每个 Power BI 视觉 + 其学习文档 URL + Fluent 2 基础主题样式（映射到 21 页的展示） |
| `fluent_powerplatform_guidance` | Power Apps / Power Pages / PCF Fluent 指导 |
| `fluent_generate_code` | Fluent 网页脚手架（React v9 / Web 组件） |
| `fluent_accessibility_checklist` | Fluent 2 WCAG 2.1 AA 检查清单 |
| `fluent_design_guidance` | Fluent 2 设计语言基础：颜色，排版，布局，高度，图标，运动，形状，材料，内容，负责任的 AI |
| `fluent_migration_guidance` | 采用/迁移到 Fluent 2：Fluent UI v8 到 v9，从另一个设计系统，硬编码到令牌，按表面 |
| `fluent_get_images` | 直接 URL 到官方 Fluent 2 视觉（解剖图，做/不要示例，状态/类型插图，运动演示视频）用于任何组件或主题（显示图表或提供源链接） |
| `fluent_get_config` / `fluent_recall` | 加载用户已解析的预设（配置 > 内存 > 默认）+ 记录的决策日志 |
| `fluent_init_config` / `fluent_set_config` | 脚手架（首次运行）或更新用户的 `fluent.config.json` 预设 |
| `fluent_remember` | 记录设计决策到 `.fluent/memory.json`（仅追加） |
## 在每个主要主机上工作
MCP 服务器是一个标准的 stdio 服务器；代理/技能/指令通过 `AGENTS.md`、`CLAUDE.md` 和 `.github/` 分发。优先级主机：**GitHub Copilot CLI，VS Code，VS Code Insiders，Visual Studio，GitHub Copilot 桌面应用程序**；还包括 Cursor，Claude，Gemini，Antigravity，Windsurf，Cline。参见 **[`hosts/README.md`](hosts/README.md)** 获取复制粘贴配置（3 种 MCP 方言）。
## 快速入门
```bash
# 1) 构建 MCP 服务器
cd mcp
npm install
npm run build # -> mcp/dist/index.js
# 2) 在您的 IDE 中注册它（选择匹配的模板）
# Copilot 方言 -> hosts/mcp.copilot.json
# VS Code / VS -> hosts/mcp.vscode.json
# Claude 风格 -> hosts/mcp.claude-style.json
```
然后询问您的助手类似的问题：
- *"使用暗色模式构建 Fluent 2 登录表单。"*
- *"从品牌 `#742774` 生成 Power BI 主题并搭建 PBIP 报告。"*
- *"什么是 `borderRadiusMedium`？给我一个带有标签的 Fluent Combobox。"*
- *"使我的 Power Apps 画布应用程序与 Fluent 2 匹配。"*
- *"使用 Fluent 2 和可访问性审查此组件。"*
## 接地和出处（为什么值得信赖）
- **设计系统：** 爬取官方 **fluent2.microsoft.design**，69 个公共页面 + **14 个受限 AI/Copilot 组件页面**（通过身份验证的员工会话捕获）。
- **令牌和组件：** 从安装的 **`@fluentui/react-theme` / `@fluentui/tokens` / `@fluentui/react-components`** 源提取（真实值，不是猜测）； 61 个组件编目，附带用法。
- **Power BI：** 主题 JSON **模式验证** 针对 `reportThemeSchema-2.155`； PBIP/PBIR 脚手架验证针对官方 Fabric 项目模式。
- **Power Platform 和主机集成：** 在 Microsoft Learn 中扎根，引用来源。
## 仓库布局
```
plugin.json # 插件清单（+ 镜像在 .claude-plugin/.codex-plugin/.github）
.mcp.json # 捆绑的 MCP 服务器注册（Copilot 方言）
AGENTS.md · CLAUDE.md # 便携式指令（分发到大多数主机）
agents/ # 6 个代理（*.agent.md）
skills/ # 14 个技能（SKILL.md）
mcp/ # MCP 服务器：19 个工具（src/，dist/，data/）
templates/pbip/ # PBIP/PBIR 项目模板
hosts/ # 每主机 MCP 配置模板 + 安装指南
docs/ # 架构 + 演示
research/ # 扎根的研究笔记（设计，代码，powerbi，power platform，主机）
assets/screenshots/ # Fluent 2 参考捕获
```
## 文档
- [`docs/architecture.md`](docs/architecture.md)：了解各个部分如何组合。
- [`docs/presentation.md`](docs/presentation.md)：领导力演示大纲。
## 贡献和社区
这是一个开源项目（MIT），欢迎贡献。
- **错误：** 打开 [错误报告](https://github.com/Rohithreddy7123/fluent-ui-plugin/issues/new?template=bug_report.yml)。
- **功能：** 打开 [功能请求](https://github.com/Rohithreddy7123/fluent-ui-plugin/issues/new?template=feature_request.yml)。
- **问题和想法：** 加入 [GitHub Discussions](https://github.com/Rohithreddy7123/fluent-ui-plugin/discussions)。
- **拉取请求：** 参见 [`CONTRIBUTING.md`](CONTRIBUTING.md) 获取开发设置和流程。
- **安全：** 请遵循 [安全策略](SECURITY.md)。
通过参与，您同意 [行为准则](CODE_OF_CONDUCT.md)。
## 许可证
MIT © Rohith Reddy Arasani。 Fluent，Fluent 2，Power BI 和 Power Platform 是 Microsoft 的商标。
