技能颗粒度检查项汇总

本表格将前端 UI 设计拆解为原子化检查项，每项可独立验证（是否存在/是否做到）、独立描述（交给 AI 实现）、独立验收。
使用方式：在设计初期逐层扫描，勾选需要实现的检查项，形成精确的设计需求清单。

全量检查项

层级	检查项	优先级	验证方式
排版层	字体族定义	⭐⭐⭐⭐⭐	检查 CSS 变量是否定义 primary/mono/fallback
排版层	字号阶梯系统	⭐⭐⭐⭐⭐	检查 xs/sm/base/lg/xl/2xl/3xl/4xl 是否递进
排版层	行高规范	⭐⭐⭐⭐⭐	检查 tight/normal/relaxed 行高 token
排版层	字重定义	⭐⭐⭐⭐	检查 light/normal/medium/semibold/bold token
排版层	字间距定义	⭐⭐⭐	检查 tighter/tight/normal/wide/wider token
排版层	标题层级	⭐⭐⭐⭐⭐	h1-h6 视觉层级是否清晰递减
排版层	正文排版	⭐⭐⭐⭐⭐	body 文本是否可读（字号≥14px，行高≥1.5）
排版层	辅助文本	⭐⭐⭐⭐	small/caption/overline 样式是否定义
排版层	文本截断	⭐⭐⭐⭐	单行截断 / 多行截断是否有工具类
排版层	文本对齐	⭐⭐⭐	left/center/right/justify 是否覆盖
排版层	文本装饰	⭐⭐⭐	underline/strikethrough/overline
排版层	文本转换	⭐⭐⭐	uppercase/lowercase/capitalize
排版层	中英文混排	⭐⭐⭐⭐	中英文间自动空格、标点悬挂处理
排版层	连字符处理	⭐⭐	hyphens auto 是否处理
排版层	段落间距	⭐⭐⭐⭐	段间距是否统一（非双重 margin）
排版层	代码文本样式	⭐⭐⭐⭐	inline code 字体/背景/圆角/内边距
排版层	等宽数字	⭐⭐⭐⭐	tabular-nums 用于金额/表格数字对齐
排版层	CJK 断行规则	⭐⭐⭐	word-break/overflow-wrap 处理中文长词
排版层	空白处理	⭐⭐⭐	white-space 五种模式覆盖
排版层	选中文字样式	⭐⭐⭐	::selection 背景色+文字色 token
颜色层	品牌色定义	⭐⭐⭐⭐⭐	primary/secondary/accent 是否定义
颜色层	语义色定义	⭐⭐⭐⭐⭐	success/warning/error/info 是否定义
颜色层	中性色阶梯	⭐⭐⭐⭐⭐	gray-50 到 gray-950 是否完整
颜色层	文本色阶梯	⭐⭐⭐⭐⭐	primary/secondary/tertiary/disabled/inverse
颜色层	背景色定义	⭐⭐⭐⭐⭐	page/card/surface/overlay 背景色
颜色层	边框色定义	⭐⭐⭐⭐	default/hover/focus/error 边框色
颜色层	状态色定义	⭐⭐⭐⭐⭐	hover/active/focus/disabled 各状态色
颜色层	交互反馈色	⭐⭐⭐⭐	链接色/已访问链接色/悬浮链接色
颜色层	暗色模式映射	⭐⭐⭐⭐⭐	所有颜色是否有 dark 变体
颜色层	颜色对比度	⭐⭐⭐⭐⭐	正文≥4.5:1、大文本≥3:1（WCAG AA）
颜色层	色盲友好	⭐⭐⭐	不单独依赖颜色传达信息
颜色层	渐变色定义	⭐⭐⭐	品牌渐变/装饰渐变 token
颜色层	透明度定义	⭐⭐⭐	常用 opacity 值 token 化
颜色层	阴影色定义	⭐⭐⭐⭐	各层级阴影是否使用语义色而非硬编码
间距层	基准单位定义	⭐⭐⭐⭐⭐	4px 或 8px 基准网格
间距层	间距阶梯系统	⭐⭐⭐⭐⭐	0/1/2/3/4/5/6/8/10/12/16… 是否完整
间距层	组件内间距	⭐⭐⭐⭐⭐	padding 是否遵循阶梯系统
间距层	组件外间距	⭐⭐⭐⭐	margin/gap 是否遵循阶梯系统
间距层	栅格间距	⭐⭐⭐⭐	grid/flex gap 是否 token 化
间距层	响应式间距	⭐⭐⭐⭐	不同断点下间距是否缩放
间距层	区块间距	⭐⭐⭐⭐	section 间距是否统一
间距层	容器内间距	⭐⭐⭐⭐⭐	页面容器内边距是否一致
间距层	负间距	⭐⭐	偏移/重叠场景是否支持
圆角层	圆角阶梯	⭐⭐⭐⭐⭐	none/sm/md/lg/xl/full 是否定义
圆角层	组件圆角一致	⭐⭐⭐⭐	相同层级组件圆角是否统一
圆角层	按钮/输入框圆角	⭐⭐⭐⭐⭐	表单元素圆角是否匹配
圆角层	卡片/弹窗圆角	⭐⭐⭐⭐	容器类组件圆角是否匹配
圆角层	图片/头像圆角	⭐⭐⭐⭐	媒体元素圆角规范
阴影层	阴影层级	⭐⭐⭐⭐⭐	sm/md/lg/xl/inner 是否递进
阴影层	组件阴影一致	⭐⭐⭐⭐	同层级组件阴影统一
阴影层	暗色模式阴影	⭐⭐⭐⭐	暗色下阴影是否适配（更亮的阴影）
布局层	容器最大宽度	⭐⭐⭐⭐⭐	max-width 是否定义（如 1280px）
布局层	响应式断点定义	⭐⭐⭐⭐⭐	sm/md/lg/xl/2xl 断点值
布局层	栅格列数	⭐⭐⭐⭐⭐	12 列 / 24 列系统
布局层	栅格间距	⭐⭐⭐⭐	gutter 值 token 化
布局层	页面布局模式	⭐⭐⭐⭐⭐	header/main/sidebar/footer 组合
布局层	内容区域宽度	⭐⭐⭐⭐	全宽/定宽/侧边栏模式
布局层	Flex 布局模式	⭐⭐⭐⭐	direction/wrap/justify/align 工具类
布局层	Grid 布局模式	⭐⭐⭐⭐	template/areas/auto 工具类
布局层	居中对齐	⭐⭐⭐⭐	水平/垂直/双轴居中方案
布局层	粘性定位	⭐⭐⭐	header/sidebar 的 sticky 行为
布局层	Z-index 层级	⭐⭐⭐⭐⭐	dropdown/modal/tooltip/notification 层级体系
布局层	溢出处理	⭐⭐⭐⭐	内容溢出的 scroll/hidden/ellipsis 方案
布局层	最小/最大尺寸	⭐⭐⭐	min-width/min-height/max-width 约束
布局层	安全区域适配	⭐⭐⭐	mobile safe-area-inset 处理
组件-按钮	变体（5+）	⭐⭐⭐⭐⭐	primary/secondary/ghost/outline/destructive
组件-按钮	尺寸（3+）	⭐⭐⭐⭐⭐	sm/md/lg
组件-按钮	交互状态（6）	⭐⭐⭐⭐⭐	default/hover/active/focus/disabled/loading
组件-按钮	图标按钮	⭐⭐⭐⭐	left-icon/right-icon/icon-only
组件-按钮	按钮组	⭐⭐⭐	组合排列/分割线
组件-按钮	按钮宽度	⭐⭐⭐	full-width / auto / fixed
组件-输入	变体覆盖	⭐⭐⭐⭐⭐	text/password/email/number/search/url/tel
组件-输入	尺寸（3+）	⭐⭐⭐⭐⭐	sm/md/lg
组件-输入	交互状态（6）	⭐⭐⭐⭐⭐	default/hover/focus/error/disabled/readonly
组件-输入	前缀/后缀	⭐⭐⭐⭐	图标/文字/单位前后缀
组件-输入	清除按钮	⭐⭐⭐	输入内容后显示一键清除
组件-输入	密码切换	⭐⭐⭐⭐	密码明文/密文切换按钮
组件-输入	字符计数	⭐⭐⭐	maxlength 倒计显示
组件-输入	Textarea	⭐⭐⭐⭐	自动高度/最大高度/resize 控制
组件-输入	标签浮动	⭐⭐⭐	浮动标签动画效果
组件-选择	Select 下拉	⭐⭐⭐⭐⭐	单选/多选/搜索/分组/异步加载
组件-选择	Checkbox	⭐⭐⭐⭐⭐	单选/多选/indeterminate/禁用
组件-选择	Radio	⭐⭐⭐⭐⭐	单选/按钮样式/禁用
组件-选择	Switch	⭐⭐⭐⭐	开/关/禁用/加载/文字标签
组件-选择	Slider	⭐⭐⭐	单值/范围/标记/tooltip
组件-选择	日期选择	⭐⭐⭐	日期/时间/日期范围
组件-选择	文件上传	⭐⭐⭐	拖拽/点击/进度/预览/类型限制
组件-选择	颜色选择	⭐⭐	取色器/预设色板
组件-卡片	结构完整性	⭐⭐⭐⭐⭐	header/body/footer 三段式
组件-卡片	视觉变体	⭐⭐⭐⭐	边框/阴影/flat/elevated
组件-卡片	交互状态	⭐⭐⭐⭐	static/hoverable/clickable
组件-卡片	媒体区域	⭐⭐⭐⭐	顶部图片/封面图模式
组件-弹窗	Modal 对话框	⭐⭐⭐⭐⭐	尺寸/滚动/关闭/遮罩/动画
组件-弹窗	Drawer 抽屉	⭐⭐⭐⭐	方向(上下左右)/尺寸/关闭方式
组件-弹窗	Popover 气泡	⭐⭐⭐⭐	方向/触发方式/箭头/内容类型
组件-弹窗	确认对话框	⭐⭐⭐⭐⭐	危险操作二次确认/文案规范
组件-表格	基础功能	⭐⭐⭐⭐⭐	列定义/数据渲染/空状态
组件-表格	排序	⭐⭐⭐⭐	单列/多列排序/远程排序
组件-表格	筛选	⭐⭐⭐⭐	列筛选/全局搜索/筛选状态展示
组件-表格	分页	⭐⭐⭐⭐⭐	页码/每页条数/总数/跳转
组件-表格	固定列/头	⭐⭐⭐⭐	首列/末列固定/表头固定
组件-表格	行选择	⭐⭐⭐⭐	单选/多选/全选/跨页选择
组件-表格	行展开	⭐⭐⭐	展开详情/嵌套子表
组件-表格	加载状态	⭐⭐⭐⭐	loading spinner / skeleton
组件-表格	虚拟滚动	⭐⭐⭐	大数据量虚拟化渲染
组件-标签页	变体	⭐⭐⭐⭐	line/card/pill
组件-标签页	滚动	⭐⭐⭐	标签过多时横向滚动/箭头
组件-标签页	懒加载	⭐⭐⭐	非活跃 tab 内容延迟渲染
组件-导航	顶部导航	⭐⭐⭐⭐⭐	logo/菜单/用户区布局
组件-导航	侧边导航	⭐⭐⭐⭐	可折叠/展开/子菜单/高亮当前
组件-导航	面包屑	⭐⭐⭐⭐	层级展示/可点击/截断
组件-导航	步骤条	⭐⭐⭐⭐	水平/垂直/步骤状态/可点击
组件-导航	锚点导航	⭐⭐⭐	页内跳转/高亮当前位置
组件-导航	返回顶部	⭐⭐⭐	滚动出现/平滑滚动
组件-反馈	Toast 消息	⭐⭐⭐⭐⭐	类型/位置/自动关闭/可关闭/堆叠
组件-反馈	Alert 告警	⭐⭐⭐⭐	类型/可关闭/带操作/banner 模式
组件-反馈	进度条	⭐⭐⭐⭐	确定/不确定/环形/步骤进度
组件-反馈	加载 Spinner	⭐⭐⭐⭐	尺寸/颜色/全局/局部
组件-反馈	骨架屏	⭐⭐⭐⭐⭐	形状(circle/rect/text)/动画(pulse/wave)
组件-反馈	空状态	⭐⭐⭐⭐⭐	插图/标题/描述/操作按钮
组件-反馈	结果页	⭐⭐⭐	成功/失败/处理中状态展示
组件-数据展示	Badge 徽标	⭐⭐⭐⭐	dot/number/text/颜色/位置
组件-数据展示	Tag 标签	⭐⭐⭐⭐	颜色/可关闭/可选中/边框
组件-数据展示	Avatar 头像	⭐⭐⭐⭐	尺寸/形状/fallback/状态点/分组
组件-数据展示	Tooltip	⭐⭐⭐⭐⭐	方向/延迟/触发方式/箭头
组件-数据展示	Collapse 折叠	⭐⭐⭐	手风琴/多开/动画/禁用
组件-数据展示	Tree 树形	⭐⭐⭐	展开/选择/勾选/搜索/拖拽排序
组件-数据展示	Timeline 时间线	⭐⭐⭐	左右布局/自定义节点/时间标记
组件-数据展示	Statistic 统计	⭐⭐⭐	数值/趋势/前后缀/动画计数
组件-数据展示	Divider 分割线	⭐⭐⭐	水平/垂直/带文字
组件-数据展示	Rate 评分	⭐⭐	星级/半星/自定义图标/只读
组件-组合	表单验证联动	⭐⭐⭐⭐⭐	输入→验证→错误→修正→成功完整流程
组件-组合	表格筛选分页	⭐⭐⭐⭐	筛选→重置分页→结果数联动
组件-组合	搜索防抖空态	⭐⭐⭐⭐	输入→防抖→loading→结果/空态
组件-组合	弹窗表单验证	⭐⭐⭐⭐	弹窗内完整表单验证+提交流程
组件-组合	侧边栏响应式	⭐⭐⭐⭐	大屏展开→小屏折叠/抽屉
组件-组合	文件上传完整流	⭐⭐⭐	拖入→上传中→完成→预览/重试
交互层	过渡时长	⭐⭐⭐⭐⭐	fast(150ms)/normal(200ms)/slow(300ms)
交互层	缓动曲线	⭐⭐⭐⭐⭐	ease-in-out/cubic-bezier 是否 token 化
交互层	Hover 效果	⭐⭐⭐⭐⭐	可交互元素是否有 hover 反馈
交互层	Active 效果	⭐⭐⭐⭐	按下是否有视觉反馈
交互层	Focus 指示	⭐⭐⭐⭐⭐	focus-visible 环/outline
交互层	Focus 陷阱	⭐⭐⭐⭐	弹窗内 Tab 循环
交互层	拖拽交互	⭐⭐⭐	拖拽手柄/放置区域/排序反馈
交互层	手势支持	⭐⭐⭐	滑动/长按/双击/捏合缩放
交互层	右键菜单	⭐⭐⭐	自定义上下文菜单
交互层	快捷键	⭐⭐⭐	全局/局部快捷键定义
交互层	防抖/节流	⭐⭐⭐⭐	搜索/滚动/resize 事件防抖
交互层	乐观更新	⭐⭐⭐	操作即时反馈 + 后台同步
交互层	撤销/重做	⭐⭐	操作历史栈
交互层	骨架加载	⭐⭐⭐⭐	首屏/组件级 skeleton
交互层	渐进式加载	⭐⭐⭐	lazy-load / 分页 / 无限滚动
响应式层	移动端布局	⭐⭐⭐⭐⭐	单列/底部导航/汉堡菜单
响应式层	平板布局	⭐⭐⭐⭐	双列/侧边栏折叠
响应式层	桌面布局	⭐⭐⭐⭐⭐	多列/侧边栏展开/wide screen
响应式层	触摸目标	⭐⭐⭐⭐⭐	可点击区域≥44×44px
响应式层	字号缩放	⭐⭐⭐⭐	小屏标题是否适当缩小
响应式层	间距缩放	⭐⭐⭐⭐	小屏间距是否缩小
响应式层	图片响应式	⭐⭐⭐⭐	srcset/sizes/art direction
响应式层	导航变形	⭐⭐⭐⭐	desktop→hamburger 底部导航
响应式层	表格响应式	⭐⭐⭐⭐	列隐藏/卡片化/横向滚动
响应式层	横竖屏适配	⭐⭐⭐	orientation 变化布局调整
响应式层	打印样式	⭐⭐	@media print 隐藏导航等
无障碍层	语义化 HTML	⭐⭐⭐⭐⭐	header/nav/main/section/footer/article
无障碍层	ARIA 标签	⭐⭐⭐⭐⭐	aria-label/aria-describedby/aria-live
无障碍层	ARIA 角色	⭐⭐⭐⭐	role=“button”/“dialog”/“tablist”
无障碍层	颜色对比度	⭐⭐⭐⭐⭐	正文≥4.5:1 / 大文本≥3:1
无障碍层	键盘导航	⭐⭐⭐⭐⭐	所有功能可通过键盘操作
无障碍层	Tab 顺序	⭐⭐⭐⭐	tabindex 逻辑顺序
无障碍层	跳过导航	⭐⭐⭐	skip-to-content 链接
无障碍层	焦点可见	⭐⭐⭐⭐⭐	focus-visible 样式清晰
无障碍层	焦点陷阱	⭐⭐⭐⭐	弹窗内焦点不外溢
无障碍层	屏幕阅读器文本	⭐⭐⭐⭐	sr-only / visually-hidden
无障碍层	图片 alt 文本	⭐⭐⭐⭐⭐	所有 img 有有意义的 alt
无障碍层	表单标签关联	⭐⭐⭐⭐⭐	label htmlFor / aria-labelledby
无障碍层	错误提示关联	⭐⭐⭐⭐	aria-describedby 指向错误消息
无障碍层	减少动画偏好	⭐⭐⭐⭐	prefers-reduced-motion 尊重
无障碍层	高对比模式	⭐⭐⭐	prefers-contrast 适配
无障碍层	减少透明度	⭐⭐	prefers-reduced-transparency
无障碍层	动态字体	⭐⭐⭐	rem 单位支持用户字号设置
主题层	亮色模式	⭐⭐⭐⭐⭐	完整的 light theme tokens
主题层	暗色模式	⭐⭐⭐⭐⭐	完整的 dark theme tokens
主题层	主题切换器	⭐⭐⭐⭐	手动/跟随系统/记忆偏好
主题层	切换过渡	⭐⭐⭐⭐	模式切换时平滑过渡
主题层	CSS 变量体系	⭐⭐⭐⭐⭐	所有设计值用 CSS custom properties
主题层	品牌定制能力	⭐⭐⭐	覆盖 CSS 变量即可换肤
主题层	图片主题适配	⭐⭐⭐	暗色模式下图片降低亮度/反色
主题层	第三方嵌入适配	⭐⭐	嵌入组件跟随主题
动效层	入场动画	⭐⭐⭐⭐	fade/slide/scale/expand
动效层	退场动画	⭐⭐⭐⭐	fade-out/collapse/slide-out
动效层	列表动画	⭐⭐⭐	列表项交错入场(stagger)
动效层	页面过渡	⭐⭐⭐	路由切换过渡效果
动效层	展开折叠	⭐⭐⭐⭐	手风琴/面板展开收起动画
动效层	弹窗动画	⭐⭐⭐⭐	modal/drawer 进出动画
动效层	拖拽反馈	⭐⭐⭐	拖起/放下/排序占位动画
动效层	数值变化动画	⭐⭐⭐	数字递增/递减动画
动效层	微交互	⭐⭐⭐⭐	点赞/收藏/勾选的动效反馈
动效层	加载动画	⭐⭐⭐⭐	spinner/skeleton/pulse
动效层	prefers-reduced-motion	⭐⭐⭐⭐	尊重用户减少动画偏好
图标层	图标集选择	⭐⭐⭐⭐⭐	Lucide/Heroicons/Phosphor 等统一
图标层	图标尺寸阶梯	⭐⭐⭐⭐	xs(12)/sm(16)/md(20)/lg(24)/xl(32)
图标层	图标线条粗细	⭐⭐⭐⭐	1.5px/2px 是否统一
图标层	图标颜色	⭐⭐⭐	继承文字色/独立色/语义色
图标层	图标+文字对齐	⭐⭐⭐⭐	图标与文字垂直居中对齐
图标层	图标可点击区域	⭐⭐⭐	纯图标按钮点击热区足够
图标层	暗色模式图标	⭐⭐⭐	SVG fill 随主题切换
图标层	自定义 SVG	⭐⭐⭐	自定义图标保持风格一致
图片层	占位符	⭐⭐⭐⭐	加载中/加载失败/无图占位
图片层	懒加载	⭐⭐⭐⭐⭐	loading=“lazy” / IntersectionObserver
图片层	响应式图片	⭐⭐⭐⭐	srcset + sizes 属性
图片层	宽高比锁定	⭐⭐⭐⭐	aspect-ratio 防止布局抖动
图片层	骨架加载	⭐⭐⭐⭐	图片区域骨架屏
图片层	图片裁剪模式	⭐⭐⭐	cover/contain/fill 规范
图片层	图片格式优化	⭐⭐⭐	WebP/AVIF 优先 + fallback
图片层	压缩质量	⭐⭐⭐	质量/体积权衡标准
表单层	表单布局	⭐⭐⭐⭐⭐	水平/垂直/内联
表单层	标签位置	⭐⭐⭐⭐⭐	上/左/左对齐/右对齐
表单层	必填标记	⭐⭐⭐⭐⭐	星号/文字标识必填项
表单层	可选标记	⭐⭐⭐	(可选) 文字标识可选项
表单层	帮助文本	⭐⭐⭐⭐	字段下方说明文字
表单层	验证时机	⭐⭐⭐⭐	blur/submit/实时验证策略
表单层	错误提示位置	⭐⭐⭐⭐⭐	字段下方/右侧/汇总
表单层	错误提示样式	⭐⭐⭐⭐	颜色/图标/动画一致性
表单层	成功提示	⭐⭐⭐	字段级成功状态反馈
表单层	字段分组	⭐⭐⭐⭐	fieldset/分组标题/分割线
表单层	字段依赖联动	⭐⭐⭐	A 字段值影响 B 字段显隐/选项
表单层	表单进度	⭐⭐⭐	多步表单进度指示
表单层	表单草稿保存	⭐⭐	防止意外丢失
表单层	提交状态	⭐⭐⭐⭐	提交中 loading + 防重复提交
内容层	标题层级规范	⭐⭐⭐⭐⭐	h1→h2→h3 不跳级
内容层	段落长度	⭐⭐⭐	单段≤3-4 行
内容层	列表使用	⭐⭐⭐	≥3 项用列表代替段落
内容层	链接样式	⭐⭐⭐⭐	下划线/颜色区分/visited 状态
内容层	代码块样式	⭐⭐⭐⭐	语法高亮/行号/复制按钮/语言标签
内容层	引用样式	⭐⭐⭐	blockquote 视觉区分
内容层	富文本排版	⭐⭐⭐	表格/图片/脚注在内容中样式
内容层	长文本可读性	⭐⭐⭐⭐	内容区最大宽度（60-75 字符）
国际化层	文字方向	⭐⭐⭐	LTR/RTL 布局支持
国际化层	文字长度适配	⭐⭐⭐	不同语言文案长度差异处理
国际化层	日期/数字格式	⭐⭐⭐	locale 感知的格式化
国际化层	货币格式	⭐⭐⭐	符号位置/小数位
国际化层	复数形式	⭐⭐	i18n 复数规则处理
国际化层	字体回退	⭐⭐⭐	多语言字体栈
性能层	首屏加载	⭐⭐⭐⭐⭐	FCP/LCP 指标
性能层	交互响应	⭐⭐⭐⭐⭐	INP/FID 指标
性能层	视觉稳定性	⭐⭐⭐⭐⭐	CLS 指标
性能层	代码分割	⭐⭐⭐⭐	路由级/组件级 lazy loading
性能层	资源预加载	⭐⭐⭐	preload/prefetch 关键资源
性能层	字体优化	⭐⭐⭐⭐	font-display:swap / 子集化 / 预加载
性能层	图片优化	⭐⭐⭐⭐	响应式/懒加载/格式/尺寸预留
性能层	动画性能	⭐⭐⭐	只使用 transform/opacity
性能层	渲染优化	⭐⭐⭐	虚拟列表 / 减少 DOM 深度
性能层	缓存策略	⭐⭐⭐	静态资源缓存/CDN
安全层	XSS 防护	⭐⭐⭐⭐⭐	用户内容转义/CSP
安全层	CSRF 防护	⭐⭐⭐⭐	Token/SameSite Cookie
安全层	敏感信息遮蔽	⭐⭐⭐⭐	密码/身份证/银行卡号掩码
安全层	输入净化	⭐⭐⭐⭐	HTML/URL/SQL 输入过滤
滚动与光标层	平滑滚动	⭐⭐⭐	scroll-behavior: smooth
滚动与光标层	滚动阴影	⭐⭐⭐⭐	内容滚动时 header/footer 底部阴影
滚动与光标层	自定义滚动条	⭐⭐⭐	webkit-scrollbar 样式
滚动与光标层	锁定背景滚动	⭐⭐⭐⭐	弹窗打开时 body overflow:hidden
滚动与光标层	光标类型	⭐⭐⭐	pointer/not-allowed/wait/text/grab
滚动与光标层	选区样式	⭐⭐⭐	::selection 背景+文字色
滚动与光标层	占位符样式	⭐⭐⭐	::placeholder 颜色
滚动与光标层	滚动进度指示	⭐⭐	页面顶部阅读进度条
错误层	404 页面	⭐⭐⭐⭐	插图+描述+返回入口
错误层	500 页面	⭐⭐⭐⭐	插图+描述+重试
错误层	网络错误	⭐⭐⭐⭐	断网提示+重试
错误层	空列表	⭐⭐⭐⭐⭐	插图+描述+创建入口
错误层	组件错误边界	⭐⭐⭐⭐	组件崩溃时 fallback
高级组件	轮播组件	⭐⭐⭐	指示器/箭头/自动播放/触摸
高级组件	命令面板	⭐⭐⭐	Ctrl+K/搜索/键盘导航
高级组件	图片灯箱	⭐⭐	缩放/切换/关闭
高级组件	通知中心	⭐⭐⭐	未读/面板/已读/分类
高级组件	Cookie 同意	⭐⭐	接受/拒绝/详细选项
安全层	点击劫持防护	⭐⭐⭐	X-Frame-Options / frame-ancestors

