mcpField
S
ss-audit

ss-audit

github.com/bitjaru设计与 UI993864 次安装1 天前更新
代码仓库

关于 ss-audit

ss-audit 是 StyleSeed 的 UX 审查技能，面向评估现有界面的设计与产品团队。它依据 Nielsen 的 10 项可用性启发式及移动端检查项，按严重程度整理问题并给出代码修改建议。

主要功能

  1. 01按 Nielsen 10 项启发式检查
  2. 02审查移动端交互与性能感知
  3. 03识别暗黑模式问题
  4. 04按严重程度输出审查结果
  5. 05为问题提供具体代码建议

适用场景

  1. 01审查现有页面的可用性
  2. 02检查移动端页面的触控与安全区域
  3. 03定位反馈、错误恢复或导航问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-audit

安装后在 Claude Code 中输入/ss-audit确认已加载。

详细介绍

在运行此工作流前，请先完成每次会话仅需执行一次的更新前置检查。

UX 审核

以注册表为先的制品边界

如果 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在，请先解析所请求的制品 ID，然后仅读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于注册表项目，绝不要回退到全局旧版 bundle。仅当不存在注册表时，旧版项目才可以使用 .styleseed/effective-rules.md。

不适用场景

  • 仅涉及无障碍问题 → 使用 /ss-a11y
  • 设计系统令牌/黄金法则合规性 → 使用 /ss-review
  • 文案/微文案质量 → 使用 /ss-copy
  • 尚不存在的全新页面 — 先使用 /ss-page 或 /ss-flow 进行设计

目标：$ARGUMENTS

审核框架

Nielsen 的 10 条可用性启发式原则
1. 系统状态可见性
  • 显示加载状态（使用骨架屏，而非加载指示器）
  • 操作后提供成功/错误反馈（Toast 通知）
  • 多步骤流程显示进度指示器
  • 导航项清楚显示激活状态
  • 实时数据显示时间戳，以表明数据的新鲜度
2. 系统与现实世界的匹配
  • 标签使用用户的语言，而非技术术语
  • 图标易于普遍识别（Lucide 标准图标集）
  • 数字格式符合用户预期（千位分隔符、货币符号）
  • 日期格式符合地区习惯
3. 用户控制权与自由度
  • 所有非根页面都提供返回导航
  • 破坏性操作需显示确认对话框
  • 可撤销的操作提供撤销功能（带撤销选项的 Toast）
  • 底部弹出层/模态框可关闭（点击遮罩、向下滑动、点击 X 按钮）
  • 不采用暗黑模式（不强迫用户操作，始终提供关闭方式）
4. 一致性与标准
  • 相同操作在各处的外观一致
  • 颜色含义一致（绿色=成功，红色=错误，品牌色=激活状态）
  • 文本层级遵循 5 级灰度系统
  • 表面样式遵循已解析的样式规则和品牌方案
  • 间距遵循已解析的令牌尺度和适配器约束
5. 错误预防
  • 破坏性按钮在视觉上清晰区分（使用 destructive 样式变体）
  • 表单在失焦时验证（而非输入过程中）
  • 危险操作需要明确确认
  • 在错误发生前显示输入约束（字符数限制、格式提示）
6. 重识而非回忆
  • 图标控件带有无障碍标签；导航标签遵循所选适配器
  • 无需记忆即可看到当前状态（高亮显示激活的标签页）
  • 显示最近/常用项，便于快速访问
  • 占位文本展示预期格式
7. 灵活性与效率
  • 关键操作可通过适合产品的路径访问
  • 刷新行为遵循平台适配器和产品的数据语义
  • 触控热区 >= 44x44px；优先面向指针的控件遵循已解析的规范（已批准的 36–40px 控件不视为触控问题）
  • 常用操作的位置遵循已解析的导航适配器
8. 美观与极简设计
  • 每个页面聚焦于一个主要任务
  • 不添加无实际用途的装饰元素
  • 遵循信息层级（最重要的信息最突出）
  • 卡片和内容集合的密度遵循已解析的样式规则和任务复杂度
  • 不存在相互争夺注意力的视觉元素（每页只突出一个核心指标）
9. 帮助用户从错误中恢复
  • 错误消息用通俗语言说明发生了什么
  • 错误消息建议如何解决问题
  • 局部故障不会导致整个页面失效（一张卡片加载失败，其他卡片仍正常加载）
  • 网络错误显示重试按钮
  • 表单错误突出显示具体字段
10. 帮助和文档
  • 空状态引导用户采取行动
  • 为首次使用的功能提供入门引导（如适用）
  • 为复杂指标提供工具提示（如适用）
移动端专属 UX 检查
触控与手势
  • 在触控界面上，点击区域至少为 44x44px；针对每种输入方式，均须保留适用的无障碍最低标准
  • 相邻触控目标之间至少间隔 8px
  • 不依赖悬停交互（移动设备不支持悬停）
  • 滑动手势具有可见提示（轮播指示器）
性能感知
  • 骨架屏在 300ms 内显示
  • 对用户操作进行乐观更新
  • 优先加载首屏内容
  • 内容加载后不发生布局偏移
安全区域
  • 内容不会被刘海屏/Dynamic Island 遮挡
  • 底部内容不会被主屏幕指示条遮挡
  • 适用时，导航界面应遵循平台的安全区域规范
防止暗黑模式设计
  • 不强制在进入时显示底部工作表
  • 不显示阻止用户离开的对话框
  • 每个屏幕都提供返回或关闭的方式
  • CTA 标签清楚说明操作
  • 不使用操纵性图形（乞求、制造紧迫感）

输出格式

  1. 评分：A+ 到 F 级，并附细分评分
  2. 严重问题：必须修复（阻碍可用性）
  3. 主要问题：应该修复（降低体验）
  4. 次要问题：修复后更佳（润色）
  5. 建议：针对每个问题提供具体代码修改

评论

支持 Markdown