using-ui-stack

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Using UI Stack

使用UI Stack

Apply a structured design system to every UI component you generate. This prevents inconsistent padding, mismatched colors, and forgotten hover states.

为你生成的每个UI组件应用结构化设计系统，这能避免内边距不一致、颜色不匹配以及遗漏悬停状态等问题。

Design System Principles

设计系统原则

Follow these rules for every component you build:

为你构建的每一个组件遵循以下规则：

Spacing — 8px Grid

间距 — 8px网格

Use multiples of 8 for all spacing (padding, margin, gap):

```
4px
```
— tight internal padding only
```
8px
```
— inline gaps, icon spacing
```
16px
```
— standard padding, card gaps
```
24px
```
— section padding
```
32px
```
— large section gaps
```
48px / 64px
```
— page-level spacing

所有间距（内边距、外边距、间隙）使用8的倍数：

```
4px
```
— 仅用于紧凑的内部内边距
```
8px
```
— 行内间隙、图标间距
```
16px
```
— 标准内边距、卡片间隙
```
24px
```
— 区块内边距
```
32px
```
— 大型区块间隙
```
48px / 64px
```
— 页面级间距

Color — 60-30-10 Rule

颜色 — 60-30-10法则

60% neutral/background
30% primary brand color
10% accent for CTAs and highlights
Semantic colors: success (green), warning (amber), error (red), info (blue)
Never use pure black (
```
#000
```
) for dark mode — use
```
slate-950
```
or similar

60% 中性色/背景色
30% 主品牌色
10% 用于CTA和高亮的强调色
语义化颜色：成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）
深色模式下切勿使用纯黑色（
```
#000
```
），请使用
```
slate-950
```
或类似颜色

Typography — 1.25 Ratio Scale

排版 — 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

Headings:
```
font-semibold
```
or
```
font-bold
```
Body:
```
font-normal
```
, line-height 1.5–1.75
Mono: use for code, IDs, numeric data

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

标题：使用
```
font-semibold
```
或
```
font-bold
```
正文：使用
```
font-normal
```
，行高1.5–1.75
等宽字体：用于代码、ID、数值数据

Dark Mode

深色模式

Provide complete light/dark mappings for every color token
Background:
```
white
```
→
```
slate-950
```
, not
```
black
```
Text:
```
slate-900
```
→
```
slate-100
```
Borders:
```
slate-200
```
→
```
slate-800
```

为每个颜色标记提供完整的明暗映射
背景色：
```
white
```
→
```
slate-950
```
，而非
```
black
```
文本色：
```
slate-900
```
→
```
slate-100
```
边框色：
```
slate-200
```
→
```
slate-800
```

5-State Interactions

5种交互状态

Every interactive element must have:

Default — base appearance
Hover — subtle color shift or shadow
Active/Pressed — slightly darker or scaled down
Focus — visible ring (
```
ring-2 ring-offset-2
```
)
Disabled — reduced opacity,
```
cursor-not-allowed
```

每个交互元素必须具备：

默认状态 — 基础外观
悬停状态 — 细微的颜色变化或阴影
激活/按压状态 — 颜色稍暗或略微缩小
聚焦状态 — 可见的环形边框（
```
ring-2 ring-offset-2
```
）
禁用状态 — 降低透明度，设置
```
cursor-not-allowed
```

Accessibility

可访问性

Contrast ratio ≥ 4.5:1 for text, ≥ 3:1 for large text
Touch targets ≥ 44×44px
Semantic HTML (
```
button
```
not
```
div
```
,
```
nav
```
,
```
main
```
, etc.)
Keyboard navigable — all interactions reachable via Tab/Enter/Escape
Respect
```
prefers-reduced-motion
```
for animations

文本对比度≥4.5:1，大文本对比度≥3:1
触摸目标尺寸≥44×44px
使用语义化HTML（用
```
button
```
而非
```
div
```
，以及
```
nav
```
、
```
main
```
等标签）
支持键盘导航 — 所有交互均可通过Tab/Enter/Escape键触发
尊重
```
prefers-reduced-motion
```
设置以控制动画

Animations

动画

Duration: 150–300ms for micro-interactions
Easing:
```
ease-out
```
for entrances,
```
ease-in
```
for exits
Wrap motion in
```
motion-safe:
```
or check
```
prefers-reduced-motion
```

微交互时长：150–300ms
缓动效果：入场使用
```
ease-out
```
，退场使用
```
ease-in
```
将动画包裹在
```
motion-safe:
```
中，或检查
```
prefers-reduced-motion
```
设置

Overlay Z-Index Scale

覆盖层Z-Index层级

dropdown:  z-10
sticky:    z-20
overlay:   z-30
modal:     z-40
toast:     z-50
tooltip:   z-60

dropdown:  z-10
sticky:    z-20
overlay:   z-30
modal:     z-40
toast:     z-50
tooltip:   z-60

Workflow

工作流程

Before generating UI, check if the project has a
```
ui-stack
```
config or design tokens
If not, apply the defaults above
For every component, verify spacing is on the 8px grid, colors follow 60-30-10, and all 5 interaction states exist
Test dark mode by toggling the class/attribute and confirming all tokens map correctly

生成UI前，检查项目是否有
```
ui-stack
```
配置或设计标记
如果没有，应用上述默认规则
针对每个组件，验证间距是否符合8px网格、颜色是否遵循60-30-10法则，且所有5种交互状态均已实现
通过切换类/属性测试深色模式，确认所有标记映射正确

References

参考资料

ui-stack.dev — interactive configurator and full docs
GitHub: rashoodkhan/ui-stack — source repo

ui-stack.dev — 交互式配置工具及完整文档
GitHub: rashoodkhan/ui-stack — 源码仓库