Communitygithub.com

MinnThikeTunn/win-design

使 WinUI 3 应用外观与行为如同原生 Windows 11 应用的界面设计规则,涵盖流畅设计系统 2、Mica、NavigationView、CommandBar、菜单、键盘快捷键、Segoe UI Variable 以及暗色模式。在创建或审查任何窗口、页面、CommandBar 或对话框时使用。

win-design 是什么?

该技能提供了一组规则和可复用的 XAML 模式,帮助开发者构建或审查 WinUI 3 应用,使其外观与行为完全符合 Windows 11 的原生设计语言。它基于微软的流畅设计原则,涵盖了 Mica 和 Acrylic 背景材质、NavigationView、CommandBar、菜单、键盘快捷键、Segoe UI Variable 字体以及暗色模式等关键组件。使用此技能可以确保应用界面与 Windows 11 系统风格一致,提升用户的熟悉感和精致度。该技能适用于任何使用 WinUI 3 框架的项目,包括 Visual Studio 项目中的窗口、页面、对话框等。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MinnThikeTunn/Phan-Tee/tree/main/skills/design/win-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Windows 11 设计

微软已经为你的应用设计好了。选择合适的系统组件,合理排列,然后不要干扰它们。

微软的五项流畅设计原则

  1. 自然:适应各种用户输入(键盘、鼠标、触控、笔)。
  2. 直观:熟悉的布局、一致的图标、清晰的层级结构。
  3. 响应式:即时反馈,流畅的微动画。
  4. 有意图的:每个视觉元素都有其目的。
  5. 精心打磨:边角对齐,一致的 4 px / 8 px 网格间距,精细的材质。

Windows 11 视觉材质

  • Mica (MicaBackdrop):应用于主窗口框架。动态采样用户桌面壁纸,营造出微妙的着色表面。
  • Acrylic (DesktopAcrylicBackdrop):用于临时的浮动浮出控件、上下文菜单和对话框。
  • 圆角: Windows 11 标准为卡片和按钮使用 8 px 圆角半径;小型芯片使用 4 px。
  • 排版: 支持动态光学尺寸的 Segoe UI Variable 字体。
  • 图标: Segoe Fluent Icons(FontIcon Glyph="\uE...")。

完成标准

所有视图和浮出控件均使用标准的 Fluent 2 控件,应用了 Mica 或 Acrylic 背景,并且排版符合 Segoe UI Variable 规范。

相关技能