本文内容
Craft Anything:如何验证网站重建结果?
我们的故障测试页与正常参考页的截图完全一致。Craft Anything 的图像指标四舍五入后为 100%,按钮却没有任何反应。
Craft Anything 网站重建验证,需要把图像证据与实际功能要求对应起来。核对各视口的结果、失败的检查断言和未知项,再执行所需交互。截图一致,也不能证明从未测试过的结果。将对应的实现版本与检查记录一起保存。
核对日期:2026年11月3日。我们运行了 Craft Anything v0.3.0 官方 Linux x86_64 CLI,验证了下载包校验和,并检查发布版源码。截图由 Playwright 生成,按钮也由 Playwright 单独检查。本次没有运行 AI 构建智能体或完整重建流程。
Craft Anything 能做什么?
Craft Anything 是用 Rust 编写的开源工具集,供编码智能体检查现有软件,并对比新的实现。发布版 README 描述了面向网站、应用和游戏的研究、构建与检查流程。项目仍将自身标为早期 alpha 版本。
ArtCraft 的官方应用目录将 Craft Anything 与 PhotoCraft、FilmCraft 等创作工具列在同一产品家族中。
| 使用方式 | 在流程中的作用 | 需要核对什么 |
|---|---|---|
| 桌面应用 | 查看目标并跟踪重建过程。 | 实际采集的目标与最终检查报告。 |
| CLI | 在终端运行指定工具或重建任务。 | 版本、工具输出及各项检查的实际结果。 |
| MCP 服务器 | 向智能体提供检查与重建工具。 | 所用智能体、检查模式和权限范围。 |
工具数量必须带上日期。10月31日的首发 README 写的是 284 个工具,v0.3.0 README 写的是 314 个。我们运行发布版 Linux 可执行文件,通过 commands 得到315 个不同的已注册工具 ID。列入清单,不代表在任意模式、目标或依赖环境下都能使用。
Craft Anything 能绕过 Claude 的拒绝吗?
Craft Anything 的文档没有提供消除 Claude 拒绝的方法。Claude Code 集成说明写明,它使用你自己的登录,启动本机未经修改的 claude 程序。换一个工具接口,不能据此认定模型服务商就会接受某项复刻请求。
所查一手资料没有证实“Anthropic 的封禁促成了这个项目”这一说法。Issue 21 记录了 Claude 检测故障和一次拒绝报告。工单转发评论将两者分开:一是在 PATH 中找不到 Claude,二是拒绝复刻 Titanfall 2。这个具体报告不足以证明服务商实施了全面封禁。
Reverse Engineer Anything,简称 REA,是另一个项目。选择时,应比较它们支持检查的目标类型,以及各自返回的证据。
Craft Anything 截图对比实测发现了什么?
在 1440、768 和 390 CSS 像素这三种宽度下,Craft Anything 截图对比工具均判定故障页与正常参考页的图像一致。独立点击检查却在每种宽度下都判定故障版本失败。各视口高度均为 900 像素。
正常参考页在点击 Reserve a demo seat(预留演示名额)后会更新状态文字。故障版本缺少对应的事件处理函数。另一组对照保留该函数,只改变页面配色。按钮仅改变本地页面状态,没有预约后端。
| 宽度(CSS px) | 与参考页比较的版本 | 布局指标 | 细节指标 | 独立点击检查 |
|---|---|---|---|---|
| 1440 | 处理函数缺失,外观一致 | 100% | 100.00% | 失败 |
| 768 | 处理函数缺失,外观一致 | 100% | 100.00% | 失败 |
| 390 | 处理函数缺失,外观一致 | 100% | 100.00% | 失败 |
| 1440 | 配色改变,处理函数正常 | 0% | 96.87% | 通过 |
| 768 | 配色改变,处理函数正常 | 0% | 97.03% | 通过 |
| 390 | 配色改变,处理函数正常 | 0% | 96.43% | 通过 |
实测范围:共调用对比工具 6 次,退出码均为 0;另对三种模式、三种宽度执行了 9 次独立交互检查。每种宽度下,参考页与故障页 PNG 的哈希一致,工具报告差异像素数为 0。表中的细节指标保留两位小数,原始 JSON 保留完整浮点值。
web-pixels-compare 从未点击按钮,也没有获得事件处理函数是否工作的证据。Craft Anything 的完整流程还包含对已观察状态的其他检查。本实验不能说明完整流程会接受这个故障页面。
下载可复现的 Craft Anything 对比测试包,其中包含自编 HTML、截图生成脚本、运行结果、工具清单和环境记录。CLI 与浏览器需另行安装。测试页面使用我们自己编写的内容。
如何复现这项截图检查?
复现这项 Craft Anything 检查时,用发布版 CLI 的 web-pixels-compare 对比两份 PNG 文件。图片路径必须使用绝对路径,并记录可执行文件版本。测试包中的运行脚本会重新生成本地页面截图,并单独记录点击断言。
craft-anything-cli --version
craft-anything-cli commands
craft-anything-cli --clean-room web-pixels-compare @compare.jsoncompare.json 使用以下结构,将两条路径替换为你自己的文件:
{
"before": { "path": "/absolute/reference.png" },
"after": { "path": "/absolute/candidate.png" },
"common_area": true,
"tolerance": 24
}发布版截图工具的实现直接从 PNG 计算这些结果。本次没有调用模型,也没有启用噪声遮罩。下载包记录了可执行文件哈希与运行时版本;浏览器或字体变化可能改变重新生成的截图。
Craft Anything 的相似度分数衡量什么?
Craft Anything 的布局指标按 16 像素见方的图块比较平均颜色,细节指标则用 SSIM 衡量亮度结构。配色对照组的布局得分为 0,反映的是颜色不同,并非元素位置发生移动。查看结果时,应把两个指标与实际图像、图像尺寸一起核对。
| 字段或设置 | 具体含义 | 审查时的注意点 |
|---|---|---|
layout_similarity | 平均颜色足够接近的图块占比。 | 元素位置不变,改色仍可能降低得分。 |
perceptual_similarity | 针对图像亮度计算的 SSIM。 | 结合颜色敏感指标和实际图像判断。 |
common_area | 尺寸不一致时,对比从左上角开始的共同区域。 | 核对两张图的原始尺寸,以及共同区域以外的内容。 |
tolerance: 24 | 统计像素变化时使用的单通道差异阈值。 | 不能理解为允许 24% 的行为错误。 |
coverage: complete, 1/1 | 已完成所请求的这一次截图对比。 | 覆盖范围只到本次操作及其输入图像。 |
网站重建检查器按 (layout_similarity + perceptual_similarity) × 50 合并两个图像指标,再对采集的宽度和页面求平均。它还评估其他观察结果与检查断言;这些检查并非都作为权重计入截图百分比。
将该公式用于我们 1440 像素宽的配色对照组,可得 (0 + 0.9687234879) × 50 = 48.44%。这是根据底层工具输出计算的数值,并非完整重建流程的实测得分。该页面的按钮仍能工作。配色变化是否可接受、所需交互是否存在,应分别判断。
Ready 是否意味着全部检查通过?
在 v0.3.0 中,即使某项检查未满足要求,Craft Anything 仍可能在达到修改轮数上限后显示 Ready。这来自源码分析,本实验没有运行重建循环。接受结果前,应检查最终一轮每项检查的断言与未知项。
| 信号 | 所检查版本中的含义 | 还需核对什么 |
|---|---|---|
passed | 构建成功,或网站已启动并完成对比。 | 该项检查的相似度、断言和未知项。 |
good(threshold) | 检查通过、没有未知项、所有断言通过,并在有相似度时达到阈值。 | 这些断言是否覆盖你要求的结果。 |
Ready | 运行进入结束流程;达到修改上限后,可能依据最后一项检查的 passed 字段完成。 | 最终一轮的全部检查,包括失败断言和未解决的未知项。 |
| 进程成功退出 | 命令在进程层面成功完成。 | 对重建软件作出明确的验收判断。 |
CLI 成功退出后,先收集输出,再逐项判断验收条件。若表单必须显示错误,或菜单必须打开,就保留该状态变化的证据。没有出现所要求的状态,验收步骤就应判定失败。
Craft Anything 网站重建验证该保留哪些证据?
接受重建网站前,先核对 Craft Anything 采集的参考内容,以及最终一轮的每项检查。再针对准备保留的确切实现版本执行所需交互。预期结果应在测试前写清楚,避免验收判断取决于截图看起来有多像。
| 产物 | 需要回答的问题 | 应保留的证据 |
|---|---|---|
craft.json 与运行记录 | 结果来自哪个目标、智能体、模式和版本? | 配置、参考范围与工具版本。 |
capture/ | 参考内容是否包含你关心的路由和状态? | 视口尺寸、图像、可见文字及观察到的交互。 |
app/ | 评估的是哪个实现版本? | 确切的代码版本,以及构建或预览命令。 |
checks/ | 最终一轮哪些项通过、哪些失败、哪些仍未知? | 全部相关结果、分数、断言与未知项。 |
| 独立交互记录 | 指定操作是否产生预期结果? | 操作、预期状态、实际状态,以及独立判定的通过或失败。 |
从一条路由和一个可观察结果开始,例如点击后显示的确切状态文字。若表单必须保存记录,除了确认提示,还要检查数据是否持久化。缺少证据的项目继续标为未确认。
观察结果一旦获准成为实现规则,就把它写进仓库上下文。我们的 Claude Code 设计系统指南介绍这一步交接。若流程跨越原生应用,应采用独立的 Cua 浏览器到桌面 QA 协议;本次浏览器测试没有验证这些跨应用环节。
什么情况下值得采用 Craft Anything?
对于已获授权的重建任务,如果团队能依据约定的参考内容和明确的交互检查来审查生成项目,我们会考虑试用 Craft Anything。发布审批仍应独立进行,并采用这些验收条件,尤其是在项目仍处于早期 alpha 阶段时。
先从你自己的网站开始。如果重建结果需要成为长期维护的生产系统,可继续使用从原型进入生产的决策指南,评估视觉验收之外的工作。
