SuperAPI AI 工具集

harden

设计与创作

查看项目

更新于 10-15 12:56

技能介绍

用途

harden 是 ui-craft 技能下的一个子技能,定位为「生产就绪度」检查与实现。它对界面进行完整的非理想路径(non-happy-path)审计,并直接编辑代码补齐缺失项。官方描述为:

Production-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial data, i18n, offline,…

如果同时安装了 ui-craft 技能,应优先阅读其 SKILL.md 中的 Discovery + Anti-Slop + Craft Test,再应用本子技能这一视角。

主要能力(覆盖矩阵)

harden 要求逐项检查以下九个横切关注点:

  1. Loading(加载):骨架屏应与最终布局匹配(解析完成后不产生 CLS),在约 200ms 后显示以避免快速响应时的闪烁;不要能做骨架屏却用居中 spinner。
  2. Empty(空状态):要有目的性,一行说明为何为空 + 一个明确的主操作;插图可选,CTA 必需。
  3. Error(错误):内联、可操作,例如“Save failed. Try again / Copy error / Contact support”,而非只写“Something went wrong.”;需呈现「是什么」和「下一步」。
  4. Partial data(部分数据):缺失指标用 —(em dash),真正未知时不要用 N/A、null 或 0。
  5. Long content(长内容):截断并提供 title tooltip,text-overflow: ellipsis,受限区域使用容器查询;建议用 120 字符名称测试。
  6. i18n(国际化):无硬编码字符串,为德语预留约 1.3× 文本扩展空间,CJK 使用更窄字形,带方向的图标考虑 RTL 翻转。
  7. Offline / slow(离线 / 慢速):乐观 UI 并在失败时对账;skeleton 在超时后仍保留并显示“still loading…”提示。
  8. Permission(权限):用户无访问权限时,禁用还是隐藏;禁用时始终说明「为什么」(tooltip、内联提示)。
  9. Zero-state → first-run(零状态到首次运行):内联提示优于五步引导;在界面内引导,而不是覆盖界面。

此外要求 knob-agnostic:正确性不可调,无论 CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY 如何,都要跑完整矩阵。

原型覆盖

九项为横切项,不知道当前屏幕类型,因此需命名原型(data table、settings、search、detail view、first-run、billing、pricing、docs page、checkout、onboarding、destructive confirm、invite/share),并拉取其对应部件:

  • 连接了 MCP:调用 ux_coverage 并传入原型,返回该原型的部件与报告契约。
  • 无 MCP:阅读 references/coverage.md 的对应章节。
  • 无匹配原型:跳过并一行说明。覆盖是刻意不完整的,未列出的界面不算失败。

每个部件包含:present 是什么样、ui-craft 构建规则、缺少时用户损失什么。报告要写代价而非仅仅是缺失——“no export”是状态,“用户期望屏幕上 24 行却收到 10,000 行”才是它重要的原因。

需阅读的参考:

  • references/accessibility.md(键盘 + 屏幕阅读器路径)
  • references/copy.md(错误与空状态语气)
  • references/motion.md 的 Rendering Performance 章节(骨架屏动效 + reduced-motion)

使用方式

技能以命令式语句描述其调用方式:“Harden the UI at $ARGUMENTS for production. Load the ui-craft skill.” 即针对 $ARGUMENTS 指定的界面执行生产加固,并加载 ui-craft 技能。

输出方式

输出两个部分,并排报告,绝不合并:

  • Hardening matrix:九项,各标注 present / partial / missing。
  • Coverage:原型部件,各标注 present / partial / missing / not-needed / unknown。not-needed 需给出理由;若说不出为何不适用,则视为 missing。unknown 需说明更多输入能否确定。

两部分都不打分、不计数、不百分比;“7 of 9”会让 not-needed 读起来像失败,并把加固过程变成打分。Coverage 不设门槛:它只报告,构建仍可发布。

随后编辑代码修复缺失项,打印 Review Format 表格展示修复,并以“still at risk”列表收尾,列出无法安全自动修复的内容(需要后端、需要设计决策、需要翻译文件)。

下一步:/finalize —— 发布前关卡(rung 3)。

适用场景

适用于在 ui-craft 工作流中对具体 UI 界面做上线前加固,尤其是需要系统检查加载、空、错误、部分数据、长文本、国际化、离线、权限与首次运行体验的界面。

限制

  • 九项覆盖为横切检查,不包含原型特定部件;原型部件通过 MCP 的 ux_coverage 或 references/coverage.md 获取。
  • 无匹配原型时该步骤跳过,覆盖刻意不完整。
  • 部分问题无法安全自动修复,只能列入 still at risk(依赖后端、设计决策或翻译文件)。
  • 具体安装命令、价格、平台支持等信息暂未提供。