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 程式設計工具使用。