Communitygithub.com

MinnThikeTunn/win-design

設計規則,讓 WinUI 3 應用程式看起來和操作起來像原生的 Windows 11 應用程式,涵蓋 Fluent Design System 2、Mica、NavigationView、CommandBars、功能表、鍵盤快速鍵、Segoe UI Variable 以及深色模式。在建立或審查任何視窗、頁面、CommandBar 或對話方塊時使用。

win-design 是什麼?

此技能提供了一套完整的設計規則與可複製的 XAML 模式,確保開發者建立的 WinUI 3 應用程式在外觀與行為上完全符合 Windows 11 的原生風格。它深入實作 Fluent Design System 2 的核心原則:自然、直覺、回應式、有目的性與精心雕琢,並涵蓋 Mica 與 Acrylic 材質、Segoe UI Variable 字型、標準 4px/8px 間距以及 8px 圓角等具體設計元素。支援 NavigationView、CommandBars、功能表、鍵盤快速鍵及深色模式等關鍵 UI 元件的正確實作。此技能適用於一般 WinUI 3 專案開發流程,無論是建立新視窗、設計頁面佈局,還是審查現有對話方塊與飛出視窗,都能確保其遵循 Fluent 2 控制項標準並整合正確的背景材質。透過規格清單與現成 XAML 範本,開發者可快速產出高品質、一致性強的 Windows 11 應用程式介面。

相容平台~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 設計

微軟已經設計好你的應用程式。選取正確的系統元件,妥善安排它們,然後別妨礙它們運作。

微軟的五大 Fluent 原則

  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 規範。

相關技能