用途
本技能是一套面向 Tailwind CSS 应用的 UI 重构指南，基于 Adam Wathan 与 Steve Schoger 的《Refactoring UI》，并以 Tailwind CSS 工具类实现。它包含 9 个类别、共 52 条规则，按设计影响力排序，用于指导自动化重构和代码生成。技能使用 Tailwind CSS v4 语法，并在语法不同的地方提供 v3 说明。
核心理念
重要：先思考，再样式化。在应用任何视觉规则之前，应先理解 UI 的用途，判断对用户真正重要的内容，并移除不必要的元素。「设计意图」类别（优先级 1）必须在任何样式改动之前被考虑。一个元素更少、更简单的组件，始终优于一个带有不必要标记的装饰性组件。
适用时机
在以下情况参考这些指南：
- 重构现有的 Tailwind CSS 组件
- 使用 Tailwind 工具类编写新的 UI
- 审查代码中的视觉层级和间距问题
- 在没有设计师的情况下提升设计质量
- 修复无障碍对比度问题
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | Design Intent（设计意图） | CRITICAL | intent- |
| 2 | Visual Hierarchy（视觉层级） | CRITICAL | hier- |
| 3 | Layout & Spacing（布局与间距） | CRITICAL | space- |
| 4 | Typography（排版） | HIGH | type- |
| 5 | Color Systems（色彩系统） | HIGH | color- |
| 6 | Depth & Shadows（深度与阴影） | MEDIUM | depth- |
| 7 | Borders & Separation（边框与分隔） | MEDIUM | sep- |
| 8 | Images & Content（图片与内容） | LOW-MEDIUM | img- |
| 9 | Polish & Details（打磨与细节） | LOW | polish- |
快速参考
1. 设计意图（CRITICAL）
- intent-audit-before-styling —— 在修改任何 CSS 之前，先审查每个元素传达了什么
- intent-remove-before-decorating —— 在美化剩余元素之前先移除不必要的元素
- intent-reduce-cognitive-load —— 减少每屏的选择项，更少的选项优于更漂亮的选项
- intent-progressive-disclosure —— 将次要信息隐藏在交互之后
- intent-content-drives-layout —— 让真实内容决定布局，而不是反过来
- intent-simplify-over-decorate —— 宁可移除一个包裹层，也不为其添加 5 个工具类
- intent-match-context-fidelity —— 让设计精细度匹配场景（管理后台 / 消费端 / 产品）
- intent-match-existing-patterns —— 在重新设计样式前先审查同级组件的模式
2. 视觉层级（CRITICAL）
- hier-size-weight-color —— 使用大小、字重和颜色建立层级，而不仅仅依靠大小
- hier-deemphasize-secondary —— 弱化次要内容，而不是强调主要内容
- hier-button-hierarchy —— 按视觉层级而非语义重要性来设计按钮样式
- hier-label-value-pairs —— 将标签和值组合成自然语言
- hier-semantic-vs-visual —— 将视觉层级与文档层级分开
- hier-icon-sizing —— 图标大小应相对相邻文本，而非填满空间
- hier-color-hierarchy-on-dark —— 在彩色背景上使用透明度或柔和颜色建立层级
3. 布局与间距（CRITICAL）
- space-start-generous —— 从过多的留白开始，然后再削减
- space-systematic-scale —— 使用受约束的间距刻度，而非任意值
- space-relationship-proximity —— 用间距表达元素之间的关系
- space-dont-fill-screen —— 约束内容宽度，避免填满整个屏幕
- space-grids-not-required —— 不需要网格时使用固定宽度
- space-relative-sizing-fails —— 避免未加钳制的原始视口单位
- space-mobile-first —— 以约 400px 的移动优先设计，再向外扩展
4. 排版（HIGH）
- type-line-length —— 保持行长在 45-75 字符之间
- type-line-height-inverse —— 行高与字号成反比
- type-font-weight-variety —— 选择至少提供 5 种字重变体的字体
- type-no-center-long-text —— 正文内容左对齐，避免居中的长文本
- type-letter-spacing —— 标题收紧字距，大写字母放宽字距
- type-align-numbers-right —— 表格中的数字右对齐以便比较
5. 色彩系统（HIGH）
- color-define-palette-upfront —— 预先定义完整的调色板，不要临时挑颜色
- color-grayscale-first —— 先以灰度设计，最后添加颜色
- color-accessible-contrast —— 确保正文文本达到 4.5:1 的对比度
- color-dark-gray-not-black —— 文本使用深灰而非纯黑
- color-saturated-grays —— 为灰色添加细微饱和度以获得暖感或冷感
- color-light-backgrounds-dark-text —— 徽章使用浅色背景配深色文字
6. 深度与阴影（MEDIUM）
- depth-shadow-scale —— 定义固定的阴影刻度，从小到大
- depth-shadow-vertical-offset —— 使用垂直偏移获得自然的阴影效果
- depth-interactive-elevation —— 用阴影变化传达可交互性
- depth-light-closer-dark-recedes —— 浅色显得更近，深色显得后退
- depth-overlap-layers —— 重叠元素以营造视觉层次
7. 边框与分隔（MEDIUM）
- sep-fewer-borders —— 少用边框，用间距、阴影或背景色替代
- sep-background-color-separation —— 用背景色差异分隔区块
- sep-table-spacing-not-lines —— 简单表格中用间距而非分隔线
- sep-card-radio-buttons —— 将关键选择的单选按钮升级为可选卡片
8. 图片与内容（LOW-MEDIUM）
- img-control-user-content —— 控制用户上传图片的尺寸和宽高比
- img-text-overlay —— 图片上的文字添加遮罩或降低对比度
- img-dont-scale-up-icons —— 避免放大小为小尺寸设计的图标
- img-empty-states —— 设计有意义的空状态并提供清晰的行动号召
9. 打磨与细节（LOW）
- polish-accent-borders —— 添加强调边框以突出重要元素
- polish-custom-bullets —— 用图标或对勾替换默认项目符号
- polish-border-radius-personality —— 让圆角匹配品牌个性
- polish-gradient-close-hues —— 使用色相相差 30 度以内的渐变
- polish-inner-shadow-images —— 添加内阴影以防图片背景渗色
范围与限制
本技能覆盖基于《Refactoring UI》原则的布局、层级、间距、色彩与打磨。它不覆盖：
- 字体选择与搭配 —— 选择有辨识度的字体、避免通用的 AI 默认字体（Inter、Arial、system-ui），或搭配展示字体与正文字体
- 动画与动效 —— 有意义的过渡、微交互、页面加载序列或滚动触发的显现效果
- 创意方向 —— 确立美学愿景、选择基调（极简、极繁、粗野主义等），或与通用的「AI 味」美学区分开
- 空间构图 —— 非对称布局、打破网格的元素或非常规的视觉流
对于这些问题，请将本技能与覆盖创意方向和美学执行的设计思维或前端设计技能配合使用。
如何使用
阅读单独的参考文件以获取详细说明和代码示例：
- Section definitions —— 类别结构与影响等级
- Rule template —— 添加新规则的模板
参考文件
| 文件 | 描述 |
|---|---|
| references/_sections.md | 类别定义与顺序 |
| assets/templates/_template.md | 新规则的模板 |
| metadata.json | 版本与参考信息 |