适用于审查前端代码的设计质量——检查设计令牌（design token）的使用、硬编码值、暗色模式（dark mode）覆盖情况、可访问性（accessibility）合规性、CSS 一致性，或语义化 HTML。 适用于对组件、页面或设计系统进行问题审计。 触发
Argus Design Review Skill. 当此技能被激活时,前端代码的每一行都按照相同的标准进行审计:正确使用设计符,没有硬编码值,暗模式完全渴望
功能概述
Argus Design Review Skill. 当此技能被激活时,前端代码的每一行都按照相同的标准进行审计:正确使用设计符,没有硬编码值,暗模式完全渴望是一项面向实际任务的技能。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
Argus 设计评审技能
当该技能启用时，所有前端代码行均需遵循统一标准进行审查：设计 Token 使用正确、无硬编码值、深色模式全覆盖、满足无障碍基础要求。
评审维度
1. 设计 Token
规则：组件样式规则中出现的所有颜色必须使用 var(--ds-*) 引用。禁止直接使用 oklch()、#hex 或 rgb() 等裸色值。
/* 错误 — 组件规则中直接使用 oklch */
.ds-card {
background: oklch(99% 0.005 80);
color: oklch(20% 0.02 60);
}
/* 正确 — 使用 Token 引用 */
.ds-card {
background: var(--ds-color-surface);
color: var(--ds-color-fg);
}
例外：:root 和 @keyframes 中定义 Token 时，允许使用裸色值（oklch/hex）。
标记项：在组件规则（CSS 或内联 style=）中发现任何裸色值。
2. 硬编码值
规则：所有间距、圆角和字号比例值必须使用设计 Token 尺度系统。禁止使用“魔法数字”（magic numbers）。
/* 错误 */ padding: 16px; border-radius: 8px; /* 正确 */ padding: var(--ds-space-4); border-radius: var(--ds-radius-lg);
标记项：任何本应使用设计 Token 却未使用的非零数值。
3. 深色模式覆盖
规则：:root 中声明的每个颜色 Token 都必须提供 [data-theme="dark"] 对应的重载定义。
/* 错误 — 缺少深色模式重载 */
:root {
--ds-color-bg: oklch(97% 0.012 80);
}
/* 正确 — 已定义重载 */
[data-theme="dark"] {
--ds-color-bg: oklch(15% 0.008 75);
}
标记项：任何在 :root 中声明但未在 [data-theme="dark"] 下重载的颜色 Token。此类问题将导致深色模式静默失效——颜色可能变得不可读。
4. 可访问性
规则：必须满足 WCAG AA 基线要求。此项为强制项，不得降级为警告。
| 模式 | 要求 |
|---|---|
仅含图标的 |
必须包含 aria-label |
|
必须包含 alt 属性 |
无 href 的 |
不得用作按钮；应改用 |
| 可聚焦元素 | 必须具备可见的焦点指示器 |
| 颜色对比度 | 普通文本 ≥ 4.5:1，大号文本 ≥ 3:1 |
标记项：任何违反项均为 P1 级别起评。
5. CSS 质量
- 同一选择器块内不得存在重复规则
- 不得存在空的
catch {}块 - 必须符合有效 BEM 规范（禁止悬挂式修饰符，例如
.parent a--active） - 不得存在无效的 HTML
id重复
6. HTML 结构
问题严重等级
| 严重等级 | 含义 | 示例 |
|---|---|---|
| P0 | 阻断型 — CI 将失败 | 组件规则中使用裸 oklch、深色模式重载缺失或失效 |
| P1 | 高优先级 — 必须修复 | 缺少 aria-label、BEM 不规范、硬编码间距 |
| P2 | 中优先级 — 应当修复 | 重复规则、空 catch 块、语义化违规 |
| P3 | 低优先级 — 优化项 | 代码风格、视觉类问题等 |
输出格式
对每个发现的问题，按如下格式输出：
[P 严重等级] <文件路径>:<行号> — <问题描述> 发现: <当前代码内容> 期望: <应修改为的内容> Token: <应使用的设计 Token（如适用）>
输出结果按严重等级分组：P0 → P1 → P2 → P3。
评审工作流
- 通读代码库 — 理解当前所采用的设计 Token 系统
- 扫描裸色值（出现在
:root声明之外的 oklch/hex/rgb） - 扫描间距、圆角、字号等位置中的魔法数字
- 逐个验证所有颜色 Token 是否具备深色模式重载
- 检查可访问性 — 按钮、图片、语义化 HTML
- 检查 CSS 质量 — 重复规则、BEM 合规性、空 catch 块
- 按严重等级分组报告全部发现项
自动化 PR 评审模式说明：位于 .github/actions/argus-review/action.yml 的复合 Action 在运行时会动态读取 argus 仓库中的 AGENTS.md 与 SKILL.md 文件，并将其内容注入 LLM 提示词（prompt）。评审由 argus-flash GitHub App 执行，并直接在 PR 上以评论形式反馈结果。
非阻断上下文
请勿对以下内容标记问题：
- 第三方重置样式（如 normalize.css）或第三方 CSS 重置文件
- 将被后续替换的生成式样板代码
- 测试固件（test fixtures）与模拟数据文件
node_modules/目录（完全忽略）- 工作流 YAML 文件（
.github/workflows/、.github/actions/）
热门AI工具
相关专题
Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章，帮助读者完成上线流程。
0
2026.10.28
Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章，帮助读者完成从初始化到日常开发的配置。
0
2026.10.28
Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章，帮助读者理解各文件夹的用途与引用方式。
0
2026.10.28
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
0
2026.10.22
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.6万人学习
共6课时 | 54.7万人学习
最新文章
