Archify visual-check详解4个桌面视口的有界视觉证据工具怎么用【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个把自然语言变成可验证架构图的开源 Agent skill它能渲染出带动画、可 4 倍高清导出的独立 HTML 架构图而visual-check正是交付后的视觉证据工具它自动在 4 个标准桌面视口下测量溢出、文字可读性和图例遮挡并产出可追溯的截图与 JSON 回执让这张图看起来没问题从口头承诺变成可复核的事实。为什么需要有界的视觉证据人工打开 HTML 看一眼是最常见的验收方式但问题在于每次看到的可能不是同一张图。窗口大小不同、缩放比例不同、深色/浅色主题不同结果都会不同。Archify 的交付契约delivery-contract.md明确区分了两件事确定性校验deliver命令的 JSON 回执证明字节级一致与规则检查通过但不能代替视觉审查自动化视觉证据visual-check用无头 Chrome 在固定视口下实测页面给出可复核的截图与指标。两者结合才构成完整的交付闭环一键运行visual-check 使用方法visual-check是一个零依赖命令通过 Chrome DevTools 管道直接驱动无头浏览器。在 Archify skill 目录下执行node bin/archify.mjs visual-check output.html --json三步就完成全部流程定位浏览器自动探测 macOS / Windows / Linux 上的 Chrome 或 Chromium找不到时可用环境变量ARCHIFY_CHROME指定可执行文件路径测量 截图在 4 个视口下逐一加载页面冻结动效motion: still、切到阅读模式detail: read、等字体与布局稳定后测量并截图落盘回执在产物旁边写入 4 张 PNG 截图、1 份 HTML 联系表contact sheet和 1 份 JSON 回执。核心实现见 visual-check.mjsCLI 入口在 archify.mjs 的visual-check分支。4 个桌面视口到底测了什么visual-check内置了一组固定视口VISUAL_CHECK_VIEWPORTS覆盖主流笔记本到 2K 大屏视口用途是否截图1440×900主流笔记本基准✅ 浅色 深色1600×1000常见宽屏笔记本仅测量1920×1080FHD 台式机仅测量2048×13202K 大屏✅ 浅色 深色截图只取最小和最大两端既保证深浅主题各有一张证据又控制体积——这就是有界的含义检查范围、证据产物、判据全部固定不产生无上限的探索。每个视口上会检查三个维度containment容纳性scrollWidth/scrollHeight是否超出窗口出现横向滚动条即失败readability可读性按 SVG 缩放比例折算每个节点文字的最终像素投影后低于 6px 即判失败阈值定义在 desktop-readability.mjs 的MIN_PROJECTED_NODE_TEXT_PXviewerChrome界面互斥SVG 图例与底部导航坞的重叠面积必须为 0防止图例被 UI 挡住。测试用例 visual-check.test.mjs 用假浏览器模拟了溢出、文字过小、图例遮挡、截图失败、Chrome 缺失等全部分支值得学习它如何把失败路径也变成可回归验证的合同。读懂 JSON 回执与 3 个退出码运行后会在 HTML 旁边生成一组侧车文件以xxx.html为例xxx.html xxx.visual-check.json # JSON 回执 xxx.visual-check.html # 联系表浏览器直接打开即可 xxx.visual-check.1440x900.light.png xxx.visual-check.1440x900.dark.png xxx.visual-check.2048x1320.light.png xxx.visual-check.2048x1320.dark.pngJSON 回执有几个值得注意的字段字段含义artifact.sha256被测 HTML 的指纹证明证据对应的是这份文件state: { detail: read, motion: still }记录测量时的页面状态保证可复现visualReview: pending永远是 pending——截图只是检查证据机器不会替你宣称美观statuspass/fail/skipped三个维度各自也有状态退出码是接入 CI 的关键SKILL.md 中有完整约定退出码含义04 个视口容纳性、可读性、图例互斥全部通过1溢出、文字过小、图例遮挡或截图失败2未找到 Chrome/Chromium回执标记skipped不算失败但证据缺失两个安全设计也体现了证据工具的定位命令从不修改被测 HTML运行前后比对 SHA-256产物变了直接报错失败时会删掉旧截图避免拿上一轮的旧证据冒充本轮结论。下面这张深色主题的 dataflow 图就是 issue #52 视觉验收档案中after一侧的证据截图可对照 browser-results.json 查看机器可读的完整结果常见场景速查CI 中无图形环境确认 Chromium 已安装root 用户或特殊沙箱环境可设置ARCHIFY_CHROME_NO_SANDBOX1chromeVisualBrowserArgs 处理了这一分支想先本地看一眼直接双击打开xxx.visual-check.html联系表四张截图按主题 × 视口排布每张标注 pass/fail失败后的修复顺序参照交付契约先删冗余内容或压缩间距禁止靠裁剪内容、加内部滚动条、缩小字号来骗过测量想理解设计动机看 docs/issue-52-visual-evidence/README.md它记录了 before/after 对照矩阵与检查项清单。小结visual-check的价值不在于能截几张图而在于把视觉验收变成了有界、可绑定、可回归的工程产物4 个固定视口、3 个量化判据、SHA-256 绑定的回执以及一个诚实地写着pending的visualReview字段。对新手来说只需记住一条命令和三个退出码就能让架构图交付从我觉得没问题升级为证据在这里。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Archify visual-check详解：4个桌面视口的有界视觉证据工具怎么用
Archify visual-check详解4个桌面视口的有界视觉证据工具怎么用【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个把自然语言变成可验证架构图的开源 Agent skill它能渲染出带动画、可 4 倍高清导出的独立 HTML 架构图而visual-check正是交付后的视觉证据工具它自动在 4 个标准桌面视口下测量溢出、文字可读性和图例遮挡并产出可追溯的截图与 JSON 回执让这张图看起来没问题从口头承诺变成可复核的事实。为什么需要有界的视觉证据人工打开 HTML 看一眼是最常见的验收方式但问题在于每次看到的可能不是同一张图。窗口大小不同、缩放比例不同、深色/浅色主题不同结果都会不同。Archify 的交付契约delivery-contract.md明确区分了两件事确定性校验deliver命令的 JSON 回执证明字节级一致与规则检查通过但不能代替视觉审查自动化视觉证据visual-check用无头 Chrome 在固定视口下实测页面给出可复核的截图与指标。两者结合才构成完整的交付闭环一键运行visual-check 使用方法visual-check是一个零依赖命令通过 Chrome DevTools 管道直接驱动无头浏览器。在 Archify skill 目录下执行node bin/archify.mjs visual-check output.html --json三步就完成全部流程定位浏览器自动探测 macOS / Windows / Linux 上的 Chrome 或 Chromium找不到时可用环境变量ARCHIFY_CHROME指定可执行文件路径测量 截图在 4 个视口下逐一加载页面冻结动效motion: still、切到阅读模式detail: read、等字体与布局稳定后测量并截图落盘回执在产物旁边写入 4 张 PNG 截图、1 份 HTML 联系表contact sheet和 1 份 JSON 回执。核心实现见 visual-check.mjsCLI 入口在 archify.mjs 的visual-check分支。4 个桌面视口到底测了什么visual-check内置了一组固定视口VISUAL_CHECK_VIEWPORTS覆盖主流笔记本到 2K 大屏视口用途是否截图1440×900主流笔记本基准✅ 浅色 深色1600×1000常见宽屏笔记本仅测量1920×1080FHD 台式机仅测量2048×13202K 大屏✅ 浅色 深色截图只取最小和最大两端既保证深浅主题各有一张证据又控制体积——这就是有界的含义检查范围、证据产物、判据全部固定不产生无上限的探索。每个视口上会检查三个维度containment容纳性scrollWidth/scrollHeight是否超出窗口出现横向滚动条即失败readability可读性按 SVG 缩放比例折算每个节点文字的最终像素投影后低于 6px 即判失败阈值定义在 desktop-readability.mjs 的MIN_PROJECTED_NODE_TEXT_PXviewerChrome界面互斥SVG 图例与底部导航坞的重叠面积必须为 0防止图例被 UI 挡住。测试用例 visual-check.test.mjs 用假浏览器模拟了溢出、文字过小、图例遮挡、截图失败、Chrome 缺失等全部分支值得学习它如何把失败路径也变成可回归验证的合同。读懂 JSON 回执与 3 个退出码运行后会在 HTML 旁边生成一组侧车文件以xxx.html为例xxx.html xxx.visual-check.json # JSON 回执 xxx.visual-check.html # 联系表浏览器直接打开即可 xxx.visual-check.1440x900.light.png xxx.visual-check.1440x900.dark.png xxx.visual-check.2048x1320.light.png xxx.visual-check.2048x1320.dark.pngJSON 回执有几个值得注意的字段字段含义artifact.sha256被测 HTML 的指纹证明证据对应的是这份文件state: { detail: read, motion: still }记录测量时的页面状态保证可复现visualReview: pending永远是 pending——截图只是检查证据机器不会替你宣称美观statuspass/fail/skipped三个维度各自也有状态退出码是接入 CI 的关键SKILL.md 中有完整约定退出码含义04 个视口容纳性、可读性、图例互斥全部通过1溢出、文字过小、图例遮挡或截图失败2未找到 Chrome/Chromium回执标记skipped不算失败但证据缺失两个安全设计也体现了证据工具的定位命令从不修改被测 HTML运行前后比对 SHA-256产物变了直接报错失败时会删掉旧截图避免拿上一轮的旧证据冒充本轮结论。下面这张深色主题的 dataflow 图就是 issue #52 视觉验收档案中after一侧的证据截图可对照 browser-results.json 查看机器可读的完整结果常见场景速查CI 中无图形环境确认 Chromium 已安装root 用户或特殊沙箱环境可设置ARCHIFY_CHROME_NO_SANDBOX1chromeVisualBrowserArgs 处理了这一分支想先本地看一眼直接双击打开xxx.visual-check.html联系表四张截图按主题 × 视口排布每张标注 pass/fail失败后的修复顺序参照交付契约先删冗余内容或压缩间距禁止靠裁剪内容、加内部滚动条、缩小字号来骗过测量想理解设计动机看 docs/issue-52-visual-evidence/README.md它记录了 before/after 对照矩阵与检查项清单。小结visual-check的价值不在于能截几张图而在于把视觉验收变成了有界、可绑定、可回归的工程产物4 个固定视口、3 个量化判据、SHA-256 绑定的回执以及一个诚实地写着pending的visualReview字段。对新手来说只需记住一条命令和三个退出码就能让架构图交付从我觉得没问题升级为证据在这里。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考