--- title: "Craft Anything：网站重建验证" canonical: https://wavect.io/zh/blog/craft-anything-website-rebuild-verification/ language: zh description: "Craft Anything 网站重建验证实测：截图完全一致，按钮仍可失效。查看原始对比数据、独立点击检查和 Ready 状态的具体限制，明确验收时还需保留哪些证据。" image: "https://wavect.io/img/blog/headers/header_craft-anything-website-rebuild-verification.png" author: ["Kevin Riedl"] published: "2026-11-03" updated: "2026-11-03" reviewed: "2026-11-03" --- # Craft Anything：如何验证网站重建结果？ [**返回**](/zh/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/zh/team/kevin-riedl/) [Kevin Riedl](/zh/team/kevin-riedl/) https://linkedin.com/in/wsdt 9 分钟 阅读 · 2026年11月3日 最近审核 2026年11月3日 [**下一篇**](/zh/blog/claude-code-design-system-files/) 要点速览 Craft Anything 可帮助编码智能体检查软件并对比重建结果。我们运行发布版 CLI，在三种宽度下测得故障页与参考截图完全一致，点击检查却失败。本次只测试截图工具，没有运行完整重建流程。验收需核对最终检查的失败项和未知项，并实际验证关键交互；Ready 不代表全部通过。 我们的故障测试页与正常参考页的截图完全一致。Craft Anything 的图像指标四舍五入后为 100%，按钮却没有任何反应。 **Craft Anything 网站重建验证，需要把图像证据与实际功能要求对应起来。**核对各视口的结果、失败的检查断言和未知项，再执行所需交互。截图一致，也不能证明从未测试过的结果。将对应的实现版本与检查记录一起保存。 **核对日期：2026年11月3日。**我们运行了 [Craft Anything v0.3.0](https://github.com/storytold/craft-anything/releases/tag/v0.3.0) 官方 Linux x86_64 CLI，验证了下载包校验和，并检查发布版源码。截图由 Playwright 生成，按钮也由 Playwright 单独检查。本次没有运行 AI 构建智能体或完整重建流程。 ## Craft Anything 能做什么？ Craft Anything 是用 Rust 编写的开源工具集，供编码智能体检查现有软件，并对比新的实现。 [发布版 README](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/README.md) 描述了面向网站、应用和游戏的研究、构建与检查流程。项目仍将自身标为早期 alpha 版本。 ArtCraft 的 [官方应用目录](https://getartcraft.com/apps) 将 Craft Anything 与 PhotoCraft、FilmCraft 等创作工具列在同一产品家族中。 | 使用方式 | 在流程中的作用 | 需要核对什么 | | --- | --- | --- | | 桌面应用 | 查看目标并跟踪重建过程。 | 实际采集的目标与最终检查报告。 | | CLI | 在终端运行指定工具或重建任务。 | 版本、工具输出及各项检查的实际结果。 | | MCP 服务器 | 向智能体提供检查与重建工具。 | 所用智能体、检查模式和权限范围。 | 工具数量必须带上日期。 [10月31日的首发 README](https://github.com/storytold/craft-anything/blob/f64ae3bf3c8863a982af1304e06de20653803968/README.md) 写的是 284 个工具，v0.3.0 README 写的是 314 个。我们运行发布版 Linux 可执行文件，通过 `commands` 得到**315 个不同的已注册工具 ID**。列入清单，不代表在任意模式、目标或依赖环境下都能使用。 ## Craft Anything 能绕过 Claude 的拒绝吗？ Craft Anything 的文档没有提供消除 Claude 拒绝的方法。 [Claude Code 集成说明](https://github.com/storytold/craft-anything/blob/2e0d0813e0b46b1f5ef73b51d501c9f1309dff36/docs/claude-code.md) 写明，它使用你自己的登录，启动本机未经修改的 `claude` 程序。换一个工具接口，不能据此认定模型服务商就会接受某项复刻请求。 所查一手资料没有证实“Anthropic 的封禁促成了这个项目”这一说法。 [Issue 21](https://github.com/storytold/craft-anything/issues/21) 记录了 Claude 检测故障和一次拒绝报告。工单转发评论将两者分开：一是在 PATH 中找不到 Claude，二是拒绝复刻 Titanfall 2。这个具体报告不足以证明服务商实施了全面封禁。 [Reverse Engineer Anything，简称 REA](https://github.com/morluto/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 对比测试包](/downloads/craft-anything-website-rebuild-verification-fixture.zip) ，其中包含自编 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 } ``` [发布版截图工具的实现](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/tools/browser_tools.rs) 直接从 PNG 计算这些结果。本次没有调用模型，也没有启用噪声遮罩。下载包记录了可执行文件哈希与运行时版本；浏览器或字体变化可能改变重新生成的截图。 ## Craft Anything 的相似度分数衡量什么？ Craft Anything 的布局指标按 16 像素见方的图块比较平均颜色，细节指标则用 SSIM 衡量亮度结构。配色对照组的布局得分为 0，反映的是颜色不同，并非元素位置发生移动。查看结果时，应把两个指标与实际图像、图像尺寸一起核对。 | 字段或设置 | 具体含义 | 审查时的注意点 | | --- | --- | --- | | `layout_similarity` | 平均颜色足够接近的图块占比。 | 元素位置不变，改色仍可能降低得分。 | | `perceptual_similarity` | 针对图像亮度计算的 SSIM。 | 结合颜色敏感指标和实际图像判断。 | | `common_area` | 尺寸不一致时，对比从左上角开始的共同区域。 | 核对两张图的原始尺寸，以及共同区域以外的内容。 | | `tolerance: 24` | 统计像素变化时使用的单通道差异阈值。 | 不能理解为允许 24% 的行为错误。 | | `coverage: complete, 1/1` | 已完成所请求的这一次截图对比。 | 覆盖范围只到本次操作及其输入图像。 | [网站重建检查器](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/kinds/website.rs) 按 `(layout_similarity + perceptual_similarity) × 50` 合并两个图像指标，再对采集的宽度和页面求平均。它还评估其他观察结果与检查断言；这些检查并非都作为权重计入截图百分比。 将该公式用于我们 1440 像素宽的配色对照组，可得 `(0 + 0.9687234879) × 50 = 48.44%`。这是根据底层工具输出计算的数值，并非完整重建流程的实测得分。该页面的按钮仍能工作。配色变化是否可接受、所需交互是否存在，应分别判断。 ## Ready 是否意味着全部检查通过？ 在 v0.3.0 中，即使某项检查未满足要求，Craft Anything 仍可能在达到修改轮数上限后显示 Ready。这来自源码分析，本实验没有运行重建循环。接受结果前，应检查最终一轮每项检查的断言与未知项。 [检查结果定义](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/engine/src/workspace.rs) 和 [重建结束逻辑](https://github.com/storytold/craft-anything/blob/e6280b5dc518b9f3266c82d794a4e2f0367d9a53/crates/ai/src/rebuild/mod.rs) 说明了以下区别： | 信号 | 所检查版本中的含义 | 还需核对什么 | | --- | --- | --- | | `passed` | 构建成功，或网站已启动并完成对比。 | 该项检查的相似度、断言和未知项。 | | `good(threshold)` | 检查通过、没有未知项、所有断言通过，并在有相似度时达到阈值。 | 这些断言是否覆盖你要求的结果。 | | `Ready` | 运行进入结束流程；达到修改上限后，可能依据最后一项检查的 `passed` 字段完成。 | 最终一轮的全部检查，包括失败断言和未解决的未知项。 | | 进程成功退出 | 命令在进程层面成功完成。 | 对重建软件作出明确的验收判断。 | CLI 成功退出后，先收集输出，再逐项判断验收条件。若表单必须显示错误，或菜单必须打开，就保留该状态变化的证据。没有出现所要求的状态，验收步骤就应判定失败。 ## Craft Anything 网站重建验证该保留哪些证据？ 接受重建网站前，先核对 Craft Anything 采集的参考内容，以及最终一轮的每项检查。再针对准备保留的确切实现版本执行所需交互。预期结果应在测试前写清楚，避免验收判断取决于截图看起来有多像。 | 产物 | 需要回答的问题 | 应保留的证据 | | --- | --- | --- | | `craft.json` 与运行记录 | 结果来自哪个目标、智能体、模式和版本？ | 配置、参考范围与工具版本。 | | `capture/` | 参考内容是否包含你关心的路由和状态？ | 视口尺寸、图像、可见文字及观察到的交互。 | | `app/` | 评估的是哪个实现版本？ | 确切的代码版本，以及构建或预览命令。 | | `checks/` | 最终一轮哪些项通过、哪些失败、哪些仍未知？ | 全部相关结果、分数、断言与未知项。 | | 独立交互记录 | 指定操作是否产生预期结果？ | 操作、预期状态、实际状态，以及独立判定的通过或失败。 | 从一条路由和一个可观察结果开始，例如点击后显示的确切状态文字。若表单必须保存记录，除了确认提示，还要检查数据是否持久化。缺少证据的项目继续标为未确认。 观察结果一旦获准成为实现规则，就把它写进仓库上下文。我们的 [Claude Code 设计系统指南](/zh/blog/claude-code-design-system-files/) 介绍这一步交接。若流程跨越原生应用，应采用独立的 [Cua 浏览器到桌面 QA 协议](/zh/blog/cua-desktop-qa-browser-native-workflow/) ；本次浏览器测试没有验证这些跨应用环节。 ## 什么情况下值得采用 Craft Anything？ 对于已获授权的重建任务，如果团队能依据约定的参考内容和明确的交互检查来审查生成项目，我们会考虑试用 Craft Anything。发布审批仍应独立进行，并采用这些验收条件，尤其是在项目仍处于早期 alpha 阶段时。 先从你自己的网站开始。如果重建结果需要成为长期维护的生产系统，可继续使用 [从原型进入生产的决策指南](/zh/blog/lovable-cursor-prototype-to-production/) ，评估视觉验收之外的工作。 ## 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% 的产品功能已经正常。应按实际任务设置验收条件，查看断言和未知项，并运行所需交互。如果关键操作失败，再高的截图百分比也不能补上缺失功能，或成为批准发布的依据。 架构与平台 ## 接下来读什么 对长期交付产生影响的框架、平台与系统设计选择。 [从这里开始**智慧城市软件架构：MQTT、LoRaWAN、Kubernetes 与 Terraform**](/zh/blog/smart-city-architecture-best-practices-2026/) - [Figma Weave 设计工作流：连接方式、同步与积分](/zh/blog/figma-weave-design-workflow/) - [OpenMontage 视频框架：用编程智能体组织制作流程](/zh/blog/openmontage-ai-video-production-review/) - [Mireye 地块搜索 API：MCP、定价与选址筛选](/zh/blog/mireye-land-search-enrich-api-mcp/) - [git-ai 评测：并行智能体合并与验证](/zh/blog/git-ai-concurrent-agents-merge-verification/) - [PHP2Shell：升级旧版 PHP，还是迁移到 Node.js？](/zh/blog/php2shell-legacy-php-upgrade-migration/) [上一篇文章**Figma Weave 设计工作流：连接方式、同步与积分**](/zh/blog/figma-weave-design-workflow/) [下一篇文章**OpenMontage 视频框架：用编程智能体组织制作流程**](/zh/blog/openmontage-ai-video-production-review/) [**返回**](/zh/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/zh/team/kevin-riedl/) [Kevin Riedl](/zh/team/kevin-riedl/) https://linkedin.com/in/wsdt 9 分钟 阅读 · 2026年11月3日 最近审核 2026年11月3日 [**下一篇**](/zh/blog/claude-code-design-system-files/)