UI审计工具（专业版）

概述

专业版在免费版的视觉层级、视觉风格、可访问性三维审计之上，扩展为面向设计团队与产品企业的完整界面质量治理平台。新增全维度审计、设计系统对齐、批量审计、团队协作与 Figma 集成，同时与免费版的审计标准保持向后兼容。

核心能力

核心功能执行

用input_params参数进行配置。

输入: 用户提供核心功能执行所需的指令和必要参数。 处理: 按照skill规范执行核心功能执行操作,遵循单一意图原则。 输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输入: 用户提供参数配置与调用所需的指令和必要参数。 处理: 按照skill规范执行参数配置与调用操作,遵循单一意图原则。 输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输入: 用户提供结果处理与输出所需的指令和必要参数。 处理: 按照skill规范执行结果处理与输出操作,遵循单一意图原则。 输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：全维度审计、设计系统对齐、批量审计与团队协、适合设计团队与产、品企业的质量治理、审计工具专业版、面向设计团队与产、品企业的高阶界面、质量治理平台、核心能力、视觉层级、可访问性、设计系统对齐与组、件库一致性检查、批量审计与项目级、团队协作审计与评、集成与截图对比等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一：项目级批量审计

对整个产品的所有页面进行批量审计。

# 批量审计项目下所有页面
ui-audit-pro batch audit 
  --project "电商平台" 
  --pages ./pages/ 
  --dimensions all 
  --report ./reports/

# 输出
# 📊 批量审计报告
# 总页面数: 45
# 平均分: 87.3/100
# 维度得分:
#   视觉层级: 92.1%
#   视觉风格: 90.5%
#   可访问性: 82.3% ⚠️
#   导航: 88.0%
#   可用性: 85.2%
# ⚠️ 需重点改进: 5 个页面可访问性低于 80

场景二：设计系统一致性检查

检查实现是否对齐设计系统。

# 对齐设计系统检查
ui-audit-pro design-system check 
  --system ./design-system.json 
  --implementation ./src/components/

# 输出
# 📊 设计系统一致性报告
# 组件总数: 32
# 完全一致: 24 (75%)
# 轻微偏差: 5 (15.6%)
# 严重不一致: 3 (9.4%)
#
# ❌ 严重不一致项:
#   - Button 组件: 圆角 8px vs 设计系统 4px
#   - Card 组件: 阴影层级不符
#   - Input 组件: 间距 12px vs 设计系统 16px

场景三：团队协作审计

团队成员协作审计并评论。

# 创建审计项目
ui-audit-pro project create --name "Q3 界面审计" --team "设计团队"

# 邀请团队成员
ui-audit-pro project invite --members "designer-a,designer-b,dev-lead"

# 执行审计并邀请评论
ui-audit-pro audit run --page "checkout-flow" --invite-comments

# 生成团队审计报告
ui-audit-pro report generate --project "Q3 界面审计" --format pdf --include-comments

不适用场景

以下场景UI审计工具专业版不适合处理：

• 3D建模和动画制作
• 照片级写实渲染
• 手绘原创插画

触发条件

需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于非本工具能力范围的需求。

快速开始

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

# 1. 初始化专业版工作区
ui-audit-pro init --workspace ~/ui-audit-pro

# 2. 导入设计系统
ui-audit-pro design-system import --file ./design-system.json

# 3. 批量审计
ui-audit-pro batch audit --project "我的项目" --pages ./pages/ --dimensions all

# 4. Figma 集成审计
ui-audit-pro figma audit --file-key "abc123" --frames "Login,Dashboard"

# 5. 生成报告
ui-audit-pro report generate --format pdf --output audit-report.pdf

示例

# ~/ui-audit-pro/config.yaml
edition: pro
audit:
  dimensions:
    - visual_hierarchy
    - visual_style
    - accessibility
    - navigation
    - usability
    - forms
    - social_proof
    - onboarding
  checks_per_dimension: 8
  standards:
    contrast: 4.5
    touch_target: 44
    font_min: 14
design_system:
  path: ~/ui-audit-pro/design-system.json
  strict: true
  auto_align: false
batch:
  max_concurrent: 3
  recursive: true
figma:
  enabled: true
  api_token_env: FIGMA_API_TOKEN
collaboration:
  enabled: true
  comment_required: true
  voting: true
report:
  formats: [json, markdown, pdf]
  template: professional
  include_diff: true
  include_comments: true
history:
  retention_days: 365
  trend_tracking: true

审计维度库

最佳实践

• 审计前明确审计范围与维度，避免过度检查。
• 设计系统检查建议每次发布前执行，确保一致性。
• 批量审计按模块分批，避免单次报告过大。
• 团队协作审计邀请实际使用者参与，提升发现率。
• Figma 集成审计在设计阶段执行，问题前置修复成本更低。
• 审计历史趋势追踪，识别质量退化点。
• 可访问性审计遵循 WCAG AA 标准，关键路径建议达到 AAA。
• 优先修复建议按影响度与修复成本排序。

常见问题

Q：专业版与免费版的审计标准兼容吗？ A：兼容。免费版的 3 维审计是专业版 8 维审计的子集，专业版额外支持导航、可用性等维度。

Q：Figma 集成需要什么条件？ A：需要 Figma API Token，可在 Figma 设置中生成。专业版通过 API 直接读取设计稿数据。

Q：批量审计有页面数量上限吗？ A：无硬性上限，建议单批不超过 100 个页面以保证报告可读性。

Q：设计系统支持哪些格式？ A：支持 JSON、YAML、Figma Tokens 格式。可与 Style Dictionary 等工具互通。

Q：团队协作支持多少人？ A：无硬性上限，建议单个审计项目不超过 20 人以保证决策效率。

Q：可以与 CI/CD 集成吗？ A：专业版支持命令行模式，可在 CI/CD 中自动执行审计并阻断低分合并。

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux
• Node.js: 18+（批量与报告功能需要）

依赖详情

API Key 配置

• 本skill基于Markdown指令规范，无需额外API Key（除内容中明确标注的外部API）
• Figma 集成需配置 FIGMA_API_TOKEN 环境变量

可用性分类

• 分类: MD+EXEC（Markdown指令 + 脚本执行能力）
• 说明: 专业版在 Markdown 指令基础上，提供批量审计、Figma 集成与团队协作能力

错误处理

已知限制

• 需LLM支持,无LLM环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响