Doing good design with @antfu/design

@antfu/design is a shared design layer for devtools-style Vue apps: a composable UnoCSS preset (presetAnthonyDesign), a set of token-driven Vue primitives, and a color-contrast a11y check. This skill is how to use it well — the vocabulary, the defaults, and the taste.

The three rules that matter most

1. Own the tokens, not the colors. Never hard-code a hex or a raw Tailwind color in app UI. Reach for the semantic layer first: bg-base, color-base, color-muted, border-base, op-fade, btn-action, badge. They are defined once (in the preset) and adapt to light/dark automatically. See references/core-tokens.md.

2. Light/dark parity is not optional. Every surface and text token has a dark variant baked in. If you write a one-off color, you have just created a dark-mode bug. The standing contrast scan (@antfu/design/a11y) will catch the worst of it — don't rely on it as a substitute for using the tokens.