用 Claude 构建照片笔触重绘工具

给 Claude 一张照片，让它写出一个网页：用 canvas 和模拟画笔，在几秒内把照片重新「画」出来。Simon Willison 的 Quick Study 展示的就是这样一个小实验，使用的模型是 Claude Opus 5.5 High。

它值得看的地方，是一个视觉想法怎样被描述成可实现的交互，以及传统图像算法如何参与 AI 编程。原文很短，展示了效果，也点出了 Sobel 边缘检测，但没有提供源码、计时结果或模型对比。

一句话需求，已经包含了交互和实现约束

作者给 Claude 的要求包含四件事：构建一个 artifact，允许打开照片，使用 canvas 元素和模拟画笔，并在几秒内完成绘制。

这比「帮我做个绘画网页」具体得多。输入是照片，输出是照片的绘画版本，表现形式是画笔逐步落在画布上，还给出了速度预期。对模型而言，这些条件缩小了实现范围；对使用者而言，也更容易判断生成结果是否符合要求。

这里的「几秒」是提示词里的目标。原文没有记录实际耗时，也没说明照片尺寸、设备或浏览器，因此不能把它当作性能测试结果。

作者附上的示例，是一张苍鹭照片对应的模拟油画效果：

图片能帮助判断视觉风格，却无法证明绘制过程是否流畅、其他照片是否同样有效。

模型负责写程序，Sobel 参与处理图像

原文明确交代了一个技术选择：Quick Study 使用 Sobel 边缘检测，除 Google Fonts 外没有外部库依赖。

边缘检测可以理解为寻找图像中明暗变化明显的位置，例如主体轮廓、羽毛边界和背景中的线条。它可以为绘画模拟提供结构信息，让程序有机会区分细节区域与大块色彩区域。

但原文没有解释 Sobel 的结果具体如何驱动画笔。它是否影响笔触方向、尺寸、密度或绘制顺序，都没有说清。不能仅凭算法名称，替作者补出一套完整实现。

这是让模型生成绘画程序的实验，不是让模型直接生成绘画图片。

照片打开后，由 canvas 和模拟画笔完成绘制，是提示词要求的工作方式。至于成品是否完全在本地运行、是否涉及其他请求，原文没有给出足够信息。

作者还提到，之前曾让 Claude Fable 使用 P5.js 模拟水彩插画。两次实验都围绕程序化绘画展开，但这次强调的是 canvas，以及除 Google Fonts 外不引入外部库。它们使用了不同模型和实现条件，不能据此比较模型能力。

我的判断

我认为这个案例最有用的部分，是需求表达：把「想要一个好看的效果」拆成输入、绘制载体、视觉过程和完成速度。前端开发者可以直接借鉴这种描述方式。

轻依赖也有实际价值。一个只围绕照片和 canvas 展开的原型，通常更容易阅读、修改和嵌入现有页面。不过，依赖少不等于代码更可靠，Sobel 也不自动等于绘画效果好。笔触设计、颜色处理和绘制顺序仍可能决定最终观感，原文没有展开这些细节。

同时，这份材料的证据范围很小：一条提示词、一张效果图和一句技术说明。作者没有给出首次生成是否成功、修改了多少轮，也没有提供其他照片的结果。它适合作为创作样例，尚不足以支撑「Claude Opus 5.5 High 能稳定一次完成此类任务」这样的结论。

能拿来做什么

• 做 canvas 视觉原型时，可以照着这个需求结构写提示词，明确输入内容、绘制方式、动画过程和速度目标，让结果更容易验收。
• 如果要复现照片绘画效果，可以把 Sobel 边缘检测作为研究入口，进一步检查边缘信息如何影响笔触，而不是只追求一张相似的成品截图。
• 把 AI 生成的原型接入前端项目之前，应补测不同照片尺寸和浏览器下的耗时与交互响应。原文中的「几秒」只能先作为目标，实际表现需要自己验证。