填写说明：

优先级：⭐(低) ~ ⭐⭐⭐⭐⭐(高)，5 星为必须做到
验证方式：如何判断该检查项是否已实现
个人备注：留空供个人填写

前言

什么是技能颗粒度

在反反爬虫技术领域，我们将技术体系拆解为"基础层→环境层→行为层→持久层→验证层→架构层"六大层级，每个层级包含数十个可独立验证的原子化技术点。这种思路可以迁移到前端 UI 设计领域。

技能颗粒度 = 将设计决策拆解到最小可验证单元。

每个颗粒度检查点满足三个条件：

可独立验证 —— 明确知道"做到了"还是"没做到"
可独立描述 —— 能用一句话精确描述给 AI 或设计师
可独立实现 —— 不依赖其他未完成的检查点即可实现

为什么需要原子化

传统设计流程的痛点：

设计师说"做得好看一点" → AI 不知道具体要改什么
审查时说"这里不统一" → 没有标准判断什么叫统一
新页面开发时 → 每次都要重新想按钮该多大、间距该多宽

原子化后：

“实现按钮的 5 种变体、3 种尺寸、6 种状态” → AI 精确输出
“检查所有可交互元素是否有 hover 反馈” → 有明确验收标准
新页面 → 从检查清单中勾选需要的组件和样式

