https://743v45.github.io/di4urp/tags/design-tokens/Recent content in Design Tokens on TaoHugo -- gohugo.iozh-cndi4urp@gmail.com (taevas)di4urp@gmail.com (taevas)Tue, 21 Apr 2026 14:00:00 +0800https://743v45.github.io/di4urp/posts/frontend-ui-design-skill-granularity/Tue, 21 Apr 2026 14:00:00 +0800di4urp@gmail.com (taevas)https://743v45.github.io/di4urp/posts/frontend-ui-design-skill-granularity/<h2 id="技能颗粒度检查项汇总">技能颗粒度检查项汇总</h2> <blockquote> <p>本表格将前端 UI 设计拆解为原子化检查项，每项可独立验证（是否存在/是否做到）、独立描述（交给 AI 实现）、独立验收。</p> <p><strong>使用方式</strong>：在设计初期逐层扫描，勾选需要实现的检查项，形成精确的设计需求清单。</p> </blockquote> <h3 id="全量检查项">全量检查项</h3> <table> <thead> <tr> <th>层级</th> <th>检查项</th> <th>优先级</th> <th>验证方式</th> <th>个人备注</th> </tr> </thead> <tbody> <tr> <td><strong>排版层</strong></td> <td>字体族定义</td> <td>⭐⭐⭐⭐⭐</td> <td>检查 CSS 变量是否定义 primary/mono/fallback</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>字号阶梯系统</td> <td>⭐⭐⭐⭐⭐</td> <td>检查 xs/sm/base/lg/xl/2xl/3xl/4xl 是否递进</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>行高规范</td> <td>⭐⭐⭐⭐⭐</td> <td>检查 tight/normal/relaxed 行高 token</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>字重定义</td> <td>⭐⭐⭐⭐</td> <td>检查 light/normal/medium/semibold/bold token</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>字间距定义</td> <td>⭐⭐⭐</td> <td>检查 tighter/tight/normal/wide/wider token</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>标题层级</td> <td>⭐⭐⭐⭐⭐</td> <td>h1-h6 视觉层级是否清晰递减</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>正文排版</td> <td>⭐⭐⭐⭐⭐</td> <td>body 文本是否可读（字号≥14px，行高≥1.5）</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>辅助文本</td> <td>⭐⭐⭐⭐</td> <td>small/caption/overline 样式是否定义</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>文本截断</td> <td>⭐⭐⭐⭐</td> <td>单行截断 / 多行截断是否有工具类</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>文本对齐</td> <td>⭐⭐⭐</td> <td>left/center/right/justify 是否覆盖</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>文本装饰</td> <td>⭐⭐⭐</td> <td>underline/strikethrough/overline</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>文本转换</td> <td>⭐⭐⭐</td> <td>uppercase/lowercase/capitalize</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>中英文混排</td> <td>⭐⭐⭐⭐</td> <td>中英文间自动空格、标点悬挂处理</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>连字符处理</td> <td>⭐⭐</td> <td>hyphens auto 是否处理</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>段落间距</td> <td>⭐⭐⭐⭐</td> <td>段间距是否统一（非双重 margin）</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>代码文本样式</td> <td>⭐⭐⭐⭐</td> <td>inline code 字体/背景/圆角/内边距</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>等宽数字</td> <td>⭐⭐⭐⭐</td> <td>tabular-nums 用于金额/表格数字对齐</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>CJK 断行规则</td> <td>⭐⭐⭐</td> <td>word-break/overflow-wrap 处理中文长词</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>空白处理</td> <td>⭐⭐⭐</td> <td>white-space 五种模式覆盖</td> <td></td> </tr> <tr> <td><strong>排版层</strong></td> <td>选中文字样式</td> <td>⭐⭐⭐</td> <td>::selection 背景色+文字色 token</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>品牌色定义</td> <td>⭐⭐⭐⭐⭐</td> <td>primary/secondary/accent 是否定义</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>语义色定义</td> <td>⭐⭐⭐⭐⭐</td> <td>success/warning/error/info 是否定义</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>中性色阶梯</td> <td>⭐⭐⭐⭐⭐</td> <td>gray-50 到 gray-950 是否完整</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>文本色阶梯</td> <td>⭐⭐⭐⭐⭐</td> <td>primary/secondary/tertiary/disabled/inverse</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>背景色定义</td> <td>⭐⭐⭐⭐⭐</td> <td>page/card/surface/overlay 背景色</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>边框色定义</td> <td>⭐⭐⭐⭐</td> <td>default/hover/focus/error 边框色</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>状态色定义</td> <td>⭐⭐⭐⭐⭐</td> <td>hover/active/focus/disabled 各状态色</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>交互反馈色</td> <td>⭐⭐⭐⭐</td> <td>链接色/已访问链接色/悬浮链接色</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>暗色模式映射</td> <td>⭐⭐⭐⭐⭐</td> <td>所有颜色是否有 dark 变体</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>颜色对比度</td> <td>⭐⭐⭐⭐⭐</td> <td>正文≥4.5:1、大文本≥3:1（WCAG AA）</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>色盲友好</td> <td>⭐⭐⭐</td> <td>不单独依赖颜色传达信息</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>渐变色定义</td> <td>⭐⭐⭐</td> <td>品牌渐变/装饰渐变 token</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>透明度定义</td> <td>⭐⭐⭐</td> <td>常用 opacity 值 token 化</td> <td></td> </tr> <tr> <td><strong>颜色层</strong></td> <td>阴影色定义</td> <td>⭐⭐⭐⭐</td> <td>各层级阴影是否使用语义色而非硬编码</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>基准单位定义</td> <td>⭐⭐⭐⭐⭐</td> <td>4px 或 8px 基准网格</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>间距阶梯系统</td> <td>⭐⭐⭐⭐⭐</td> <td>0/1/2/3/4/5/6/8/10/12/16&hellip; 是否完整</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>组件内间距</td> <td>⭐⭐⭐⭐⭐</td> <td>padding 是否遵循阶梯系统</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>组件外间距</td> <td>⭐⭐⭐⭐</td> <td>margin/gap 是否遵循阶梯系统</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>栅格间距</td> <td>⭐⭐⭐⭐</td> <td>grid/flex gap 是否 token 化</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>响应式间距</td> <td>⭐⭐⭐⭐</td> <td>不同断点下间距是否缩放</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>区块间距</td> <td>⭐⭐⭐⭐</td> <td>section 间距是否统一</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>容器内间距</td> <td>⭐⭐⭐⭐⭐</td> <td>页面容器内边距是否一致</td> <td></td> </tr> <tr> <td><strong>间距层</strong></td> <td>负间距</td> <td>⭐⭐</td> <td>偏移/重叠场景是否支持</td> <td></td> </tr> <tr> <td><strong>圆角层</strong></td> <td>圆角阶梯</td> <td>⭐⭐⭐⭐⭐</td> <td>none/sm/md/lg/xl/full 是否定义</td> <td></td> </tr> <tr> <td><strong>圆角层</strong></td> <td>组件圆角一致</td> <td>⭐⭐⭐⭐</td> <td>相同层级组件圆角是否统一</td> <td></td> </tr> <tr> <td><strong>圆角层</strong></td> <td>按钮/输入框圆角</td> <td>⭐⭐⭐⭐⭐</td> <td>表单元素圆角是否匹配</td> <td></td> </tr> <tr> <td><strong>圆角层</strong></td> <td>卡片/弹窗圆角</td> <td>⭐⭐⭐⭐</td> <td>容器类组件圆角是否匹配</td> <td></td> </tr> <tr> <td><strong>圆角层</strong></td> <td>图片/头像圆角</td> <td>⭐⭐⭐⭐</td> <td>媒体元素圆角规范</td> <td></td> </tr> <tr> <td><strong>阴影层</strong></td> <td>阴影层级</td> <td>⭐⭐⭐⭐⭐</td> <td>sm/md/lg/xl/inner 是否递进</td> <td></td> </tr> <tr> <td><strong>阴影层</strong></td> <td>组件阴影一致</td> <td>⭐⭐⭐⭐</td> <td>同层级组件阴影统一</td> <td></td> </tr> <tr> <td><strong>阴影层</strong></td> <td>暗色模式阴影</td> <td>⭐⭐⭐⭐</td> <td>暗色下阴影是否适配（更亮的阴影）</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>容器最大宽度</td> <td>⭐⭐⭐⭐⭐</td> <td>max-width 是否定义（如 1280px）</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>响应式断点定义</td> <td>⭐⭐⭐⭐⭐</td> <td>sm/md/lg/xl/2xl 断点值</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>栅格列数</td> <td>⭐⭐⭐⭐⭐</td> <td>12 列 / 24 列系统</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>栅格间距</td> <td>⭐⭐⭐⭐</td> <td>gutter 值 token 化</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>页面布局模式</td> <td>⭐⭐⭐⭐⭐</td> <td>header/main/sidebar/footer 组合</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>内容区域宽度</td> <td>⭐⭐⭐⭐</td> <td>全宽/定宽/侧边栏模式</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>Flex 布局模式</td> <td>⭐⭐⭐⭐</td> <td>direction/wrap/justify/align 工具类</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>Grid 布局模式</td> <td>⭐⭐⭐⭐</td> <td>template/areas/auto 工具类</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>居中对齐</td> <td>⭐⭐⭐⭐</td> <td>水平/垂直/双轴居中方案</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>粘性定位</td> <td>⭐⭐⭐</td> <td>header/sidebar 的 sticky 行为</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>Z-index 层级</td> <td>⭐⭐⭐⭐⭐</td> <td>dropdown/modal/tooltip/notification 层级体系</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>溢出处理</td> <td>⭐⭐⭐⭐</td> <td>内容溢出的 scroll/hidden/ellipsis 方案</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>最小/最大尺寸</td> <td>⭐⭐⭐</td> <td>min-width/min-height/max-width 约束</td> <td></td> </tr> <tr> <td><strong>布局层</strong></td> <td>安全区域适配</td> <td>⭐⭐⭐</td> <td>mobile safe-area-inset 处理</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>变体（5+）</td> <td>⭐⭐⭐⭐⭐</td> <td>primary/secondary/ghost/outline/destructive</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>尺寸（3+）</td> <td>⭐⭐⭐⭐⭐</td> <td>sm/md/lg</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>交互状态（6）</td> <td>⭐⭐⭐⭐⭐</td> <td>default/hover/active/focus/disabled/loading</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>图标按钮</td> <td>⭐⭐⭐⭐</td> <td>left-icon/right-icon/icon-only</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>按钮组</td> <td>⭐⭐⭐</td> <td>组合排列/分割线</td> <td></td> </tr> <tr> <td><strong>组件-按钮</strong></td> <td>按钮宽度</td> <td>⭐⭐⭐</td> <td>full-width / auto / fixed</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>变体覆盖</td> <td>⭐⭐⭐⭐⭐</td> <td>text/password/email/number/search/url/tel</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>尺寸（3+）</td> <td>⭐⭐⭐⭐⭐</td> <td>sm/md/lg</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>交互状态（6）</td> <td>⭐⭐⭐⭐⭐</td> <td>default/hover/focus/error/disabled/readonly</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>前缀/后缀</td> <td>⭐⭐⭐⭐</td> <td>图标/文字/单位 前后缀</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>清除按钮</td> <td>⭐⭐⭐</td> <td>输入内容后显示一键清除</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>密码切换</td> <td>⭐⭐⭐⭐</td> <td>密码明文/密文切换按钮</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>字符计数</td> <td>⭐⭐⭐</td> <td>maxlength 倒计显示</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>Textarea</td> <td>⭐⭐⭐⭐</td> <td>自动高度/最大高度/resize 控制</td> <td></td> </tr> <tr> <td><strong>组件-输入</strong></td> <td>标签浮动</td> <td>⭐⭐⭐</td> <td>浮动标签动画效果</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>Select 下拉</td> <td>⭐⭐⭐⭐⭐</td> <td>单选/多选/搜索/分组/异步加载</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>Checkbox</td> <td>⭐⭐⭐⭐⭐</td> <td>单选/多选/indeterminate/禁用</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>Radio</td> <td>⭐⭐⭐⭐⭐</td> <td>单选/按钮样式/禁用</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>Switch</td> <td>⭐⭐⭐⭐</td> <td>开/关/禁用/加载/文字标签</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>Slider</td> <td>⭐⭐⭐</td> <td>单值/范围/标记/tooltip</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>日期选择</td> <td>⭐⭐⭐</td> <td>日期/时间/日期范围</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>文件上传</td> <td>⭐⭐⭐</td> <td>拖拽/点击/进度/预览/类型限制</td> <td></td> </tr> <tr> <td><strong>组件-选择</strong></td> <td>颜色选择</td> <td>⭐⭐</td> <td>取色器/预设色板</td> <td></td> </tr> <tr> <td><strong>组件-卡片</strong></td> <td>结构完整性</td> <td>⭐⭐⭐⭐⭐</td> <td>header/body/footer 三段式</td> <td></td> </tr> <tr> <td><strong>组件-卡片</strong></td> <td>视觉变体</td> <td>⭐⭐⭐⭐</td> <td>边框/阴影/flat/elevated</td> <td></td> </tr> <tr> <td><strong>组件-卡片</strong></td> <td>交互状态</td> <td>⭐⭐⭐⭐</td> <td>static/hoverable/clickable</td> <td></td> </tr> <tr> <td><strong>组件-卡片</strong></td> <td>媒体区域</td> <td>⭐⭐⭐⭐</td> <td>顶部图片/封面图模式</td> <td></td> </tr> <tr> <td><strong>组件-弹窗</strong></td> <td>Modal 对话框</td> <td>⭐⭐⭐⭐⭐</td> <td>尺寸/滚动/关闭/遮罩/动画</td> <td></td> </tr> <tr> <td><strong>组件-弹窗</strong></td> <td>Drawer 抽屉</td> <td>⭐⭐⭐⭐</td> <td>方向(上下左右)/尺寸/关闭方式</td> <td></td> </tr> <tr> <td><strong>组件-弹窗</strong></td> <td>Popover 气泡</td> <td>⭐⭐⭐⭐</td> <td>方向/触发方式/箭头/内容类型</td> <td></td> </tr> <tr> <td><strong>组件-弹窗</strong></td> <td>确认对话框</td> <td>⭐⭐⭐⭐⭐</td> <td>危险操作二次确认/文案规范</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>基础功能</td> <td>⭐⭐⭐⭐⭐</td> <td>列定义/数据渲染/空状态</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>排序</td> <td>⭐⭐⭐⭐</td> <td>单列/多列排序/远程排序</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>筛选</td> <td>⭐⭐⭐⭐</td> <td>列筛选/全局搜索/筛选状态展示</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>分页</td> <td>⭐⭐⭐⭐⭐</td> <td>页码/每页条数/总数/跳转</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>固定列/头</td> <td>⭐⭐⭐⭐</td> <td>首列/末列固定/表头固定</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>行选择</td> <td>⭐⭐⭐⭐</td> <td>单选/多选/全选/跨页选择</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>行展开</td> <td>⭐⭐⭐</td> <td>展开详情/嵌套子表</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>加载状态</td> <td>⭐⭐⭐⭐</td> <td>loading spinner / skeleton</td> <td></td> </tr> <tr> <td><strong>组件-表格</strong></td> <td>虚拟滚动</td> <td>⭐⭐⭐</td> <td>大数据量虚拟化渲染</td> <td></td> </tr> <tr> <td><strong>组件-标签页</strong></td> <td>变体</td> <td>⭐⭐⭐⭐</td> <td>line/card/pill</td> <td></td> </tr> <tr> <td><strong>组件-标签页</strong></td> <td>滚动</td> <td>⭐⭐⭐</td> <td>标签过多时横向滚动/箭头</td> <td></td> </tr> <tr> <td><strong>组件-标签页</strong></td> <td>懒加载</td> <td>⭐⭐⭐</td> <td>非活跃 tab 内容延迟渲染</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>顶部导航</td> <td>⭐⭐⭐⭐⭐</td> <td>logo/菜单/用户区布局</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>侧边导航</td> <td>⭐⭐⭐⭐</td> <td>可折叠/展开/子菜单/高亮当前</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>面包屑</td> <td>⭐⭐⭐⭐</td> <td>层级展示/可点击/截断</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>步骤条</td> <td>⭐⭐⭐⭐</td> <td>水平/垂直/步骤状态/可点击</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>锚点导航</td> <td>⭐⭐⭐</td> <td>页内跳转/高亮当前位置</td> <td></td> </tr> <tr> <td><strong>组件-导航</strong></td> <td>返回顶部</td> <td>⭐⭐⭐</td> <td>滚动出现/平滑滚动</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>Toast 消息</td> <td>⭐⭐⭐⭐⭐</td> <td>类型/位置/自动关闭/可关闭/堆叠</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>Alert 告警</td> <td>⭐⭐⭐⭐</td> <td>类型/可关闭/带操作/banner 模式</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>进度条</td> <td>⭐⭐⭐⭐</td> <td>确定/不确定/环形/步骤进度</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>加载 Spinner</td> <td>⭐⭐⭐⭐</td> <td>尺寸/颜色/全局/局部</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>骨架屏</td> <td>⭐⭐⭐⭐⭐</td> <td>形状(circle/rect/text)/动画(pulse/wave)</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>空状态</td> <td>⭐⭐⭐⭐⭐</td> <td>插图/标题/描述/操作按钮</td> <td></td> </tr> <tr> <td><strong>组件-反馈</strong></td> <td>结果页</td> <td>⭐⭐⭐</td> <td>成功/失败/处理中 状态展示</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Badge 徽标</td> <td>⭐⭐⭐⭐</td> <td>dot/number/text/颜色/位置</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Tag 标签</td> <td>⭐⭐⭐⭐</td> <td>颜色/可关闭/可选中/边框</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Avatar 头像</td> <td>⭐⭐⭐⭐</td> <td>尺寸/形状/fallback/状态点/分组</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Tooltip</td> <td>⭐⭐⭐⭐⭐</td> <td>方向/延迟/触发方式/箭头</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Collapse 折叠</td> <td>⭐⭐⭐</td> <td>手风琴/多开/动画/禁用</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Tree 树形</td> <td>⭐⭐⭐</td> <td>展开/选择/勾选/搜索/拖拽排序</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Timeline 时间线</td> <td>⭐⭐⭐</td> <td>左右布局/自定义节点/时间标记</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Statistic 统计</td> <td>⭐⭐⭐</td> <td>数值/趋势/前后缀/动画计数</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Divider 分割线</td> <td>⭐⭐⭐</td> <td>水平/垂直/带文字</td> <td></td> </tr> <tr> <td><strong>组件-数据展示</strong></td> <td>Rate 评分</td> <td>⭐⭐</td> <td>星级/半星/自定义图标/只读</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>表单验证联动</td> <td>⭐⭐⭐⭐⭐</td> <td>输入→验证→错误→修正→成功完整流程</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>表格筛选分页</td> <td>⭐⭐⭐⭐</td> <td>筛选→重置分页→结果数联动</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>搜索防抖空态</td> <td>⭐⭐⭐⭐</td> <td>输入→防抖→loading→结果/空态</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>弹窗表单验证</td> <td>⭐⭐⭐⭐</td> <td>弹窗内完整表单验证+提交流程</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>侧边栏响应式</td> <td>⭐⭐⭐⭐</td> <td>大屏展开→小屏折叠/抽屉</td> <td></td> </tr> <tr> <td><strong>组件-组合</strong></td> <td>文件上传完整流</td> <td>⭐⭐⭐</td> <td>拖入→上传中→完成→预览/重试</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>过渡时长</td> <td>⭐⭐⭐⭐⭐</td> <td>fast(150ms)/normal(200ms)/slow(300ms)</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>缓动曲线</td> <td>⭐⭐⭐⭐⭐</td> <td>ease-in-out/cubic-bezier 是否 token 化</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>Hover 效果</td> <td>⭐⭐⭐⭐⭐</td> <td>可交互元素是否有 hover 反馈</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>Active 效果</td> <td>⭐⭐⭐⭐</td> <td>按下是否有视觉反馈</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>Focus 指示</td> <td>⭐⭐⭐⭐⭐</td> <td>focus-visible 环/outline</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>Focus 陷阱</td> <td>⭐⭐⭐⭐</td> <td>弹窗内 Tab 循环</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>拖拽交互</td> <td>⭐⭐⭐</td> <td>拖拽手柄/放置区域/排序反馈</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>手势支持</td> <td>⭐⭐⭐</td> <td>滑动/长按/双击/捏合缩放</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>右键菜单</td> <td>⭐⭐⭐</td> <td>自定义上下文菜单</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>快捷键</td> <td>⭐⭐⭐</td> <td>全局/局部快捷键定义</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>防抖/节流</td> <td>⭐⭐⭐⭐</td> <td>搜索/滚动/resize 事件防抖</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>乐观更新</td> <td>⭐⭐⭐</td> <td>操作即时反馈 + 后台同步</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>撤销/重做</td> <td>⭐⭐</td> <td>操作历史栈</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>骨架加载</td> <td>⭐⭐⭐⭐</td> <td>首屏/组件级 skeleton</td> <td></td> </tr> <tr> <td><strong>交互层</strong></td> <td>渐进式加载</td> <td>⭐⭐⭐</td> <td>lazy-load / 分页 / 无限滚动</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>移动端布局</td> <td>⭐⭐⭐⭐⭐</td> <td>单列/底部导航/汉堡菜单</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>平板布局</td> <td>⭐⭐⭐⭐</td> <td>双列/侧边栏折叠</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>桌面布局</td> <td>⭐⭐⭐⭐⭐</td> <td>多列/侧边栏展开/wide screen</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>触摸目标</td> <td>⭐⭐⭐⭐⭐</td> <td>可点击区域≥44×44px</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>字号缩放</td> <td>⭐⭐⭐⭐</td> <td>小屏标题是否适当缩小</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>间距缩放</td> <td>⭐⭐⭐⭐</td> <td>小屏间距是否缩小</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>图片响应式</td> <td>⭐⭐⭐⭐</td> <td>srcset/sizes/art direction</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>导航变形</td> <td>⭐⭐⭐⭐</td> <td>desktop→hamburger 底部导航</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>表格响应式</td> <td>⭐⭐⭐⭐</td> <td>列隐藏/卡片化/横向滚动</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>横竖屏适配</td> <td>⭐⭐⭐</td> <td>orientation 变化布局调整</td> <td></td> </tr> <tr> <td><strong>响应式层</strong></td> <td>打印样式</td> <td>⭐⭐</td> <td>@media print 隐藏导航等</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>语义化 HTML</td> <td>⭐⭐⭐⭐⭐</td> <td>header/nav/main/section/footer/article</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>ARIA 标签</td> <td>⭐⭐⭐⭐⭐</td> <td>aria-label/aria-describedby/aria-live</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>ARIA 角色</td> <td>⭐⭐⭐⭐</td> <td>role=&ldquo;button&rdquo;/&ldquo;dialog&rdquo;/&ldquo;tablist&rdquo;</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>颜色对比度</td> <td>⭐⭐⭐⭐⭐</td> <td>正文≥4.5:1 / 大文本≥3:1</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>键盘导航</td> <td>⭐⭐⭐⭐⭐</td> <td>所有功能可通过键盘操作</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>Tab 顺序</td> <td>⭐⭐⭐⭐</td> <td>tabindex 逻辑顺序</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>跳过导航</td> <td>⭐⭐⭐</td> <td>skip-to-content 链接</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>焦点可见</td> <td>⭐⭐⭐⭐⭐</td> <td>focus-visible 样式清晰</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>焦点陷阱</td> <td>⭐⭐⭐⭐</td> <td>弹窗内焦点不外溢</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>屏幕阅读器文本</td> <td>⭐⭐⭐⭐</td> <td>sr-only / visually-hidden</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>图片 alt 文本</td> <td>⭐⭐⭐⭐⭐</td> <td>所有 img 有有意义的 alt</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>表单标签关联</td> <td>⭐⭐⭐⭐⭐</td> <td>label htmlFor / aria-labelledby</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>错误提示关联</td> <td>⭐⭐⭐⭐</td> <td>aria-describedby 指向错误消息</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>减少动画偏好</td> <td>⭐⭐⭐⭐</td> <td>prefers-reduced-motion 尊重</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>高对比模式</td> <td>⭐⭐⭐</td> <td>prefers-contrast 适配</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>减少透明度</td> <td>⭐⭐</td> <td>prefers-reduced-transparency</td> <td></td> </tr> <tr> <td><strong>无障碍层</strong></td> <td>动态字体</td> <td>⭐⭐⭐</td> <td>rem 单位支持用户字号设置</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>亮色模式</td> <td>⭐⭐⭐⭐⭐</td> <td>完整的 light theme tokens</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>暗色模式</td> <td>⭐⭐⭐⭐⭐</td> <td>完整的 dark theme tokens</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>主题切换器</td> <td>⭐⭐⭐⭐</td> <td>手动/跟随系统/记忆偏好</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>切换过渡</td> <td>⭐⭐⭐⭐</td> <td>模式切换时平滑过渡</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>CSS 变量体系</td> <td>⭐⭐⭐⭐⭐</td> <td>所有设计值用 CSS custom properties</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>品牌定制能力</td> <td>⭐⭐⭐</td> <td>覆盖 CSS 变量即可换肤</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>图片主题适配</td> <td>⭐⭐⭐</td> <td>暗色模式下图片降低亮度/反色</td> <td></td> </tr> <tr> <td><strong>主题层</strong></td> <td>第三方嵌入适配</td> <td>⭐⭐</td> <td>嵌入组件跟随主题</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>入场动画</td> <td>⭐⭐⭐⭐</td> <td>fade/slide/scale/expand</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>退场动画</td> <td>⭐⭐⭐⭐</td> <td>fade-out/collapse/slide-out</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>列表动画</td> <td>⭐⭐⭐</td> <td>列表项交错入场(stagger)</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>页面过渡</td> <td>⭐⭐⭐</td> <td>路由切换过渡效果</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>展开折叠</td> <td>⭐⭐⭐⭐</td> <td>手风琴/面板展开收起动画</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>弹窗动画</td> <td>⭐⭐⭐⭐</td> <td>modal/drawer 进出动画</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>拖拽反馈</td> <td>⭐⭐⭐</td> <td>拖起/放下/排序占位动画</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>数值变化动画</td> <td>⭐⭐⭐</td> <td>数字递增/递减动画</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>微交互</td> <td>⭐⭐⭐⭐</td> <td>点赞/收藏/勾选的动效反馈</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>加载动画</td> <td>⭐⭐⭐⭐</td> <td>spinner/skeleton/pulse</td> <td></td> </tr> <tr> <td><strong>动效层</strong></td> <td>prefers-reduced-motion</td> <td>⭐⭐⭐⭐</td> <td>尊重用户减少动画偏好</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标集选择</td> <td>⭐⭐⭐⭐⭐</td> <td>Lucide/Heroicons/Phosphor 等统一</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标尺寸阶梯</td> <td>⭐⭐⭐⭐</td> <td>xs(12)/sm(16)/md(20)/lg(24)/xl(32)</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标线条粗细</td> <td>⭐⭐⭐⭐</td> <td>1.5px/2px 是否统一</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标颜色</td> <td>⭐⭐⭐</td> <td>继承文字色/独立色/语义色</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标+文字对齐</td> <td>⭐⭐⭐⭐</td> <td>图标与文字垂直居中对齐</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>图标可点击区域</td> <td>⭐⭐⭐</td> <td>纯图标按钮点击热区足够</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>暗色模式图标</td> <td>⭐⭐⭐</td> <td>SVG fill 随主题切换</td> <td></td> </tr> <tr> <td><strong>图标层</strong></td> <td>自定义 SVG</td> <td>⭐⭐⭐</td> <td>自定义图标保持风格一致</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>占位符</td> <td>⭐⭐⭐⭐</td> <td>加载中/加载失败/无图占位</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>懒加载</td> <td>⭐⭐⭐⭐⭐</td> <td>loading=&ldquo;lazy&rdquo; / IntersectionObserver</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>响应式图片</td> <td>⭐⭐⭐⭐</td> <td>srcset + sizes 属性</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>宽高比锁定</td> <td>⭐⭐⭐⭐</td> <td>aspect-ratio 防止布局抖动</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>骨架加载</td> <td>⭐⭐⭐⭐</td> <td>图片区域骨架屏</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>图片裁剪模式</td> <td>⭐⭐⭐</td> <td>cover/contain/fill 规范</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>图片格式优化</td> <td>⭐⭐⭐</td> <td>WebP/AVIF 优先 + fallback</td> <td></td> </tr> <tr> <td><strong>图片层</strong></td> <td>压缩质量</td> <td>⭐⭐⭐</td> <td>质量/体积权衡标准</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>表单布局</td> <td>⭐⭐⭐⭐⭐</td> <td>水平/垂直/内联</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>标签位置</td> <td>⭐⭐⭐⭐⭐</td> <td>上/左/左对齐/右对齐</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>必填标记</td> <td>⭐⭐⭐⭐⭐</td> <td>星号/文字 标识必填项</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>可选标记</td> <td>⭐⭐⭐</td> <td>(可选) 文字标识可选项</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>帮助文本</td> <td>⭐⭐⭐⭐</td> <td>字段下方说明文字</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>验证时机</td> <td>⭐⭐⭐⭐</td> <td>blur/submit/实时 验证策略</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>错误提示位置</td> <td>⭐⭐⭐⭐⭐</td> <td>字段下方/右侧/汇总</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>错误提示样式</td> <td>⭐⭐⭐⭐</td> <td>颜色/图标/动画一致性</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>成功提示</td> <td>⭐⭐⭐</td> <td>字段级成功状态反馈</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>字段分组</td> <td>⭐⭐⭐⭐</td> <td>fieldset/分组标题/分割线</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>字段依赖联动</td> <td>⭐⭐⭐</td> <td>A 字段值影响 B 字段显隐/选项</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>表单进度</td> <td>⭐⭐⭐</td> <td>多步表单进度指示</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>表单草稿保存</td> <td>⭐⭐</td> <td>防止意外丢失</td> <td></td> </tr> <tr> <td><strong>表单层</strong></td> <td>提交状态</td> <td>⭐⭐⭐⭐</td> <td>提交中 loading + 防重复提交</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>标题层级规范</td> <td>⭐⭐⭐⭐⭐</td> <td>h1→h2→h3 不跳级</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>段落长度</td> <td>⭐⭐⭐</td> <td>单段≤3-4 行</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>列表使用</td> <td>⭐⭐⭐</td> <td>≥3 项用列表代替段落</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>链接样式</td> <td>⭐⭐⭐⭐</td> <td>下划线/颜色区分/visited 状态</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>代码块样式</td> <td>⭐⭐⭐⭐</td> <td>语法高亮/行号/复制按钮/语言标签</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>引用样式</td> <td>⭐⭐⭐</td> <td>blockquote 视觉区分</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>富文本排版</td> <td>⭐⭐⭐</td> <td>表格/图片/脚注 在内容中样式</td> <td></td> </tr> <tr> <td><strong>内容层</strong></td> <td>长文本可读性</td> <td>⭐⭐⭐⭐</td> <td>内容区最大宽度（60-75 字符）</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>文字方向</td> <td>⭐⭐⭐</td> <td>LTR/RTL 布局支持</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>文字长度适配</td> <td>⭐⭐⭐</td> <td>不同语言文案长度差异处理</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>日期/数字格式</td> <td>⭐⭐⭐</td> <td>locale 感知的格式化</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>货币格式</td> <td>⭐⭐⭐</td> <td>符号位置/小数位</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>复数形式</td> <td>⭐⭐</td> <td>i18n 复数规则处理</td> <td></td> </tr> <tr> <td><strong>国际化层</strong></td> <td>字体回退</td> <td>⭐⭐⭐</td> <td>多语言字体栈</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>首屏加载</td> <td>⭐⭐⭐⭐⭐</td> <td>FCP/LCP 指标</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>交互响应</td> <td>⭐⭐⭐⭐⭐</td> <td>INP/FID 指标</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>视觉稳定性</td> <td>⭐⭐⭐⭐⭐</td> <td>CLS 指标</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>代码分割</td> <td>⭐⭐⭐⭐</td> <td>路由级/组件级 lazy loading</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>资源预加载</td> <td>⭐⭐⭐</td> <td>preload/prefetch 关键资源</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>字体优化</td> <td>⭐⭐⭐⭐</td> <td>font-display:swap / 子集化 / 预加载</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>图片优化</td> <td>⭐⭐⭐⭐</td> <td>响应式/懒加载/格式/尺寸预留</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>动画性能</td> <td>⭐⭐⭐</td> <td>只使用 transform/opacity</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>渲染优化</td> <td>⭐⭐⭐</td> <td>虚拟列表 / 减少 DOM 深度</td> <td></td> </tr> <tr> <td><strong>性能层</strong></td> <td>缓存策略</td> <td>⭐⭐⭐</td> <td>静态资源缓存/CDN</td> <td></td> </tr> <tr> <td><strong>安全层</strong></td> <td>XSS 防护</td> <td>⭐⭐⭐⭐⭐</td> <td>用户内容转义/CSP</td> <td></td> </tr> <tr> <td><strong>安全层</strong></td> <td>CSRF 防护</td> <td>⭐⭐⭐⭐</td> <td>Token/SameSite Cookie</td> <td></td> </tr> <tr> <td><strong>安全层</strong></td> <td>敏感信息遮蔽</td> <td>⭐⭐⭐⭐</td> <td>密码/身份证/银行卡号掩码</td> <td></td> </tr> <tr> <td><strong>安全层</strong></td> <td>输入净化</td> <td>⭐⭐⭐⭐</td> <td>HTML/URL/SQL 输入过滤</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>平滑滚动</td> <td>⭐⭐⭐</td> <td>scroll-behavior: smooth</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>滚动阴影</td> <td>⭐⭐⭐⭐</td> <td>内容滚动时 header/footer 底部阴影</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>自定义滚动条</td> <td>⭐⭐⭐</td> <td>webkit-scrollbar 样式</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>锁定背景滚动</td> <td>⭐⭐⭐⭐</td> <td>弹窗打开时 body overflow:hidden</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>光标类型</td> <td>⭐⭐⭐</td> <td>pointer/not-allowed/wait/text/grab</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>选区样式</td> <td>⭐⭐⭐</td> <td>::selection 背景+文字色</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>占位符样式</td> <td>⭐⭐⭐</td> <td>::placeholder 颜色</td> <td></td> </tr> <tr> <td><strong>滚动与光标层</strong></td> <td>滚动进度指示</td> <td>⭐⭐</td> <td>页面顶部阅读进度条</td> <td></td> </tr> <tr> <td><strong>错误层</strong></td> <td>404 页面</td> <td>⭐⭐⭐⭐</td> <td>插图+描述+返回入口</td> <td></td> </tr> <tr> <td><strong>错误层</strong></td> <td>500 页面</td> <td>⭐⭐⭐⭐</td> <td>插图+描述+重试</td> <td></td> </tr> <tr> <td><strong>错误层</strong></td> <td>网络错误</td> <td>⭐⭐⭐⭐</td> <td>断网提示+重试</td> <td></td> </tr> <tr> <td><strong>错误层</strong></td> <td>空列表</td> <td>⭐⭐⭐⭐⭐</td> <td>插图+描述+创建入口</td> <td></td> </tr> <tr> <td><strong>错误层</strong></td> <td>组件错误边界</td> <td>⭐⭐⭐⭐</td> <td>组件崩溃时 fallback</td> <td></td> </tr> <tr> <td><strong>高级组件</strong></td> <td>轮播组件</td> <td>⭐⭐⭐</td> <td>指示器/箭头/自动播放/触摸</td> <td></td> </tr> <tr> <td><strong>高级组件</strong></td> <td>命令面板</td> <td>⭐⭐⭐</td> <td>Ctrl+K/搜索/键盘导航</td> <td></td> </tr> <tr> <td><strong>高级组件</strong></td> <td>图片灯箱</td> <td>⭐⭐</td> <td>缩放/切换/关闭</td> <td></td> </tr> <tr> <td><strong>高级组件</strong></td> <td>通知中心</td> <td>⭐⭐⭐</td> <td>未读/面板/已读/分类</td> <td></td> </tr> <tr> <td><strong>高级组件</strong></td> <td>Cookie 同意</td> <td>⭐⭐</td> <td>接受/拒绝/详细选项</td> <td></td> </tr> <tr> <td><strong>安全层</strong></td> <td>点击劫持防护</td> <td>⭐⭐⭐</td> <td>X-Frame-Options / frame-ancestors</td> <td></td> </tr> </tbody> </table> <hr> <p><strong>填写说明：</strong></p> <ul> <li><strong>优先级</strong>：⭐(低) ~ ⭐⭐⭐⭐⭐(高)，5 星为必须做到</li> <li><strong>验证方式</strong>：如何判断该检查项是否已实现</li> <li><strong>个人备注</strong>：留空供个人填写</li> </ul> <hr> <h2 id="前言">前言</h2> <h3 id="什么是技能颗粒度">什么是技能颗粒度</h3> <p>在反反爬虫技术领域，我们将技术体系拆解为&quot;基础层→环境层→行为层→持久层→验证层→架构层&quot;六大层级，每个层级包含数十个可独立验证的原子化技术点。这种思路可以迁移到前端 UI 设计领域。</p> <p><strong>技能颗粒度 = 将设计决策拆解到最小可验证单元。</strong></p> <p>每个颗粒度检查点满足三个条件：</p> <ol> <li><strong>可独立验证</strong> —— 明确知道&quot;做到了&quot;还是&quot;没做到&quot;</li> <li><strong>可独立描述</strong> —— 能用一句话精确描述给 AI 或设计师</li> <li><strong>可独立实现</strong> —— 不依赖其他未完成的检查点即可实现</li> </ol> <h3 id="为什么需要原子化">为什么需要原子化</h3> <p>传统设计流程的痛点：</p> <ul> <li>设计师说&quot;做得好看一点&quot; → AI 不知道具体要改什么</li> <li>审查时说&quot;这里不统一&quot; → 没有标准判断什么叫统一</li> <li>新页面开发时 → 每次都要重新想按钮该多大、间距该多宽</li> </ul> <p>原子化后：</p> <ul> <li>&ldquo;实现按钮的 5 种变体、3 种尺寸、6 种状态&rdquo; → AI 精确输出</li> <li>&ldquo;检查所有可交互元素是否有 hover 反馈&rdquo; → 有明确验收标准</li> <li>新页面 → 从检查清单中勾选需要的组件和样式</li> </ul> <h3 id="本文受众">本文受众</h3> <ul> <li>使用 AI 辅助前端开发的工程师</li> <li>前端设计师 / Design System 维护者</li> <li>技术负责人 / 代码审查者</li> <li>需要向前端传达设计需求的 PM</li> </ul> <hr> <h2 id="检查项层级全景">检查项层级全景</h2> <pre tabindex="0"><code>前端 UI 设计技能颗粒度 │ ├── 排版层（Typography） │ ├── 字体族 │ ├── 字号阶梯 │ ├── 行高 / 字重 / 字间距 │ ├── 标题层级 │ ├── 文本截断 / 对齐 / 装饰 │ ├── 中英文混排 │ └── 等宽数字 / CJK断行 / 选中样式 │ ├── 颜色层（Color） │ ├── 品牌色 / 语义色 / 中性色 │ ├── 文本色 / 背景色 / 边框色 │ ├── 状态色 / 交互反馈色 │ ├── 暗色模式映射 │ └── 对比度 / 色盲友好 │ ├── 间距层（Spacing） │ ├── 基准单位 │ ├── 间距阶梯 │ ├── 内间距 / 外间距 │ └── 响应式间距 │ ├── 圆角层 + 阴影层（Border &amp; 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 &amp; Cursor） │ ├── 平滑滚动 / 滚动捕捉 │ ├── 滚动阴影 / 进度指示 │ ├── 自定义滚动条 │ ├── 锁定背景滚动 │ ├── 光标类型（pointer/not-allowed/wait） │ └── 选区 / 占位符样式 │ ├── 错误与空状态层（Error &amp; Empty） │ ├── 404 / 500 / 网络错误 │ ├── 表单错误汇总 │ ├── 空列表 / 空搜索 │ ├── 图片加载失败 │ └── 组件错误边界 │ └── 高级组件层（Advanced Components） ├── 轮播（Carousel） ├── 命令面板（Command Palette） ├── 图片灯箱（Lightbox） ├── 通知中心 └── Cookie 同意横幅 </code></pre><hr> <h1 id="一排版层typography">一、排版层（Typography）</h1> <blockquote> <p>排版是 UI 设计的骨架。排版层检查项确保文字在页面上的呈现是系统化、一致、可读的。</p> </blockquote> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>T-01</td> <td>字体族（font-family）</td> <td>定义 primary（正文）、heading（标题）、mono（代码）、fallback 四组</td> <td>未定义 fallback 导致系统字体混乱</td> </tr> <tr> <td>T-02</td> <td>字号阶梯（font-size）</td> <td>定义 xs(12)/sm(14)/base(16)/lg(18)/xl(20)/2xl(24)/3xl(30)/4xl(36) 递进</td> <td>随意使用 px 值，导致页面字号不统一</td> </tr> <tr> <td>T-03</td> <td>行高（line-height）</td> <td>定义 tight(1.25)/normal(1.5)/relaxed(1.75)/loose(2)</td> <td>正文行高过紧凑导致阅读困难</td> </tr> <tr> <td>T-04</td> <td>字重（font-weight）</td> <td>定义 light(300)/normal(400)/medium(500)/semibold(600)/bold(700)</td> <td>只用 normal 和 bold 两级，视觉层级不足</td> </tr> <tr> <td>T-05</td> <td>字间距（letter-spacing）</td> <td>定义 tighter(-0.05em)/tight(-0.025em)/normal(0)/wide(0.025em)/wider(0.05em)/widest(0.1em)</td> <td>大标题需要负字间距但未调整</td> </tr> <tr> <td>T-06</td> <td>标题层级 h1-h6</td> <td>每级标题字号/字重/行高/间距都有明确定义，视觉递减</td> <td>h3 比 h2 更大或跳过 h2 直接用 h3</td> </tr> <tr> <td>T-07</td> <td>正文排版</td> <td>body 字号≥14px（中文≥16px），行高≥1.5，段间距一致</td> <td>移动端字号小于 14px</td> </tr> <tr> <td>T-08</td> <td>辅助文本</td> <td>small(12px)/caption(12px)/overline(12px uppercase) 有定义</td> <td>辅助文字与正文区分不够明显</td> </tr> <tr> <td>T-09</td> <td>单行截断</td> <td>overflow:hidden + text-overflow:ellipsis + white-space:nowrap</td> <td>忘记设 width/max-width 导致截断不生效</td> </tr> <tr> <td>T-10</td> <td>多行截断</td> <td>-webkit-line-clamp:N + display:-webkit-box + -webkit-box-orient:vertical</td> <td>忘记设 overflow:hidden</td> </tr> <tr> <td>T-11</td> <td>文本对齐</td> <td>left/center/right/justify 有对应工具类</td> <td>justify 导致中文词间距异常</td> </tr> <tr> <td>T-12</td> <td>文本装饰</td> <td>underline/strikethrough/overline 样式</td> <td>链接下划线颜色与文字色不匹配</td> </tr> <tr> <td>T-13</td> <td>文本转换</td> <td>uppercase/lowercase/capitalize 工具类</td> <td>英文标题全大写但字间距未调整</td> </tr> <tr> <td>T-14</td> <td>中英文混排</td> <td>中英文之间自动添加间距；标点避首尾（hanging-punctuation）</td> <td>中英文紧贴不美观</td> </tr> <tr> <td>T-15</td> <td>连字符</td> <td>hyphens:auto 在窄容器中启用</td> <td>英文长单词溢出容器</td> </tr> <tr> <td>T-16</td> <td>段落间距</td> <td>p + p 使用 margin-top 而非双重 margin</td> <td>首段也带 margin-top 导致顶部空隙</td> </tr> <tr> <td>T-17</td> <td>代码文本</td> <td>inline code 有独立字体族/背景色/圆角/内边距</td> <td>inline code 背景色与代码块不一致</td> </tr> <tr> <td>T-18</td> <td>引用文本</td> <td>blockquote 有左边框/缩进/背景色区分</td> <td>引用块与正文视觉无区分</td> </tr> <tr> <td>T-19</td> <td>列表样式</td> <td>ul/ol 有统一样式，列表项间距一致</td> <td>列表符号位置与文字对齐不一致</td> </tr> <tr> <td>T-20</td> <td>文字颜色</td> <td>text-primary/secondary/tertiary/disabled/inverse 有定义</td> <td>灰色文字在暗色模式下不可见</td> </tr> <tr> <td>T-21</td> <td>等宽数字</td> <td>font-variant-numeric: tabular-nums 用于数字对齐（表格/金额）</td> <td>数字宽度不一导致列不对齐</td> </tr> <tr> <td>T-22</td> <td>CJK 断行</td> <td>word-break: break-all / overflow-wrap: break-word / line-break: strict</td> <td>中文长 URL 溢出容器</td> </tr> <tr> <td>T-23</td> <td>竖排文字</td> <td>writing-mode: vertical-rl 用于中文竖排场景</td> <td>无竖排支持</td> </tr> <tr> <td>T-24</td> <td>空白处理</td> <td>white-space: normal/nowrap/pre/pre-wrap/pre-line 覆盖</td> <td>代码/预格式文本折行异常</td> </tr> <tr> <td>T-25</td> <td>文字选中样式</td> <td>::selection 定义背景色+文字色</td> <td>选中文字为默认蓝色</td> </tr> </tbody> </table> <hr> <h1 id="二颜色层color">二、颜色层（Color）</h1> <blockquote> <p>颜色层确保所有颜色决策是系统化的，而非随意取值。</p> </blockquote> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>C-01</td> <td>品牌色</td> <td>primary/secondary/accent 各含 50-950 共 11 个色阶</td> <td>只有主色没有色阶，无法做 hover/active 变体</td> </tr> <tr> <td>C-02</td> <td>语义色</td> <td>success(绿)/warning(黄)/error(红)/info(蓝) 各含色阶</td> <td>warning 色在白底上对比度不足</td> </tr> <tr> <td>C-03</td> <td>中性色阶梯</td> <td>gray-50/100/200/300/400/500/600/700/800/900/950 完整</td> <td>灰色色阶跳跃不均匀</td> </tr> <tr> <td>C-04</td> <td>主文字色</td> <td>text-primary(≈gray-900)</td> <td>文字色纯黑(#000)对比过强</td> </tr> <tr> <td>C-05</td> <td>次文字色</td> <td>text-secondary(≈gray-500)</td> <td>次要文字过浅不可读</td> </tr> <tr> <td>C-06</td> <td>占位文字色</td> <td>text-placeholder(≈gray-400)</td> <td>placeholder 比正文还深</td> </tr> <tr> <td>C-07</td> <td>禁用文字色</td> <td>text-disabled(≈gray-300)</td> <td>禁用文字与正常文字区分不够</td> </tr> <tr> <td>C-08</td> <td>反色文字</td> <td>text-inverse(白色/暗色上的亮色)</td> <td>亮色文字在浅色背景上不可见</td> </tr> <tr> <td>C-09</td> <td>页面背景色</td> <td>bg-page(≈gray-50/white)</td> <td>纯白背景与卡片无区分度</td> </tr> <tr> <td>C-10</td> <td>卡片背景色</td> <td>bg-card(white)</td> <td>卡片与页面背景对比不够</td> </tr> <tr> <td>C-11</td> <td>遮罩背景色</td> <td>bg-overlay(rgba(0,0,0,0.5))</td> <td>遮罩过透明或过不透明</td> </tr> <tr> <td>C-12</td> <td>默认边框色</td> <td>border-default(≈gray-200)</td> <td>边框色过深显得粗重</td> </tr> <tr> <td>C-13</td> <td>悬浮边框色</td> <td>border-hover(≈gray-300)</td> <td>hover 时边框无变化</td> </tr> <tr> <td>C-14</td> <td>焦点边框色</td> <td>border-focus(primary色)</td> <td>focus 时边框色不够醒目</td> </tr> <tr> <td>C-15</td> <td>错误边框色</td> <td>border-error(error色)</td> <td>错误边框色与文本错误色不一致</td> </tr> <tr> <td>C-16</td> <td>链接色</td> <td>link(≈primary)/link-hover/link-visited</td> <td>已访问链接色未定义</td> </tr> <tr> <td>C-17</td> <td>Hover 背景色</td> <td>hover 背景（≈primary-50/gray-50）</td> <td>hover 变化太小感知不到</td> </tr> <tr> <td>C-18</td> <td>Active 背景色</td> <td>active 背景（≈primary-100/gray-100）</td> <td>active 与 hover 视觉无区别</td> </tr> <tr> <td>C-19</td> <td>Disabled 背景</td> <td>disabled 背景（≈gray-100）</td> <td>disabled 组件看起来还可点击</td> </tr> <tr> <td>C-20</td> <td>暗色模式映射</td> <td>所有颜色有 dark: 变体</td> <td>暗色模式下直接反色导致不协调</td> </tr> <tr> <td>C-21</td> <td>暗色中性色方向</td> <td>dark 模式中性色阶反转（900→50）</td> <td>暗色模式用了亮色模式的灰色</td> </tr> <tr> <td>C-22</td> <td>暗色背景</td> <td>dark:bg-page(≈gray-900/950)</td> <td>暗色背景纯黑刺眼</td> </tr> <tr> <td>C-23</td> <td>暗色表面</td> <td>dark:bg-card(≈gray-800)</td> <td>暗色卡片与背景对比不够</td> </tr> <tr> <td>C-24</td> <td>颜色对比度-正文</td> <td>正文与背景对比度≥4.5:1（WCAG AA）</td> <td>灰色文字在浅灰背景上对比不足</td> </tr> <tr> <td>C-25</td> <td>颜色对比度-大文本</td> <td>大文本(≥18px/14px bold)对比度≥3:1</td> <td>标题对比度不够</td> </tr> <tr> <td>C-26</td> <td>颜色对比度-UI元素</td> <td>图标/边框/UI 组件对比度≥3:1</td> <td>禁用状态对比度不足</td> </tr> <tr> <td>C-27</td> <td>非颜色传达信息</td> <td>不仅靠颜色区分状态（加图标/文字/形状）</td> <td>红绿颜色区分对色盲不友好</td> </tr> <tr> <td>C-28</td> <td>渐变色 token</td> <td>定义品牌渐变（如 primary→accent）</td> <td>渐变色随意取值</td> </tr> <tr> <td>C-29</td> <td>透明度 token</td> <td>opacity-0/5/10/20/25/50/75/90/95/100</td> <td>透明度取值随意</td> </tr> <tr> <td>C-30</td> <td>阴影色 token</td> <td>shadow 使用语义色而非硬编码黑色</td> <td>暗色模式阴影仍然用黑色</td> </tr> </tbody> </table> <hr> <h1 id="三间距层spacing">三、间距层（Spacing）</h1> <blockquote> <p>间距层确保页面呼吸感一致，所有间距值来自同一套系统。</p> </blockquote> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>S-01</td> <td>基准单位</td> <td>基于 4px 或 8px 网格</td> <td>混用 3px/5px/7px 等非基准值</td> </tr> <tr> <td>S-02</td> <td>间距阶梯</td> <td>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)</td> <td>缺少某些阶梯，被迫用非标准值</td> </tr> <tr> <td>S-03</td> <td>组件内间距（padding）</td> <td>所有组件 padding 值来自间距阶梯</td> <td>按钮和输入框内间距不匹配</td> </tr> <tr> <td>S-04</td> <td>组件外间距（margin）</td> <td>margin 值来自间距阶梯</td> <td>用 margin 微调位置而非布局</td> </tr> <tr> <td>S-05</td> <td>栅格间距（gap）</td> <td>flex/grid gap 值 token 化</td> <td>不同区域 gap 值不一致</td> </tr> <tr> <td>S-06</td> <td>响应式间距</td> <td>小屏间距自动缩小</td> <td>移动端和桌面端使用相同间距</td> </tr> <tr> <td>S-07</td> <td>区块间距</td> <td>section 间距统一（如 64px/96px/128px）</td> <td>不同页面区块间距不一致</td> </tr> <tr> <td>S-08</td> <td>容器内间距</td> <td>页面容器 padding 水平（如 16px/24px）</td> <td>内容贴边，无内间距</td> </tr> <tr> <td>S-09</td> <td>列表项间距</td> <td>列表项间距统一</td> <td>列表项间距比段落间距还大</td> </tr> <tr> <td>S-10</td> <td>负间距</td> <td>支持负 margin 用于偏移/重叠</td> <td>无负间距能力</td> </tr> <tr> <td>S-11</td> <td>视口相对间距</td> <td>dvh/svh/lvh 单位用于全屏区域/hero 区域</td> <td>移动端 vh 不准确</td> </tr> <tr> <td>S-12</td> <td>Clamp 流式间距</td> <td>clamp(min, preferred, max) 平滑过渡间距</td> <td>断点跳变而非平滑缩放</td> </tr> <tr> <td>S-13</td> <td>逻辑间距属性</td> <td>margin-inline/margin-block/padding-inline/padding-block 替代物理属性</td> <td>RTL 布局间距反向</td> </tr> <tr> <td>S-14</td> <td>间距密度变体</td> <td>compact(密集数据 UI)/comfortable(营销页)/spacious(阅读) 三档</td> <td>所有场景用同一密度</td> </tr> <tr> <td>S-15</td> <td>组件内微间距</td> <td>icon-to-text gap / avatar-to-name gap / badge-to-text gap 统一</td> <td>图标与文字间距随意</td> </tr> <tr> <td>S-16</td> <td>容器查询间距</td> <td>@container 间距随容器宽度变化，非视口</td> <td>侧边栏内间距不合理</td> </tr> <tr> <td>S-17</td> <td>垂直韵律</td> <td>所有纵向间距为基准单位的整数倍，保持韵律</td> <td>间距值不规律</td> </tr> <tr> <td>S-18</td> <td>间距语义命名</td> <td>spacing-xs(4)/sm(8)/md(16)/lg(24)/xl(32)/2xl(48) 语义别名</td> <td>只有数字索引无语义名</td> </tr> <tr> <td>S-19</td> <td>自动外边距</td> <td>margin:auto 作为剩余空间分配策略</td> <td>flex/grid 子项间距不均匀</td> </tr> <tr> <td>S-20</td> <td>间距比例系数</td> <td>响应式间距按比例缩放（sm=75% of lg）</td> <td>各断点间距独立设置无规律</td> </tr> </tbody> </table> <hr> <h1 id="四圆角层--阴影层border--shadow">四、圆角层 + 阴影层（Border &amp; Shadow）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>R-01</td> <td>圆角阶梯</td> <td>none(0)/sm(2)/md(6)/lg(8)/xl(12)/2xl(16)/3xl(24)/full(9999px)</td> <td>圆角值随意取</td> </tr> <tr> <td>R-02</td> <td>按钮圆角</td> <td>与输入框圆角匹配</td> <td>按钮和输入框圆角不一致</td> </tr> <tr> <td>R-03</td> <td>卡片圆角</td> <td>lg 或 xl 级别</td> <td>卡片圆角过小或过大</td> </tr> <tr> <td>R-04</td> <td>弹窗圆角</td> <td>lg 或 xl 级别</td> <td>弹窗圆角与卡片不匹配</td> </tr> <tr> <td>R-05</td> <td>头像圆角</td> <td>full(圆形) 或 lg(圆角矩形)</td> <td>头像列表中圆形方形混用</td> </tr> <tr> <td>R-06</td> <td>Toast 圆角</td> <td>md 级别</td> <td>Toast 圆角与整体风格不搭</td> </tr> <tr> <td>R-07</td> <td>阴影阶梯</td> <td>sm/md/lg/xl/2xl/inner</td> <td>只有 none 和一个大阴影</td> </tr> <tr> <td>R-08</td> <td>组件阴影一致性</td> <td>同层级组件用同一级阴影</td> <td>卡片阴影深浅不一</td> </tr> <tr> <td>R-09</td> <td>悬浮阴影变化</td> <td>hover 时阴影从 sm→md 或 md→lg</td> <td>hover 无阴影变化</td> </tr> <tr> <td>R-10</td> <td>暗色模式阴影</td> <td>dark 模式阴影更亮（使用深灰而非纯黑）</td> <td>暗色模式阴影不可见</td> </tr> <tr> <td>R-11</td> <td>边框宽度</td> <td>定义 border-width(1px/2px) token</td> <td>边框粗细不统一</td> </tr> <tr> <td>R-12</td> <td>边框样式</td> <td>solid/dashed/dotted 有明确使用场景</td> <td>分割线样式混用</td> </tr> <tr> <td>R-13</td> <td>Outline vs Ring</td> <td>outline（不影响布局）用于 focus；ring（box-shadow）用于强调</td> <td>outline 和 ring 混用</td> </tr> <tr> <td>R-14</td> <td>Ring 宽度/偏移 token</td> <td>ring-width(1px/2px/3px) + ring-offset(0/2px/4px)</td> <td>ring 宽度随意</td> </tr> <tr> <td>R-15</td> <td>分割线变体</td> <td>厚度(1px)/颜色token/上下margin/变体(solid/dashed/with-text)</td> <td>分割线样式不统一</td> </tr> <tr> <td>R-16</td> <td>单侧圆角</td> <td>rounded-t-lg / rounded-b-lg 等单侧圆角可用</td> <td>只能四角同时设置</td> </tr> <tr> <td>R-17</td> <td>边框 vs 阴影策略</td> <td>明确何时用边框/何时用阴影/何时用背景色区分</td> <td>卡片边框和阴影混用无规律</td> </tr> <tr> <td>R-18</td> <td>内阴影场景</td> <td>box-shadow: inset 用于内凹输入框/凹陷容器</td> <td>内阴影滥用</td> </tr> <tr> <td>R-19</td> <td>各状态边框色集</td> <td>default/hover/focus/error/disabled/active 边框色作为完整集</td> <td>只定义了默认边框色</td> </tr> <tr> <td>R-20</td> <td>底部/单侧边框</td> <td>border-b / border-t / border-l / border-r 用于分割场景</td> <td>全边框造成视觉噪音</td> </tr> </tbody> </table> <hr> <h1 id="五布局层layout">五、布局层（Layout）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>L-01</td> <td>容器最大宽度</td> <td>定义 max-w-screen-sm/md/lg/xl/2xl</td> <td>内容无最大宽度限制</td> </tr> <tr> <td>L-02</td> <td>容器居中</td> <td>mx-auto 居中</td> <td>容器不居中</td> </tr> <tr> <td>L-03</td> <td>响应式断点</td> <td>sm(640)/md(768)/lg(1024)/xl(1280)/2xl(1536)</td> <td>断点值随意定义</td> </tr> <tr> <td>L-04</td> <td>栅格列数</td> <td>12 列系统</td> <td>列数不统一</td> </tr> <tr> <td>L-05</td> <td>栅格间距</td> <td>gutter token 化</td> <td>不同页面栅格间距不一致</td> </tr> <tr> <td>L-06</td> <td>页面布局模式</td> <td>header+main+footer / header+sidebar+main+footer</td> <td>布局结构不统一</td> </tr> <tr> <td>L-07</td> <td>内容区模式</td> <td>full-width / contained(1280px) / narrow(768px)</td> <td>文章内容区过宽</td> </tr> <tr> <td>L-08</td> <td>Flex 工具</td> <td>direction/wrap/justify/align 组合覆盖</td> <td>flex 容器子项不换行导致溢出</td> </tr> <tr> <td>L-09</td> <td>Grid 工具</td> <td>template-columns/rows/areas 覆盖</td> <td>不必要的嵌套 flex</td> </tr> <tr> <td>L-10</td> <td>水平居中</td> <td>flex/grid margin:auto 三种方案</td> <td>居中方式不一致</td> </tr> <tr> <td>L-11</td> <td>粘性头部</td> <td>header sticky 行为</td> <td>滚动后头部消失</td> </tr> <tr> <td>L-12</td> <td>粘性侧边栏</td> <td>sidebar sticky 行为</td> <td>侧边栏不跟随滚动</td> </tr> <tr> <td>L-13</td> <td>Z-index 体系</td> <td>dropdown(1000)/sticky(1100)/modal(1200)/popover(1300)/tooltip(1400)/notification(1500)</td> <td>z-index 随意取值导致层叠混乱</td> </tr> <tr> <td>L-14</td> <td>内容溢出</td> <td>overflow-hidden/scroll/auto 有明确策略</td> <td>内容溢出破坏布局</td> </tr> <tr> <td>L-15</td> <td>最小高度</td> <td>min-h-screen / min-h-特定值</td> <td>页面内容少时 footer 悬空</td> </tr> <tr> <td>L-16</td> <td>安全区域</td> <td>safe-area-inset-top/right/bottom/left</td> <td>iOS 刘海屏遮挡内容</td> </tr> <tr> <td>L-17</td> <td>等高列</td> <td>grid 自动等高 / flex stretch</td> <td>多列不等高</td> </tr> <tr> <td>L-18</td> <td>宽高比</td> <td>aspect-ratio 用于媒体容器/卡片/占位防 CLS</td> <td>图片加载后布局跳动</td> </tr> <tr> <td>L-19</td> <td>容器查询</td> <td>@container 查询实现组件级响应式</td> <td>组件只能跟随视口断点</td> </tr> <tr> <td>L-20</td> <td>absolute 定位模式</td> <td>绝对定位元素有明确包含块(relative 父)</td> <td>绝对定位元素跑出预期位置</td> </tr> <tr> <td>L-21</td> <td>fixed 定位模式</td> <td>fixed 元素考虑移动端浏览器 chrome + dvh</td> <td>fixed 导航被地址栏遮挡</td> </tr> <tr> <td>L-22</td> <td>sticky 全面场景</td> <td>表头/sidebar/分组标题 sticky + top 偏移量包含 fixed header</td> <td>sticky 元素被 fixed header 遮挡</td> </tr> <tr> <td>L-23</td> <td>Subgrid</td> <td>子网格对齐父级 grid 轨道</td> <td>嵌套 grid 列不对齐</td> </tr> <tr> <td>L-24</td> <td>逻辑布局属性</td> <td>inline-size/block-size 替代 width/height</td> <td>RTL 下布局不翻转</td> </tr> <tr> <td>L-25</td> <td>多列布局</td> <td>column-count/column-width 用于文本密集内容</td> <td>长列表无分列浪费空间</td> </tr> <tr> <td>L-26</td> <td>内容可见性</td> <td>content-visibility: auto 用于屏外重渲染区域</td> <td>屏外大量 DOM 影响渲染</td> </tr> <tr> <td>L-27</td> <td>容器宽度变体</td> <td>narrow(768px)/content(1024px)/wide(1280px)/full</td> <td>所有内容用同一宽度</td> </tr> <tr> <td>L-28</td> <td>孤行/寡行控制</td> <td>widows/orphans CSS 属性用于打印/分页</td> <td>打印时段落末尾只有一行</td> </tr> <tr> <td>L-29</td> <td>滚动驱动布局</td> <td>scroll-timeline 用于滚动关联效果</td> <td>用 JS 监听 scroll 事件</td> </tr> </tbody> </table> <hr> <h1 id="六组件层components">六、组件层（Components）</h1> <h2 id="61-按钮button">6.1 按钮（Button）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>BTN-01</td> <td>主要按钮</td> <td>primary 填充色 + 白色文字</td> <td>主色文字色对比度不足</td> </tr> <tr> <td>BTN-02</td> <td>次要按钮</td> <td>secondary 填充色 / outline 边框按钮</td> <td>次要按钮与主要按钮区分不够</td> </tr> <tr> <td>BTN-03</td> <td>虚线按钮</td> <td>dashed 边框，用于添加场景</td> <td>与 outline 按钮区分不清</td> </tr> <tr> <td>BTN-04</td> <td>幽灵按钮</td> <td>ghost 无边框无背景</td> <td>幽灵按钮看不出来可点击</td> </tr> <tr> <td>BTN-05</td> <td>危险按钮</td> <td>destructive 红色系</td> <td>危险操作用错按钮类型</td> </tr> <tr> <td>BTN-06</td> <td>链接按钮</td> <td>link 无边框无背景，文字色</td> <td>与链接混淆</td> </tr> <tr> <td>BTN-07</td> <td>小按钮</td> <td>sm 高度/字号/内间距</td> <td>尺寸缩放不协调</td> </tr> <tr> <td>BTN-08</td> <td>中按钮</td> <td>md 高度/字号/内间距（默认）</td> <td>无默认尺寸概念</td> </tr> <tr> <td>BTN-09</td> <td>大按钮</td> <td>lg 高度/字号/内间距</td> <td>大按钮在移动端过宽</td> </tr> <tr> <td>BTN-10</td> <td>Hover 状态</td> <td>背景色加深/边框色变化</td> <td>无 hover 反馈</td> </tr> <tr> <td>BTN-11</td> <td>Active 状态</td> <td>背景色更深/轻微缩放(scale(0.98))</td> <td>active 与 hover 无区别</td> </tr> <tr> <td>BTN-12</td> <td>Focus 状态</td> <td>focus-visible 外环/outline</td> <td>focus 无视觉指示</td> </tr> <tr> <td>BTN-13</td> <td>Disabled 状态</td> <td>降透明度/灰化/取消 pointer</td> <td>disabled 仍可点击</td> </tr> <tr> <td>BTN-14</td> <td>Loading 状态</td> <td>spinner + 文字变灰 + 禁止点击</td> <td>loading 状态文字仍为正常色</td> </tr> <tr> <td>BTN-15</td> <td>左图标</td> <td>icon + 文字，间距一致</td> <td>图标与文字间距过大</td> </tr> <tr> <td>BTN-16</td> <td>右图标</td> <td>文字 + icon（如箭头）</td> <td>图标位置不统一</td> </tr> <tr> <td>BTN-17</td> <td>纯图标按钮</td> <td>只有图标，有 aria-label</td> <td>纯图标无文字说明</td> </tr> <tr> <td>BTN-18</td> <td>全宽按钮</td> <td>w-full 模式</td> <td>桌面端全宽按钮过宽</td> </tr> <tr> <td>BTN-19</td> <td>按钮组</td> <td>水平排列，相连边共享边框</td> <td>按钮间距不统一</td> </tr> </tbody> </table> <h2 id="62-输入框input">6.2 输入框（Input）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>INP-01</td> <td>文本输入</td> <td>type=text 默认样式</td> <td>输入框高度与按钮不匹配</td> </tr> <tr> <td>INP-02</td> <td>密码输入</td> <td>type=password + 切换按钮</td> <td>密码切换图标位置不统一</td> </tr> <tr> <td>INP-03</td> <td>搜索输入</td> <td>type=search + 搜索图标 + 清除</td> <td>清除按钮缺失</td> </tr> <tr> <td>INP-04</td> <td>数字输入</td> <td>type=number 隐藏 spinner / 步进按钮</td> <td>数字输入框 spinner 样式不一致</td> </tr> <tr> <td>INP-05</td> <td>URL/邮箱</td> <td>type=url/email 验证</td> <td>移动端未弹出对应键盘</td> </tr> <tr> <td>INP-06</td> <td>小输入框</td> <td>sm 高度/字号</td> <td>小输入框内间距过小</td> </tr> <tr> <td>INP-07</td> <td>大输入框</td> <td>lg 高度/字号</td> <td>大输入框字号过大</td> </tr> <tr> <td>INP-08</td> <td>Hover 状态</td> <td>边框色变化</td> <td>输入框无 hover 效果</td> </tr> <tr> <td>INP-09</td> <td>Focus 状态</td> <td>边框色变 primary + ring</td> <td>focus 时边框与 ring 颜色冲突</td> </tr> <tr> <td>INP-10</td> <td>Error 状态</td> <td>边框色变 error + 错误提示文字</td> <td>错误态边框色不够醒目</td> </tr> <tr> <td>INP-11</td> <td>Disabled 状态</td> <td>背景/文字灰化 + 禁止交互</td> <td>disabled 态文字色太浅</td> </tr> <tr> <td>INP-12</td> <td>Readonly 状态</td> <td>与 disabled 区分（可选中不可编辑）</td> <td>readonly 和 disabled 视觉相同</td> </tr> <tr> <td>INP-13</td> <td>前缀图标</td> <td>左侧图标 + 内间距偏移</td> <td>前缀图标与文字重叠</td> </tr> <tr> <td>INP-14</td> <td>后缀图标</td> <td>右侧图标 + 内间距偏移</td> <td>后缀图标与文字重叠</td> </tr> <tr> <td>INP-15</td> <td>前缀文字</td> <td>左侧文字标签（如 $, https://）</td> <td>前缀文字背景色与输入框不协调</td> </tr> <tr> <td>INP-16</td> <td>后缀文字</td> <td>右侧文字标签（如 .com, 单位）</td> <td>后缀文字不可见</td> </tr> <tr> <td>INP-17</td> <td>清除按钮</td> <td>有内容时显示 ×，点击清空</td> <td>清除按钮一直显示</td> </tr> <tr> <td>INP-18</td> <td>字符计数</td> <td>maxlength 限制 + 倒计显示</td> <td>超出 maxlength 无提示</td> </tr> <tr> <td>INP-19</td> <td>Textarea</td> <td>可调高度/固定高度/自动高度</td> <td>resize 不受控破坏布局</td> </tr> <tr> <td>INP-20</td> <td>浮动标签</td> <td>输入时标签上浮动画</td> <td>浮动标签遮挡输入内容</td> </tr> </tbody> </table> <h2 id="63-选择类控件">6.3 选择类控件</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>SEL-01</td> <td>Select 下拉</td> <td>触发器/下拉面板/选项/选中态/搜索</td> <td>下拉面板被其他元素遮挡</td> </tr> <tr> <td>SEL-02</td> <td>多选 Select</td> <td>选中项标签/清除/全选</td> <td>选中过多项时溢出</td> </tr> <tr> <td>SEL-03</td> <td>Checkbox</td> <td>选中/未选/半选/禁用</td> <td>半选状态缺失</td> </tr> <tr> <td>SEL-04</td> <td>Radio</td> <td>选中/未选/禁用/按钮样式</td> <td>radio 无法键盘操作</td> </tr> <tr> <td>SEL-05</td> <td>Switch</td> <td>开/关/禁用/加载/文字标签</td> <td>switch 切换无动画</td> </tr> <tr> <td>SEL-06</td> <td>Slider</td> <td>单值/范围/刻度标记/tooltip</td> <td>步进值不合理</td> </tr> <tr> <td>SEL-07</td> <td>日期选择</td> <td>日期/时间/范围选择</td> <td>日期格式不统一</td> </tr> <tr> <td>SEL-08</td> <td>文件上传</td> <td>拖拽区/文件列表/进度/预览</td> <td>大文件无进度反馈</td> </tr> <tr> <td>SEL-09</td> <td>级联选择</td> <td>多级联动/异步加载</td> <td>级联选项加载无 loading</td> </tr> <tr> <td>SEL-10</td> <td>树形选择</td> <td>树形数据/勾选/搜索</td> <td>树层级过多时不方便</td> </tr> </tbody> </table> <h2 id="64-卡片card">6.4 卡片（Card）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CRD-01</td> <td>基础卡片</td> <td>边框/圆角/内间距/背景色</td> <td>卡片内间距不一致</td> </tr> <tr> <td>CRD-02</td> <td>Header</td> <td>标题/操作区/分隔线</td> <td>header 操作区对齐不统一</td> </tr> <tr> <td>CRD-03</td> <td>Body</td> <td>内容区/自动 padding</td> <td>内容贴边</td> </tr> <tr> <td>CRD-04</td> <td>Footer</td> <td>操作按钮/分隔线</td> <td>footer 按钮排列不统一</td> </tr> <tr> <td>CRD-05</td> <td>封面图</td> <td>顶部图片 + aspect-ratio</td> <td>图片比例不一致</td> </tr> <tr> <td>CRD-06</td> <td>Hover 效果</td> <td>阴影增强/轻微上浮</td> <td>无 hover 反馈</td> </tr> <tr> <td>CRD-07</td> <td>可点击</td> <td>整卡片可点击 + cursor-pointer</td> <td>可点击卡片无视觉提示</td> </tr> </tbody> </table> <h2 id="65-弹窗dialogmodal">6.5 弹窗（Dialog/Modal）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>MDL-01</td> <td>遮罩层</td> <td>半透明黑色 + 点击关闭(可配置)</td> <td>遮罩过暗/过亮</td> </tr> <tr> <td>MDL-02</td> <td>弹窗尺寸</td> <td>sm/md/lg/xl/full</td> <td>弹窗在移动端溢出屏幕</td> </tr> <tr> <td>MDL-03</td> <td>Header</td> <td>标题 + 关闭按钮</td> <td>关闭按钮位置不统一</td> </tr> <tr> <td>MDL-04</td> <td>Body 滚动</td> <td>弹窗内容可滚，背景不滚</td> <td>弹窗打开时背景也在滚</td> </tr> <tr> <td>MDL-05</td> <td>Footer</td> <td>操作按钮排列（确认/取消）</td> <td>确认和取消按钮位置不统一</td> </tr> <tr> <td>MDL-06</td> <td>进场动画</td> <td>fade+scale/fade+slide</td> <td>无动画突然出现</td> </tr> <tr> <td>MDL-07</td> <td>退场动画</td> <td>对应的退出动画</td> <td>关闭时无动画</td> </tr> <tr> <td>MDL-08</td> <td>ESC 关闭</td> <td>按 Escape 关闭弹窗</td> <td>无法键盘关闭</td> </tr> <tr> <td>MDL-09</td> <td>焦点管理</td> <td>打开时聚焦弹窗内首个可聚焦元素</td> <td>焦点仍在背景元素上</td> </tr> <tr> <td>MDL-10</td> <td>确认对话框</td> <td>危险操作二次确认/确认按钮醒目</td> <td>删除操作无二次确认</td> </tr> </tbody> </table> <h2 id="66-抽屉drawer">6.6 抽屉（Drawer）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>DRW-01</td> <td>方向</td> <td>left/right/top/bottom 四个方向</td> <td>Drawer 只支持一个方向</td> </tr> <tr> <td>DRW-02</td> <td>尺寸</td> <td>sm(300px)/md(400px)/lg(540px)/full</td> <td>移动端 Drawer 太窄或太宽</td> </tr> <tr> <td>DRW-03</td> <td>遮罩层</td> <td>半透明背景 + 可配置点击关闭</td> <td>遮罩全黑</td> </tr> <tr> <td>DRW-04</td> <td>关闭方式</td> <td>X 按钮/ESC 键/遮罩点击/滑动手势</td> <td>只能点 X 关闭</td> </tr> <tr> <td>DRW-05</td> <td>嵌套堆叠</td> <td>多层 Drawer z-index 递增</td> <td>多层 Drawer 层叠混乱</td> </tr> <tr> <td>DRW-06</td> <td>表单场景</td> <td>Drawer 内表单验证+提交+未保存提示</td> <td>关闭丢失已填数据</td> </tr> <tr> <td>DRW-07</td> <td>焦点陷阱</td> <td>焦点在 Drawer 内循环</td> <td>Tab 跳到背景</td> </tr> <tr> <td>DRW-08</td> <td>背景锁定</td> <td>body overflow:hidden</td> <td>Drawer 打开背景还在滚</td> </tr> </tbody> </table> <h2 id="67-气泡卡片popover">6.7 气泡卡片（Popover）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>POP-01</td> <td>自动翻转</td> <td>视口边缘时自动翻转到对面</td> <td>Popover 被截断</td> </tr> <tr> <td>POP-02</td> <td>触发模式</td> <td>click / hover / focus 可配置</td> <td>hover 误触发</td> </tr> <tr> <td>POP-03</td> <td>表单内容</td> <td>Popover 内表单元素可交互</td> <td>Popover 内输入框失焦关闭</td> </tr> <tr> <td>POP-04</td> <td>箭头</td> <td>指向触发元素的箭头，边缘碰撞时隐藏</td> <td>箭头位置不准</td> </tr> <tr> <td>POP-05</td> <td>关闭行为</td> <td>点击外部/ESC/选择后关闭 可配置</td> <td>点击内部也关闭</td> </tr> <tr> <td>POP-06</td> <td>宽度</td> <td>匹配触发元素 或 自定义 min/max 宽度</td> <td>Popover 过窄内容截断</td> </tr> </tbody> </table> <h2 id="68-菜单menu--dropdown-menu">6.8 菜单（Menu / Dropdown Menu）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>MNU-01</td> <td>菜单项变体</td> <td>default/destructive/disabled</td> <td>删除操作和普通操作视觉无区分</td> </tr> <tr> <td>MNU-02</td> <td>菜单项图标</td> <td>前置图标支持</td> <td>图标与文字间距不统一</td> </tr> <tr> <td>MNU-03</td> <td>快捷键显示</td> <td>右对齐显示快捷键（如 &ldquo;Ctrl+C&rdquo;）</td> <td>快捷键显示不整齐</td> </tr> <tr> <td>MNU-04</td> <td>勾选菜单项</td> <td>checkbox/radio 菜单项 + 勾选图标</td> <td>选中态不明显</td> </tr> <tr> <td>MNU-05</td> <td>分隔线</td> <td>分组间水平分隔线</td> <td>分隔线颜色过深</td> </tr> <tr> <td>MNU-06</td> <td>分组标签</td> <td>非交互式分组标题</td> <td>无法区分标签和菜单项</td> </tr> <tr> <td>MNU-07</td> <td>子菜单</td> <td>嵌套子菜单 + 箭头指示</td> <td>子菜单定位不准</td> </tr> <tr> <td>MNU-08</td> <td>键盘导航</td> <td>上下箭头/Enter/Escape/首字母导航</td> <td>无法键盘操作菜单</td> </tr> </tbody> </table> <h2 id="69-表格table">6.9 表格（Table）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>TBL-01</td> <td>表头样式</td> <td>背景/字号/字重/边框区分</td> <td>表头与数据行视觉无区分</td> </tr> <tr> <td>TBL-02</td> <td>行 hover</td> <td>鼠标悬浮行高亮</td> <td>无行 hover 效果</td> </tr> <tr> <td>TBL-03</td> <td>斑马纹</td> <td>奇偶行不同背景色</td> <td>斑马纹颜色对比过强</td> </tr> <tr> <td>TBL-04</td> <td>列排序</td> <td>点击表头排序/排序图标</td> <td>排序方向图标不清晰</td> </tr> <tr> <td>TBL-05</td> <td>列筛选</td> <td>列头下拉筛选/筛选标记</td> <td>筛选后无清除方式</td> </tr> <tr> <td>TBL-06</td> <td>分页</td> <td>页码/条数/总数/跳转</td> <td>分页条数选项不合理</td> </tr> <tr> <td>TBL-07</td> <td>固定表头</td> <td>滚动时表头固定</td> <td>长表滚动时看不到列名</td> </tr> <tr> <td>TBL-08</td> <td>固定列</td> <td>首列/末列固定</td> <td>固定列与滚动列无阴影分隔</td> </tr> <tr> <td>TBL-09</td> <td>行选择</td> <td>checkbox 单选/多选/全选</td> <td>全选含未加载的数据</td> </tr> <tr> <td>TBL-10</td> <td>空状态</td> <td>无数据时插图+提示+操作</td> <td>空状态只显示&quot;暂无数据&quot;</td> </tr> <tr> <td>TBL-11</td> <td>加载状态</td> <td>spinner 覆盖/骨架屏</td> <td>加载时布局跳动</td> </tr> <tr> <td>TBL-12</td> <td>行展开</td> <td>点击展开详情行</td> <td>展开图标不明显</td> </tr> <tr> <td>TBL-13</td> <td>虚拟滚动</td> <td>大数据量时只渲染可视区域</td> <td>万级数据表格卡顿</td> </tr> <tr> <td>TBL-14</td> <td>列宽</td> <td>可拖拽调整/最小宽度</td> <td>列宽被内容撑开</td> </tr> </tbody> </table> <h2 id="610-标签页tabs">6.10 标签页（Tabs）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>TAB-01</td> <td>下划线变体</td> <td>底部横线指示当前 tab</td> <td>下划线与 tab 文字不对齐</td> </tr> <tr> <td>TAB-02</td> <td>卡片变体</td> <td>tab 为卡片样式</td> <td>选中和未选中卡片区分不够</td> </tr> <tr> <td>TAB-03</td> <td>胶囊变体</td> <td>tab 为圆角胶囊样式</td> <td>胶囊内文字间距过大</td> </tr> <tr> <td>TAB-04</td> <td>滚动处理</td> <td>tab 过多时横向滚动+箭头</td> <td>tab 被截断无滚动</td> </tr> <tr> <td>TAB-05</td> <td>懒加载</td> <td>非活跃 tab 内容不渲染</td> <td>所有 tab 内容一次加载</td> </tr> <tr> <td>TAB-06</td> <td>键盘导航</td> <td>左右箭头切换 tab</td> <td>无法键盘操作 tab</td> </tr> </tbody> </table> <h2 id="611-导航组件">6.11 导航组件</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>NAV-01</td> <td>顶部导航</td> <td>logo/菜单项/用户区 水平排列</td> <td>菜单项过多时溢出</td> </tr> <tr> <td>NAV-02</td> <td>当前页高亮</td> <td>当前页菜单项视觉高亮</td> <td>当前页无高亮</td> </tr> <tr> <td>NAV-03</td> <td>下拉菜单</td> <td>hover/click 触发/嵌套/键盘导航</td> <td>下拉菜单定位不准</td> </tr> <tr> <td>NAV-04</td> <td>侧边导航</td> <td>可折叠/子菜单/高亮当前</td> <td>子菜单展开动画卡顿</td> </tr> <tr> <td>NAV-05</td> <td>面包屑</td> <td>层级展示/分隔符/可点击/截断</td> <td>层级过深时溢出</td> </tr> <tr> <td>NAV-06</td> <td>步骤条</td> <td>水平/垂直/已完成/当前/待做/错误</td> <td>步骤状态颜色不直观</td> </tr> <tr> <td>NAV-07</td> <td>移动端导航</td> <td>底部 tab 栏/汉堡菜单</td> <td>移动端导航项过多</td> </tr> <tr> <td>NAV-08</td> <td>返回顶部</td> <td>滚动一定距离后出现/平滑滚动</td> <td>返回顶部按钮遮挡内容</td> </tr> </tbody> </table> <h2 id="612-反馈组件">6.12 反馈组件</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>FB-01</td> <td>Toast 类型</td> <td>success/error/warning/info 各有图标+颜色</td> <td>所有 toast 同一颜色</td> </tr> <tr> <td>FB-02</td> <td>Toast 位置</td> <td>top-right/top-center/bottom-right 可配置</td> <td>Toast 遮挡操作区</td> </tr> <tr> <td>FB-03</td> <td>Toast 自动关闭</td> <td>默认 3-5s 自动消失/可配置时长</td> <td>Toast 不消失或瞬间消失</td> </tr> <tr> <td>FB-04</td> <td>Toast 可关闭</td> <td>右侧关闭按钮/悬浮显示</td> <td>无手动关闭方式</td> </tr> <tr> <td>FB-05</td> <td>Toast 堆叠</td> <td>多条 toast 垂直排列/最大数量</td> <td>新 toast 覆盖旧 toast</td> </tr> <tr> <td>FB-06</td> <td>Alert 类型</td> <td>success/warning/error/info</td> <td>Alert 无图标</td> </tr> <tr> <td>FB-07</td> <td>Alert 可关闭</td> <td>关闭按钮/关闭回调</td> <td>Alert 无法关闭</td> </tr> <tr> <td>FB-08</td> <td>Alert Banner</td> <td>顶部全宽公告条</td> <td>Banner 与导航层级冲突</td> </tr> <tr> <td>FB-09</td> <td>进度条-确定</td> <td>百分比进度/颜色/尺寸</td> <td>进度条无文字百分比</td> </tr> <tr> <td>FB-10</td> <td>进度条-不确定</td> <td>动画条纹/脉冲</td> <td>加载中无反馈</td> </tr> <tr> <td>FB-11</td> <td>环形进度</td> <td>圆形进度环</td> <td>环形进度无百分比文字</td> </tr> <tr> <td>FB-12</td> <td>Spinner</td> <td>尺寸(sm/md/lg)/颜色/全局</td> <td>Spinner 颜色与主题不搭</td> </tr> <tr> <td>FB-13</td> <td>骨架屏-形状</td> <td>circle(头像)/rectangle(卡片)/text(段落)</td> <td>骨架屏与实际布局差异大</td> </tr> <tr> <td>FB-14</td> <td>骨架屏-动画</td> <td>pulse(脉冲)/wave(波浪)</td> <td>骨架屏无动画</td> </tr> <tr> <td>FB-15</td> <td>空状态</td> <td>插图+标题+描述+操作按钮</td> <td>只显示文字&quot;暂无数据&quot;</td> </tr> <tr> <td>FB-16</td> <td>结果页</td> <td>成功(绿)/失败(红)/处理中(黄) 状态</td> <td>操作完成后无反馈页</td> </tr> </tbody> </table> <h2 id="613-数据展示组件">6.13 数据展示组件</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>DD-01</td> <td>Badge 圆点</td> <td>小圆点未读指示</td> <td>圆点太小看不见</td> </tr> <tr> <td>DD-02</td> <td>Badge 数字</td> <td>数字/最大数(99+)</td> <td>数字溢出</td> </tr> <tr> <td>DD-03</td> <td>Badge 文字</td> <td>文字标签</td> <td>文字过长</td> </tr> <tr> <td>DD-04</td> <td>Tag 颜色</td> <td>预设色+自定义色</td> <td>tag 颜色过多不统一</td> </tr> <tr> <td>DD-05</td> <td>Tag 可关闭</td> <td>关闭按钮/关闭回调</td> <td>无法删除 tag</td> </tr> <tr> <td>DD-06</td> <td>Tag 可选中</td> <td>click 切换选中态</td> <td>选中态不明显</td> </tr> <tr> <td>DD-07</td> <td>Avatar 尺寸</td> <td>xs(24)/sm(32)/md(40)/lg(56)/xl(80)</td> <td>列表中头像大小不一致</td> </tr> <tr> <td>DD-08</td> <td>Avatar fallback</td> <td>无图时显示文字/图标</td> <td>无图时显示空白</td> </tr> <tr> <td>DD-09</td> <td>Avatar 状态点</td> <td>在线/忙碌/离线 绿/黄/灰点</td> <td>状态点位置不统一</td> </tr> <tr> <td>DD-10</td> <td>Avatar 分组</td> <td>重叠排列/溢出+N</td> <td>重叠过多看不到</td> </tr> <tr> <td>DD-11</td> <td>Tooltip 方向</td> <td>top/right/bottom/left/auto</td> <td>Tooltip 被屏幕边缘截断</td> </tr> <tr> <td>DD-12</td> <td>Tooltip 延迟</td> <td>显示延迟(300ms)/隐藏延迟(100ms)</td> <td>Tooltip 立即出现干扰</td> </tr> <tr> <td>DD-13</td> <td>Tooltip 箭头</td> <td>有/无箭头</td> <td>箭头指向不准</td> </tr> <tr> <td>DD-14</td> <td>Collapse 手风琴</td> <td>同时只展开一个</td> <td>多个展开时内容过多</td> </tr> <tr> <td>DD-15</td> <td>Collapse 动画</td> <td>展开/收起高度动画</td> <td>无动画突然出现</td> </tr> <tr> <td>DD-16</td> <td>Tree 展开/折叠</td> <td>点击节点展开子级</td> <td>大树展开卡顿</td> </tr> <tr> <td>DD-17</td> <td>Tree 勾选</td> <td>checkbox 勾选+半选+级联</td> <td>级联勾选逻辑错误</td> </tr> <tr> <td>DD-18</td> <td>Timeline 布局</td> <td>左右交替/单侧/自定义节点</td> <td>时间线对齐错乱</td> </tr> <tr> <td>DD-19</td> <td>Statistic 数值</td> <td>大数字+趋势箭头+前后缀</td> <td>数字格式化不一致</td> </tr> <tr> <td>DD-20</td> <td>Divider</td> <td>水平/垂直/带文字</td> <td>分割线颜色过深</td> </tr> </tbody> </table> <h2 id="614-组件组合模式composition-patterns">6.14 组件组合模式（Composition Patterns）</h2> <blockquote> <p>组件单独检查还不够，组合使用时往往暴露设计缺陷。</p> </blockquote> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CP-01</td> <td>表单+输入+验证联动</td> <td>输入→blur 验证→错误显示→修正→成功清除</td> <td>错误修正后红色不消失</td> </tr> <tr> <td>CP-02</td> <td>表单+提交+反馈</td> <td>提交→loading→成功 toast/跳转/失败保留</td> <td>提交成功/失败无反馈</td> </tr> <tr> <td>CP-03</td> <td>表格+筛选+分页联动</td> <td>筛选→重置分页→显示结果数</td> <td>筛选后分页未重置</td> </tr> <tr> <td>CP-04</td> <td>表格+批量操作+确认</td> <td>多选→批量按钮→二次确认→loading→刷新</td> <td>批量删除无确认</td> </tr> <tr> <td>CP-05</td> <td>搜索+防抖+结果+空态</td> <td>输入→防抖→loading→结果/空态</td> <td>搜索中无 loading 指示</td> </tr> <tr> <td>CP-06</td> <td>导航+面包屑+页面标题</td> <td>三者信息一致</td> <td>面包屑与页面标题不匹配</td> </tr> <tr> <td>CP-07</td> <td>侧边栏+内容+响应式</td> <td>大屏展开→小屏折叠/抽屉</td> <td>侧边栏在移动端无法收起</td> </tr> <tr> <td>CP-08</td> <td>弹窗+表单+验证+提交</td> <td>弹窗内表单完整验证流程</td> <td>弹窗内表单无验证</td> </tr> <tr> <td>CP-09</td> <td>列表+排序+筛选+空态</td> <td>筛选后无结果有空态提示</td> <td>筛选无结果空白</td> </tr> <tr> <td>CP-10</td> <td>头像+名字+操作菜单</td> <td>用户信息卡片交互完整</td> <td>操作菜单被遮挡</td> </tr> <tr> <td>CP-11</td> <td>标签页+内容+缓存</td> <td>切换 tab 不丢失已填数据</td> <td>切 tab 数据丢失</td> </tr> <tr> <td>CP-12</td> <td>文件上传+拖拽+进度+预览</td> <td>拖入→上传中→完成→可预览</td> <td>上传失败无重试</td> </tr> <tr> <td>CP-13</td> <td>下拉菜单+搜索+异步</td> <td>搜索→请求→loading→结果</td> <td>搜索 loading 无反馈</td> </tr> <tr> <td>CP-14</td> <td>树形+勾选+级联+搜索</td> <td>搜索→高亮匹配→勾选级联</td> <td>搜索后勾选混乱</td> </tr> <tr> <td>CP-15</td> <td>日期范围+快捷选项</td> <td>近7天/本月/自定义+联动</td> <td>快捷选项不更新日期框</td> </tr> </tbody> </table> <hr> <h1 id="七交互层interaction">七、交互层（Interaction）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>IX-01</td> <td>过渡时长体系</td> <td>instant(0)/fast(100ms)/normal(150ms)/slow(300ms)/slower(500ms)</td> <td>所有过渡用同一个时长</td> </tr> <tr> <td>IX-02</td> <td>缓动曲线体系</td> <td>default(ease)/in(ease-in)/out(ease-out)/in-out(ease-in-out)/spring(cubic-bezier)</td> <td>用 linear 导致动画生硬</td> </tr> <tr> <td>IX-03</td> <td>全局 Hover 要求</td> <td>所有可交互元素有 hover 反馈（颜色/阴影/下划线）</td> <td>纯文字链接无 hover</td> </tr> <tr> <td>IX-04</td> <td>全局 Active 要求</td> <td>按下有视觉反馈（加深/缩放）</td> <td>无 active 反馈</td> </tr> <tr> <td>IX-05</td> <td>Focus Visible</td> <td>键盘聚焦时显示 focus ring，鼠标点击不显示</td> <td>focus ring 始终显示干扰视觉</td> </tr> <tr> <td>IX-06</td> <td>Focus Ring 样式</td> <td>2px offset ring + primary 色</td> <td>focus ring 与元素重叠</td> </tr> <tr> <td>IX-07</td> <td>弹窗焦点陷阱</td> <td>Tab 在弹窗内循环，不跳到背景</td> <td>Tab 可以跳到弹窗外</td> </tr> <tr> <td>IX-08</td> <td>拖拽视觉反馈</td> <td>拖起时半透明/放区域高亮/排序占位线</td> <td>拖拽无视觉反馈</td> </tr> <tr> <td>IX-09</td> <td>滑动手势</td> <td>左滑删除/右滑更多（移动端）</td> <td>滑动与滚动冲突</td> </tr> <tr> <td>IX-10</td> <td>长按手势</td> <td>长按触发上下文菜单/预览</td> <td>无长按操作提示</td> </tr> <tr> <td>IX-11</td> <td>右键菜单</td> <td>自定义 context menu</td> <td>与浏览器默认右键菜单冲突</td> </tr> <tr> <td>IX-12</td> <td>全局快捷键</td> <td>Ctrl+K 搜索/Ctrl+S 保存等</td> <td>快捷键与浏览器冲突</td> </tr> <tr> <td>IX-13</td> <td>搜索防抖</td> <td>输入 300ms 后才触发搜索</td> <td>每次按键都请求</td> </tr> <tr> <td>IX-14</td> <td>滚动节流</td> <td>scroll 事件节流(16ms)</td> <td>滚动回调卡顿</td> </tr> <tr> <td>IX-15</td> <td>Resize 防抖</td> <td>window resize 事件防抖(150ms)</td> <td>每帧触发 resize 回调</td> </tr> <tr> <td>IX-16</td> <td>乐观更新</td> <td>点赞/收藏立即反馈+后台同步</td> <td>等待网络返回才反馈</td> </tr> <tr> <td>IX-17</td> <td>撤销/重做</td> <td>Ctrl+Z/Ctrl+Y 操作历史</td> <td>无法撤销误操作</td> </tr> <tr> <td>IX-18</td> <td>渐进式加载</td> <td>图片懒加载/列表无限滚动/组件 lazy</td> <td>首屏加载过多内容</td> </tr> <tr> <td>IX-19</td> <td>网络状态感知</td> <td>离线提示/重连恢复/请求重试</td> <td>网络断开无提示</td> </tr> <tr> <td>IX-20</td> <td>剪贴板操作</td> <td>复制/粘贴/剪切反馈</td> <td>复制后无&quot;已复制&quot;提示</td> </tr> </tbody> </table> <hr> <h1 id="八响应式层responsive">八、响应式层（Responsive）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>RP-01</td> <td>移动端布局</td> <td>sm 以下单列布局</td> <td>移动端仍有多列</td> </tr> <tr> <td>RP-02</td> <td>平板布局</td> <td>md 双列/侧边栏折叠</td> <td>平板端布局与手机相同</td> </tr> <tr> <td>RP-03</td> <td>桌面布局</td> <td>lg+ 多列/侧边栏展开</td> <td>桌面端浪费屏幕空间</td> </tr> <tr> <td>RP-04</td> <td>触摸目标</td> <td>所有可点击元素≥44×44px</td> <td>文字链接点击区域太小</td> </tr> <tr> <td>RP-05</td> <td>移动端字号</td> <td>正文≥16px，标题适当缩小</td> <td>移动端字号与桌面相同</td> </tr> <tr> <td>RP-06</td> <td>移动端间距</td> <td>padding/margin 缩小</td> <td>移动端间距与桌面相同</td> </tr> <tr> <td>RP-07</td> <td>响应式图片</td> <td>srcset + sizes 属性</td> <td>所有尺寸加载同一张大图</td> </tr> <tr> <td>RP-08</td> <td>导航变形</td> <td>桌面水平导航→移动汉堡/底部 tab</td> <td>移动端导航项溢出</td> </tr> <tr> <td>RP-09</td> <td>表格响应式</td> <td>列隐藏/卡片化/横向滚动</td> <td>移动端表格溢出</td> </tr> <tr> <td>RP-10</td> <td>弹窗响应式</td> <td>移动端全屏/drawer 替代 modal</td> <td>modal 在移动端太小</td> </tr> <tr> <td>RP-11</td> <td>横竖屏适配</td> <td>orientation 变化布局调整</td> <td>横屏布局错乱</td> </tr> <tr> <td>RP-12</td> <td>打印样式</td> <td>@media print 隐藏导航/footer/背景</td> <td>打印时内容不可读</td> </tr> </tbody> </table> <hr> <h1 id="九无障碍层accessibility">九、无障碍层（Accessibility）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>A11Y-01</td> <td>语义化标签</td> <td>header/nav/main/section/article/footer/aside</td> <td>全用 div</td> </tr> <tr> <td>A11Y-02</td> <td>标题层级</td> <td>h1(1个)→h2→h3 不跳级</td> <td>h1 直接跳到 h4</td> </tr> <tr> <td>A11Y-03</td> <td>图片 alt</td> <td>所有 img 有描述性 alt，装饰图 alt=&quot;&quot;</td> <td>所有图片 alt 都一样</td> </tr> <tr> <td>A11Y-04</td> <td>aria-label</td> <td>无文字的按钮/链接有 aria-label</td> <td>图标按钮无文字说明</td> </tr> <tr> <td>A11Y-05</td> <td>aria-describedby</td> <td>表单字段关联帮助文本/错误提示</td> <td>错误提示屏幕阅读器读不到</td> </tr> <tr> <td>A11Y-06</td> <td>aria-live</td> <td>动态内容更新区域用 aria-live=&ldquo;polite&rdquo;/&ldquo;assertive&rdquo;</td> <td>toast 消息屏幕阅读器不播报</td> </tr> <tr> <td>A11Y-07</td> <td>aria-expanded</td> <td>可展开元素标注展开状态</td> <td>下拉菜单状态不可感知</td> </tr> <tr> <td>A11Y-08</td> <td>aria-selected</td> <td>选中项标注选中状态</td> <td>tab 选中状态不可感知</td> </tr> <tr> <td>A11Y-09</td> <td>aria-hidden</td> <td>装饰性图标/元素 aria-hidden=&ldquo;true&rdquo;</td> <td>装饰图标被屏幕阅读器读出</td> </tr> <tr> <td>A11Y-10</td> <td>role 属性</td> <td>自定义组件标注正确 role</td> <td>div 当按钮用无 role=&ldquo;button&rdquo;</td> </tr> <tr> <td>A11Y-11</td> <td>键盘可达</td> <td>所有交互元素 Tab 可达</td> <td>自定义组件无法 Tab 到</td> </tr> <tr> <td>A11Y-12</td> <td>键盘可操作</td> <td>Tab 聚焦后 Enter/Space 可激活</td> <td>焦点到了但无法操作</td> </tr> <tr> <td>A11Y-13</td> <td>Tab 顺序</td> <td>tabindex 逻辑顺序，不乱序</td> <td>tabindex&gt;0 导致顺序混乱</td> </tr> <tr> <td>A11Y-14</td> <td>skip-to-content</td> <td>页面首个 Tab 焦点为跳过导航链接</td> <td>无法跳过导航到内容</td> </tr> <tr> <td>A11Y-15</td> <td>Focus visible</td> <td>:focus-visible 有明确样式</td> <td>focus 样式不明显</td> </tr> <tr> <td>A11Y-16</td> <td>Focus trap</td> <td>弹窗内 Tab 不外溢</td> <td>弹窗中 Tab 跳到背景</td> </tr> <tr> <td>A11Y-17</td> <td>Focus return</td> <td>弹窗关闭后焦点回到触发元素</td> <td>关闭弹窗后焦点丢失</td> </tr> <tr> <td>A11Y-18</td> <td>sr-only</td> <td>视觉隐藏但屏幕阅读器可读的文本</td> <td>信息只通过视觉传达</td> </tr> <tr> <td>A11Y-19</td> <td>颜色对比度</td> <td>正文≥4.5:1 / 大文本≥3:1 / UI 元素≥3:1</td> <td>灰色文字对比度不足</td> </tr> <tr> <td>A11Y-20</td> <td>非颜色传达</td> <td>状态不只靠颜色（加图标/文字/形状）</td> <td>只用红色标错误</td> </tr> <tr> <td>A11Y-21</td> <td>reduced-motion</td> <td>prefers-reduced-motion:reduce 时关闭动画</td> <td>动画无法关闭</td> </tr> <tr> <td>A11Y-22</td> <td>high-contrast</td> <td>prefers-contrast:more 时增强对比</td> <td>高对比模式不适配</td> </tr> <tr> <td>A11Y-23</td> <td>动态字号</td> <td>使用 rem 单位支持浏览器字号设置</td> <td>全用 px 不跟随系统</td> </tr> <tr> <td>A11Y-24</td> <td>表单标签</td> <td>label 与 input 关联(for/id 或嵌套)</td> <td>label 和 input 未关联</td> </tr> <tr> <td>A11Y-25</td> <td>必填标识</td> <td>aria-required=&ldquo;true&rdquo; + 视觉标记</td> <td>只用红色星号标必填</td> </tr> </tbody> </table> <hr> <h1 id="十主题层theming">十、主题层（Theming）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>TH-01</td> <td>CSS 变量体系</td> <td>所有设计值用 var(&ndash;xxx) 引用</td> <td>硬编码颜色/间距值</td> </tr> <tr> <td>TH-02</td> <td>亮色主题 token</td> <td>&ndash;color-primary/&hellip; 等完整定义</td> <td>亮色下部分颜色未定义</td> </tr> <tr> <td>TH-03</td> <td>暗色主题 token</td> <td>.dark 下覆盖所有 CSS 变量</td> <td>暗色下部分颜色未覆盖</td> </tr> <tr> <td>TH-04</td> <td>主题切换器</td> <td>手动切换/跟随系统/记住偏好</td> <td>无切换入口</td> </tr> <tr> <td>TH-05</td> <td>主题过渡</td> <td>切换时 color-scheme + transition 平滑</td> <td>切换时闪烁</td> </tr> <tr> <td>TH-06</td> <td>FOUC 防止</td> <td>页面加载时即应用主题(不闪烁)</td> <td>页面先亮后暗闪烁</td> </tr> <tr> <td>TH-07</td> <td>图片适配</td> <td>暗色模式下降低图片亮度</td> <td>暗色下白色图片刺眼</td> </tr> <tr> <td>TH-08</td> <td>第三方嵌入</td> <td>iframe/嵌入组件跟随主题</td> <td>嵌入组件始终亮色</td> </tr> <tr> <td>TH-09</td> <td>品牌定制</td> <td>覆盖 CSS 变量即可换肤</td> <td>换肤需要改源码</td> </tr> <tr> <td>TH-10</td> <td>主题预览</td> <td>设置页可实时预览主题效果</td> <td>保存后才能看到效果</td> </tr> </tbody> </table> <hr> <h1 id="十一动效层motion">十一、动效层（Motion）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>MO-01</td> <td>入场-fade</td> <td>opacity: 0→1</td> <td>淡入过慢影响体验</td> </tr> <tr> <td>MO-02</td> <td>入场-slide</td> <td>translateY/X: offset→0</td> <td>滑入距离过大</td> </tr> <tr> <td>MO-03</td> <td>入场-scale</td> <td>scale: 0.95→1</td> <td>缩放比例过大</td> </tr> <tr> <td>MO-04</td> <td>入场-expand</td> <td>height: 0→auto（动画）</td> <td>展开动画卡顿</td> </tr> <tr> <td>MO-05</td> <td>退场动画</td> <td>入场的反向</td> <td>退场比入场还慢</td> </tr> <tr> <td>MO-06</td> <td>列表 stagger</td> <td>列表项依次入场(每项延迟 50ms)</td> <td>所有项同时出现</td> </tr> <tr> <td>MO-07</td> <td>页面过渡</td> <td>路由切换 fade/slide 过渡</td> <td>页面切换无过渡</td> </tr> <tr> <td>MO-08</td> <td>弹窗进入</td> <td>fade+scale(0.95→1)</td> <td>弹窗突然出现</td> </tr> <tr> <td>MO-09</td> <td>弹窗退出</td> <td>fade+scale(1→0.95)</td> <td>弹窗突然消失</td> </tr> <tr> <td>MO-10</td> <td>Drawer 滑入</td> <td>translateX/Y 从屏幕外滑入</td> <td>Drawer 无动画</td> </tr> <tr> <td>MO-11</td> <td>拖拽占位</td> <td>拖拽时原位置留占位阴影</td> <td>拖起后原位无反馈</td> </tr> <tr> <td>MO-12</td> <td>数值动画</td> <td>数字递增/递减动画(如金额)</td> <td>数字直接跳变</td> </tr> <tr> <td>MO-13</td> <td>微交互-点赞</td> <td>点击后缩放弹跳 + 图标变化</td> <td>点赞无动效反馈</td> </tr> <tr> <td>MO-14</td> <td>微交互-勾选</td> <td>checkmark 绘制动画</td> <td>勾选无反馈</td> </tr> <tr> <td>MO-15</td> <td>微交互-开关</td> <td>switch 滑块移动动画</td> <td>开关直接切换无过渡</td> </tr> <tr> <td>MO-16</td> <td>Spinner</td> <td>旋转/脉冲/骨架屏动画</td> <td>Spinner 不转</td> </tr> <tr> <td>MO-17</td> <td>减少动画</td> <td>prefers-reduced-motion 下禁用所有动画</td> <td>强制动画无法关闭</td> </tr> <tr> <td>MO-18</td> <td>Spring 物理动画</td> <td>弹性缓动(非 cubic-bezier)用于自然感觉的交互</td> <td>动画感觉机械</td> </tr> <tr> <td>MO-19</td> <td>共享元素过渡</td> <td>缩略图→全屏图/列表项→详情页 形变过渡</td> <td>页面切换生硬</td> </tr> <tr> <td>MO-20</td> <td>View Transitions API</td> <td>document.startViewTransition() SPA 页面过渡</td> <td>每次路由跳转无动画</td> </tr> <tr> <td>MO-21</td> <td>滚动驱动动画</td> <td>animation-timeline: scroll() 滚动关联效果(视差/揭示)</td> <td>用 JS 监听 scroll</td> </tr> <tr> <td>MO-22</td> <td>动效 token 体系</td> <td>duration-fast/normal/slow + ease-default/in/out/spring</td> <td>动效参数散落各处</td> </tr> <tr> <td>MO-23</td> <td>动画编排</td> <td>stagger 延迟/并行序列/顺序链 可配置</td> <td>动画无法编排</td> </tr> <tr> <td>MO-24</td> <td>Tooltip 入场</td> <td>从触发点 scale + fade 入场</td> <td>Tooltip 突然出现</td> </tr> <tr> <td>MO-25</td> <td>退场动画生命周期</td> <td>DOM 移除前播放退场动画</td> <td>元素直接消失</td> </tr> <tr> <td>MO-26</td> <td>性能预算</td> <td>只动画 transform + opacity；will-change 谨慎使用</td> <td>动画触发 layout/paint</td> </tr> <tr> <td>MO-27</td> <td>Skeleton shimmer</td> <td>骨架屏使用 CSS shimmer/pulse 动画</td> <td>骨架屏无动画</td> </tr> <tr> <td>MO-28</td> <td>Switch 弹性动画</td> <td>开关切换滑块有弹性过冲效果</td> <td>开关直接跳到对侧</td> </tr> <tr> <td>MO-29</td> <td>用户可控动画</td> <td>设置中有独立开关控制动画，不依赖系统偏好</td> <td>无法单独关闭动画</td> </tr> </tbody> </table> <hr> <h1 id="十二图标层--图片层">十二、图标层 + 图片层</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>IC-01</td> <td>图标集统一</td> <td>全站使用同一图标集(Lucide/Heroicons 等)</td> <td>混用多个图标集</td> </tr> <tr> <td>IC-02</td> <td>图标尺寸阶梯</td> <td>xs(12)/sm(16)/md(20)/lg(24)/xl(32)</td> <td>图标大小随意取值</td> </tr> <tr> <td>IC-03</td> <td>图标线条粗细</td> <td>stroke-width 统一(1.5px 或 2px)</td> <td>同页面图标粗细不一</td> </tr> <tr> <td>IC-04</td> <td>图标颜色</td> <td>默认继承文字色/currentColor</td> <td>图标颜色硬编码</td> </tr> <tr> <td>IC-05</td> <td>图标+文字对齐</td> <td>垂直居中(gap 间距一致)</td> <td>图标与文字未对齐</td> </tr> <tr> <td>IC-06</td> <td>纯图标按钮热区</td> <td>padding 扩大点击区域≥44px</td> <td>图标按钮点击区域太小</td> </tr> <tr> <td>IC-07</td> <td>暗色模式图标</td> <td>SVG fill/stroke 跟随主题</td> <td>暗色下图标不可见</td> </tr> <tr> <td>IC-08</td> <td>自定义图标风格</td> <td>与系统图标集风格一致</td> <td>自定义图标格格不入</td> </tr> <tr> <td>IC-09</td> <td>图片占位符</td> <td>加载中:模糊缩略图/skeleton；加载失败:错误图</td> <td>图片加载中空白</td> </tr> <tr> <td>IC-10</td> <td>图片懒加载</td> <td>loading=&ldquo;lazy&rdquo; 或 IntersectionObserver</td> <td>所有图片首屏加载</td> </tr> <tr> <td>IC-11</td> <td>响应式图片</td> <td>srcset + sizes 提供多分辨率</td> <td>只加载一种尺寸</td> </tr> <tr> <td>IC-12</td> <td>宽高比锁定</td> <td>aspect-ratio 预留空间</td> <td>图片加载后布局跳动(CLS)</td> </tr> <tr> <td>IC-13</td> <td>图片裁剪模式</td> <td>object-cover/contain/fill 明确规范</td> <td>图片变形/留白</td> </tr> <tr> <td>IC-14</td> <td>图片格式优化</td> <td>WebP/AVIF 优先 + JPG fallback</td> <td>全用 JPG/PNG</td> </tr> <tr> <td>IC-15</td> <td>图片压缩</td> <td>质量 75-85% 平衡体积和质量</td> <td>上传原图未压缩</td> </tr> </tbody> </table> <hr> <h1 id="十三表单层forms">十三、表单层（Forms）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>FM-01</td> <td>垂直布局</td> <td>label 在上，input 在下（默认）</td> <td>label 和 input 不在同一行</td> </tr> <tr> <td>FM-02</td> <td>水平布局</td> <td>label 在左，input 在右，label 右对齐</td> <td>label 宽度不一致</td> </tr> <tr> <td>FM-03</td> <td>内联布局</td> <td>所有字段水平排列</td> <td>移动端内联布局溢出</td> </tr> <tr> <td>FM-04</td> <td>Label 必填标记</td> <td>红色 * 或 (必填) 文字</td> <td>必填标记位置不统一</td> </tr> <tr> <td>FM-05</td> <td>Label 可选标记</td> <td>(可选) 灰色文字</td> <td>全标必填不如标可选</td> </tr> <tr> <td>FM-06</td> <td>帮助文本</td> <td>字段下方灰色小字说明</td> <td>说明文字与错误提示混淆</td> </tr> <tr> <td>FM-07</td> <td>验证时机-blur</td> <td>离开字段时验证</td> <td>填写时就报错</td> </tr> <tr> <td>FM-08</td> <td>验证时机-submit</td> <td>提交时统一验证</td> <td>两种时机混用</td> </tr> <tr> <td>FM-09</td> <td>错误提示-位置</td> <td>字段正下方</td> <td>错误提示离字段太远</td> </tr> <tr> <td>FM-10</td> <td>错误提示-样式</td> <td>error 色 + 图标 + 文字</td> <td>只有红色边框无文字</td> </tr> <tr> <td>FM-11</td> <td>错误提示-聚焦</td> <td>点击错误提示聚焦到对应字段</td> <td>无法从错误定位到字段</td> </tr> <tr> <td>FM-12</td> <td>成功状态</td> <td>绿色边框 + ✓ 图标</td> <td>填写正确无反馈</td> </tr> <tr> <td>FM-13</td> <td>字段分组</td> <td>fieldset + legend / 分组标题 + 分割线</td> <td>表单过长无分组</td> </tr> <tr> <td>FM-14</td> <td>字段依赖</td> <td>A 选值后 B 显隐/可选值变化</td> <td>联动不及时</td> </tr> <tr> <td>FM-15</td> <td>多步表单</td> <td>步骤指示 + 上一步/下一步</td> <td>无法回到上一步</td> </tr> <tr> <td>FM-16</td> <td>草稿保存</td> <td>自动/手动保存表单进度</td> <td>填了一半意外丢失</td> </tr> <tr> <td>FM-17</td> <td>提交 loading</td> <td>按钮 loading + 禁止重复点击</td> <td>重复点击提交多次</td> </tr> <tr> <td>FM-18</td> <td>提交成功</td> <td>toast/跳转结果页</td> <td>提交后无反馈</td> </tr> <tr> <td>FM-19</td> <td>提交失败</td> <td>错误提示 + 保留已填数据</td> <td>提交失败数据丢失</td> </tr> <tr> <td>FM-20</td> <td>密码强度</td> <td>强度条 + 规则列表实时反馈</td> <td>不告知密码要求</td> </tr> <tr> <td>FM-21</td> <td>自动保存</td> <td>localStorage 自动保存表单进度 + 恢复提示</td> <td>填写一半刷新丢失</td> </tr> <tr> <td>FM-22</td> <td>条件字段</td> <td>字段显隐依赖其他字段值 + 动画 + 排除验证</td> <td>隐藏字段仍被验证</td> </tr> <tr> <td>FM-23</td> <td>重复字段组</td> <td>&ldquo;添加更多&quot;模式 + 增删按钮 + 索引管理</td> <td>多个地址无法添加</td> </tr> <tr> <td>FM-24</td> <td>密码要求列表</td> <td>密码字段旁显示要求清单 + 实时勾选</td> <td>不告知密码规则</td> </tr> <tr> <td>FM-25</td> <td>密码确认</td> <td>确认密码实时匹配提示</td> <td>提交时才发现不匹配</td> </tr> <tr> <td>FM-26</td> <td>未保存提示</td> <td>表单修改后离开页面弹出确认</td> <td>数据静默丢失</td> </tr> <tr> <td>FM-27</td> <td>表单重置</td> <td>重置按钮 + 有修改时二次确认</td> <td>重置无法撤销</td> </tr> <tr> <td>FM-28</td> <td>Blur 格式化</td> <td>电话/货币/日期输入失焦后自动格式化</td> <td>用户输入格式混乱</td> </tr> <tr> <td>FM-29</td> <td>级联下拉</td> <td>国家→省份→城市 异步加载+loading</td> <td>级联选项加载无反馈</td> </tr> <tr> <td>FM-30</td> <td>Inputmode</td> <td>numeric/email/tel/url 触发对应移动端键盘</td> <td>数字输入弹出全键盘</td> </tr> <tr> <td>FM-31</td> <td>粘贴处理</td> <td>粘贴逗号分隔文本自动拆分为标签</td> <td>粘贴报错</td> </tr> <tr> <td>FM-32</td> <td>批量编辑</td> <td>多条记录同时编辑的模式</td> <td>逐条编辑效率低</td> </tr> <tr> <td>FM-33</td> <td>搜索型下拉</td> <td>combobox 支持搜索+键盘+异步加载</td> <td>下拉选项过多无法定位</td> </tr> </tbody> </table> <hr> <h1 id="十四内容层content">十四、内容层（Content）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CT-01</td> <td>标题唯一</td> <td>每页仅一个 h1</td> <td>多个 h1 或无 h1</td> </tr> <tr> <td>CT-02</td> <td>标题层级</td> <td>h1→h2→h3 不跳级</td> <td>h2 直接跳到 h4</td> </tr> <tr> <td>CT-03</td> <td>段落长度</td> <td>单段 3-4 行，不超过 6 行</td> <td>大段文字墙</td> </tr> <tr> <td>CT-04</td> <td>列表使用</td> <td>≥3 项内容用列表</td> <td>多项并列用段落</td> </tr> <tr> <td>CT-05</td> <td>链接文字</td> <td>描述性文字（非&quot;点击这里&rdquo;）</td> <td>链接文字是&quot;这里&quot;</td> </tr> <tr> <td>CT-06</td> <td>链接样式</td> <td>下划线 + 颜色区分 + visited 状态</td> <td>链接与正文无法区分</td> </tr> <tr> <td>CT-07</td> <td>外部链接标识</td> <td>外链有图标标识</td> <td>不告知将离开本站</td> </tr> <tr> <td>CT-08</td> <td>代码块</td> <td>语法高亮 + 语言标签 + 复制按钮</td> <td>代码块无复制功能</td> </tr> <tr> <td>CT-09</td> <td>引用样式</td> <td>blockquote 有视觉区分</td> <td>引用与正文无区分</td> </tr> <tr> <td>CT-10</td> <td>表格样式</td> <td>表头区分 + 行 hover + 响应式</td> <td>内容表格样式简陋</td> </tr> <tr> <td>CT-11</td> <td>内容最大宽度</td> <td>文章区域 60-75 字符宽度(~680px)</td> <td>内容区过宽难阅读</td> </tr> <tr> <td>CT-12</td> <td>标点规范</td> <td>中英文标点使用规范</td> <td>半角全角标点混用</td> </tr> </tbody> </table> <hr> <h1 id="十五国际化层i18n">十五、国际化层（i18n）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>I18N-01</td> <td>文字方向</td> <td>dir=&ldquo;ltr&rdquo;/&ldquo;rtl&rdquo; 布局翻转</td> <td>阿拉伯语布局错乱</td> </tr> <tr> <td>I18N-02</td> <td>文案长度适配</td> <td>按钮/标签允许文案 2-3 倍长度</td> <td>德语文案溢出按钮</td> </tr> <tr> <td>I18N-03</td> <td>日期格式</td> <td>locale 感知(YYYY-MM-DD / MM/DD/YYYY)</td> <td>日期格式不统一</td> </tr> <tr> <td>I18N-04</td> <td>数字格式</td> <td>千分位/小数点 locale 感知</td> <td>数字格式不符合当地习惯</td> </tr> <tr> <td>I18N-05</td> <td>货币格式</td> <td>符号位置(前/后) + 小数位数</td> <td>货币符号位置错误</td> </tr> <tr> <td>I18N-06</td> <td>复数形式</td> <td>i18n 库处理复数规则</td> <td>&ldquo;1 items&rdquo; 而非 &ldquo;1 item&rdquo;</td> </tr> <tr> <td>I18N-07</td> <td>字体回退</td> <td>多语言字体栈（CJK/Arabic/Devanagari）</td> <td>某些语言文字显示异常</td> </tr> <tr> <td>I18N-08</td> <td>图标国际化</td> <td>图标不含文字(文字用 i18n)</td> <td>图标中嵌文字无法翻译</td> </tr> <tr> <td>I18N-09</td> <td>双向布局镜像</td> <td>margin-left→margin-right, float-left→float-right, 箭头方向反转</td> <td>RTL 布局不镜像</td> </tr> <tr> <td>I18N-10</td> <td>逻辑 CSS 属性</td> <td>margin-inline-start 替代 margin-left，border-inline-start 替代 border-left</td> <td>物理属性在 RTL 下不翻转</td> </tr> <tr> <td>I18N-11</td> <td>文本方向检测</td> <td>用户生成内容用 dir=&ldquo;auto&rdquo; 自动检测方向</td> <td>阿拉伯文/希伯来文显示乱序</td> </tr> <tr> <td>I18N-12</td> <td>Locale 感知排序</td> <td>列表/表格用 Intl.Collator 按 locale 规则排序</td> <td>中文按 Unicode 而非拼音排序</td> </tr> <tr> <td>I18N-13</td> <td>姓名格式化</td> <td>名前姓后 / 姓前名后 按 locale 调整</td> <td>日文/韩文姓名顺序错误</td> </tr> <tr> <td>I18N-14</td> <td>地址格式化</td> <td>地址字段顺序/标签按国家调整</td> <td>所有国家用同一地址格式</td> </tr> <tr> <td>I18N-15</td> <td>错误消息翻译</td> <td>验证消息/ARIA 标签/toast 消息全部可翻译</td> <td>部分错误消息硬编码英文</td> </tr> <tr> <td>I18N-16</td> <td>翻译缺失降级</td> <td>翻译缺失时降级到默认语言，而非显示 key</td> <td>显示 &ldquo;error.required&rdquo; 原始 key</td> </tr> <tr> <td>I18N-17</td> <td>相对时间格式</td> <td>&ldquo;3 小时前&rdquo; 用 Intl.RelativeTimeFormat</td> <td>时间格式不随语言变化</td> </tr> <tr> <td>I18N-18</td> <td>列表格式</td> <td>&ldquo;A、B 和 C&rdquo; 用 Intl.ListFormat 按语言切换</td> <td>中英文列表连接符相同</td> </tr> <tr> <td>I18N-19</td> <td>图标方向感知</td> <td>&ldquo;返回&quot;箭头 LTR 朝左/RTL 朝右</td> <td>RTL 下箭头方向错误</td> </tr> <tr> <td>I18N-20</td> <td>数字输入 locale</td> <td>数字输入接受 locale 分隔符（逗号/句号）</td> <td>只接受英文数字格式</td> </tr> <tr> <td>I18N-21</td> <td>时区处理</td> <td>日期时间显示用户时区；提供时区选择器</td> <td>所有用户看到同一时区时间</td> </tr> </tbody> </table> <hr> <h1 id="十六性能层performance">十六、性能层（Performance）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>PF-01</td> <td>FCP</td> <td>First Contentful Paint &lt; 1.8s</td> <td>白屏时间长</td> </tr> <tr> <td>PF-02</td> <td>LCP</td> <td>Largest Contentful Paint &lt; 2.5s</td> <td>首屏大图加载慢</td> </tr> <tr> <td>PF-03</td> <td>INP</td> <td>Interaction to Next Paint &lt; 200ms</td> <td>点击后卡顿</td> </tr> <tr> <td>PF-04</td> <td>CLS</td> <td>Cumulative Layout Shift &lt; 0.1</td> <td>页面元素跳动</td> </tr> <tr> <td>PF-05</td> <td>路由分割</td> <td>每个路由独立 chunk</td> <td>首屏加载全站代码</td> </tr> <tr> <td>PF-06</td> <td>组件懒加载</td> <td>heavy 组件 dynamic import</td> <td>所有组件一次加载</td> </tr> <tr> <td>PF-07</td> <td>资源预加载</td> <td>preload 关键字体/图片</td> <td>字体闪烁(FOIT)</td> </tr> <tr> <td>PF-08</td> <td>资源预获取</td> <td>prefetch 下个页面资源</td> <td>无预获取</td> </tr> <tr> <td>PF-09</td> <td>字体优化</td> <td>font-display:swap + 子集化 + preload</td> <td>字体文件过大</td> </tr> <tr> <td>PF-10</td> <td>图片优化</td> <td>响应式 + 懒加载 + WebP/AVIF + 尺寸预留</td> <td>加载原图大图</td> </tr> <tr> <td>PF-11</td> <td>动画性能</td> <td>只用 transform + opacity</td> <td>用 top/left 做动画</td> </tr> <tr> <td>PF-12</td> <td>虚拟列表</td> <td>大列表虚拟化渲染</td> <td>万级 DOM 节点</td> </tr> <tr> <td>PF-13</td> <td>DOM 深度</td> <td>嵌套不超过 15 层</td> <td>过深嵌套</td> </tr> <tr> <td>PF-14</td> <td>CSS 体积</td> <td>未使用的 CSS 清理</td> <td>CSS 文件过大</td> </tr> <tr> <td>PF-15</td> <td>缓存策略</td> <td>静态资源 immutable cache</td> <td>每次都请求静态资源</td> </tr> </tbody> </table> <hr> <h1 id="十七安全层security">十七、安全层（Security）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>SEC-01</td> <td>XSS-输出转义</td> <td>用户输入渲染前转义 HTML</td> <td>innerHTML 直接插入用户内容</td> </tr> <tr> <td>SEC-02</td> <td>XSS-CSP</td> <td>Content-Security-Policy 头设置</td> <td>无 CSP 或 CSP 过宽松</td> </tr> <tr> <td>SEC-03</td> <td>CSRF</td> <td>Token / SameSite Cookie</td> <td>无 CSRF 防护</td> </tr> <tr> <td>SEC-04</td> <td>密码遮蔽</td> <td>type=password + 非自动填充</td> <td>密码明文显示</td> </tr> <tr> <td>SEC-05</td> <td>敏感数据掩码</td> <td>身份证/银行卡/手机号部分遮蔽</td> <td>完整显示敏感信息</td> </tr> <tr> <td>SEC-06</td> <td>输入净化</td> <td>URL/HTML/SQL 参数过滤</td> <td>直接拼接用户输入到 URL</td> </tr> <tr> <td>SEC-07</td> <td>点击劫持</td> <td>X-Frame-Options / CSP frame-ancestors</td> <td>页面可被 iframe 嵌入</td> </tr> <tr> <td>SEC-08</td> <td>自动填充</td> <td>autocomplete 属性正确设置</td> <td>敏感字段自动填充泄露</td> </tr> <tr> <td>SEC-09</td> <td>文件上传限制</td> <td>文件类型/大小/数量限制</td> <td>可上传任意文件</td> </tr> <tr> <td>SEC-10</td> <td>速率限制</td> <td>前端节流 + 后端限流</td> <td>无限制可暴力请求</td> </tr> </tbody> </table> <hr> <h1 id="十八滚动与光标层scroll--cursor">十八、滚动与光标层（Scroll &amp; Cursor）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>SC-01</td> <td>平滑滚动</td> <td>html { scroll-behavior: smooth }</td> <td>锚点跳转无过渡</td> </tr> <tr> <td>SC-02</td> <td>滚动捕捉</td> <td>scroll-snap-type 用于轮播/全屏页</td> <td>滚动定位不精准</td> </tr> <tr> <td>SC-03</td> <td>滚动阴影</td> <td>内容滚动时 header/footer 底部出现阴影</td> <td>滚动后无法区分层级</td> </tr> <tr> <td>SC-04</td> <td>滚动到顶按钮</td> <td>滚动超过一屏后出现返回顶部</td> <td>滚动很长找不到回去的路</td> </tr> <tr> <td>SC-05</td> <td>虚拟滚动条</td> <td>overflow-scroll 但隐藏原生滚动条</td> <td>滚动条样式破坏设计</td> </tr> <tr> <td>SC-06</td> <td>自定义滚动条</td> <td>webkit-scrollbar 样式（窄轨道/圆角）</td> <td>原生滚动条太粗</td> </tr> <tr> <td>SC-07</td> <td>锁定背景滚动</td> <td>弹窗打开时 body overflow:hidden</td> <td>弹窗打开背景还在滚</td> </tr> <tr> <td>SC-08</td> <td>光标-可点击</td> <td>可交互元素 cursor:pointer</td> <td>按钮光标为 default</td> </tr> <tr> <td>SC-09</td> <td>光标-不可点击</td> <td>禁用元素 cursor:not-allowed</td> <td>禁用按钮光标仍为 pointer</td> </tr> <tr> <td>SC-10</td> <td>光标-等待</td> <td>加载/处理中 cursor:wait</td> <td>长操作无光标变化</td> </tr> <tr> <td>SC-11</td> <td>光标-文本</td> <td>可选文本区域 cursor:text</td> <td>文字区域光标为 default</td> </tr> <tr> <td>SC-12</td> <td>光标-拖拽</td> <td>可拖拽元素 cursor:grab/grabbing</td> <td>拖拽时光标无变化</td> </tr> <tr> <td>SC-13</td> <td>选区样式</td> <td>::selection 背景色+文字色 token 化</td> <td>选区颜色为默认蓝色</td> </tr> <tr> <td>SC-14</td> <td>占位符样式</td> <td>::placeholder 颜色 token 化</td> <td>placeholder 颜色与正文混淆</td> </tr> <tr> <td>SC-15</td> <td>滚动指示器</td> <td>长内容页面顶部进度条</td> <td>不知当前阅读进度</td> </tr> </tbody> </table> <hr> <h1 id="十九错误与空状态层error--empty-states">十九、错误与空状态层（Error &amp; Empty States）</h1> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>ERR-01</td> <td>404 页面</td> <td>插图+描述+返回首页/搜索入口</td> <td>404 只显示空白</td> </tr> <tr> <td>ERR-02</td> <td>500 页面</td> <td>插图+描述+重试按钮+返回首页</td> <td>500 显示原始错误堆栈</td> </tr> <tr> <td>ERR-03</td> <td>网络错误</td> <td>断网提示+重试按钮</td> <td>断网时页面白屏</td> </tr> <tr> <td>ERR-04</td> <td>权限错误</td> <td>403/401 页面+登录/申请入口</td> <td>权限不足显示 404</td> </tr> <tr> <td>ERR-05</td> <td>表单错误汇总</td> <td>多个错误时顶部汇总+滚动到第一个</td> <td>多个错误只看到最后一个</td> </tr> <tr> <td>ERR-06</td> <td>API 错误 toast</td> <td>接口报错时显示 toast</td> <td>接口报错无任何提示</td> </tr> <tr> <td>ERR-07</td> <td>空列表</td> <td>插图+描述+创建/导入入口</td> <td>空列表只显示&quot;暂无数据&rdquo;</td> </tr> <tr> <td>ERR-08</td> <td>空搜索</td> <td>搜索无结果时提示+建议</td> <td>搜索无结果空白</td> </tr> <tr> <td>ERR-09</td> <td>图片加载失败</td> <td>备用图/重试/隐藏</td> <td>图片加载失败显示破图</td> </tr> <tr> <td>ERR-10</td> <td>组件错误边界</td> <td>组件崩溃时显示 fallback 而非白屏</td> <td>一个组件崩全页白屏</td> </tr> <tr> <td>ERR-11</td> <td>超时处理</td> <td>请求超时提示+重试</td> <td>长时间等待无反馈</td> </tr> <tr> <td>ERR-12</td> <td>维护页面</td> <td>计划维护提示页</td> <td>维护时显示 500 错误</td> </tr> </tbody> </table> <hr> <h1 id="二十高级组件层advanced-components">二十、高级组件层（Advanced Components）</h1> <h2 id="201-轮播carousel">20.1 轮播（Carousel）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CAR-01</td> <td>指示器</td> <td>底部圆点/数字指示当前位置</td> <td>不知道当前第几张</td> </tr> <tr> <td>CAR-02</td> <td>前进/后退</td> <td>左右箭头/边缘点击</td> <td>无法手动切换</td> </tr> <tr> <td>CAR-03</td> <td>自动播放</td> <td>自动轮播+悬浮暂停</td> <td>自动播放无法暂停</td> </tr> <tr> <td>CAR-04</td> <td>循环</td> <td>到达末尾后回到第一张</td> <td>到末尾就停了</td> </tr> <tr> <td>CAR-05</td> <td>触摸滑动</td> <td>移动端手势滑动</td> <td>移动端只能点箭头</td> </tr> <tr> <td>CAR-06</td> <td>键盘操作</td> <td>左右方向键切换</td> <td>无法键盘操作</td> </tr> <tr> <td>CAR-07</td> <td>懒加载</td> <td>非当前帧图片懒加载</td> <td>所有图片一次加载</td> </tr> </tbody> </table> <h2 id="202-全局搜索--命令面板command-palette">20.2 全局搜索 / 命令面板（Command Palette）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CMD-01</td> <td>快捷键触发</td> <td>Ctrl+K / Cmd+K 打开</td> <td>无快捷键入口</td> </tr> <tr> <td>CMD-02</td> <td>搜索框自动聚焦</td> <td>打开即聚焦输入框</td> <td>需要手动点击输入框</td> </tr> <tr> <td>CMD-03</td> <td>实时搜索</td> <td>输入时即时过滤结果</td> <td>需要按回车才搜索</td> </tr> <tr> <td>CMD-04</td> <td>分类展示</td> <td>最近使用/建议/操作 分组</td> <td>结果无分组</td> </tr> <tr> <td>CMD-05</td> <td>键盘导航</td> <td>上下箭头选择+回车确认</td> <td>无法键盘操作</td> </tr> <tr> <td>CMD-06</td> <td>高亮匹配</td> <td>搜索关键词在结果中高亮</td> <td>匹配位置不明显</td> </tr> <tr> <td>CMD-07</td> <td>无结果状态</td> <td>搜索无结果有提示</td> <td>无结果空白</td> </tr> </tbody> </table> <h2 id="203-图片灯箱lightbox">20.3 图片灯箱（Lightbox）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>LB-01</td> <td>全屏预览</td> <td>点击图片全屏查看</td> <td>只能看缩略图</td> </tr> <tr> <td>LB-02</td> <td>缩放</td> <td>双击/滚轮/捏合缩放</td> <td>大图无法看细节</td> </tr> <tr> <td>LB-03</td> <td>前后切换</td> <td>左右箭头切换图片</td> <td>无法浏览下一张</td> </tr> <tr> <td>LB-04</td> <td>关闭方式</td> <td>ESC / 点击外部 / X 按钮</td> <td>只能点 X 关闭</td> </tr> <tr> <td>LB-05</td> <td>图片计数</td> <td>&ldquo;3/12&rdquo; 当前/总数</td> <td>不知还有多少张</td> </tr> <tr> <td>LB-06</td> <td>缩略图列表</td> <td>底部缩略图快速跳转</td> <td>无法跳转到特定图</td> </tr> </tbody> </table> <h2 id="204-通知中心">20.4 通知中心</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>NTF-01</td> <td>未读标识</td> <td>图标上数字/红点</td> <td>不知道有新通知</td> </tr> <tr> <td>NTF-02</td> <td>通知面板</td> <td>点击图标展开面板</td> <td>通知直接跳转无预览</td> </tr> <tr> <td>NTF-03</td> <td>全部已读</td> <td>一键标记所有已读</td> <td>需要逐条点</td> </tr> <tr> <td>NTF-04</td> <td>通知分类</td> <td>系统/消息/操作 分 tab</td> <td>所有通知混在一起</td> </tr> <tr> <td>NTF-05</td> <td>加载更多</td> <td>滚动加载历史通知</td> <td>只显示最近几条</td> </tr> <tr> <td>NTF-06</td> <td>空通知</td> <td>插图+描述</td> <td>空通知只显示空白</td> </tr> </tbody> </table> <h2 id="205-cookie-同意横幅">20.5 Cookie 同意横幅</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CK-01</td> <td>位置</td> <td>底部固定横幅/顶部全屏</td> <td>遮挡主要内容</td> </tr> <tr> <td>CK-02</td> <td>接受/拒绝</td> <td>明确的接受和拒绝按钮</td> <td>只有接受按钮</td> </tr> <tr> <td>CK-03</td> <td>详细选项</td> <td>可选择接受哪些类别</td> <td>全有或全无</td> </tr> <tr> <td>CK-04</td> <td>记忆选择</td> <td>选择后 6-12 个月不再显示</td> <td>每次访问都弹</td> </tr> <tr> <td>CK-05</td> <td>修改选择</td> <td>设置中可修改 cookie 偏好</td> <td>无法修改之前的选择</td> </tr> </tbody> </table> <h2 id="206-超级菜单mega-menu">20.6 超级菜单（Mega Menu）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>MEGA-01</td> <td>全宽面板</td> <td>菜单项展开全宽下拉面板，与导航栏对齐</td> <td>下拉面板只有菜单宽度</td> </tr> <tr> <td>MEGA-02</td> <td>多列布局</td> <td>链接按分类分列 + 分类标题</td> <td>所有链接单列罗列</td> </tr> <tr> <td>MEGA-03</td> <td>特色内容</td> <td>支持促销图/高亮推荐/横幅</td> <td>纯文字列表</td> </tr> <tr> <td>MEGA-04</td> <td>键盘导航</td> <td>Tab/箭头遍历菜单项</td> <td>无法键盘操作</td> </tr> <tr> <td>MEGA-05</td> <td>悬停意图</td> <td>延迟打开/关闭防止鼠标经过误触发</td> <td>鼠标经过就打开</td> </tr> <tr> <td>MEGA-06</td> <td>响应式折叠</td> <td>移动端折叠为手风琴/钻入式导航</td> <td>移动端仍全宽面板</td> </tr> </tbody> </table> <h2 id="207-图表数据可视化charts">20.7 图表/数据可视化（Charts）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>CHT-01</td> <td>图表类型</td> <td>柱状/折线/面积/饼图/散点/迷你图</td> <td>只有基础柱状图</td> </tr> <tr> <td>CHT-02</td> <td>图表色板</td> <td>使用设计系统色板；系列间对比度足够</td> <td>图表颜色随意取值</td> </tr> <tr> <td>CHT-03</td> <td>交互式图例</td> <td>点击图例切换系列显隐</td> <td>图例纯展示</td> </tr> <tr> <td>CHT-04</td> <td>数据 Tooltip</td> <td>悬浮显示精确值 + 格式化数字</td> <td>无数据查看方式</td> </tr> <tr> <td>CHT-05</td> <td>坐标轴标签</td> <td>标签可读（旋转/截断/密集时跳过）</td> <td>标签重叠不可读</td> </tr> <tr> <td>CHT-06</td> <td>图表无障碍</td> <td>aria-label 或 role=&ldquo;img&rdquo; + 数据表格降级</td> <td>屏幕阅读器无法感知</td> </tr> <tr> <td>CHT-07</td> <td>图表响应式</td> <td>图表随容器宽度自适应</td> <td>固定宽度溢出</td> </tr> <tr> <td>CHT-08</td> <td>图表空状态</td> <td>&ldquo;暂无数据&rdquo; 插图+提示</td> <td>空数据时空白</td> </tr> <tr> <td>CHT-09</td> <td>图表加载态</td> <td>数据加载中 skeleton/shimmer</td> <td>加载中空白</td> </tr> <tr> <td>CHT-10</td> <td>图表动画</td> <td>入场动画(柱形增长/线条绘制)+reduced-motion</td> <td>图表突然出现</td> </tr> </tbody> </table> <h2 id="208-富文本编辑器rich-text-editor">20.8 富文本编辑器（Rich Text Editor）</h2> <table> <thead> <tr> <th>#</th> <th>检查项</th> <th>验证标准</th> <th>常见问题</th> </tr> </thead> <tbody> <tr> <td>RTE-01</td> <td>工具栏格式</td> <td>加粗/斜体/下划线/删除线/标题/列表/引用/代码/链接</td> <td>工具栏功能不全</td> </tr> <tr> <td>RTE-02</td> <td>工具栏对齐</td> <td>文本对齐选项(左/中/右/两端)</td> <td>无对齐控制</td> </tr> <tr> <td>RTE-03</td> <td>嵌入支持</td> <td>图片/视频/文件 嵌入编辑器</td> <td>只能输入纯文本</td> </tr> <tr> <td>RTE-04</td> <td>表格支持</td> <td>编辑器内插入/编辑表格</td> <td>无表格功能</td> </tr> <tr> <td>RTE-05</td> <td>撤销/重做</td> <td>Ctrl+Z / Ctrl+Y 在编辑器上下文中</td> <td>撤销影响整页</td> </tr> <tr> <td>RTE-06</td> <td>字数统计</td> <td>实时字符数/字数显示</td> <td>无字数限制提示</td> </tr> <tr> <td>RTE-07</td> <td>快捷键提示</td> <td>Ctrl+B/I/K 格式化快捷键 + tooltip</td> <td>不告知有快捷键</td> </tr> <tr> <td>RTE-08</td> <td>输出格式</td> <td>输出有效 HTML/Markdown + 设计系统类名</td> <td>输出格式不可控</td> </tr> <tr> <td>RTE-09</td> <td>粘贴清理</td> <td>外部粘贴内容清理格式保留结构</td> <td>粘贴带大量垃圾样式</td> </tr> <tr> <td>RTE-10</td> <td>@提及支持</td> <td>@mention 和 #hashtag 自动补全</td> <td>无提及功能</td> </tr> <tr> <td>RTE-11</td> <td>最大长度</td> <td>最大内容长度 + 倒计提示</td> <td>超出长度无提示</td> </tr> </tbody> </table> <hr> <h1 id="二十一实践建议">二十一、实践建议</h1> <h2 id="211-如何使用本清单">21.1 如何使用本清单</h2> <h3 id="设计初期需求阶段">设计初期（需求阶段）</h3> <ol> <li>从汇总表勾选本次需要实现的检查项</li> <li>按层级组织成设计需求文档</li> <li>每个检查项写明具体参数（如&quot;字号阶梯: 12/14/16/20/24/30/36&quot;）</li> <li>将需求清单交给 AI 实现</li> </ol> <h3 id="设计中期开发阶段">设计中期（开发阶段）</h3> <ol> <li>逐层扫描，对照检查项验收</li> <li>重点检查：颜色层、间距层、组件状态完整性</li> <li>使用自动化工具辅助：Lighthouse、axe-core、Stylelint</li> </ol> <h3 id="设计后期审查阶段">设计后期（审查阶段）</h3> <ol> <li>按检查项清单逐项审查</li> <li>标记未通过项，给出具体修改建议</li> <li>回归测试确保修改不引入新问题</li> </ol> <h2 id="212-给-ai-的提示词模板">21.2 给 AI 的提示词模板</h2> <h3 id="模板一design-token-定义">模板一：Design Token 定义</h3> <pre tabindex="0"><code>请基于 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 配置。 </code></pre><h3 id="模板二组件实现">模板二：组件实现</h3> <pre tabindex="0"><code>请使用 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 </code></pre><h3 id="模板三审查检查单">模板三：审查检查单</h3> <pre tabindex="0"><code>请审查当前页面的 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 输出格式： | 检查项 | 状态 | 问题描述 | 修复建议 | </code></pre><h2 id="213-检查优先级排序">21.3 检查优先级排序</h2> <table> <thead> <tr> <th>优先级</th> <th>层级</th> <th>理由</th> </tr> </thead> <tbody> <tr> <td>P0 必做</td> <td>排版、颜色、间距</td> <td>设计系统骨架，影响全局一致性</td> </tr> <tr> <td>P0 必做</td> <td>组件状态</td> <td>缺失状态导致功能不可用</td> </tr> <tr> <td>P0 必做</td> <td>无障碍</td> <td>法律合规 + 用户覆盖</td> </tr> <tr> <td>P0 必做</td> <td>错误与空状态</td> <td>用户体验底线</td> </tr> <tr> <td>P1 重要</td> <td>布局、圆角阴影、图标</td> <td>视觉一致性的关键</td> </tr> <tr> <td>P1 重要</td> <td>交互反馈、响应式</td> <td>用户体验的核心</td> </tr> <tr> <td>P1 重要</td> <td>主题（暗色模式）</td> <td>用户期望</td> </tr> <tr> <td>P1 重要</td> <td>滚动与光标</td> <td>交互细节完整性</td> </tr> <tr> <td>P1 重要</td> <td>通知中心</td> <td>信息可达性</td> </tr> <tr> <td>P2 改进</td> <td>动效、内容排版</td> <td>锦上添花</td> </tr> <tr> <td>P2 改进</td> <td>性能优化</td> <td>持续优化</td> </tr> <tr> <td>P2 改进</td> <td>轮播、命令面板、灯箱</td> <td>高级组件</td> </tr> <tr> <td>P3 可选</td> <td>国际化、安全</td> <td>视项目需求</td> </tr> <tr> <td>P3 可选</td> <td>Cookie 同意</td> <td>合规需求</td> </tr> </tbody> </table> <hr> <h1 id="二十二工具推荐">二十二、工具推荐</h1> <table> <thead> <tr> <th>工具</th> <th>用途</th> <th>检查层级</th> </tr> </thead> <tbody> <tr> <td><strong>Lighthouse</strong></td> <td>性能/无障碍/最佳实践评分</td> <td>性能层、无障碍层</td> </tr> <tr> <td><strong>axe DevTools</strong></td> <td>无障碍自动化检测</td> <td>无障碍层</td> </tr> <tr> <td><strong>Stylelint</strong></td> <td>CSS 规则一致性检查</td> <td>排版层、间距层</td> </tr> <tr> <td><strong>ESLint + a11y 插件</strong></td> <td>JSX/TSX 无障碍检查</td> <td>无障碍层</td> </tr> <tr> <td><strong>Chromatic / Percy</strong></td> <td>视觉回归测试</td> <td>全层级</td> </tr> <tr> <td><strong>Figma Tokens</strong></td> <td>设计令牌管理</td> <td>颜色/排版/间距层</td> </tr> <tr> <td><strong>Tailwind CSS</strong></td> <td>原子化 CSS 框架</td> <td>全层级</td> </tr> <tr> <td><strong>shadcn/ui</strong></td> <td>组件库基础</td> <td>组件层</td> </tr> <tr> <td><strong>Storybook</strong></td> <td>组件文档/预览</td> <td>组件层</td> </tr> <tr> <td><strong>Contrast Checker</strong></td> <td>颜色对比度检测</td> <td>颜色层、无障碍层</td> </tr> </tbody> </table> <hr> <h1 id="二十三总结">二十三、总结</h1> <h3 id="检查项统计">检查项统计</h3> <table> <thead> <tr> <th>层级</th> <th>检查项数量</th> <th>优先级</th> </tr> </thead> <tbody> <tr> <td>排版层</td> <td>25</td> <td>P0</td> </tr> <tr> <td>颜色层</td> <td>30</td> <td>P0</td> </tr> <tr> <td>间距层</td> <td>20</td> <td>P0</td> </tr> <tr> <td>圆角+阴影层</td> <td>20</td> <td>P1</td> </tr> <tr> <td>布局层</td> <td>29</td> <td>P1</td> </tr> <tr> <td>组件-按钮</td> <td>19</td> <td>P0</td> </tr> <tr> <td>组件-输入</td> <td>20</td> <td>P0</td> </tr> <tr> <td>组件-选择</td> <td>10</td> <td>P1</td> </tr> <tr> <td>组件-卡片</td> <td>7</td> <td>P1</td> </tr> <tr> <td>组件-弹窗</td> <td>10</td> <td>P0</td> </tr> <tr> <td>组件-抽屉</td> <td>8</td> <td>P1</td> </tr> <tr> <td>组件-气泡卡片</td> <td>6</td> <td>P1</td> </tr> <tr> <td>组件-菜单</td> <td>8</td> <td>P1</td> </tr> <tr> <td>组件-表格</td> <td>14</td> <td>P1</td> </tr> <tr> <td>组件-标签页</td> <td>6</td> <td>P2</td> </tr> <tr> <td>组件-导航</td> <td>8</td> <td>P1</td> </tr> <tr> <td>组件-反馈</td> <td>16</td> <td>P0</td> </tr> <tr> <td>组件-数据展示</td> <td>20</td> <td>P1</td> </tr> <tr> <td>组件-组合模式</td> <td>15</td> <td>P1</td> </tr> <tr> <td>交互层</td> <td>20</td> <td>P1</td> </tr> <tr> <td>响应式层</td> <td>12</td> <td>P1</td> </tr> <tr> <td>无障碍层</td> <td>25</td> <td>P0</td> </tr> <tr> <td>主题层</td> <td>10</td> <td>P1</td> </tr> <tr> <td>动效层</td> <td>29</td> <td>P2</td> </tr> <tr> <td>图标+图片层</td> <td>15</td> <td>P1</td> </tr> <tr> <td>表单层</td> <td>33</td> <td>P0</td> </tr> <tr> <td>内容层</td> <td>12</td> <td>P2</td> </tr> <tr> <td>国际化层</td> <td>21</td> <td>P3</td> </tr> <tr> <td>性能层</td> <td>15</td> <td>P2</td> </tr> <tr> <td>安全层</td> <td>10</td> <td>P2</td> </tr> <tr> <td>滚动与光标层</td> <td>15</td> <td>P1</td> </tr> <tr> <td>错误与空状态层</td> <td>12</td> <td>P0</td> </tr> <tr> <td>高级组件-轮播</td> <td>7</td> <td>P2</td> </tr> <tr> <td>高级组件-命令面板</td> <td>7</td> <td>P2</td> </tr> <tr> <td>高级组件-灯箱</td> <td>6</td> <td>P2</td> </tr> <tr> <td>高级组件-通知中心</td> <td>6</td> <td>P1</td> </tr> <tr> <td>高级组件-Cookie</td> <td>5</td> <td>P3</td> </tr> <tr> <td>高级组件-超级菜单</td> <td>6</td> <td>P2</td> </tr> <tr> <td>高级组件-图表</td> <td>10</td> <td>P2</td> </tr> <tr> <td>高级组件-富文本编辑器</td> <td>11</td> <td>P2</td> </tr> <tr> <td><strong>合计</strong></td> <td><strong>578</strong></td> <td>—</td> </tr> </tbody> </table> <h3 id="核心原则">核心原则</h3> <ol> <li><strong>每个检查项都是独立可验证的</strong> — 不存在模糊的&quot;好看&quot;要求</li> <li><strong>每个检查项都有明确的验证标准</strong> — 知道&quot;做到了&quot;长什么样</li> <li><strong>每个检查项都可以精确描述给 AI</strong> — 从清单勾选，AI 精确输出</li> <li><strong>层级之间有优先级</strong> — P0 先做骨架，P1 做体验，P2 做打磨</li> <li><strong>清单是活的</strong> — 根据项目需要增删检查项</li> </ol> <h3 id="与-scdesign-配合">与 /sc:design 配合</h3> <p>本清单可作为 <code>/sc:design</code> 的输入：</p> <ol> <li>从清单中勾选需要的检查项</li> <li>填写具体参数值</li> <li>将勾选后的清单作为 design brief 提交给 AI</li> <li>AI 按检查项逐项实现</li> <li>按检查项逐项验收</li> </ol> <hr> <h2 id="附p0-快速审查清单">附：P0 快速审查清单</h2> <blockquote> <p>首次审查时，优先检查以下 <strong>必须做到</strong> 的检查项。通过后可进入 P1 审查。</p> </blockquote> <h3 id="排版p0">排版（P0）</h3> <ul> <li><input disabled="" type="checkbox"> T-01 字体族定义了 primary/heading/mono/fallback 四组</li> <li><input disabled="" type="checkbox"> T-02 字号阶梯有 8+ 个递进级别</li> <li><input disabled="" type="checkbox"> T-03 行高定义了 tight/normal/relaxed</li> <li><input disabled="" type="checkbox"> T-06 h1-h6 视觉层级清晰递减</li> <li><input disabled="" type="checkbox"> T-07 正文字号≥14px，行高≥1.5</li> </ul> <h3 id="颜色p0">颜色（P0）</h3> <ul> <li><input disabled="" type="checkbox"> C-01 品牌色有 50-950 色阶</li> <li><input disabled="" type="checkbox"> C-02 语义色 success/warning/error/info 完整</li> <li><input disabled="" type="checkbox"> C-24 正文对比度≥4.5:1</li> <li><input disabled="" type="checkbox"> C-27 不单独靠颜色传达信息</li> </ul> <h3 id="组件状态p0">组件状态（P0）</h3> <ul> <li><input disabled="" type="checkbox"> BTN-10~14 按钮 hover/active/focus/disabled/loading 完整</li> <li><input disabled="" type="checkbox"> INP-08~12 输入框 hover/focus/error/disabled 完整</li> <li><input disabled="" type="checkbox"> MDL-01~10 弹窗遮罩/关闭/焦点管理完整</li> <li><input disabled="" type="checkbox"> FB-01~05 Toast 有类型区分/自动关闭/可关闭</li> </ul> <h3 id="无障碍p0">无障碍（P0）</h3> <ul> <li><input disabled="" type="checkbox"> A11Y-01 使用语义化 HTML 标签</li> <li><input disabled="" type="checkbox"> A11Y-04 无文字元素有 aria-label</li> <li><input disabled="" type="checkbox"> A11Y-11 所有交互元素 Tab 可达</li> <li><input disabled="" type="checkbox"> A11Y-15 focus-visible 有明确样式</li> <li><input disabled="" type="checkbox"> A11Y-24 表单 label 与 input 关联</li> </ul> <h3 id="错误处理p0">错误处理（P0）</h3> <ul> <li><input disabled="" type="checkbox"> ERR-01 404 页面有插图+返回入口</li> <li><input disabled="" type="checkbox"> ERR-07 空列表有插图+描述+操作入口</li> <li><input disabled="" type="checkbox"> ERR-10 组件崩溃有 fallback</li> <li><input disabled="" type="checkbox"> FM-09 错误提示在字段正下方</li> </ul>