UI 风格规范落地

---
name: ui-style-implementation
description: 当用户给出一份界面设计风格描述（配色、材质、间距、动效）并要求生成前端代码时使用。包含从设计语言到实现的映射方法、跨风格一致性检查，以及深浅色适配要求。
---

# UI 风格规范落地

## 适用判断

用户手里已经有一份**风格描述**（例如"毛玻璃拟态、青到紫渐变、backdrop-filter 12px"），需要把它变成可运行的界面代码。

如果用户还没有风格方向，先别写代码——提 3~4 个不同方向（每个给出背景色、强调色、字体和一句理由），让其选定再实现。直接开写会得到一个平均化的、谁都不满意的结果。

## 从描述到实现的映射

风格描述通常包含五个维度，逐个落地：

### 1. 色彩系统

把描述里的颜色固化成变量，不要散落在各处：

```css
:root {
  --bg-base: #f4f1ea;
  --bg-elevated: #ffffff;
  --accent: #c2410c;
  --text-primary: #1c1917;
  --text-muted: #78716c;
  --border: #e7e5e4;
}
```

深色模式必须同时给出。用 `@media (prefers-color-scheme: dark)` 加 `:root[data-theme="dark"]` 双保险——前者响应系统，后者响应站内切换，且后者要能覆盖前者。

### 2. 材质与层次

| 描述里的说法 | 实现手段 |
| --- | --- |
| 毛玻璃 / 玻璃拟态 | `backdrop-filter: blur(12px)` + 半透明背景 + 1px 亮边框 |
| 新拟态 | 双向 box-shadow（一亮一暗），背景与容器同色 |
| 纸质 / 侘寂 | 极低饱和度背景 + 细微噪点纹理 + 无阴影或极浅阴影 |
| 霓虹 / 赛博 | 深底 + 高饱和描边 + `box-shadow` 同色外发光 |
| 拟物 / 立体 | 渐变填充 + 内阴影模拟凹陷 + 外阴影模拟凸起 |

关键：**一个界面只用一种材质语言**。玻璃和新拟态混用会显得廉价。

### 3. 间距与节奏

用一套比例，不要随手取值。推荐 4px 基数：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。

同层级元素间距相同，跨层级间距至少差一档——这是"看起来专业"最省力的一条。

### 4. 字体层级

至少定义三级，字号差异要够明显（1.25~1.5 倍递进），字重承担主要区分：

- 标题：大字号 + 重字重
- 正文：16px 起步，行高 1.6~1.75
- 辅助：小字号 + 降低对比度（不要用更小的字号加正常颜色）

### 5. 交互与动效

- 过渡时间 150~300ms，超过 400ms 会显得迟滞
- 只对 `transform` 和 `opacity` 做动画，避免触发重排
- 悬停反馈必须有，但幅度要小（scale 1.02~1.05）
- 尊重 `prefers-reduced-motion`，该关就关

## 实现后的自查

- [ ] 深浅两种模式都实测过，不是只写了 dark: 类名
- [ ] 正文与背景对比度 ≥ 4.5:1，大字号 ≥ 3:1
- [ ] 宽内容（表格、代码块）自己横向滚动，页面主体不出现横向滚动条
- [ ] 移动端（375px 宽）下没有元素溢出或重叠
- [ ] 键盘 Tab 能走完所有可交互元素，且有可见焦点样式
- [ ] 图片有 alt，装饰性图形 `aria-hidden`
- [ ] 交互元素触摸区域不小于 44×44px

## 一致性陷阱

同一个项目里生成多个界面时，最容易出问题的是**每个界面各自漂移**。做法：先把色彩变量和间距刻度定下来写成一份共享样式，后续界面全部引用，而不是每次重新取色。