名称: tailwind-ui-refactor 描述: 为Tailwind CSS应用程序重构UI设计模式。此技能应在编写、审查或重构使用Tailwind实用类HTML时使用，以改善视觉层次、间距、排版、颜色、深度和抛光。触发于涉及UI清理、设计审查、Tailwind重构、组件样式或视觉改进的任务。
重构UI Tailwind CSS最佳实践
基于Adam Wathan和Steve Schoger的《重构UI》的综合UI重构指南，使用Tailwind CSS实用类实现。包含9个类别中的52条规则，按设计影响优先级排序，以指导自动重构和代码生成。使用Tailwind CSS v4语法（语法不同时提供v3注释）。
重要：先思考，后样式。 在应用任何视觉规则之前，理解UI的目的，识别用户关心什么，并移除不必要的元素。设计意图类别（优先级1）必须在任何样式更改之前考虑。一个更简单的组件总是比一个装饰过的组件更好。
何时应用
参考这些指南当：
- 重构现有Tailwind CSS组件
- 使用Tailwind实用类编写新UI
- 审查代码以解决视觉层次和间距问题
- 在没有设计师的情况下改善设计质量
- 修复可访问性对比问题
按优先级排序的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 设计意图 | 关键 | intent- |
| 2 | 视觉层次 | 关键 | hier- |
| 3 | 布局与间距 | 关键 | space- |
| 4 | 排版 | 高 | type- |
| 5 | 颜色系统 | 高 | color- |
| 6 | 深度与阴影 | 中 | depth- |
| 7 | 边框与分离 | 中 | sep- |
| 8 | 图像与内容 | 低-中 | img- |
| 9 | 抛光与细节 | 低 | polish- |
快速参考
1. 设计意图（关键）
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. 视觉层次（关键）
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. 布局与间距（关键）
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. 排版（高）
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. 颜色系统（高）
color-define-palette-upfront- 预先定义完整颜色调色板——不要临时挑选颜色color-grayscale-first- 先以灰度设计，最后添加颜色color-accessible-contrast- 确保正文文本对比度为4.5:1color-dark-gray-not-black- 使用深灰色代替纯黑色文本color-saturated-grays- 为灰色添加微妙饱和度以增加温暖或冷感color-light-backgrounds-dark-text- 使用浅色背景和深色文本制作徽章
6. 深度与阴影（中）
depth-shadow-scale- 定义固定阴影比例——从小到超大depth-shadow-vertical-offset- 使用垂直偏移实现自然阴影depth-interactive-elevation- 使用阴影变化传达交互性depth-light-closer-dark-recedes- 浅色感觉更近，深色感觉后退depth-overlap-layers- 重叠元素以创建视觉层次
7. 边框与分离（中）
sep-fewer-borders- 使用更少边框——用间距、阴影或背景颜色替换sep-background-color-separation- 使用背景颜色差异分隔部分sep-table-spacing-not-lines- 在简单表格中使用间距代替线条sep-card-radio-buttons- 将单选按钮升级为可选择卡片以处理关键选择
8. 图像与内容（低-中）
img-control-user-content- 控制用户上传图像的大小和宽高比img-text-overlay- 为图像上的文本添加覆盖层或降低对比度img-dont-scale-up-icons- 避免放大设计用于小尺寸的图标img-empty-states- 设计有明确CTA的有意义空状态
9. 抛光与细节（低）
polish-accent-borders- 添加强调边框以突出重要元素polish-custom-bullets- 用图标或勾号替换默认项目符号polish-border-radius-personality- 匹配边框半径到品牌个性polish-gradient-close-hues- 使用色调在30度内的渐变polish-inner-shadow-images- 添加内阴影以防止图像背景渗色
范围与限制
此技能基于《重构UI》原则覆盖布局、层次、间距、颜色和抛光。不覆盖：
- 字体选择与配对——选择独特字体，避免通用AI默认值（Inter、Arial、system-ui），或配对显示和正文字体
- 动画与动效——有意义的过渡、微交互、页面加载序列或滚动触发揭示
- 创意方向——建立美学愿景，选择调性（极简、极繁、粗野主义等），或区别于通用“AI垃圾”美学
- 空间构图——不对称布局、打破网格元素或非传统视觉流
对于这些关注点，将此技能与涵盖创意方向和美学执行的设计思维或前端设计技能配对使用。
如何使用
阅读个别参考文件以获取详细解释和代码示例：
参考文件
| 文件 | 描述 |
|---|---|
| references/_sections.md | 类别定义和排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本和参考信息 |