生成 UI 组件时用配置驱动的设计系统统一间距、颜色、排版…

在让 AI 生成任何 UI 组件时，需要避免 padding 不一致、颜色错配、漏掉 hover/focus 状态等问题，用一套结构化设计系统约束输出。

适用场景

解决思路

1. 生成 UI 前先检查项目是否已有 `ui-stack` 配置或 design tokens，有就以项目配置为准。
2. 若项目没有配置，则套用下面这套默认设计系统。
3. 间距一律用 8 的倍数（padding、margin、gap）：`4px` 仅用于紧凑的内部内边距；`8px` 用于行内间距、图标间距；`16px` 用于标准内边距、卡片间距；`24px` 用于区块内边距；`32px` 用于大区块间距；`48px / 64px` 用于页面级间距。
4. 颜色遵循 60-30-10 规则：60% 中性/背景色，30% 主品牌色，10% 强调色用于 CTA 和高亮。
5. 使用语义色：success（绿）、warning（琥珀）、error（红）、info（蓝）。
6. 深色模式绝不用纯黑 `#000`，改用 `slate-950` 或类似色。
7. 排版使用 1.25 比例刻度：`text-xs` 12px/16px、`text-sm` 14px/20px、`text-base` 16px/24px、`text-lg` 18px/28px、`text-xl` 20px/28px、`text-2xl` 24px/32px、`text-3xl` 30px/36px、`text-4xl` 36px/40px。
8. 标题用 `font-semibold` 或 `font-bold`；正文用 `font-normal`，行高 1.5–1.75；代码、ID、数值数据用等宽字体。
9. 深色模式要为每个颜色 token 提供完整的明/暗映射：背景 `white` → `slate-950`（不是 `black`）；文字 `slate-900` → `slate-100`；边框 `slate-200` → `slate-800`。
10. 每个交互元素都必须有 5 种状态：Default 基础外观；Hover 轻微颜色变化或阴影；Active/Pressed 稍暗或缩放；Focus 可见焦点环（`ring-2 ring-offset-2`）；Disabled 降低不透明度并加 `cursor-not-allowed`。
11. 无障碍：文字对比度 ≥ 4.5:1，大号文字 ≥ 3:1。
12. 触控目标 ≥ 44×44px。
13. 使用语义化 HTML（用 `button` 而不是 `div`，以及 `nav`、`main` 等）。
14. 保证键盘可导航：所有交互都能通过 Tab/Enter/Escape 触达。
15. 动画要尊重 `prefers-reduced-motion`。
16. 动画时长：微交互 150–300ms。
17. 缓动：入场用 `ease-out`，出场用 `ease-in`。
18. 把动效包在 `motion-safe:` 中，或显式检查 `prefers-reduced-motion`。
19. 遮罩层 z-index 刻度：dropdown `z-10`、sticky `z-20`、overlay `z-30`、modal `z-40`、toast `z-50`、tooltip `z-60`。
20. 每个组件生成后逐一校验：间距是否落在 8px 网格、颜色是否符合 60-30-10、5 种交互状态是否齐全。
21. 通过切换 class/attribute 实测深色模式，确认所有 token 都正确映射。
22. 需要完整文档和交互式配置器时可参考 ui-stack.dev，源码在 GitHub: rashoodkhan/ui-stack。

适用边界 · 注意事项

• 项目已经有自己的设计系统或 `ui-stack` 配置时——应沿用项目既有 token，不要强推本文默认值。
• 不是在做 UI 的场景（后端逻辑、CLI 工具、纯数据处理脚本）。
• 必须严格遵循既定品牌视觉规范、不允许替换默认色板与字阶时。