| name | dev-ui-styling |
| description | 何时使用系统化的 UI 样式约束来实现高质量界面,特别是在你需要统一组件样式、响应式布局、可访问性、主题定制,或避免平庸 AI 风格前端时使用。 |
UI 样式实现
这个 skill 关注“怎么把界面做对”,不是讲业务逻辑。重点是组件样式、布局、可访问性和视觉一致性。
何时使用
- 搭建组件库样式层
- 做页面布局和响应式适配
- 统一按钮、卡片、表单、导航等视觉规则
- 需要在 Tailwind / CSS Modules / CSS Variables 之间建立清晰分工
实施顺序
设计系统
->
布局骨架
->
组件样式
->
交互状态
->
可访问性与响应式收口
核心规则
- 先做 layout token,再做组件细节
- 使用 CSS variables 承接主题,不把主题逻辑散在组件 class 里
- 样式写法优先服务可维护性,不追求一次性炫技
- 状态必须成组出现:
hover / focus / active / disabled
- 动效有明确目的,不做装饰性抖动
布局清单
- 桌面、平板、移动三档是否都验证过
- 主次层级是否清楚
- 表单和 CTA 是否有稳定对齐线
- 长文本、空状态、加载态是否有兜底
可访问性清单
- 焦点态可见
- 对比度达标
- 交互元素尺寸足够
- 键盘路径完整
- 不依赖颜色单独传达状态
反模式
- 组件里混入大量魔法数
- 每个页面自造一套按钮和输入框
- 只做默认态,不做 focus / disabled
- 视觉上“很满”,信息层级却不清楚
- 为了“像 AI 做的高级感”滥用渐变、玻璃、阴影
何时不要使用
- 只是调一个极小的 CSS bug
- 上层设计系统尚未确定,先用
dev-design-system
关联 skill
- 先定义 token 和组件边界时,配合
dev-design-system
- 需要更通用的前端工程模式时,配合
dev-frontend-patterns