本技能提供一套设计规则，让基于 WinUI 3 的应用在外观和操作体验上接近原生 Windows 11 应用。核心理念是“系统优先”：优先选择并正确排布 WinUI 控件，只在 WinUI 没有对应方案时才加入自定义设计。
用途与原则 用于界面设计与评审。Fluent 原则作为每个界面的评审视角：省力（更快更容易完成目标，去除不必要元素）、平静（更安静、少杂乱，柔和材质、圆角、服务于信息的动效）、个性化（跟随用户的主题、强调色、文字大小与对比度设置）、熟悉（相同外观意味着相同行为，使用标准控件、快捷键与措辞）、完整一致（在浅色、深色、高对比度下，以及鼠标、键盘、触摸、笔输入时都像 Windows 的一部分）。每个界面都应回答：我在哪？能做什么？能去哪？
配套文档 完整检查清单为 design-rules.md，用于评审；可复制的 XAML 见 patterns.md；设置页见 settings.md；命令栏、菜单、上下文菜单与快捷键见 commands.md。规则不足时可参考 Microsoft Learn 的 Windows 应用设计页面（如 controls/navigationview、signature-experiences/materials），WinUI Gallery 应用可实时查看每个控件。应用级令牌（颜色、圆角、动效）调用 design-system 技能；功能行为与文案（命名、流程、对话框、错误、无障碍）调用 ux-design；间距、对齐与错位检查调用 layout-grid；自建部件或匹配指定应用时调用 design-kit 或 design-from-app。
设计前的规划 在 docs/BRIEF.md 的 ## Design plan 下（或内容超过一页时写入 docs/DESIGN.md）写明：应用原型（导航窗口、单页工具、托盘应用或快速捕获面板；多数个人应用是导航窗口加一个快速捕获入口；托盘工具为“托盘图标 + 浮出面板 + 设置窗口”，导航规则仅适用于设置窗口）、信息架构（导航页最多两级）、命令映射（每个动作、所在位置与快捷键）、空状态（每页在无数据时显示什么）、目标感受（如平静、快速、自信）。
入口优先 Windows 工具常通过小入口使用：全局快捷键、托盘图标、开始菜单、快速面板、拖放、任务栏跳转列表，应优先设计。快速捕获是一个由全局快捷键打开、Esc 或 Enter 关闭的单输入小窗口；采用乐观 UI：按 Enter 立即关闭并显示结果，后台保存，提供撤销而非进度环。
布局 窗口使用 Mica 背景，ExtendsContentIntoTitleBar 配合 TitleBar 控件（应用图标、名称、窗格切换，有搜索时中部放搜索框），左侧 NavigationView 且设置位于底部；单页应用不使用 NavigationView。NavigationView 窗格模式在宽窗口为 Left，窗口变窄时自动折叠为紧凑栏再到汉堡菜单，应保留该行为。每页以 TitleTextBlockStyle 标题开头，标题行右侧放 CommandBar 页面命令，然后是内容。内容放在卡片上（CardBackgroundFillColorDefaultBrush、1 epx 的 CardStrokeColorDefaultBrush 边框、OverlayCornerRadius），叠在 Mica 层上，窗口背景保持 Mica。列表与详情采用 320 epx 列表列加详情卡片，窄窗口下用 ListView 打开详情页。渐进披露：空页面只显示一个空状态与首个操作，有内容后才出现筛选。间距基于 4 epx 网格（UI/Space.xaml）：页面两侧边距 36 epx，相关控件间 8，同行卡片间 16，标题与内容间 24，组标题上方 32；控件高度取自 WinUI（按钮和输入框 32 epx），不设固定高度。最小窗口尺寸须保证每页可用。
材质 主窗口用 Mica，随桌面壁纸着色，窗口非活动时变平，属预期。标题栏含选项卡的窗口用 Mica Alt（MicaBackdrop Kind="BaseAlt"）。亚克力仅用于临时表面：浮出、菜单、工具提示与快速面板；WinUI 自带给浮出和菜单加亚克力，绝不要把亚克力用于页面背景。内容用实心卡片填充，不自带背景。不要材质叠材质：卡片叠在 Mica 上可以，亚克力卡片叠在 Mica 上不行。
命令与菜单 页面命令放在 CommandBar，DefaultLabelPosition="Right"，最多四个主要命令，其余进溢出菜单；图标用 Segoe Fluent Icons，每个都带标签。每页或对话框仅一个强调按钮（AccentButtonStyle），只用于主完成动作（保存、发送、创建），多数页面没有。每个命令都配 KeyboardAccelerator，WinUI 会在工具提示与溢出菜单中显示。标准快捷键保持原义：Ctrl+N、Ctrl+O、Ctrl+S、Ctrl+Z、Ctrl+Y、Ctrl+C、Ctrl+V、Ctrl+X、Ctrl+A、Ctrl+F、F2（重命名）、Delete、Ctrl+W（关闭）、F5（刷新）；Windows 没有标准设置快捷键，设置从导航窗格打开。不适用的命令禁用但保持可见。MenuBar（文件、编辑、视图）只用于命令很多的文档类应用（如记事本、画图），多数应用不需要。窗口标题标明内容，如“Today - Tasks”。
窗口平静打开 窗口或对话框打开时不抢焦点：文本框不闪烁光标、不选中文本；唯一例外是只用于输入（搜索或快速添加）的窗口会聚焦输入框。WinUI 仅在键盘操作后显示焦点矩形，绝不要关闭。ContentDialog 按内容定尺寸，内容高于窗口允许时才滚动。使用系统滚动条，指针靠近前收缩为细线，不要重新设计样式。
键盘优先 每个高频操作都有快捷键，且快捷键在同一帧给出反馈。Enter 为默认动作，Esc 取消，Delete 删除，F2 重命名，方向键移动，Tab 在组间移动。会破坏输入（Delete、方向键、Enter）的作用域键用 KeyboardAccelerator.ScopeOwner 限定到列表，避免在文本框中触发。新条目获得焦点（Focus(FocusState.Programmatic)）以便立即输入。访问键（AccessKey="N"）让用户按 Alt 加字母，全天使用的应用应为命令栏添加。通过工具提示、菜单和设置中的列表教授快捷键。
颜色、字体、深色模式 文本使用 TextFillColorPrimaryBrush、TextFillColorSecondaryBrush、TextFillColorTertiaryBrush，表面使用主题填充画笔；框架或文本中不使用固定白、黑、灰。只有一个强调色：强调文本用 AccentTextFillColorPrimaryBrush，强调填充上的文本用 TextOnAccentFillColorPrimaryBrush，不用固定白色。状态色必须配图标或文字，InfoBar 自带严重级别。字体层级使用 Segoe UI Variable：Caption 12、Body 14、Body Strong 14 半粗、Subtitle 20、Title 28、Title Large 40、Display 68；使用内置样式（BodyTextBlockStyle、TitleTextBlockStyle），不用小于 12 的字号。所有标签、按钮、标题、菜单项用句首大写，如“New item”“Open data folder”。深色模式是独立调色板而非反转浅色；每个截图都要检查浅色和深色。C# 构建的 UI 必须通过 XAML 样式中的 {ThemeResource} setter 获取颜色：代码中从 Application.Current.Resources 读取的画刷会忽略面板主题。高对比度主题会替换所有画笔，主题画笔可处理，硬编码颜色会破坏。图标用 Segoe Fluent Icons 的 FontIcon 或 SymbolIcon，与 Windows 使用同一套。
交互 用户可操作的对象都配 ContextFlyout 与 MenuFlyout，常用命令（复制、删除）带图标与快捷键文字。悬停状态随控件提供；自定义控件需有 PointerOver、Pressed、Disabled 状态。适合处支持拖入拖出（CanDragItems、AllowDrop），拖到资源管理器时给出真实文件。重启恢复窗口尺寸、页面与选中项；关闭时除非会丢失已输入内容，否则不询问。每个破坏性或批量操作都提供撤销：一键删除用 InfoBar 或 Toast 带撤销；只有无法撤销时才用 ContentDialog 确认。设置是导航窗格中的页面（底部齿轮），按 Windows 设置布局。尊重“动画效果”关闭（UISettings.AnimationsEnabled）和“透明效果”关闭（Mica 自行回退）。仅图标按钮用 ToolTipService.ToolTip 与 AutomationProperties.Name 命名。
何时自定义 当自定义外壳能让应用在其核心任务上明显更好（如快速添加字段或日历网格）时可以自定义，在代码注释中写明原因，并匹配系统：控件用 ControlCornerRadius（4）、卡片与浮出用 OverlayCornerRadius（8）、Segoe UI Variable、4 epx 网格。
评审 在浅色与深色下截图每个表面：各页面、托盘菜单、每个浮出与对话框、编辑器与设置。查找无人要求的光标、没有可滚动内容的滚动条、短内容下的空白带、标题式大写标签、数据存在时仍显示空状态。截图模式会先把窗口置前；非活动窗口的 Mica 看起来是平的，该截图不算已评审。当 design-rules.md 的每条规则在浅色与深色截图上都成立，或有注释说明为何不适用时，即完成。