本文受众

使用 AI 辅助前端开发的工程师
前端设计师 / Design System 维护者
技术负责人 / 代码审查者
需要向前端传达设计需求的 PM

检查项层级全景

前端 UI 设计技能颗粒度
│
├── 排版层（Typography）
│   ├── 字体族
│   ├── 字号阶梯
│   ├── 行高 / 字重 / 字间距
│   ├── 标题层级
│   ├── 文本截断 / 对齐 / 装饰
│   ├── 中英文混排
│   └── 等宽数字 / CJK断行 / 选中样式
│
├── 颜色层（Color）
│   ├── 品牌色 / 语义色 / 中性色
│   ├── 文本色 / 背景色 / 边框色
│   ├── 状态色 / 交互反馈色
│   ├── 暗色模式映射
│   └── 对比度 / 色盲友好
│
├── 间距层（Spacing）
│   ├── 基准单位
│   ├── 间距阶梯
│   ├── 内间距 / 外间距
│   └── 响应式间距
│
├── 圆角层 + 阴影层（Border & Shadow）
│   ├── 圆角阶梯
│   ├── 阴影层级
│   └── 暗色模式适配
│
├── 布局层（Layout）
│   ├── 容器 / 栅格 / 断点
│   ├── 页面布局模式
│   ├── Flex / Grid 工具
│   ├── Z-index 体系
│   └── 安全区域
│
├── 组件层（Components）
│   ├── 按钮 / 输入 / 选择
│   ├── 卡片 / 弹窗 / 表格
│   ├── 标签页 / 导航
│   ├── 反馈组件
│   ├── 数据展示组件
│   └── 组件组合模式
│
├── 交互层（Interaction）
│   ├── 过渡时长 / 缓动曲线
│   ├── Hover / Active / Focus
│   ├── 拖拽 / 手势 / 快捷键
│   └── 加载状态 / 乐观更新
│
├── 响应式层（Responsive）
│   ├── 三端布局
│   ├── 触摸目标 / 字号缩放
│   ├── 组件响应式变形
│   └── 打印样式
│
├── 无障碍层（Accessibility）
│   ├── 语义化 / ARIA
│   ├── 键盘导航 / 焦点管理
│   ├── 对比度 / 颜色依赖
│   └── 减少动画 / 动态字体
│
├── 主题层（Theming）
│   ├── 亮 / 暗模式
│   ├── CSS 变量体系
│   ├── 品牌定制
│   └── 切换过渡
│
├── 动效层（Motion）
│   ├── 入场 / 退场动画
│   ├── 列表 / 页面过渡
│   ├── 微交互
│   └── reduced-motion
│
├── 图标层 + 图片层
│   ├── 图标集 / 尺寸 / 风格
│   ├── 懒加载 / 响应式
│   └── 占位 / 裁剪 / 优化
│
├── 表单层（Forms）
│   ├── 布局 / 标签 / 验证
│   ├── 错误提示 / 成功反馈
│   ├── 联动 / 进度 / 草稿
│   └── 提交状态
│
├── 内容层（Content）
│   ├── 标题层级 / 段落
│   ├── 链接 / 代码块
│   └── 富文本 / 可读性
│
├── 国际化层（i18n）
│   ├── RTL / 文字长度
│   ├── 日期 / 数字 / 货币
│   └── 字体回退
│
├── 性能层（Performance）
│   ├── Core Web Vitals
│   ├── 代码分割 / 预加载
│   └── 字体 / 图片 / 动画优化
│
└── 安全层（Security）
    ├── XSS / CSRF
    ├── 敏感信息遮蔽
    └── 输入净化
│
├── 滚动与光标层（Scroll & Cursor）
│   ├── 平滑滚动 / 滚动捕捉
│   ├── 滚动阴影 / 进度指示
│   ├── 自定义滚动条
│   ├── 锁定背景滚动
│   ├── 光标类型（pointer/not-allowed/wait）
│   └── 选区 / 占位符样式
│
├── 错误与空状态层（Error & Empty）
│   ├── 404 / 500 / 网络错误
│   ├── 表单错误汇总
│   ├── 空列表 / 空搜索
│   ├── 图片加载失败
│   └── 组件错误边界
│
└── 高级组件层（Advanced Components）
    ├── 轮播（Carousel）
    ├── 命令面板（Command Palette）
    ├── 图片灯箱（Lightbox）
    ├── 通知中心
    └── Cookie 同意横幅

一、排版层（Typography）

排版是 UI 设计的骨架。排版层检查项确保文字在页面上的呈现是系统化、一致、可读的。

#	检查项	验证标准	常见问题
T-01	字体族（font-family）	定义 primary（正文）、heading（标题）、mono（代码）、fallback 四组	未定义 fallback 导致系统字体混乱
T-02	字号阶梯（font-size）	定义 xs(12)/sm(14)/base(16)/lg(18)/xl(20)/2xl(24)/3xl(30)/4xl(36) 递进	随意使用 px 值，导致页面字号不统一
T-03	行高（line-height）	定义 tight(1.25)/normal(1.5)/relaxed(1.75)/loose(2)	正文行高过紧凑导致阅读困难
T-04	字重（font-weight）	定义 light(300)/normal(400)/medium(500)/semibold(600)/bold(700)	只用 normal 和 bold 两级，视觉层级不足
T-05	字间距（letter-spacing）	定义 tighter(-0.05em)/tight(-0.025em)/normal(0)/wide(0.025em)/wider(0.05em)/widest(0.1em)	大标题需要负字间距但未调整
T-06	标题层级 h1-h6	每级标题字号/字重/行高/间距都有明确定义，视觉递减	h3 比 h2 更大或跳过 h2 直接用 h3
T-07	正文排版	body 字号≥14px（中文≥16px），行高≥1.5，段间距一致	移动端字号小于 14px
T-08	辅助文本	small(12px)/caption(12px)/overline(12px uppercase) 有定义	辅助文字与正文区分不够明显
T-09	单行截断	overflow:hidden + text-overflow:ellipsis + white-space:nowrap	忘记设 width/max-width 导致截断不生效
T-10	多行截断	-webkit-line-clamp:N + display:-webkit-box + -webkit-box-orient:vertical	忘记设 overflow:hidden
T-11	文本对齐	left/center/right/justify 有对应工具类	justify 导致中文词间距异常
T-12	文本装饰	underline/strikethrough/overline 样式	链接下划线颜色与文字色不匹配
T-13	文本转换	uppercase/lowercase/capitalize 工具类	英文标题全大写但字间距未调整
T-14	中英文混排	中英文之间自动添加间距；标点避首尾（hanging-punctuation）	中英文紧贴不美观
T-15	连字符	hyphens:auto 在窄容器中启用	英文长单词溢出容器
T-16	段落间距	p + p 使用 margin-top 而非双重 margin	首段也带 margin-top 导致顶部空隙
T-17	代码文本	inline code 有独立字体族/背景色/圆角/内边距	inline code 背景色与代码块不一致
T-18	引用文本	blockquote 有左边框/缩进/背景色区分	引用块与正文视觉无区分
T-19	列表样式	ul/ol 有统一样式，列表项间距一致	列表符号位置与文字对齐不一致
T-20	文字颜色	text-primary/secondary/tertiary/disabled/inverse 有定义	灰色文字在暗色模式下不可见
T-21	等宽数字	font-variant-numeric: tabular-nums 用于数字对齐（表格/金额）	数字宽度不一导致列不对齐
T-22	CJK 断行	word-break: break-all / overflow-wrap: break-word / line-break: strict	中文长 URL 溢出容器
T-23	竖排文字	writing-mode: vertical-rl 用于中文竖排场景	无竖排支持
T-24	空白处理	white-space: normal/nowrap/pre/pre-wrap/pre-line 覆盖	代码/预格式文本折行异常
T-25	文字选中样式	::selection 定义背景色+文字色	选中文字为默认蓝色

二、颜色层（Color）

颜色层确保所有颜色决策是系统化的，而非随意取值。

