Craft Anything:如何验证网站重建结果?

返回
Kevin Riedl

9 分钟 阅读 · 2026年11月3日
最近审核

下一篇
图片在你的设备上生成,不连接 Instagram。文章链接会复制到剪贴板,供链接贴纸使用。

我们的故障测试页与正常参考页的截图完全一致。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.json

compare.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 阶段时。

先从你自己的网站开始。如果重建结果需要成为长期维护的生产系统,可继续使用从原型进入生产的决策指南,评估视觉验收之外的工作。

Craft Anything 网站重建验证常见问题

Craft Anything 是 REA 的分支或改名版本吗?
所查资料将 Craft Anything 与 morluto/rea 列为不同项目,没有一手证据证明它是 REA 的分支或改名版本。比较时应选定具体检查任务,核对文档中的输入与输出。用途重叠,不代表共用代码,也不代表检查覆盖范围相同。
所有已注册工具都能在 Clean room 模式运行吗?
不能。工具清单中的项目有不同目标、依赖和检查要求。Clean room 是默认观察模式,Deep 模式允许进一步检查内部内容。315 是我们所测 Linux v0.3.0 的已注册工具数,并非每次会话都可用的工具数。应核对当前模式与各工具的前置条件。
Craft Anything 能完全离线运行吗?
本次 PNG 对比在本地完成,没有调用模型。完整流程可能涉及在线网站、云端编码智能体、API 服务商或外部素材生成服务。称其为离线流程前,应检查实际选择的数据路径。使用原生桌面界面,并不能说明每项模型操作都在本机运行。
这篇评测实际运行了 AI 生成的网站重建吗?
没有。我们编写本地测试页面,用 Playwright 截图,再运行发布版 Craft Anything 截图对比工具,并单独检查按钮。这隔离了图像指标能够证明的范围,并未测量编码智能体的重建质量、完整检查循环、自动修正、原生应用、游戏或后端正确性。
complete 覆盖状态是否代表整个网站都测过?
原始输出中的 complete 是 1/1,指所请求的一次图像对比。该操作成功完成,并确认参考页与故障页的截图一致。其他浏览器状态和后端持久化不在该操作范围内。应结合操作名称及输入来理解覆盖状态。
达到文档中的 90% 相似度就能上线吗?
网站相似度阈值用于指导外观修正,不表示 90% 的产品功能已经正常。应按实际任务设置验收条件,查看断言和未知项,并运行所需交互。如果关键操作失败,再高的截图百分比也不能补上缺失功能,或成为批准发布的依据。

生产级 AI 支持

正在评估内部工作流是否适合 AI?先明确任务、数据权限、质量、延迟和运行成本的评估范围。Wavect 帮助团队决定采用、调整还是停止试点。

查看相关服务:

只收重要内容

关注与你相关的内容

每当我们发布新文章,你会收到一封简短邮件。你可以关注整个博客,也可以只选感兴趣的主题。

你希望接收哪些内容?
选择主题

免费、双重确认、不使用跟踪像素。

返回
Kevin Riedl

9 分钟 阅读 · 2026年11月3日
最近审核

下一篇

获取下一篇关于交付与 QA的一线笔记

有新文章时发送一封简短邮件,不使用跟踪像素,也不发送填充内容。

免费、双重确认、不使用跟踪像素。