Winui Design

Guía de diseño/revisión de diseño, elección de controles, temas y enlace XAML de WinUI 3

Por microsoft · microsoft/win-dev-skills

Probado · Funciona ★ 8.8/10

Winui Design — Guía de diseño/revisión de diseño, elección de controles, temas y enlace XAML de WinUI 3

Qué hace

Una habilidad de diseño y revisión para WinUI 3 (Windows App SDK): mapea requisitos a controles de plataforma, aplica siluetas de forma de aplicación Fluent, una rúbrica de tamaño de ventana, reglas de temas Claro/Oscuro/Alto Contraste y detecta trampas comunes de enlace XAML x:Bind. Se activa al crear o revisar XAML de WinUI 3, migrar UI de escritorio/WPF a WinUI, o elegir entre controles y patrones de WinUI. Incluye un winui-search.exe (solo Windows) para buscar ejemplos de código de WinUI Gallery/Toolkit/Reactor, además de tres archivos de referencia bajo demanda.

Informe de la prueba

Localicé SKILL.md en plugins/winui/skills/winui-design/; el frontmatter se analiza con name+description. Verifiqué los 3 archivos referenciados (references/brushes-and-icons.md, theme-accessibility.md, layout-review.md) — HTTP 200 — más winui-search.exe (HTTP 200, 7.9MB; `file` informa binario de consola de Windows PE32+, no ejecutable en este host macOS, por lo que ese paso es solo para Windows). Verifiqué la instalación en un HOME temporal limpio: SKILL.md aterriza en ~/.claude/skills/winui-design/SKILL.md. Prueba de SALIDA: escribí una pequeña utilidad "Rename File" de WinUI 3 (TextBox + status + button) dos veces — línea base vs siguiendo la habilidad (ambas guardadas en scratchpad). Siguiendo el cuerpo, se produjo un XAML concretamente mejor: detectó dos errores silenciosos reales que la línea base envió — {x:Bind Vm.Status} por defecto es OneTime, por lo que el estado nunca se actualiza (la habilidad añadió Mode=OneWay), y un TextBox TwoWay sin UpdateSourceTrigger=PropertyChanged deja la VM obsoleta hasta la pérdida de foco — y aplicó la rúbrica de tamaño de ventana con un AppWindow.Resize correcto para DPI (la línea base dejó el valor predeterminado sobredimensionado de ~1024x768), intercambiando un literal "Gray" codificado + marcador de posición como etiqueta por un estado semántico de InfoBar y una etiqueta visible. NO ejecuté winui-search.exe (plataforma incorrecta); la guía en línea llevó la salida sin él.

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

git clone --depth 1 https://github.com/microsoft/win-dev-skills.git /tmp/winui-design-src
mkdir -p ~/.claude/skills
cp -R /tmp/winui-design-src/plugins/winui/skills/winui-design ~/.claude/skills/winui-design
# SKILL.md now at ~/.claude/skills/winui-design/SKILL.md
# Optional bundled tool: winui-search.exe is a Windows-only PE32+ binary (~7.9MB, .NET).
#   It runs ONLY on Windows (WinUI's real target platform); NOT usable on macOS/Linux.
#   The skill's design/review guidance works without it — the exe only adds sample lookups.
# Source for the binary is in the same repo at src/tools/winui-search if you want to build/inspect.
# Plugin-marketplace alternative: repo exposes .claude-plugin/marketplace.json (plugin name: winui).

Comandos y prompts de ejemplo

/winui-designGuía de diseño/revisión de diseño, elección de controles, temas y enlace XAML de WinUI 3

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Review this XAML page against Fluent Design
Choose the right WinUI control for this layout
Fix dark theme contrast in this WinUI screen

Informe completo →