用 UnoCSS 构建或重构界面时，以语义化 token…

在任意框架中用 UnoCSS 构建或重构界面（从密集 devtools 面板到落地页）时，先做 design read，再应用语义化 token 系统、微交互打磨与 anti-slop 规则。

适用场景

解决思路

1. 先阅读 core-design-read 来设定设计方向，然后应用 token 系统，并叠加 polish 与 anti-slop 规则。
2. 在 markup 中使用语义化 shortcuts（bg-base、border-base、color-active、btn-action），而不是原始 utility 链。
3. 同时设计 light 和 dark mode；核心 token 必须在两种主题下都能工作。
4. 为 z-index 层命名（z-top-nav、z-panel-content、z-drawer-content）；不要在模板中使用原始 z 值。
5. 只生成基于 class 的 utilities（class="..."）；在生成代码中避免 Attributify 语法。
6. 保持 icon/status 的 class 字符串为字面量，以便 UnoCSS 能静态提取（必要时使用 // @unocss-include）。
7. 对技术值（路径、SHAs、计数器、时间戳、百分比）使用 font-mono + tabular-nums。
8. 对长路径和 ID 进行视觉截断，但把完整值保留在 title 中。
9. 在选择外观前阅读 brief 并设置三个 dial（core-design-read）。
10. 密集或结构性表面使用边框；抬升表面使用分层阴影（features-micro-interactions）。
11. 在任何面向用户的文本中零 em-dash 和 en-dash 字符（best-practices-anti-slop）。
12. 在 uno.config.ts 的 shortcuts 中定义最小语义核心：color-base: color-neutral-800 dark:color-neutral-200；bg-base: bg-white dark:bg-#111；bg-secondary: bg-#eee dark:bg-#222；border-base: border-#8882；bg-active: bg-#8881；color-active: color-primary-600 dark:color-primary-300；border-active: border-primary-600/25 dark:border-primary-400/25；btn-action: inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!；op-fade: op65 dark:op55；op-mute: op30 dark:op25；z-top-nav: z-60；z-panel-content: z-70；z-drawer-content: z-100。完整 uno.config.ts 和基础样式见 core-starter-kit。
13. 按 core-principles 落实语义 token、dark mode parity、z-index 命名、class-first output。
14. 按 core-starter-kit 复制 UnoCSS starter config 和基础 light/dark 样式。
15. 按 core-tokens-and-combinations 使用 token families、可复用 class combinations、mobile-safe shell tokens。
16. 按 core-design-read 阅读 brief、声明 design read、设置 variance/motion/density dials。
17. 按 best-practices-strict-rules 执行 do/don't checklist 和 consolidated pre-flight。
18. 按 best-practices-class-utilities-over-attributify 在生成代码中使用 class utilities，并做 Attributify 转换。
19. 按 best-practices-anti-slop 执行 dash ban 和 AI-tell forbidden patterns。
20. 按 best-practices-bias-correction 覆盖 typography、color、layout、materiality 的默认偏见。
21. 按 features-data-presentation 处理 paths、icons、time、date、numbers、badges、buttons。
22. 按 features-micro-interactions 处理 radius、alignment、shadows、animation、numbers、outlines、hit areas。
23. 按 features-floating-vue-overrides 设置共享 Floating Vue 配置和 popper 样式。
24. 按 advanced-pattern-vocabulary 识别并采用命名的 UI patterns。
25. 按 advanced-redesign-protocol 检测模式、先审计、保留 IA 和 SEO。

适用边界 · 注意事项

• 项目不使用 UnoCSS 时。
• 必须输出 Attributify 语法作为主要类名写法的代码生成场景时（该技能要求生成 class-based utilities）。
• 不需要 light/dark 双主题或无法定义语义 token 的一次性页面时。