Design system

A design system is a short list of tokens in code and one page that says which token to use when. Every screen uses tokens, never raw values. Then a change in one place changes the whole app, and an agent can review a screen against one page.

Start from windows-design. WinUI already ships hundreds of theme resources (TextFillColorPrimaryBrush, ControlCornerRadius). Tokens cover only what WinUI does not: the accent, custom surfaces, spacing, motion, overlays, and custom controls.

The app keeps the Fluent look. Only the accent changes. For parts of your own (a custom navigation rail, buttons, icons), call the Skill tool with design-kit. To copy the look of an app the user names, call it with design-from-app.

The template already has the base in src/<App>/UI/: