CSS设计规范检查器
在线 CSS 设计规范检查器，支持颜色、字体、间距、圆角、阴影和对比度检查，并可批量校验样式代码
颜色规范
允许的颜色列表
已就绪：可单项检查或批量检查 CSS 代码。
检查结果
规范配置
统计信息
总检查次数0
通过0
警告0
失败0
通过率0%
CSS设计规范检查器说明
CSS设计规范检查器可对颜色、字体、间距、圆角、阴影和对比度进行逐项校验，并支持批量解析 CSS 代码，帮助设计与前端团队快速发现样式偏差，保持界面风格一致性与可访问性。
核心功能
- 支持单项检查：颜色、字号、字体家族、间距、圆角、阴影与文本对比度。
- 支持批量检查 CSS 代码，自动识别常见属性并输出逐条结果。
- 内置颜色与阴影规范列表，可按团队规范自定义并动态增删。
- 提供配置导入导出，便于在不同项目或团队间复用统一规则。
- 实时统计通过、警告、失败数量与通过率，快速评估样式质量。
推荐使用流程
- 先在规范配置区域维护团队的颜色、字号、间距和圆角基线。
- 通过左侧单项检查验证关键样式值是否符合设计系统约束。
- 将组件样式粘贴到批量检查区，快速定位不合规属性。
- 针对可读性场景使用对比度检查，确保文本满足 WCAG 标准。
- 将配置导出为 JSON，在其他项目继续复用同一套规范。
应用场景
- 设计系统落地阶段的样式一致性检查。
- 组件库发布前的规范回归与质量把关。
- 多设计师协作项目中的视觉基线统一。
- 无障碍改造时的文本对比度合规评估。
常见问题
- 为什么批量检查没有结果？请确认 CSS 中包含 color、font-size、padding、border-radius 等可识别属性。
- 导入配置失败怎么办？请检查 JSON 格式和字段名称是否完整。
- 对比度达到 AA 还需要 AAA 吗？正文通常满足 AA 即可，重点信息可按场景提高到 AAA。
隐私说明
本工具的规范检查、颜色计算、对比度分析和配置解析均在浏览器本地完成，不会上传你的 CSS 代码或规范数据。