Communitygithub.com

MinnThikeTunn/win-design

Gestaltungsregeln für eine WinUI 3-App, die sich wie eine native Windows 11-App anfühlt – von Fluent Design System 2 über Mica, NavigationView, CommandBars, Menüs, Tastaturkürzel, Segoe UI Variable bis hin zum Dark Mode. Verwenden Sie diese Regeln beim Erstellen oder Überprüfen von Fenstern, Seiten, CommandBars oder Dialogen.

Was ist win-design?

Dieser Skill enthält eine umfassende Sammlung von Designregeln und XAML-Mustern, mit denen Entwickler WinUI 3-Anwendungen erstellen können, die sich wie native Windows 11-Apps verhalten und aussehen. Er basiert auf Microsofts fünf Fluent-Prinzipien (Natürlich, Intuitiv, Reaktionsschnell, Absichtsvoll, Handwerklich) und deckt die wesentlichen visuellen Materialien von Windows 11 ab: Mica für Hauptfenster, Acrylic für Flyouts, standardisierte Eckenradien (8 px für Karten und Schaltflächen, 4 px für kleine Chips), die Schriftart Segoe UI Variable mit dynamischer optischer Größenanpassung und die Verwendung von Segoe Fluent Icons. Der Skill orientiert sich an den offiziellen Microsoft-Designdokumenten (design-rules.md und patterns.md) und definiert klare Abschlusskriterien: Alle Ansichten und Flyouts müssen standardmäßige Fluent 2-Steuerelemente verwenden, Mica- oder Acrylic-Hintergründe sind anzuwenden, und die Typografie muss Segoe UI Variable entsprechen. Er ist ideal für Entwickler, die eine konsistente, native Windows 11-Ästhetik sicherstellen möchten, ohne eigene Designarbeit leisten zu müssen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/MinnThikeTunn/Phan-Tee/tree/main/skills/design/win-design
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Windows 11-Design

Microsoft hat Ihre App bereits entworfen. Wählen Sie die richtigen Systemkomponenten aus, ordnen Sie sie an und halten Sie sich aus dem Weg.

Microsofts fünf Fluent-Prinzipien

  1. Natürlich: Passt sich der Benutzereingabe an (Tastatur, Maus, Touch, Stift).
  2. Intuitiv: Vertraute Layouts, konsistente Ikonografie, klare Hierarchie.
  3. Reaktionsschnell: Sofortiges Feedback, flüssige Mikroanimationen.
  4. Absichtsvoll: Jedes visuelle Element dient einem Zweck.
  5. Handwerklich: Ausgerichtete Kanten, konsistenter 4 px / 8 px-Rasterabstand, polierte Materialien.

Windows 11-Visuelle Materialien

  • Mica (MicaBackdrop): Wird auf den Hauptfensterrahmen angewendet. Es sampelt dynamisch das Desktop-Hintergrundbild des Benutzers, um eine subtil getönte Oberfläche zu erzeugen.
  • Acrylic (DesktopAcrylicBackdrop): Wird für vorübergehende Flyouts, Kontextmenüs und Dialogfelder verwendet.
  • Ecken: Windows 11-Standard mit 8 px Eckenradius für Karten und Schaltflächen; 4 px für kleine Chips.
  • Typografie: Segoe UI Variable mit dynamischer optischer Größenanpassung.
  • Symbole: Segoe Fluent Icons (FontIcon Glyph="\uE...").

Abschlussbedingungen

Alle Ansichten und Flyouts verwenden standardmäßige Fluent 2-Steuerelemente, Mica- oder Acrylic-Hintergründe sind angewendet, und die Typografie entspricht Segoe UI Variable.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community