design-kit 是用于为 WinUI 3 应用建立自定义设计系统的技能。资料指出，原生外观来自 WinUI 自带部件，而自定义外观来自应用自己的部件：侧边栏行、按钮、复选框、图标等，均由 XAML 绘制。设计套件由这些部件、其背后的数值，以及一个展示每个部件每种状态的页面组成。多数应用保留 WinUI 部件、只选强调色时使用 design-system 技能；当部件本身需要改变时才构建套件。若要复制现有应用的外观，先调用 design-from-app 技能测量应用，再回到本技能。所有内容位于 src/<App>/DesignKit/，各步骤代码见 parts.md。
主要流程分为八步。第一步编写规范：依据 kit-spec.md 编写 design/KIT.md，包含三个描述感觉的词、令牌、字号层级、图标规则，以及每个部件的尺寸与状态章节；需检查应用各屏幕所需的每个部件都有对应章节。第二步设置三层令牌：DesignKit/Tokens.xaml 在 App.xaml 中于 XamlControlsResources 之后合并，分为调色板（按色相和级别命名的原始颜色，仅此文件读取）、语义层（InkTextBrush、InkAccentBrush、InkSelectionBrush、InkDividerBrush，在 ThemeDictionaries 中各有浅色、深色和高对比度值，高对比度使用系统颜色，部件只通过 {ThemeResource} 读取此层）与尺度层（尺寸、圆角、透明度、动效意图和文本样式）。改品牌只动调色板，修深色模式只动语义层，均不触及部件。第三步字体：按角色而非字号命名样式（KitTitleText、KitBodyText、KitLabelText、KitSectionText、KitMetaText），基于 WinUI 字号梯度样式以保留行高与裁剪，默认用系统字体，品牌字体放入 Assets/Fonts/ 并以 ms-appx 路径命名。第四步图标：视图通过 KitIcon 引用名称而非字形码或路径，可从单一尺寸的 Segoe Fluent Icons 起步，自绘图标需将 SVG 路径转为填充轮廓的 PathIcon，统一尺寸、笔画粗细与圆角风格，选中行可切换为填充形式。第五步部件：DesignKit/Parts/ 中每个家族一个文件，部件必须是真实控件（Button、CheckBox、TextBox、ListViewItem），优先使用 WinUI 资源键，其次样式设置器，最后完整 ControlTemplate；须覆盖静止、悬停、按下、选中、聚焦、禁用及浅色、深色、高对比度状态，并支持为画廊强制状态。第六步标题栏：保留 TitleBar 控件并套用套件外观，侧边栏可用套件行构建或通过资源键重设 NavigationView，同时保留标题栏按钮、Snap 布局、菜单、对话框和调整边框等原生能力，自定义侧边栏需支持方向键选择、Tab 进出、Narrator 朗读且选中状态不能仅靠颜色表达。第七步画廊：KitGallery.xaml 展示所有部件所有状态，设置 APP_KIT_GALLERY=1 时应用显示画廊而非普通页面，快照命令会输出 kit-light.png 与 kit-dark.png，新部件应先在此审查，并手动检查一次高对比度。第八步检查：运行 tools/grid-lint.ps1 及查找硬编码颜色、FontSize、Glyph、字形码的脚本，均需无输出，然后构建、快照并对屏幕运行布局网格检查。完成标准是 design/KIT.md 覆盖所有部件、每个部件为真实控件且具备全部状态、画廊在浅色与深色下展示全部部件、高对比度已手动检查、上述检查全部通过。适用场景为需要自定义 WinUI 3 外观与部件的桌面应用开发；限制是资料针对 WinUI 3/XAML，未提供其他平台支持、价格或效果数据。