antfu-design

Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.

Core Rules

• Use semantic shortcuts (bg-base, border-base, color-active, btn-action) instead of raw utility chains in markup.
• Design light and dark mode together. Core tokens must work in both themes.
• Name z-index layers (z-top-nav, z-panel-content, z-drawer-content). Do not use raw z values in templates.
• Generate class-based utilities only (class="..."). Avoid Attributify syntax in generated code.
• Keep icon/status class strings literal so UnoCSS can statically extract them (// @unocss-include when needed).
• Use font-mono + tabular-nums for technical values (paths, SHAs, counters, timestamps, percentages).
• For long paths and IDs, truncate visually but keep the full value in title.
• Read the brief and set the three dials before choosing a look (core-design-read).
• Borders for dense or structural surfaces, layered shadows for elevated ones (features-micro-interactions).
• Zero em-dash and en-dash characters in any user-facing text (best-practices-anti-slop).

Starter shortcuts