Fluent UI 是微软面向生产环境的 Fluent 2 设计系统实现：Segoe UI Variable 以 14px 正文与半粗标题呈现，品牌蓝（#0F6CBD）展开完整 Microsoft 色阶；4px 圆角、分层阴影与亚克力/Mica 材质表面让「深度与光」成为语义——海拔表达焦点与层叠；命令栏、侧边面板与 Teams 式卡片是典型生产力版式。适合微软生态与企业办公产品界面。
Fluent UI设计系统
提示词模板
基础模板
Design a Microsoft Fluent 2-inspired interface. - Segoe UI Variable with 14px body and semibold headings; - #0F6CBD brand blue with the full Microsoft brand ramp; - 4px radii, layered shadows, and acrylic/mica material surfaces; - Depth and light as meaning: elevation conveys focus and layering; - Productivity layouts: command bars, side panels, and Teams-like cards. Colors: #0F6CBD, #FFFFFF, #F5F5F5, #242424 with #0F6CBD accent. Typography: Segoe UI.
变体提示词
📱 移动端
Design a mobile app with Fluent UI aesthetics. Use Fluent UI color identity with #0F6CBD accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Fluent UI style. Use Fluent UI color identity with #0F6CBD accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Fluent UI design language. Use Fluent UI color identity with #0F6CBD accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Fluent UI visual identity. Use Fluent UI color identity with #0F6CBD accents. Compelling, conversion-focused.
使用示例
Fluent 效率应用
Web 端Build a productivity app with Fluent 2 style: command bar, side panel, mica surfaces, and #0F6CBD brand accents.
Fluent 设置面板
仪表板Create a settings experience with Fluent UI design language: layered cards, acrylic depth, and Segoe UI typography.
✅ 适合场景
- 微软生态
- 效率工具
- 企业软件
❌ 不适合场景
- 非微软生态的独立设计
- 极简反材质的界面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。