Craft Anything 让 Claude Code 照着网页重做一版

看到一个排版舒服的落地页，想照着做一个自己的，最磨人的往往不是写代码，而是一点点量出它的间距、字号、配色，在手机上又是怎么排的。开源项目 Craft Anything（GitHub 约 2.2 万星，2026 年 10 月底才开源）把这一步交给了机器：它先像访客一样把原页面量一遍，再让你电脑上的 Claude Code 新建一个项目照着造，造完在三种屏幕宽度下和原页面逐项比对，给出相似度和"还差哪些"的清单，不像就接着改。真正让结果靠谱的不是哪个提示词，而是"造完必须比对"这一步：Agent 不再凭感觉说"差不多了"，而是拿着差异清单一条条改。

先看它怎么干活

（图片来自 Craft Anything 仓库。）

整个过程固定四步，界面上一直能看到走到哪了：

环节	做什么	产出
研究	打开原页面，在不同宽度下截图，测量布局、颜色、字体、间距，展开菜单看交互	一份关于原页面"长什么样"的证据
构建	让你电脑上已登录的 Claude Code 新建项目，用你指定的技术栈，没指定就用常见默认值	一个能运行的新项目
检查	在三种屏幕宽度下把新页面和原页面对比	每个页面的相似度，加一张"还没对上"的清单
就绪	打开预览；不满意就在底部输入框提修改	可以继续迭代的成品

（图片来自 Craft Anything 仓库。）

它默认是净室模式：只看访客能看到的东西（截图、可见文字、测出来的样式），不读网页源码；生成的版本用占位文字和自己的图。想读源码要手动切到深度模式，官方注明那只供个人研究。

以上按 Craft Anything 官方仓库的说明整理（当前 v0.5.0，MIT 或 Apache-2.0 双许可，仍是早期 alpha），我们没有自己安装试用。官方写明目前跑通的是"用 Claude Code 构建"这条主线，其他 Agent 和直接用 API key 构建还没实测。

为什么有效：三个原因

• 先量后做。 原页面的间距、字号、断点都是测出来的数字，不是 Agent 看一眼截图估的，起点就准。
• 对比结果是可以照着改的清单。 "关于页在 390 像素宽时出现了横向滚动"这种具体问题，Agent 改起来比"感觉不太像"快得多，也知道什么时候该停。
• 每一步都能看见、能拦住。 第一次运行装依赖、下载东西这类命令，会弹卡片等你批准；能不能用原站的 logo 和文字，也会单独问你。

照着用：五步 SOP

下面以"照着一个喜欢的落地页，做一个自己产品的版本"为例。把它交给你的 Agent，让它每完成一步对照"完成标准"自查。

安全底线

• 只研究你有权研究的东西。 官方要求只用在你自己拥有或被允许研究的软件上；它不会绕过登录、DRM 或反作弊。
• 净室不是沙盒。 净室只决定 Craft Anything 自己读什么，不隔离你的电脑；Claude Code 照样以你的身份读写和运行命令，权限要在 Claude Code 里管住。
• 装依赖就是在运行别人的代码。 npm 安装时默认会跑包里的脚本。只对你信任的项目选"这个项目总是允许"；不确定就让它装的时候跳过安装脚本。
• 深度模式只给自己用。 读别人代码和文件得到的东西，不要拿去发布。

容易踩的坑

• 把相似度当目标。 做到 99% 像，只说明你做了一个翻版；学到排版方法后，就该换成自己的内容和风格，直接换皮上线有侵权风险。
• 不写技术栈。 它会用一个默认的技术栈，可能和你现有项目对不上，事后再迁移更麻烦。
• 大项目一次做完。 多轮比对和修改都在消耗 Claude Code 的额度；先做一个页面，满意了再加。
• 以为所有 Agent 都一样好用。 官方只实测了 Claude Code 构建，换成别的 Agent 可能卡在中途。
• 对生成的代码不审就用。 结构复杂的页面，生成的代码多半还要自己调，上线前当成别人写的代码一样审一遍。

项目地址：Craft Anything（GitHub），安装包在 Releases 页面。