#	检查项	验证标准	常见问题
C-01	品牌色	primary/secondary/accent 各含 50-950 共 11 个色阶	只有主色没有色阶，无法做 hover/active 变体
C-02	语义色	success(绿)/warning(黄)/error(红)/info(蓝) 各含色阶	warning 色在白底上对比度不足
C-03	中性色阶梯	gray-50/100/200/300/400/500/600/700/800/900/950 完整	灰色色阶跳跃不均匀
C-04	主文字色	text-primary(≈gray-900)	文字色纯黑(#000)对比过强
C-05	次文字色	text-secondary(≈gray-500)	次要文字过浅不可读
C-06	占位文字色	text-placeholder(≈gray-400)	placeholder 比正文还深
C-07	禁用文字色	text-disabled(≈gray-300)	禁用文字与正常文字区分不够
C-08	反色文字	text-inverse(白色/暗色上的亮色)	亮色文字在浅色背景上不可见
C-09	页面背景色	bg-page(≈gray-50/white)	纯白背景与卡片无区分度
C-10	卡片背景色	bg-card(white)	卡片与页面背景对比不够
C-11	遮罩背景色	bg-overlay(rgba(0,0,0,0.5))	遮罩过透明或过不透明
C-12	默认边框色	border-default(≈gray-200)	边框色过深显得粗重
C-13	悬浮边框色	border-hover(≈gray-300)	hover 时边框无变化
C-14	焦点边框色	border-focus(primary色)	focus 时边框色不够醒目
C-15	错误边框色	border-error(error色)	错误边框色与文本错误色不一致
C-16	链接色	link(≈primary)/link-hover/link-visited	已访问链接色未定义
C-17	Hover 背景色	hover 背景（≈primary-50/gray-50）	hover 变化太小感知不到
C-18	Active 背景色	active 背景（≈primary-100/gray-100）	active 与 hover 视觉无区别
C-19	Disabled 背景	disabled 背景（≈gray-100）	disabled 组件看起来还可点击
C-20	暗色模式映射	所有颜色有 dark: 变体	暗色模式下直接反色导致不协调
C-21	暗色中性色方向	dark 模式中性色阶反转（900→50）	暗色模式用了亮色模式的灰色
C-22	暗色背景	dark:bg-page(≈gray-900/950)	暗色背景纯黑刺眼
C-23	暗色表面	dark:bg-card(≈gray-800)	暗色卡片与背景对比不够
C-24	颜色对比度-正文	正文与背景对比度≥4.5:1（WCAG AA）	灰色文字在浅灰背景上对比不足
C-25	颜色对比度-大文本	大文本(≥18px/14px bold)对比度≥3:1	标题对比度不够
C-26	颜色对比度-UI元素	图标/边框/UI 组件对比度≥3:1	禁用状态对比度不足
C-27	非颜色传达信息	不仅靠颜色区分状态（加图标/文字/形状）	红绿颜色区分对色盲不友好
C-28	渐变色 token	定义品牌渐变（如 primary→accent）	渐变色随意取值
C-29	透明度 token	opacity-0/5/10/20/25/50/75/90/95/100	透明度取值随意
C-30	阴影色 token	shadow 使用语义色而非硬编码黑色	暗色模式阴影仍然用黑色

三、间距层（Spacing）

间距层确保页面呼吸感一致，所有间距值来自同一套系统。

#	检查项	验证标准	常见问题
S-01	基准单位	基于 4px 或 8px 网格	混用 3px/5px/7px 等非基准值
S-02	间距阶梯	0(0)/0.5(2)/1(4)/1.5(6)/2(8)/2.5(10)/3(12)/4(16)/5(20)/6(24)/8(32)/10(40)/12(48)/16(64)/20(80)/24(96)	缺少某些阶梯，被迫用非标准值
S-03	组件内间距（padding）	所有组件 padding 值来自间距阶梯	按钮和输入框内间距不匹配
S-04	组件外间距（margin）	margin 值来自间距阶梯	用 margin 微调位置而非布局
S-05	栅格间距（gap）	flex/grid gap 值 token 化	不同区域 gap 值不一致
S-06	响应式间距	小屏间距自动缩小	移动端和桌面端使用相同间距
S-07	区块间距	section 间距统一（如 64px/96px/128px）	不同页面区块间距不一致
S-08	容器内间距	页面容器 padding 水平（如 16px/24px）	内容贴边，无内间距
S-09	列表项间距	列表项间距统一	列表项间距比段落间距还大
S-10	负间距	支持负 margin 用于偏移/重叠	无负间距能力
S-11	视口相对间距	dvh/svh/lvh 单位用于全屏区域/hero 区域	移动端 vh 不准确
S-12	Clamp 流式间距	clamp(min, preferred, max) 平滑过渡间距	断点跳变而非平滑缩放
S-13	逻辑间距属性	margin-inline/margin-block/padding-inline/padding-block 替代物理属性	RTL 布局间距反向
S-14	间距密度变体	compact(密集数据 UI)/comfortable(营销页)/spacious(阅读) 三档	所有场景用同一密度
S-15	组件内微间距	icon-to-text gap / avatar-to-name gap / badge-to-text gap 统一	图标与文字间距随意
S-16	容器查询间距	@container 间距随容器宽度变化，非视口	侧边栏内间距不合理
S-17	垂直韵律	所有纵向间距为基准单位的整数倍，保持韵律	间距值不规律
S-18	间距语义命名	spacing-xs(4)/sm(8)/md(16)/lg(24)/xl(32)/2xl(48) 语义别名	只有数字索引无语义名
S-19	自动外边距	margin:auto 作为剩余空间分配策略	flex/grid 子项间距不均匀
S-20	间距比例系数	响应式间距按比例缩放（sm=75% of lg）	各断点间距独立设置无规律

四、圆角层 + 阴影层（Border & Shadow）

#	检查项	验证标准	常见问题
R-01	圆角阶梯	none(0)/sm(2)/md(6)/lg(8)/xl(12)/2xl(16)/3xl(24)/full(9999px)	圆角值随意取
R-02	按钮圆角	与输入框圆角匹配	按钮和输入框圆角不一致
R-03	卡片圆角	lg 或 xl 级别	卡片圆角过小或过大
R-04	弹窗圆角	lg 或 xl 级别	弹窗圆角与卡片不匹配
R-05	头像圆角	full(圆形) 或 lg(圆角矩形)	头像列表中圆形方形混用
R-06	Toast 圆角	md 级别	Toast 圆角与整体风格不搭
R-07	阴影阶梯	sm/md/lg/xl/2xl/inner	只有 none 和一个大阴影
R-08	组件阴影一致性	同层级组件用同一级阴影	卡片阴影深浅不一
R-09	悬浮阴影变化	hover 时阴影从 sm→md 或 md→lg	hover 无阴影变化
R-10	暗色模式阴影	dark 模式阴影更亮（使用深灰而非纯黑）	暗色模式阴影不可见
R-11	边框宽度	定义 border-width(1px/2px) token	边框粗细不统一
R-12	边框样式	solid/dashed/dotted 有明确使用场景	分割线样式混用
R-13	Outline vs Ring	outline（不影响布局）用于 focus；ring（box-shadow）用于强调	outline 和 ring 混用
R-14	Ring 宽度/偏移 token	ring-width(1px/2px/3px) + ring-offset(0/2px/4px)	ring 宽度随意
R-15	分割线变体	厚度(1px)/颜色token/上下margin/变体(solid/dashed/with-text)	分割线样式不统一
R-16	单侧圆角	rounded-t-lg / rounded-b-lg 等单侧圆角可用	只能四角同时设置
R-17	边框 vs 阴影策略	明确何时用边框/何时用阴影/何时用背景色区分	卡片边框和阴影混用无规律
R-18	内阴影场景	box-shadow: inset 用于内凹输入框/凹陷容器	内阴影滥用
R-19	各状态边框色集	default/hover/focus/error/disabled/active 边框色作为完整集	只定义了默认边框色
R-20	底部/单侧边框	border-b / border-t / border-l / border-r 用于分割场景	全边框造成视觉噪音

五、布局层（Layout）

#	检查项	验证标准	常见问题
L-01	容器最大宽度	定义 max-w-screen-sm/md/lg/xl/2xl	内容无最大宽度限制
L-02	容器居中	mx-auto 居中	容器不居中
L-03	响应式断点	sm(640)/md(768)/lg(1024)/xl(1280)/2xl(1536)	断点值随意定义
L-04	栅格列数	12 列系统	列数不统一
L-05	栅格间距	gutter token 化	不同页面栅格间距不一致
L-06	页面布局模式	header+main+footer / header+sidebar+main+footer	布局结构不统一
L-07	内容区模式	full-width / contained(1280px) / narrow(768px)	文章内容区过宽
L-08	Flex 工具	direction/wrap/justify/align 组合覆盖	flex 容器子项不换行导致溢出
L-09	Grid 工具	template-columns/rows/areas 覆盖	不必要的嵌套 flex
L-10	水平居中	flex/grid margin:auto 三种方案	居中方式不一致
L-11	粘性头部	header sticky 行为	滚动后头部消失
L-12	粘性侧边栏	sidebar sticky 行为	侧边栏不跟随滚动
L-13	Z-index 体系	dropdown(1000)/sticky(1100)/modal(1200)/popover(1300)/tooltip(1400)/notification(1500)	z-index 随意取值导致层叠混乱
L-14	内容溢出	overflow-hidden/scroll/auto 有明确策略	内容溢出破坏布局
L-15	最小高度	min-h-screen / min-h-特定值	页面内容少时 footer 悬空
L-16	安全区域	safe-area-inset-top/right/bottom/left	iOS 刘海屏遮挡内容
L-17	等高列	grid 自动等高 / flex stretch	多列不等高
L-18	宽高比	aspect-ratio 用于媒体容器/卡片/占位防 CLS	图片加载后布局跳动
L-19	容器查询	@container 查询实现组件级响应式	组件只能跟随视口断点
L-20	absolute 定位模式	绝对定位元素有明确包含块(relative 父)	绝对定位元素跑出预期位置
L-21	fixed 定位模式	fixed 元素考虑移动端浏览器 chrome + dvh	fixed 导航被地址栏遮挡
L-22	sticky 全面场景	表头/sidebar/分组标题 sticky + top 偏移量包含 fixed header	sticky 元素被 fixed header 遮挡
L-23	Subgrid	子网格对齐父级 grid 轨道	嵌套 grid 列不对齐
L-24	逻辑布局属性	inline-size/block-size 替代 width/height	RTL 下布局不翻转
L-25	多列布局	column-count/column-width 用于文本密集内容	长列表无分列浪费空间
L-26	内容可见性	content-visibility: auto 用于屏外重渲染区域	屏外大量 DOM 影响渲染
L-27	容器宽度变体	narrow(768px)/content(1024px)/wide(1280px)/full	所有内容用同一宽度
L-28	孤行/寡行控制	widows/orphans CSS 属性用于打印/分页	打印时段落末尾只有一行
L-29	滚动驱动布局	scroll-timeline 用于滚动关联效果	用 JS 监听 scroll 事件

六、组件层（Components）

6.1 按钮（Button）

#	检查项	验证标准	常见问题
BTN-01	主要按钮	primary 填充色 + 白色文字	主色文字色对比度不足
BTN-02	次要按钮	secondary 填充色 / outline 边框按钮	次要按钮与主要按钮区分不够
BTN-03	虚线按钮	dashed 边框，用于添加场景	与 outline 按钮区分不清
BTN-04	幽灵按钮	ghost 无边框无背景	幽灵按钮看不出来可点击
BTN-05	危险按钮	destructive 红色系	危险操作用错按钮类型
BTN-06	链接按钮	link 无边框无背景，文字色	与链接混淆
BTN-07	小按钮	sm 高度/字号/内间距	尺寸缩放不协调
BTN-08	中按钮	md 高度/字号/内间距（默认）	无默认尺寸概念
BTN-09	大按钮	lg 高度/字号/内间距	大按钮在移动端过宽
BTN-10	Hover 状态	背景色加深/边框色变化	无 hover 反馈
BTN-11	Active 状态	背景色更深/轻微缩放(scale(0.98))	active 与 hover 无区别
BTN-12	Focus 状态	focus-visible 外环/outline	focus 无视觉指示
BTN-13	Disabled 状态	降透明度/灰化/取消 pointer	disabled 仍可点击
BTN-14	Loading 状态	spinner + 文字变灰 + 禁止点击	loading 状态文字仍为正常色
BTN-15	左图标	icon + 文字，间距一致	图标与文字间距过大
BTN-16	右图标	文字 + icon（如箭头）	图标位置不统一
BTN-17	纯图标按钮	只有图标，有 aria-label	纯图标无文字说明
BTN-18	全宽按钮	w-full 模式	桌面端全宽按钮过宽
BTN-19	按钮组	水平排列，相连边共享边框	按钮间距不统一

6.2 输入框（Input）

#	检查项	验证标准	常见问题
INP-01	文本输入	type=text 默认样式	输入框高度与按钮不匹配
INP-02	密码输入	type=password + 切换按钮	密码切换图标位置不统一
INP-03	搜索输入	type=search + 搜索图标 + 清除	清除按钮缺失
INP-04	数字输入	type=number 隐藏 spinner / 步进按钮	数字输入框 spinner 样式不一致
INP-05	URL/邮箱	type=url/email 验证	移动端未弹出对应键盘
INP-06	小输入框	sm 高度/字号	小输入框内间距过小
INP-07	大输入框	lg 高度/字号	大输入框字号过大
INP-08	Hover 状态	边框色变化	输入框无 hover 效果
INP-09	Focus 状态	边框色变 primary + ring	focus 时边框与 ring 颜色冲突
INP-10	Error 状态	边框色变 error + 错误提示文字	错误态边框色不够醒目
INP-11	Disabled 状态	背景/文字灰化 + 禁止交互	disabled 态文字色太浅
INP-12	Readonly 状态	与 disabled 区分（可选中不可编辑）	readonly 和 disabled 视觉相同
INP-13	前缀图标	左侧图标 + 内间距偏移	前缀图标与文字重叠
INP-14	后缀图标	右侧图标 + 内间距偏移	后缀图标与文字重叠
INP-15	前缀文字	左侧文字标签（如 $, https://）	前缀文字背景色与输入框不协调
INP-16	后缀文字	右侧文字标签（如 .com, 单位）	后缀文字不可见
INP-17	清除按钮	有内容时显示 ×，点击清空	清除按钮一直显示
INP-18	字符计数	maxlength 限制 + 倒计显示	超出 maxlength 无提示
INP-19	Textarea	可调高度/固定高度/自动高度	resize 不受控破坏布局
INP-20	浮动标签	输入时标签上浮动画	浮动标签遮挡输入内容

6.3 选择类控件

#	检查项	验证标准	常见问题
SEL-01	Select 下拉	触发器/下拉面板/选项/选中态/搜索	下拉面板被其他元素遮挡
SEL-02	多选 Select	选中项标签/清除/全选	选中过多项时溢出
SEL-03	Checkbox	选中/未选/半选/禁用	半选状态缺失
SEL-04	Radio	选中/未选/禁用/按钮样式	radio 无法键盘操作
SEL-05	Switch	开/关/禁用/加载/文字标签	switch 切换无动画
SEL-06	Slider	单值/范围/刻度标记/tooltip	步进值不合理
SEL-07	日期选择	日期/时间/范围选择	日期格式不统一
SEL-08	文件上传	拖拽区/文件列表/进度/预览	大文件无进度反馈
SEL-09	级联选择	多级联动/异步加载	级联选项加载无 loading
SEL-10	树形选择	树形数据/勾选/搜索	树层级过多时不方便

6.4 卡片（Card）

#	检查项	验证标准	常见问题
CRD-01	基础卡片	边框/圆角/内间距/背景色	卡片内间距不一致
CRD-02	Header	标题/操作区/分隔线	header 操作区对齐不统一
CRD-03	Body	内容区/自动 padding	内容贴边
CRD-04	Footer	操作按钮/分隔线	footer 按钮排列不统一
CRD-05	封面图	顶部图片 + aspect-ratio	图片比例不一致
CRD-06	Hover 效果	阴影增强/轻微上浮	无 hover 反馈
CRD-07	可点击	整卡片可点击 + cursor-pointer	可点击卡片无视觉提示

6.5 弹窗（Dialog/Modal）

#	检查项	验证标准	常见问题
MDL-01	遮罩层	半透明黑色 + 点击关闭(可配置)	遮罩过暗/过亮
MDL-02	弹窗尺寸	sm/md/lg/xl/full	弹窗在移动端溢出屏幕
MDL-03	Header	标题 + 关闭按钮	关闭按钮位置不统一
MDL-04	Body 滚动	弹窗内容可滚，背景不滚	弹窗打开时背景也在滚
MDL-05	Footer	操作按钮排列（确认/取消）	确认和取消按钮位置不统一
MDL-06	进场动画	fade+scale/fade+slide	无动画突然出现
MDL-07	退场动画	对应的退出动画	关闭时无动画
MDL-08	ESC 关闭	按 Escape 关闭弹窗	无法键盘关闭
MDL-09	焦点管理	打开时聚焦弹窗内首个可聚焦元素	焦点仍在背景元素上
MDL-10	确认对话框	危险操作二次确认/确认按钮醒目	删除操作无二次确认

6.6 抽屉（Drawer）

#	检查项	验证标准	常见问题
DRW-01	方向	left/right/top/bottom 四个方向	Drawer 只支持一个方向
DRW-02	尺寸	sm(300px)/md(400px)/lg(540px)/full	移动端 Drawer 太窄或太宽
DRW-03	遮罩层	半透明背景 + 可配置点击关闭	遮罩全黑
DRW-04	关闭方式	X 按钮/ESC 键/遮罩点击/滑动手势	只能点 X 关闭
DRW-05	嵌套堆叠	多层 Drawer z-index 递增	多层 Drawer 层叠混乱
DRW-06	表单场景	Drawer 内表单验证+提交+未保存提示	关闭丢失已填数据
DRW-07	焦点陷阱	焦点在 Drawer 内循环	Tab 跳到背景
DRW-08	背景锁定	body overflow:hidden	Drawer 打开背景还在滚

6.7 气泡卡片（Popover）

#	检查项	验证标准	常见问题
POP-01	自动翻转	视口边缘时自动翻转到对面	Popover 被截断
POP-02	触发模式	click / hover / focus 可配置	hover 误触发
POP-03	表单内容	Popover 内表单元素可交互	Popover 内输入框失焦关闭
POP-04	箭头	指向触发元素的箭头，边缘碰撞时隐藏	箭头位置不准
POP-05	关闭行为	点击外部/ESC/选择后关闭可配置	点击内部也关闭
POP-06	宽度	匹配触发元素或自定义 min/max 宽度	Popover 过窄内容截断

#	检查项	验证标准	常见问题
MNU-01	菜单项变体	default/destructive/disabled	删除操作和普通操作视觉无区分
MNU-02	菜单项图标	前置图标支持	图标与文字间距不统一
MNU-03	快捷键显示	右对齐显示快捷键（如 “Ctrl+C”）	快捷键显示不整齐
MNU-04	勾选菜单项	checkbox/radio 菜单项 + 勾选图标	选中态不明显
MNU-05	分隔线	分组间水平分隔线	分隔线颜色过深
MNU-06	分组标签	非交互式分组标题	无法区分标签和菜单项
MNU-07	子菜单	嵌套子菜单 + 箭头指示	子菜单定位不准
MNU-08	键盘导航	上下箭头/Enter/Escape/首字母导航	无法键盘操作菜单

6.9 表格（Table）

#	检查项	验证标准	常见问题
TBL-01	表头样式	背景/字号/字重/边框区分	表头与数据行视觉无区分
TBL-02	行 hover	鼠标悬浮行高亮	无行 hover 效果
TBL-03	斑马纹	奇偶行不同背景色	斑马纹颜色对比过强
TBL-04	列排序	点击表头排序/排序图标	排序方向图标不清晰
TBL-05	列筛选	列头下拉筛选/筛选标记	筛选后无清除方式
TBL-06	分页	页码/条数/总数/跳转	分页条数选项不合理
TBL-07	固定表头	滚动时表头固定	长表滚动时看不到列名
TBL-08	固定列	首列/末列固定	固定列与滚动列无阴影分隔
TBL-09	行选择	checkbox 单选/多选/全选	全选含未加载的数据
TBL-10	空状态	无数据时插图+提示+操作	空状态只显示"暂无数据"
TBL-11	加载状态	spinner 覆盖/骨架屏	加载时布局跳动
TBL-12	行展开	点击展开详情行	展开图标不明显
TBL-13	虚拟滚动	大数据量时只渲染可视区域	万级数据表格卡顿
TBL-14	列宽	可拖拽调整/最小宽度	列宽被内容撑开

6.10 标签页（Tabs）

#	检查项	验证标准	常见问题
TAB-01	下划线变体	底部横线指示当前 tab	下划线与 tab 文字不对齐
TAB-02	卡片变体	tab 为卡片样式	选中和未选中卡片区分不够
TAB-03	胶囊变体	tab 为圆角胶囊样式	胶囊内文字间距过大
TAB-04	滚动处理	tab 过多时横向滚动+箭头	tab 被截断无滚动
TAB-05	懒加载	非活跃 tab 内容不渲染	所有 tab 内容一次加载
TAB-06	键盘导航	左右箭头切换 tab	无法键盘操作 tab

6.11 导航组件

#	检查项	验证标准	常见问题
NAV-01	顶部导航	logo/菜单项/用户区水平排列	菜单项过多时溢出
NAV-02	当前页高亮	当前页菜单项视觉高亮	当前页无高亮
NAV-03	下拉菜单	hover/click 触发/嵌套/键盘导航	下拉菜单定位不准
NAV-04	侧边导航	可折叠/子菜单/高亮当前	子菜单展开动画卡顿
NAV-05	面包屑	层级展示/分隔符/可点击/截断	层级过深时溢出
NAV-06	步骤条	水平/垂直/已完成/当前/待做/错误	步骤状态颜色不直观
NAV-07	移动端导航	底部 tab 栏/汉堡菜单	移动端导航项过多
NAV-08	返回顶部	滚动一定距离后出现/平滑滚动	返回顶部按钮遮挡内容

6.12 反馈组件

#	检查项	验证标准	常见问题
FB-01	Toast 类型	success/error/warning/info 各有图标+颜色	所有 toast 同一颜色
FB-02	Toast 位置	top-right/top-center/bottom-right 可配置	Toast 遮挡操作区
FB-03	Toast 自动关闭	默认 3-5s 自动消失/可配置时长	Toast 不消失或瞬间消失
FB-04	Toast 可关闭	右侧关闭按钮/悬浮显示	无手动关闭方式
FB-05	Toast 堆叠	多条 toast 垂直排列/最大数量	新 toast 覆盖旧 toast
FB-06	Alert 类型	success/warning/error/info	Alert 无图标
FB-07	Alert 可关闭	关闭按钮/关闭回调	Alert 无法关闭
FB-08	Alert Banner	顶部全宽公告条	Banner 与导航层级冲突
FB-09	进度条-确定	百分比进度/颜色/尺寸	进度条无文字百分比
FB-10	进度条-不确定	动画条纹/脉冲	加载中无反馈
FB-11	环形进度	圆形进度环	环形进度无百分比文字
FB-12	Spinner	尺寸(sm/md/lg)/颜色/全局	Spinner 颜色与主题不搭
FB-13	骨架屏-形状	circle(头像)/rectangle(卡片)/text(段落)	骨架屏与实际布局差异大
FB-14	骨架屏-动画	pulse(脉冲)/wave(波浪)	骨架屏无动画
FB-15	空状态	插图+标题+描述+操作按钮	只显示文字"暂无数据"
FB-16	结果页	成功(绿)/失败(红)/处理中(黄) 状态	操作完成后无反馈页

6.13 数据展示组件

#	检查项	验证标准	常见问题
DD-01	Badge 圆点	小圆点未读指示	圆点太小看不见
DD-02	Badge 数字	数字/最大数(99+)	数字溢出
DD-03	Badge 文字	文字标签	文字过长
DD-04	Tag 颜色	预设色+自定义色	tag 颜色过多不统一
DD-05	Tag 可关闭	关闭按钮/关闭回调	无法删除 tag
DD-06	Tag 可选中	click 切换选中态	选中态不明显
DD-07	Avatar 尺寸	xs(24)/sm(32)/md(40)/lg(56)/xl(80)	列表中头像大小不一致
DD-08	Avatar fallback	无图时显示文字/图标	无图时显示空白
DD-09	Avatar 状态点	在线/忙碌/离线绿/黄/灰点	状态点位置不统一
DD-10	Avatar 分组	重叠排列/溢出+N	重叠过多看不到
DD-11	Tooltip 方向	top/right/bottom/left/auto	Tooltip 被屏幕边缘截断
DD-12	Tooltip 延迟	显示延迟(300ms)/隐藏延迟(100ms)	Tooltip 立即出现干扰
DD-13	Tooltip 箭头	有/无箭头	箭头指向不准
DD-14	Collapse 手风琴	同时只展开一个	多个展开时内容过多
DD-15	Collapse 动画	展开/收起高度动画	无动画突然出现
DD-16	Tree 展开/折叠	点击节点展开子级	大树展开卡顿
DD-17	Tree 勾选	checkbox 勾选+半选+级联	级联勾选逻辑错误
DD-18	Timeline 布局	左右交替/单侧/自定义节点	时间线对齐错乱
DD-19	Statistic 数值	大数字+趋势箭头+前后缀	数字格式化不一致
DD-20	Divider	水平/垂直/带文字	分割线颜色过深

6.14 组件组合模式（Composition Patterns）

组件单独检查还不够，组合使用时往往暴露设计缺陷。

#	检查项	验证标准	常见问题
CP-01	表单+输入+验证联动	输入→blur 验证→错误显示→修正→成功清除	错误修正后红色不消失
CP-02	表单+提交+反馈	提交→loading→成功 toast/跳转/失败保留	提交成功/失败无反馈
CP-03	表格+筛选+分页联动	筛选→重置分页→显示结果数	筛选后分页未重置
CP-04	表格+批量操作+确认	多选→批量按钮→二次确认→loading→刷新	批量删除无确认
CP-05	搜索+防抖+结果+空态	输入→防抖→loading→结果/空态	搜索中无 loading 指示
CP-06	导航+面包屑+页面标题	三者信息一致	面包屑与页面标题不匹配
CP-07	侧边栏+内容+响应式	大屏展开→小屏折叠/抽屉	侧边栏在移动端无法收起
CP-08	弹窗+表单+验证+提交	弹窗内表单完整验证流程	弹窗内表单无验证
CP-09	列表+排序+筛选+空态	筛选后无结果有空态提示	筛选无结果空白
CP-10	头像+名字+操作菜单	用户信息卡片交互完整	操作菜单被遮挡
CP-11	标签页+内容+缓存	切换 tab 不丢失已填数据	切 tab 数据丢失
CP-12	文件上传+拖拽+进度+预览	拖入→上传中→完成→可预览	上传失败无重试
CP-13	下拉菜单+搜索+异步	搜索→请求→loading→结果	搜索 loading 无反馈
CP-14	树形+勾选+级联+搜索	搜索→高亮匹配→勾选级联	搜索后勾选混乱
CP-15	日期范围+快捷选项	近7天/本月/自定义+联动	快捷选项不更新日期框

七、交互层（Interaction）

#	检查项	验证标准	常见问题
IX-01	过渡时长体系	instant(0)/fast(100ms)/normal(150ms)/slow(300ms)/slower(500ms)	所有过渡用同一个时长
IX-02	缓动曲线体系	default(ease)/in(ease-in)/out(ease-out)/in-out(ease-in-out)/spring(cubic-bezier)	用 linear 导致动画生硬
IX-03	全局 Hover 要求	所有可交互元素有 hover 反馈（颜色/阴影/下划线）	纯文字链接无 hover
IX-04	全局 Active 要求	按下有视觉反馈（加深/缩放）	无 active 反馈
IX-05	Focus Visible	键盘聚焦时显示 focus ring，鼠标点击不显示	focus ring 始终显示干扰视觉
IX-06	Focus Ring 样式	2px offset ring + primary 色	focus ring 与元素重叠
IX-07	弹窗焦点陷阱	Tab 在弹窗内循环，不跳到背景	Tab 可以跳到弹窗外
IX-08	拖拽视觉反馈	拖起时半透明/放区域高亮/排序占位线	拖拽无视觉反馈
IX-09	滑动手势	左滑删除/右滑更多（移动端）	滑动与滚动冲突
IX-10	长按手势	长按触发上下文菜单/预览	无长按操作提示
IX-11	右键菜单	自定义 context menu	与浏览器默认右键菜单冲突
IX-12	全局快捷键	Ctrl+K 搜索/Ctrl+S 保存等	快捷键与浏览器冲突
IX-13	搜索防抖	输入 300ms 后才触发搜索	每次按键都请求
IX-14	滚动节流	scroll 事件节流(16ms)	滚动回调卡顿
IX-15	Resize 防抖	window resize 事件防抖(150ms)	每帧触发 resize 回调
IX-16	乐观更新	点赞/收藏立即反馈+后台同步	等待网络返回才反馈
IX-17	撤销/重做	Ctrl+Z/Ctrl+Y 操作历史	无法撤销误操作
IX-18	渐进式加载	图片懒加载/列表无限滚动/组件 lazy	首屏加载过多内容
IX-19	网络状态感知	离线提示/重连恢复/请求重试	网络断开无提示
IX-20	剪贴板操作	复制/粘贴/剪切反馈	复制后无"已复制"提示

八、响应式层（Responsive）

#	检查项	验证标准	常见问题
RP-01	移动端布局	sm 以下单列布局	移动端仍有多列
RP-02	平板布局	md 双列/侧边栏折叠	平板端布局与手机相同
RP-03	桌面布局	lg+ 多列/侧边栏展开	桌面端浪费屏幕空间
RP-04	触摸目标	所有可点击元素≥44×44px	文字链接点击区域太小
RP-05	移动端字号	正文≥16px，标题适当缩小	移动端字号与桌面相同
RP-06	移动端间距	padding/margin 缩小	移动端间距与桌面相同
RP-07	响应式图片	srcset + sizes 属性	所有尺寸加载同一张大图
RP-08	导航变形	桌面水平导航→移动汉堡/底部 tab	移动端导航项溢出
RP-09	表格响应式	列隐藏/卡片化/横向滚动	移动端表格溢出
RP-10	弹窗响应式	移动端全屏/drawer 替代 modal	modal 在移动端太小
RP-11	横竖屏适配	orientation 变化布局调整	横屏布局错乱
RP-12	打印样式	@media print 隐藏导航/footer/背景	打印时内容不可读

九、无障碍层（Accessibility）

#	检查项	验证标准	常见问题
A11Y-01	语义化标签	header/nav/main/section/article/footer/aside	全用 div
A11Y-02	标题层级	h1(1个)→h2→h3 不跳级	h1 直接跳到 h4
A11Y-03	图片 alt	所有 img 有描述性 alt，装饰图 alt=""	所有图片 alt 都一样
A11Y-04	aria-label	无文字的按钮/链接有 aria-label	图标按钮无文字说明
A11Y-05	aria-describedby	表单字段关联帮助文本/错误提示	错误提示屏幕阅读器读不到
A11Y-06	aria-live	动态内容更新区域用 aria-live=“polite”/“assertive”	toast 消息屏幕阅读器不播报
A11Y-07	aria-expanded	可展开元素标注展开状态	下拉菜单状态不可感知
A11Y-08	aria-selected	选中项标注选中状态	tab 选中状态不可感知
A11Y-09	aria-hidden	装饰性图标/元素 aria-hidden=“true”	装饰图标被屏幕阅读器读出
A11Y-10	role 属性	自定义组件标注正确 role	div 当按钮用无 role=“button”
A11Y-11	键盘可达	所有交互元素 Tab 可达	自定义组件无法 Tab 到
A11Y-12	键盘可操作	Tab 聚焦后 Enter/Space 可激活	焦点到了但无法操作
A11Y-13	Tab 顺序	tabindex 逻辑顺序，不乱序	tabindex>0 导致顺序混乱
A11Y-14	skip-to-content	页面首个 Tab 焦点为跳过导航链接	无法跳过导航到内容
A11Y-15	Focus visible	:focus-visible 有明确样式	focus 样式不明显
A11Y-16	Focus trap	弹窗内 Tab 不外溢	弹窗中 Tab 跳到背景
A11Y-17	Focus return	弹窗关闭后焦点回到触发元素	关闭弹窗后焦点丢失
A11Y-18	sr-only	视觉隐藏但屏幕阅读器可读的文本	信息只通过视觉传达
A11Y-19	颜色对比度	正文≥4.5:1 / 大文本≥3:1 / UI 元素≥3:1	灰色文字对比度不足
A11Y-20	非颜色传达	状态不只靠颜色（加图标/文字/形状）	只用红色标错误
A11Y-21	reduced-motion	prefers-reduced-motion:reduce 时关闭动画	动画无法关闭
A11Y-22	high-contrast	prefers-contrast:more 时增强对比	高对比模式不适配
A11Y-23	动态字号	使用 rem 单位支持浏览器字号设置	全用 px 不跟随系统
A11Y-24	表单标签	label 与 input 关联(for/id 或嵌套)	label 和 input 未关联
A11Y-25	必填标识	aria-required=“true” + 视觉标记	只用红色星号标必填

十、主题层（Theming）

#	检查项	验证标准	常见问题
TH-01	CSS 变量体系	所有设计值用 var(–xxx) 引用	硬编码颜色/间距值
TH-02	亮色主题 token	–color-primary/… 等完整定义	亮色下部分颜色未定义
TH-03	暗色主题 token	.dark 下覆盖所有 CSS 变量	暗色下部分颜色未覆盖
TH-04	主题切换器	手动切换/跟随系统/记住偏好	无切换入口
TH-05	主题过渡	切换时 color-scheme + transition 平滑	切换时闪烁
TH-06	FOUC 防止	页面加载时即应用主题(不闪烁)	页面先亮后暗闪烁
TH-07	图片适配	暗色模式下降低图片亮度	暗色下白色图片刺眼
TH-08	第三方嵌入	iframe/嵌入组件跟随主题	嵌入组件始终亮色
TH-09	品牌定制	覆盖 CSS 变量即可换肤	换肤需要改源码
TH-10	主题预览	设置页可实时预览主题效果	保存后才能看到效果

十一、动效层（Motion）

#	检查项	验证标准	常见问题
MO-01	入场-fade	opacity: 0→1	淡入过慢影响体验
MO-02	入场-slide	translateY/X: offset→0	滑入距离过大
MO-03	入场-scale	scale: 0.95→1	缩放比例过大
MO-04	入场-expand	height: 0→auto（动画）	展开动画卡顿
MO-05	退场动画	入场的反向	退场比入场还慢
MO-06	列表 stagger	列表项依次入场(每项延迟 50ms)	所有项同时出现
MO-07	页面过渡	路由切换 fade/slide 过渡	页面切换无过渡
MO-08	弹窗进入	fade+scale(0.95→1)	弹窗突然出现
MO-09	弹窗退出	fade+scale(1→0.95)	弹窗突然消失
MO-10	Drawer 滑入	translateX/Y 从屏幕外滑入	Drawer 无动画
MO-11	拖拽占位	拖拽时原位置留占位阴影	拖起后原位无反馈
MO-12	数值动画	数字递增/递减动画(如金额)	数字直接跳变
MO-13	微交互-点赞	点击后缩放弹跳 + 图标变化	点赞无动效反馈
MO-14	微交互-勾选	checkmark 绘制动画	勾选无反馈
MO-15	微交互-开关	switch 滑块移动动画	开关直接切换无过渡
MO-16	Spinner	旋转/脉冲/骨架屏动画	Spinner 不转
MO-17	减少动画	prefers-reduced-motion 下禁用所有动画	强制动画无法关闭
MO-18	Spring 物理动画	弹性缓动(非 cubic-bezier)用于自然感觉的交互	动画感觉机械
MO-19	共享元素过渡	缩略图→全屏图/列表项→详情页形变过渡	页面切换生硬
MO-20	View Transitions API	document.startViewTransition() SPA 页面过渡	每次路由跳转无动画
MO-21	滚动驱动动画	animation-timeline: scroll() 滚动关联效果(视差/揭示)	用 JS 监听 scroll
MO-22	动效 token 体系	duration-fast/normal/slow + ease-default/in/out/spring	动效参数散落各处
MO-23	动画编排	stagger 延迟/并行序列/顺序链可配置	动画无法编排
MO-24	Tooltip 入场	从触发点 scale + fade 入场	Tooltip 突然出现
MO-25	退场动画生命周期	DOM 移除前播放退场动画	元素直接消失
MO-26	性能预算	只动画 transform + opacity；will-change 谨慎使用	动画触发 layout/paint
MO-27	Skeleton shimmer	骨架屏使用 CSS shimmer/pulse 动画	骨架屏无动画
MO-28	Switch 弹性动画	开关切换滑块有弹性过冲效果	开关直接跳到对侧
MO-29	用户可控动画	设置中有独立开关控制动画，不依赖系统偏好	无法单独关闭动画

十二、图标层 + 图片层

#	检查项	验证标准	常见问题
IC-01	图标集统一	全站使用同一图标集(Lucide/Heroicons 等)	混用多个图标集
IC-02	图标尺寸阶梯	xs(12)/sm(16)/md(20)/lg(24)/xl(32)	图标大小随意取值
IC-03	图标线条粗细	stroke-width 统一(1.5px 或 2px)	同页面图标粗细不一
IC-04	图标颜色	默认继承文字色/currentColor	图标颜色硬编码
IC-05	图标+文字对齐	垂直居中(gap 间距一致)	图标与文字未对齐
IC-06	纯图标按钮热区	padding 扩大点击区域≥44px	图标按钮点击区域太小
IC-07	暗色模式图标	SVG fill/stroke 跟随主题	暗色下图标不可见
IC-08	自定义图标风格	与系统图标集风格一致	自定义图标格格不入
IC-09	图片占位符	加载中:模糊缩略图/skeleton；加载失败:错误图	图片加载中空白
IC-10	图片懒加载	loading=“lazy” 或 IntersectionObserver	所有图片首屏加载
IC-11	响应式图片	srcset + sizes 提供多分辨率	只加载一种尺寸
IC-12	宽高比锁定	aspect-ratio 预留空间	图片加载后布局跳动(CLS)
IC-13	图片裁剪模式	object-cover/contain/fill 明确规范	图片变形/留白
IC-14	图片格式优化	WebP/AVIF 优先 + JPG fallback	全用 JPG/PNG
IC-15	图片压缩	质量 75-85% 平衡体积和质量	上传原图未压缩

十三、表单层（Forms）

#	检查项	验证标准	常见问题
FM-01	垂直布局	label 在上，input 在下（默认）	label 和 input 不在同一行
FM-02	水平布局	label 在左，input 在右，label 右对齐	label 宽度不一致
FM-03	内联布局	所有字段水平排列	移动端内联布局溢出
FM-04	Label 必填标记	红色 * 或 (必填) 文字	必填标记位置不统一
FM-05	Label 可选标记	(可选) 灰色文字	全标必填不如标可选
FM-06	帮助文本	字段下方灰色小字说明	说明文字与错误提示混淆
FM-07	验证时机-blur	离开字段时验证	填写时就报错
FM-08	验证时机-submit	提交时统一验证	两种时机混用
FM-09	错误提示-位置	字段正下方	错误提示离字段太远
FM-10	错误提示-样式	error 色 + 图标 + 文字	只有红色边框无文字
FM-11	错误提示-聚焦	点击错误提示聚焦到对应字段	无法从错误定位到字段
FM-12	成功状态	绿色边框 + ✓ 图标	填写正确无反馈
FM-13	字段分组	fieldset + legend / 分组标题 + 分割线	表单过长无分组
FM-14	字段依赖	A 选值后 B 显隐/可选值变化	联动不及时
FM-15	多步表单	步骤指示 + 上一步/下一步	无法回到上一步
FM-16	草稿保存	自动/手动保存表单进度	填了一半意外丢失
FM-17	提交 loading	按钮 loading + 禁止重复点击	重复点击提交多次
FM-18	提交成功	toast/跳转结果页	提交后无反馈
FM-19	提交失败	错误提示 + 保留已填数据	提交失败数据丢失
FM-20	密码强度	强度条 + 规则列表实时反馈	不告知密码要求
FM-21	自动保存	localStorage 自动保存表单进度 + 恢复提示	填写一半刷新丢失
FM-22	条件字段	字段显隐依赖其他字段值 + 动画 + 排除验证	隐藏字段仍被验证
FM-23	重复字段组	“添加更多"模式 + 增删按钮 + 索引管理	多个地址无法添加
FM-24	密码要求列表	密码字段旁显示要求清单 + 实时勾选	不告知密码规则
FM-25	密码确认	确认密码实时匹配提示	提交时才发现不匹配
FM-26	未保存提示	表单修改后离开页面弹出确认	数据静默丢失
FM-27	表单重置	重置按钮 + 有修改时二次确认	重置无法撤销
FM-28	Blur 格式化	电话/货币/日期输入失焦后自动格式化	用户输入格式混乱
FM-29	级联下拉	国家→省份→城市异步加载+loading	级联选项加载无反馈
FM-30	Inputmode	numeric/email/tel/url 触发对应移动端键盘	数字输入弹出全键盘
FM-31	粘贴处理	粘贴逗号分隔文本自动拆分为标签	粘贴报错
FM-32	批量编辑	多条记录同时编辑的模式	逐条编辑效率低
FM-33	搜索型下拉	combobox 支持搜索+键盘+异步加载	下拉选项过多无法定位

十四、内容层（Content）

#	检查项	验证标准	常见问题
CT-01	标题唯一	每页仅一个 h1	多个 h1 或无 h1
CT-02	标题层级	h1→h2→h3 不跳级	h2 直接跳到 h4
CT-03	段落长度	单段 3-4 行，不超过 6 行	大段文字墙
CT-04	列表使用	≥3 项内容用列表	多项并列用段落
CT-05	链接文字	描述性文字（非"点击这里”）	链接文字是"这里"
CT-06	链接样式	下划线 + 颜色区分 + visited 状态	链接与正文无法区分
CT-07	外部链接标识	外链有图标标识	不告知将离开本站
CT-08	代码块	语法高亮 + 语言标签 + 复制按钮	代码块无复制功能
CT-09	引用样式	blockquote 有视觉区分	引用与正文无区分
CT-10	表格样式	表头区分 + 行 hover + 响应式	内容表格样式简陋
CT-11	内容最大宽度	文章区域 60-75 字符宽度(~680px)	内容区过宽难阅读
CT-12	标点规范	中英文标点使用规范	半角全角标点混用

十五、国际化层（i18n）

#	检查项	验证标准	常见问题
I18N-01	文字方向	dir=“ltr”/“rtl” 布局翻转	阿拉伯语布局错乱
I18N-02	文案长度适配	按钮/标签允许文案 2-3 倍长度	德语文案溢出按钮
I18N-03	日期格式	locale 感知(YYYY-MM-DD / MM/DD/YYYY)	日期格式不统一
I18N-04	数字格式	千分位/小数点 locale 感知	数字格式不符合当地习惯
I18N-05	货币格式	符号位置(前/后) + 小数位数	货币符号位置错误
I18N-06	复数形式	i18n 库处理复数规则	“1 items” 而非 “1 item”
I18N-07	字体回退	多语言字体栈（CJK/Arabic/Devanagari）	某些语言文字显示异常
I18N-08	图标国际化	图标不含文字(文字用 i18n)	图标中嵌文字无法翻译
I18N-09	双向布局镜像	margin-left→margin-right, float-left→float-right, 箭头方向反转	RTL 布局不镜像
I18N-10	逻辑 CSS 属性	margin-inline-start 替代 margin-left，border-inline-start 替代 border-left	物理属性在 RTL 下不翻转
I18N-11	文本方向检测	用户生成内容用 dir=“auto” 自动检测方向	阿拉伯文/希伯来文显示乱序
I18N-12	Locale 感知排序	列表/表格用 Intl.Collator 按 locale 规则排序	中文按 Unicode 而非拼音排序
I18N-13	姓名格式化	名前姓后 / 姓前名后按 locale 调整	日文/韩文姓名顺序错误
I18N-14	地址格式化	地址字段顺序/标签按国家调整	所有国家用同一地址格式
I18N-15	错误消息翻译	验证消息/ARIA 标签/toast 消息全部可翻译	部分错误消息硬编码英文
I18N-16	翻译缺失降级	翻译缺失时降级到默认语言，而非显示 key	显示 “error.required” 原始 key
I18N-17	相对时间格式	“3 小时前” 用 Intl.RelativeTimeFormat	时间格式不随语言变化
I18N-18	列表格式	“A、B 和 C” 用 Intl.ListFormat 按语言切换	中英文列表连接符相同
I18N-19	图标方向感知	“返回"箭头 LTR 朝左/RTL 朝右	RTL 下箭头方向错误
I18N-20	数字输入 locale	数字输入接受 locale 分隔符（逗号/句号）	只接受英文数字格式
I18N-21	时区处理	日期时间显示用户时区；提供时区选择器	所有用户看到同一时区时间

十六、性能层（Performance）

#	检查项	验证标准	常见问题
PF-01	FCP	First Contentful Paint < 1.8s	白屏时间长
PF-02	LCP	Largest Contentful Paint < 2.5s	首屏大图加载慢
PF-03	INP	Interaction to Next Paint < 200ms	点击后卡顿
PF-04	CLS	Cumulative Layout Shift < 0.1	页面元素跳动
PF-05	路由分割	每个路由独立 chunk	首屏加载全站代码
PF-06	组件懒加载	heavy 组件 dynamic import	所有组件一次加载
PF-07	资源预加载	preload 关键字体/图片	字体闪烁(FOIT)
PF-08	资源预获取	prefetch 下个页面资源	无预获取
PF-09	字体优化	font-display:swap + 子集化 + preload	字体文件过大
PF-10	图片优化	响应式 + 懒加载 + WebP/AVIF + 尺寸预留	加载原图大图
PF-11	动画性能	只用 transform + opacity	用 top/left 做动画
PF-12	虚拟列表	大列表虚拟化渲染	万级 DOM 节点
PF-13	DOM 深度	嵌套不超过 15 层	过深嵌套
PF-14	CSS 体积	未使用的 CSS 清理	CSS 文件过大
PF-15	缓存策略	静态资源 immutable cache	每次都请求静态资源

十七、安全层（Security）

#	检查项	验证标准	常见问题
SEC-01	XSS-输出转义	用户输入渲染前转义 HTML	innerHTML 直接插入用户内容
SEC-02	XSS-CSP	Content-Security-Policy 头设置	无 CSP 或 CSP 过宽松
SEC-03	CSRF	Token / SameSite Cookie	无 CSRF 防护
SEC-04	密码遮蔽	type=password + 非自动填充	密码明文显示
SEC-05	敏感数据掩码	身份证/银行卡/手机号部分遮蔽	完整显示敏感信息
SEC-06	输入净化	URL/HTML/SQL 参数过滤	直接拼接用户输入到 URL
SEC-07	点击劫持	X-Frame-Options / CSP frame-ancestors	页面可被 iframe 嵌入
SEC-08	自动填充	autocomplete 属性正确设置	敏感字段自动填充泄露
SEC-09	文件上传限制	文件类型/大小/数量限制	可上传任意文件
SEC-10	速率限制	前端节流 + 后端限流	无限制可暴力请求

十八、滚动与光标层（Scroll & Cursor）

#	检查项	验证标准	常见问题
SC-01	平滑滚动	html { scroll-behavior: smooth }	锚点跳转无过渡
SC-02	滚动捕捉	scroll-snap-type 用于轮播/全屏页	滚动定位不精准
SC-03	滚动阴影	内容滚动时 header/footer 底部出现阴影	滚动后无法区分层级
SC-04	滚动到顶按钮	滚动超过一屏后出现返回顶部	滚动很长找不到回去的路
SC-05	虚拟滚动条	overflow-scroll 但隐藏原生滚动条	滚动条样式破坏设计
SC-06	自定义滚动条	webkit-scrollbar 样式（窄轨道/圆角）	原生滚动条太粗
SC-07	锁定背景滚动	弹窗打开时 body overflow:hidden	弹窗打开背景还在滚
SC-08	光标-可点击	可交互元素 cursor:pointer	按钮光标为 default
SC-09	光标-不可点击	禁用元素 cursor:not-allowed	禁用按钮光标仍为 pointer
SC-10	光标-等待	加载/处理中 cursor:wait	长操作无光标变化
SC-11	光标-文本	可选文本区域 cursor:text	文字区域光标为 default
SC-12	光标-拖拽	可拖拽元素 cursor:grab/grabbing	拖拽时光标无变化
SC-13	选区样式	::selection 背景色+文字色 token 化	选区颜色为默认蓝色
SC-14	占位符样式	::placeholder 颜色 token 化	placeholder 颜色与正文混淆
SC-15	滚动指示器	长内容页面顶部进度条	不知当前阅读进度

十九、错误与空状态层（Error & Empty States）

#	检查项	验证标准	常见问题
ERR-01	404 页面	插图+描述+返回首页/搜索入口	404 只显示空白
ERR-02	500 页面	插图+描述+重试按钮+返回首页	500 显示原始错误堆栈
ERR-03	网络错误	断网提示+重试按钮	断网时页面白屏
ERR-04	权限错误	403/401 页面+登录/申请入口	权限不足显示 404
ERR-05	表单错误汇总	多个错误时顶部汇总+滚动到第一个	多个错误只看到最后一个
ERR-06	API 错误 toast	接口报错时显示 toast	接口报错无任何提示
ERR-07	空列表	插图+描述+创建/导入入口	空列表只显示"暂无数据”
ERR-08	空搜索	搜索无结果时提示+建议	搜索无结果空白
ERR-09	图片加载失败	备用图/重试/隐藏	图片加载失败显示破图
ERR-10	组件错误边界	组件崩溃时显示 fallback 而非白屏	一个组件崩全页白屏
ERR-11	超时处理	请求超时提示+重试	长时间等待无反馈
ERR-12	维护页面	计划维护提示页	维护时显示 500 错误

二十、高级组件层（Advanced Components）

20.1 轮播（Carousel）

#	检查项	验证标准	常见问题
CAR-01	指示器	底部圆点/数字指示当前位置	不知道当前第几张
CAR-02	前进/后退	左右箭头/边缘点击	无法手动切换
CAR-03	自动播放	自动轮播+悬浮暂停	自动播放无法暂停
CAR-04	循环	到达末尾后回到第一张	到末尾就停了
CAR-05	触摸滑动	移动端手势滑动	移动端只能点箭头
CAR-06	键盘操作	左右方向键切换	无法键盘操作
CAR-07	懒加载	非当前帧图片懒加载	所有图片一次加载

20.2 全局搜索 / 命令面板（Command Palette）

#	检查项	验证标准	常见问题
CMD-01	快捷键触发	Ctrl+K / Cmd+K 打开	无快捷键入口
CMD-02	搜索框自动聚焦	打开即聚焦输入框	需要手动点击输入框
CMD-03	实时搜索	输入时即时过滤结果	需要按回车才搜索
CMD-04	分类展示	最近使用/建议/操作分组	结果无分组
CMD-05	键盘导航	上下箭头选择+回车确认	无法键盘操作
CMD-06	高亮匹配	搜索关键词在结果中高亮	匹配位置不明显
CMD-07	无结果状态	搜索无结果有提示	无结果空白

20.3 图片灯箱（Lightbox）

#	检查项	验证标准	常见问题
LB-01	全屏预览	点击图片全屏查看	只能看缩略图
LB-02	缩放	双击/滚轮/捏合缩放	大图无法看细节
LB-03	前后切换	左右箭头切换图片	无法浏览下一张
LB-04	关闭方式	ESC / 点击外部 / X 按钮	只能点 X 关闭
LB-05	图片计数	“3/12” 当前/总数	不知还有多少张
LB-06	缩略图列表	底部缩略图快速跳转	无法跳转到特定图

20.4 通知中心

#	检查项	验证标准	常见问题
NTF-01	未读标识	图标上数字/红点	不知道有新通知
NTF-02	通知面板	点击图标展开面板	通知直接跳转无预览
NTF-03	全部已读	一键标记所有已读	需要逐条点
NTF-04	通知分类	系统/消息/操作分 tab	所有通知混在一起
NTF-05	加载更多	滚动加载历史通知	只显示最近几条
NTF-06	空通知	插图+描述	空通知只显示空白

#	检查项	验证标准	常见问题
CK-01	位置	底部固定横幅/顶部全屏	遮挡主要内容
CK-02	接受/拒绝	明确的接受和拒绝按钮	只有接受按钮
CK-03	详细选项	可选择接受哪些类别	全有或全无
CK-04	记忆选择	选择后 6-12 个月不再显示	每次访问都弹
CK-05	修改选择	设置中可修改 cookie 偏好	无法修改之前的选择

#	检查项	验证标准	常见问题
MEGA-01	全宽面板	菜单项展开全宽下拉面板，与导航栏对齐	下拉面板只有菜单宽度
MEGA-02	多列布局	链接按分类分列 + 分类标题	所有链接单列罗列
MEGA-03	特色内容	支持促销图/高亮推荐/横幅	纯文字列表
MEGA-04	键盘导航	Tab/箭头遍历菜单项	无法键盘操作
MEGA-05	悬停意图	延迟打开/关闭防止鼠标经过误触发	鼠标经过就打开
MEGA-06	响应式折叠	移动端折叠为手风琴/钻入式导航	移动端仍全宽面板

20.7 图表/数据可视化（Charts）

#	检查项	验证标准	常见问题
CHT-01	图表类型	柱状/折线/面积/饼图/散点/迷你图	只有基础柱状图
CHT-02	图表色板	使用设计系统色板；系列间对比度足够	图表颜色随意取值
CHT-03	交互式图例	点击图例切换系列显隐	图例纯展示
CHT-04	数据 Tooltip	悬浮显示精确值 + 格式化数字	无数据查看方式
CHT-05	坐标轴标签	标签可读（旋转/截断/密集时跳过）	标签重叠不可读
CHT-06	图表无障碍	aria-label 或 role=“img” + 数据表格降级	屏幕阅读器无法感知
CHT-07	图表响应式	图表随容器宽度自适应	固定宽度溢出
CHT-08	图表空状态	“暂无数据” 插图+提示	空数据时空白
CHT-09	图表加载态	数据加载中 skeleton/shimmer	加载中空白
CHT-10	图表动画	入场动画(柱形增长/线条绘制)+reduced-motion	图表突然出现

20.8 富文本编辑器（Rich Text Editor）

#	检查项	验证标准	常见问题
RTE-01	工具栏格式	加粗/斜体/下划线/删除线/标题/列表/引用/代码/链接	工具栏功能不全
RTE-02	工具栏对齐	文本对齐选项(左/中/右/两端)	无对齐控制
RTE-03	嵌入支持	图片/视频/文件嵌入编辑器	只能输入纯文本
RTE-04	表格支持	编辑器内插入/编辑表格	无表格功能
RTE-05	撤销/重做	Ctrl+Z / Ctrl+Y 在编辑器上下文中	撤销影响整页
RTE-06	字数统计	实时字符数/字数显示	无字数限制提示
RTE-07	快捷键提示	Ctrl+B/I/K 格式化快捷键 + tooltip	不告知有快捷键
RTE-08	输出格式	输出有效 HTML/Markdown + 设计系统类名	输出格式不可控
RTE-09	粘贴清理	外部粘贴内容清理格式保留结构	粘贴带大量垃圾样式
RTE-10	@提及支持	@mention 和 #hashtag 自动补全	无提及功能
RTE-11	最大长度	最大内容长度 + 倒计提示	超出长度无提示

二十一、实践建议

21.1 如何使用本清单

设计初期（需求阶段）

从汇总表勾选本次需要实现的检查项
按层级组织成设计需求文档
每个检查项写明具体参数（如"字号阶梯: 12/14/16/20/24/30/36"）
将需求清单交给 AI 实现

设计中期（开发阶段）

逐层扫描，对照检查项验收
重点检查：颜色层、间距层、组件状态完整性
使用自动化工具辅助：Lighthouse、axe-core、Stylelint

设计后期（审查阶段）

按检查项清单逐项审查
标记未通过项，给出具体修改建议
回归测试确保修改不引入新问题

21.2 给 AI 的提示词模板

模板一：Design Token 定义

请基于 Tailwind CSS 定义以下 Design Token：

【排版层】
- T-01: 字体族 — primary: system-ui, heading: Inter, mono: JetBrains Mono
- T-02: 字号阶梯 — xs(12)/sm(14)/base(16)/lg(18)/xl(20)/2xl(24)/3xl(30)/4xl(36)
- T-03: 行高 — tight(1.25)/normal(1.5)/relaxed(1.75)
- T-21: 等宽数字 — tabular-nums 用于表格金额列

【颜色层】
- C-01: 品牌色 — primary blue (#3B82F6) 含 50-950 色阶
- C-20: 暗色模式映射 — 所有颜色 dark: 变体
- C-24~26: 对比度 — 正文≥4.5:1，大文本≥3:1

【间距层】
- S-01: 基准单位 — 4px
- S-02: 间距阶梯 — 0/1/2/3/4/5/6/8/10/12/16/20/24

输出 tailwind.config.ts 配置。

模板二：组件实现

请使用 shadcn/ui + Tailwind CSS 实现以下按钮检查项：

【变体】BTN-01~06: primary/secondary/outline/ghost/destructive/link
【尺寸】BTN-07~09: sm(h-8 px-3 text-xs)/md(h-10 px-4 text-sm)/lg(h-12 px-6 text-base)
【状态】BTN-10~14: hover/active/focus-visible/disabled/loading
【图标】BTN-15~17: left-icon/right-icon/icon-only (lucide-react)
【组合】BTN-19: ButtonGroup 水平排列，相连边共享

要求：
- 使用 class-variance-authority (cva) 管理变体
- 使用 tailwind-merge 处理类名合并
- loading 状态显示 Spinner + 禁止点击
- icon-only 按钮有 aria-label

模板三：审查检查单

请审查当前页面的 UI 实现，逐项检查以下检查项是否通过：

【排版层】T-01~T-25
【颜色层】C-01~C-30
【间距层】S-01~S-10
【组件状态】BTN-10~14, INP-08~12, SEL-03~05
【交互层】IX-03~07
【响应式】RP-01~RP-12
【无障碍】A11Y-01~A11Y-25

输出格式：
| 检查项 | 状态 | 问题描述 | 修复建议 |

21.3 检查优先级排序

优先级	层级	理由
P0 必做	排版、颜色、间距	设计系统骨架，影响全局一致性
P0 必做	组件状态	缺失状态导致功能不可用
P0 必做	无障碍	法律合规 + 用户覆盖
P0 必做	错误与空状态	用户体验底线
P1 重要	布局、圆角阴影、图标	视觉一致性的关键
P1 重要	交互反馈、响应式	用户体验的核心
P1 重要	主题（暗色模式）	用户期望
P1 重要	滚动与光标	交互细节完整性
P1 重要	通知中心	信息可达性
P2 改进	动效、内容排版	锦上添花
P2 改进	性能优化	持续优化
P2 改进	轮播、命令面板、灯箱	高级组件
P3 可选	国际化、安全	视项目需求
P3 可选	Cookie 同意	合规需求

二十二、工具推荐

工具	用途	检查层级
Lighthouse	性能/无障碍/最佳实践评分	性能层、无障碍层
axe DevTools	无障碍自动化检测	无障碍层
Stylelint	CSS 规则一致性检查	排版层、间距层
ESLint + a11y 插件	JSX/TSX 无障碍检查	无障碍层
Chromatic / Percy	视觉回归测试	全层级
Figma Tokens	设计令牌管理	颜色/排版/间距层
Tailwind CSS	原子化 CSS 框架	全层级
shadcn/ui	组件库基础	组件层
Storybook	组件文档/预览	组件层
Contrast Checker	颜色对比度检测	颜色层、无障碍层

二十三、总结

检查项统计

层级	检查项数量	优先级
排版层	25	P0
颜色层	30	P0
间距层	20	P0
圆角+阴影层	20	P1
布局层	29	P1
组件-按钮	19	P0
组件-输入	20	P0
组件-选择	10	P1
组件-卡片	7	P1
组件-弹窗	10	P0
组件-抽屉	8	P1
组件-气泡卡片	6	P1
组件-菜单	8	P1
组件-表格	14	P1
组件-标签页	6	P2
组件-导航	8	P1
组件-反馈	16	P0
组件-数据展示	20	P1
组件-组合模式	15	P1
交互层	20	P1
响应式层	12	P1
无障碍层	25	P0
主题层	10	P1
动效层	29	P2
图标+图片层	15	P1
表单层	33	P0
内容层	12	P2
国际化层	21	P3
性能层	15	P2
安全层	10	P2
滚动与光标层	15	P1
错误与空状态层	12	P0
高级组件-轮播	7	P2
高级组件-命令面板	7	P2
高级组件-灯箱	6	P2
高级组件-通知中心	6	P1
高级组件-Cookie	5	P3
高级组件-超级菜单	6	P2
高级组件-图表	10	P2
高级组件-富文本编辑器	11	P2
合计	578	—

核心原则

每个检查项都是独立可验证的 — 不存在模糊的"好看"要求
每个检查项都有明确的验证标准 — 知道"做到了"长什么样
每个检查项都可以精确描述给 AI — 从清单勾选，AI 精确输出
层级之间有优先级 — P0 先做骨架，P1 做体验，P2 做打磨
清单是活的 — 根据项目需要增删检查项

与 /sc:design 配合

本清单可作为 /sc:design 的输入：

从清单中勾选需要的检查项
填写具体参数值
将勾选后的清单作为 design brief 提交给 AI
AI 按检查项逐项实现
按检查项逐项验收

附：P0 快速审查清单

首次审查时，优先检查以下 必须做到 的检查项。通过后可进入 P1 审查。

排版（P0）

T-01 字体族定义了 primary/heading/mono/fallback 四组
T-02 字号阶梯有 8+ 个递进级别
T-03 行高定义了 tight/normal/relaxed
T-06 h1-h6 视觉层级清晰递减
T-07 正文字号≥14px，行高≥1.5

颜色（P0）

C-01 品牌色有 50-950 色阶
C-02 语义色 success/warning/error/info 完整
C-24 正文对比度≥4.5:1
C-27 不单独靠颜色传达信息

组件状态（P0）

BTN-10~14 按钮 hover/active/focus/disabled/loading 完整
INP-08~12 输入框 hover/focus/error/disabled 完整
MDL-01~10 弹窗遮罩/关闭/焦点管理完整
FB-01~05 Toast 有类型区分/自动关闭/可关闭

无障碍（P0）

A11Y-01 使用语义化 HTML 标签
A11Y-04 无文字元素有 aria-label
A11Y-11 所有交互元素 Tab 可达
A11Y-15 focus-visible 有明确样式
A11Y-24 表单 label 与 input 关联

错误处理（P0）

ERR-01 404 页面有插图+返回入口
ERR-07 空列表有插图+描述+操作入口
ERR-10 组件崩溃有 fallback
FM-09 错误提示在字段正下方

前端 UI 设计技能颗粒度：原子化检查清单

技能颗粒度检查项汇总

全量检查项

前言

什么是技能颗粒度

为什么需要原子化

本文受众

检查项层级全景

一、排版层（Typography）

二、颜色层（Color）

三、间距层（Spacing）

四、圆角层 + 阴影层（Border & Shadow）

五、布局层（Layout）

六、组件层（Components）

6.1 按钮（Button）

6.2 输入框（Input）

6.3 选择类控件

6.4 卡片（Card）

6.5 弹窗（Dialog/Modal）

6.6 抽屉（Drawer）

6.7 气泡卡片（Popover）

6.8 菜单（Menu / Dropdown Menu）

6.9 表格（Table）

6.10 标签页（Tabs）

6.11 导航组件

6.12 反馈组件

6.13 数据展示组件

6.14 组件组合模式（Composition Patterns）

七、交互层（Interaction）

八、响应式层（Responsive）

九、无障碍层（Accessibility）

十、主题层（Theming）

十一、动效层（Motion）

十二、图标层 + 图片层

十三、表单层（Forms）

十四、内容层（Content）

十五、国际化层（i18n）

十六、性能层（Performance）

十七、安全层（Security）

十八、滚动与光标层（Scroll & Cursor）

十九、错误与空状态层（Error & Empty States）

二十、高级组件层（Advanced Components）

20.1 轮播（Carousel）

20.2 全局搜索 / 命令面板（Command Palette）

20.3 图片灯箱（Lightbox）

20.4 通知中心

20.5 Cookie 同意横幅

20.6 超级菜单（Mega Menu）

20.7 图表/数据可视化（Charts）

20.8 富文本编辑器（Rich Text Editor）

二十一、实践建议

21.1 如何使用本清单

设计初期（需求阶段）

设计中期（开发阶段）

设计后期（审查阶段）

21.2 给 AI 的提示词模板

模板一：Design Token 定义

模板二：组件实现

模板三：审查检查单

21.3 检查优先级排序

二十二、工具推荐

二十三、总结

检查项统计

核心原则

与 /sc:design 配合

附：P0 快速审查清单

排版（P0）

颜色（P0）

组件状态（P0）

无障碍（P0）

错误处理（P0）