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 mac-design. Tokens cover only what the system does not: the accent, custom surfaces, radii, motion, overlays, and custom controls.

The app keeps Apple's look. Only the accent color changes. For parts of your own (a custom sidebar, 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 Sources/<App>/UI/: