十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Impeccable 技术审计指南:用 `/impeccable audit` 对 Web 界面做代码级五维体检与 P0–P3 分级报告

Impeccable 技术审计指南:用 `/impeccable audit` 对 Web 界面做代码级五维体检与 P0–P3 分级报告 Impeccable 技术审计指南用/impeccable audit对 Web 界面做代码级五维体检与 P0–P3 分级报告【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable/impeccable audit是 Impeccable 技能体系中的Evaluate评估类命令它不提供好不好看的设计评论而是对实现展开可度量、可验证的代码级技术审计无障碍、性能、主题化、响应式、实现完整性五个维度各打 0–4 分汇总出/20的健康分再以 P0–P3 严重度分级输出问题清单与修复命令路由。读完本文你将掌握审计的五维检查清单、评分标准、报告结构以及如何把审计发现映射回 Impeccable 的其他修复命令形成审计 → 修复 → 复审计的闭环。本文以 skill/reference/audit.md渲染版位于 .cursor/skills/impeccable/reference/audit.md并与各 AI 工具链的安装副本保持一致为骨架展开。一、audit 命令的定位代码级审计不是设计批评audit.md 的第一句话就划清了边界Run systematictechnicalquality checks and generate a comprehensive report. Dont fix issues; document them for other commands to address.关键语义有三点系统性 技术性它检查的是实现中可以测量、可以验证的东西不是视觉品位只报告不修复审计的角色是医生出诊断书把问题形成文档交给其他命令/impeccable optimize、/impeccable adapt、/impeccable harden等去执行修复Web only原生平台ios/android/adaptive应改走 audit.native.md本项目若是原生应用应当立即切换到原生变体而不是套用本 Web 清单。在命令体系中的位置可参见 skill/SKILL.src.md 的 Commands 路由表命令类别定位/impeccable critique [target]EvaluateUX 设计评审启发式打分/impeccable audit [target]Evaluate技术质量检查a11y、perf、responsive 等/impeccable polish [target]Refine上线前的最终质量收尾命令元数据来自 command-metadata.json 的/audit条目给出了面向模型与用户的描述Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.参数提示为[area (feature, page, component...)]即审计目标是某个具体功能、页面或组件区域而非整个项目漫无目的地扫射。仓库用端到端测试锁死了这条路由行为。在 tests/skill-behavior/scenarios.test.mjs 中Scenario 7验证子命令路由用户输入/impeccable audit index.html后Agent 必须实际加载audit.mdScenario 15验证平台变体路由当工作区平台判定为ios时/impeccable audit必须加载audit.native.md而非 Web 版并要求审计结论真正落到原生平台上。由此可以推断SKILL 的 Setup 步骤context.mjs见 skill/SKILL.src.md在进入本命令之前已加载了 PRODUCT.md、DESIGN.md 及对应 surface brief并完成平台判定web/ios/android/adaptive——audit 依赖这些上下文来判断当前该用哪一份清单。二、Diagnostic Scan五维诊断扫描与 0–4 分评分标准审计在 5 个维度上逐项扫描每个维度按统一标准打 0–4 分。下面按文档顺序给出每个维度的检查项与完整评分尺度。1. Accessibility无障碍需检查的内容对比度问题正文对比度低于 4.5:1追求 AAA 则需 7:1动效敏感度prefers-reduced-motion需要保留状态变化与层级关系的有意替代方案。要标记三类问题全局限定0.01ms的一刀切杀死动效把有用的反馈也一并毁掉、超过阈值的闪烁、以及阻塞焦点/阅读/任务完成的动效ARIA 缺失交互元素缺少正确的 role、label 或 state键盘导航缺少焦点指示、Tab 顺序不合逻辑、键盘陷阱语义化 HTML标题层级混乱、缺少 landmark、用 div 冒充 buttonAlt 文本图片缺少描述或描述质量差表单问题输入无 label、错误提示糟糕、缺少必填标识。0–4 分评分标尺0完全不可访问连 WCAG A 都不过1重大缺口几乎无 ARIA、无键盘导航2部分达标有 a11y 投入但仍存在显著缺口3良好基本满足 WCAG AA只有零星缺口4优秀完整满足 WCAG AA接近 AAA。仓库中可找到大量与这些检查项对应的反模式样本。例如 tests/fixtures/antipatterns/undersized-ui-text.html、tests/fixtures/antipatterns/visual-contrast.html、tests/fixtures/antipatterns/text-occlusion.html它们都是检测器测试夹具用于验证检测器能对这类缺陷正确告警可作为审计时人工复核的样例对照。2. Performance性能需检查的内容Layout thrashing在循环中反复读写布局属性昂贵的动画随意动画化布局属性、无界的 blur/filter/shadow 特效、或肉眼可见掉帧的效果优化缺失图片未懒加载、资源未优化will-change滥用被大范围应用或静止态常驻will-change是给已知昂贵动画的定向提示不是基线要求包体积多余 import、未使用的依赖渲染性能无谓的重渲染、缺少 memoization。0–4 分评分标尺0严重layout thrash、一切未优化1重大问题无懒加载、昂贵动画2部分有一些优化但仍留缺口3良好大体已优化尚有可改进空间4优秀又快又瘦又顺。3. Theming主题化需检查的内容硬编码颜色未使用设计 token 的颜色暗色模式损坏缺少暗色变体、暗色主题下对比度差token 使用不一致用错 token、混用不同类型 token主题切换问题切主题后值不随之更新。0–4 分评分标尺0无主题化全部硬编码1token 极少基本硬编码2部分有 token 但使用不一致3良好使用 token仅少量硬编码值残留4优秀完整 token 体系暗色模式完美工作。对应的检测样本可参考 tests/fixtures/antipatterns/named-color-borders.html、tests/fixtures/antipatterns/cream-palette-tailwind.html、tests/fixtures/antipatterns/design-system.html 等夹具——它们正是围绕命名色硬编码 / 设计系统漂移等 Theming 反模式构造的。4. Responsive Design响应式设计需检查的内容固定宽度在移动端必然断裂的硬编码宽度触控目标交互元素小于 44×44px横向滚动窄视口下内容溢出文字缩放文字放大后布局崩坏断点缺失没有移动/平板变体。0–4 分评分标尺0纯桌面在移动端直接崩1严重问题有些断点但多处失败2部分移动端能用但有毛边3良好响应式可用偶发触控目标/溢出问题4优秀全视口流畅、触控目标规范。仓库对应夹具如 tests/fixtures/antipatterns/first-viewport-column-overflow.html、tests/fixtures/antipatterns/clipped-overflow-container.html、tests/fixtures/antipatterns/cramped-padding.html都是在验证检测器对溢出、裁切、过挤布局的识别能力。5. Implementation Integrity实现完整性CRITICAL 级这是被明确标注为CRITICAL的维度也是其他四维的总闸运行内置检测器仓库中以npx impeccable detect形式提供见 README.md 及 hooks.md并在上下文里逐个核实每条发现寻找反复出现的实现捷径、设计系统漂移、误导性或装饰性内容以及换一个无关产品也能通用的同质化结构将确定性发现与视觉主观判断分开并指出误报。0–4 分评分标尺0系统性漂移1反复出现的主要失败2若干经核实的问题3零星孤立问题4连贯而有意图。这一维度的评分哲学与 hooks 参考文档中的表述完全一致——检测器结果只是缺陷证据不等于质量证明视觉判断必须保留。检测器规则分为两级per-edit 的即时层级与 Stop 事件的深度层级审计属于深层次的全量扫描场景默认套用完整规则集。项目级检测器忽略项通过.impeccable/config.json的detector.ignoreRules、detector.ignoreFiles、detector.ignoreValues与detector.designSystem.enabled配置控制。三、生成报告从健康分到分级明细诊断扫描完成后进入报告生成阶段。报告有严格的结构要求各节职责明确。3.1 Audit Health Score审计健康分用一张五维汇总表开场每行给出该维得分与最关键发现无则填--#DimensionScoreKey Finding1Accessibility?[最关键 a11y 问题或 --]2Performance?3Responsive Design?4Theming?5Implementation Integrity?Total??/20[Rating band]注意第三、四维的顺序在汇总表中与扫描顺序不同Theming 与 Responsive 对调生成报告时按上表填充即可。Rating bands评级区间18–20 Excellent只需少量打磨minor polish14–17 Good定向攻克弱势维度10–13 Acceptable仍需显著工作6–9 Poor需要大改0–5 Critical存在根本性问题。3.2 Implementation Integrity Verdict从它开始写报告要求Start here先给出 pass/fail 结论——该实现是否表达了连贯的、产品专属的设计系统必须引用经核实证据与检测器发现作答。把这一节放在最前是有意为之如果整个实现都是模板化、可与任何产品互换的结构那么前面四项分数的意义都会打折扣。3.3 Executive Summary执行摘要按模板给出四要素Audit Health Score??/20附评级区间问题总数按 P0/P1/P2/P3 分级的计数Top 3–5 关键问题推荐的下一步行动。3.4 Detailed Findings by Severity按严重度分级的明细每条问题必须打上P0–P3标签语义如下P0 Blocking阻断任务完成立即修复P1 Major造成显著困难或违反 WCAG AA发布前必须修复P2 Minor造成困扰但有绕行方案下一轮修复P3 Polish锦上添花无真实用户影响有空再修。每条问题的记录模板要求完整覆盖以下字段[P?] Issue name问题名Location组件、文件、行号CategoryAccessibility / Performance / Theming / Responsive / Implementation IntegrityImpact对用户的实际影响为什么这很重要必须说清WCAG/Standard违反的标准如适用Recommendation如何修复Suggested command建议用哪条命令注意audit.md的源码版skill/reference/audit.md中该字段使用{{available_commands}}模板占位符渲染到各 AI 工具链安装目录如 .cursor/skills/impeccable/reference/audit.md、plugin/skills/impeccable/reference/audit.md时会被替换为实际命令白名单。这说明 docs 目录是单一事实源各 harness 副本由构建脚本渲染生成。3.5 Patterns Systemic Issues模式与系统性问题找出那些暗示系统性缺口而非一次性失误的重复问题例如硬编码颜色出现在 15 个组件中应改用设计 token移动端触控目标整体偏小44px。判定规则单一偶发问题说明局部失误跨组件反复出现的问题说明系统层缺了某个机制token 体系、尺寸规范、设计系统约束。3.6 Positive Findings正面发现记录做得好的部分——这些是应该保持并复制的实践。文档特别提醒不要跳过正面发现celebrate what works 同样是报告的一部分它让修复建议有的放矢避免修复者把原本良好的做法一并推翻。四、Recommended Actions把问题映射回修复命令修复命令清单必须按优先级排序先 P0、再 P1、后 P2每一条都绑定审计中发现的具体上下文[P?]/command-name具体描述结合审计发现的上下文[P?]/command-name具体描述结合具体上下文硬性规则只能推荐白名单内的命令/impeccable adapt、/impeccable animate、/impeccable audit、/impeccable bolder、/impeccable clarify、/impeccable colorize、/impeccable critique、/impeccable delight、/impeccable distill、/impeccable document、/impeccable harden、/impeccable layout、/impeccable onboard、/impeccable optimize、/impeccable overdrive、/impeccable polish、/impeccable quieter、/impeccable shape、/impeccable typeset把每条发现映射到最合适的命令。例如性能问题 →/impeccable optimize响应式/触控目标问题 →/impeccable adaptA11y/对比/语义问题 →/impeccable harden或/impeccable clarify主题 token 漂移 →/impeccable extract抽取沉淀 token若本次推荐了任何修复必须以/impeccable polish作为最终一步收尾——它负责统一修复后的对齐、间距与微细节防止多个命令各自修复后产生新的不一致。报告展示完摘要后需要原样转告用户两句话术You can ask me to run these one at a time, all at once, or in any order you prefer.Re-run/impeccable auditafter fixes to see your score improve.这构成了审计的核心工作闭环修复后重跑/impeccable audit用分数的提升来验证修复效果——这正是技术审计要可度量的最终体现。五、原生平台变体audit.native.md 的五维对照当平台判定为ios/android/adaptive时路由到 audit.native.md。它明确要求从源码审计SwiftUI / UIKit / Compose / React Native / Flutter不适用浏览器工具链与detect.mjs对adaptive需同时对照 ios.md 与 android.md。其五维与 Web 版对照如下Web 维度原生维度核心检查要点AccessibilityAccessibilityVoiceOver / TalkBack标签/traits/状态播报、阅读与焦点顺序、Dynamic TypeiOS或 spAndroid文字缩放、44pt/48dp 触控目标、Reduce Motion、明暗双外观对比度PerformancePerformance冷启动、列表虚拟化FlatList / LazyColumn / List、主线程卡顿、RN 重渲染 / Compose 重组、图片解码与缓存、应用体积ThemingAppearance Theming语义系统色iOS/ Material color rolesAndroid、暗色外观、Android 12 Dynamic Color 的静态回退、系统材质与 tonal elevationResponsivePlatform ConformanceCRITICAL系统手势edge-swipe back / predictive Back、安全区与刘海/Home indicator/键盘、跨平台导航模式污染、Web 形态控件、图标集漂移SF Symbols / Material Symbols、系统漂移Implementation IntegrityAdaptivity平板拉伸手机布局size classes / window size classes、横竖屏、键盘/IME、iPad Split View / 多窗口、折叠屏铰链原生版汇总表同样输出/20健康分并使用同一套评级区间且同样遵循先写 Platform Conformance Verdict 的 pass/fail 结论这到底是个原生 App 还是网页移植品→ 执行摘要 → P0–P3 明细 → 系统性模式 → 正面发现 → 按优先级列修复命令 → 以 polish 收尾的报告结构。文档要求两份报告骨架彼此同步改 audit.md 时保持 audit.native.md 一致。六、纪律红线NEVER与实战心法文档末尾列出了生成报告时必须遵守的红线这也是写出的报告能否被其他命令直接执行的关键不要把问题只报出来而不解释影响为什么这对用户重要不要给泛泛的建议必须具体、可执行不要跳过正面发现该庆祝的要庆祝防止过度修复不要忘记分级排序不可能所有问题都是 P0不要未经验证就上报误报每条检测器发现都要回到上下文核实。最后一条IMPORTANT心法同样值得记住Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.——报告要详尽但要克制P3 堆砌只会制造噪音真正值得写进报告的是影响用户、影响发布的实质问题。七、在完整工作流中的位置结合 skill/SKILL.src.md 的 Setup 步骤可以还原一次典型会话的调用链会话开始先运行一次node skill-base-dir/scripts/context.mjs或npx impeccable detect扫描加载 PRODUCT.md、DESIGN.md 与 surface brief用户输入/impeccable audit target路由表见 Commands table 与 routing.md解析到 audit.md原生平台为 audit.native.mdAgent 先做五维 Diagnostic ScanImplementation Integrity 维度先跑内置检测器并逐条核实生成报告健康分 → Verdict → 摘要 → P0–P3 明细 → 系统性模式 → 正面发现输出按优先级排序的命令路由并请用户选择一次一条 / 全部一次跑 / 任意顺序修复完成后再跑/impeccable audit验证分数提升。需要强调的是audit 与相邻命令是分工而非竞争关系audit 是只诊断不修复的技术体检真正动手修复的是/impeccable optimize性能、/impeccable adapt响应式与多端适配、/impeccable harden生产就绪错误态、i18n、溢出、/impeccable extracttoken 与设计系统回归、/impeccable colorize配色修复、/impeccable clarify文案与错误消息最后由/impeccable polish统一收尾。把诊断与修复解耦成不同的命令是 Impeccable 能让 Agent 有序执行大批量改进而不互相踩脚的设计核心——而 audit 正是这套流水线上负责把关与验收的那一环。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表