SuperAPI AI 工具集

markup-assist

编程与开发

查看项目

更新于 10-16 01:17

技能介绍

用途:对任意 HTML/CSS 工作做通用、确定性的校验。每个 gate 在无头 Chromium 中渲染页面,用 DOM 与像素计算(不使用 VLM)测量,并打印 kickback(带选择器归属的下一步修复列表)。工作循环为:运行 → 读 kickback → 修复报告项 → 重跑。

主要能力(按任务路由):无参考设计时,check integrity 检查 JS 错误、空白渲染、资源失败、文字碰撞/裁剪/溢出、容器塌陷、不可见文字、遮挡、错位、未套用样式(3 个视口);check copy --manifest 校验必需文案是否精确存在;check layout --contract 检查宽度、每行数量、顺序、各视口可见性;check design 检查页面自身一致性(组件样式复用、间距是否在同一比例);另有 check tokens/theme/a11y contrast|touch|focus、stress i18n。行为方面:check breakpoints --sweep、scan scroll、check scroll、check animation、check interactions、scan handlers、verify flow --flow。对照目标设计时:verify markup --target、build page/component、scan mock。维护类:heal selector、diff html。

用法:前置要求为 Node 24+ 与 Playwright Chromium。未安装 vlmkit 时执行 npm i -D @mizchi/vlmkit,然后使用 npx vlmkit …。源可为文件路径或 URL。所有命令支持 --json,多数支持 --fail-on-suspect(非零退出)以便脚本化。

限制与规则:不要为通过 check copy 而隐藏文案;匹配对象是可见渲染文本,font-size:0、opacity:0、transparent、离屏、裁剪、伪装、sr-only 匹配会以 copy-invisible 及原因类报告,如需接受隐藏文案应由需求方传 --allow-invisible <class>。不要为文案 gate 而将披露内容展开;闭合的 details、未选中标签、aria-expanded=false 内容会被自动扫描并通过。不得为消除发现项而删除必需内容或控件。若工具本身运行失败(未知子命令、缺少浏览器、安装错误),应停止并原样报告工具失败,不要用自写截图脚本替代并声称已验证;Unknown check subcommand 通常表示安装版本早于这些 gate。同一发现经 3 次诚实修复仍失败时应停止并报告。迭代次数记录在 .vlmkit/run-ledger.jsonl。