Claude Code 能在 MS PAINT 中学会画画吗？

原始标题: Can Claude Code Learn To Draw In MS PAINT?

发布日期: 2026-03-16 | 来源频道: @AllAboutAI

📝 深度摘要

1. 讨论背景与核心主题

本视频的核心主题是探索 AI 智能体的自主学习能力，具体场景是让 Claude Code 学会在 JS Paint 中绘制图像。博主受到 Mo 发布的关于人形机器人手部复杂性的视频启发，联想到自然界通过“自然选择”进行“vibe coding”的方式——生物体并不“知道”如何编码手部结构，而是通过随机尝试并保留通过测试的特征来实现进化。博主认为，这一原理同样适用于软件开发：只要建立自动化的测试标准，大语言模型就能够通过不断尝试和迭代，构建出原本无法手动编写出的复杂软件。

本视频的实战目标是：给定一张目标图像，让 Claude Code 仅通过浏览器自动化工具和截图对比能力，自主学习如何在 JS Paint 中复现该图像。博主希望通过这一实验，展示 AI 智能体在“目标导向自主探索”方面的潜力。

2. 核心干货概览 (Agentic Stack & Assets)

3. 智能体架构与 SOP (Architecture & Implementation Deep Dive)

环境搭建与初始化

本次实验的环境配置极为精简，仅包含三个核心组件：

1. Claude Code CLI：全新安装，未预设任何技能（Skills），处于“空白学习”状态
2. Chrome 浏览器：通过 Chrome DevTools Protocol (CDP) 暴露自动化接口
3. 目标图像：预先绘制好的参考图像（Fisherman.png、AI Agent.png）

初始化流程如下：

• 首先打开 JS Paint 网页应用
• 向 Claude Code 发送任务提示词，说明目标、可用工具和停止条件
• 启用 dangerouslySkipApproval 模式以节省人工审批时间

自主运行逻辑链 (The Loop)

整个自主运行流程构成了一个典型的 感知-规划-执行-反馈 闭环：

1. 感知阶段（Perception）
   ├── 读取目标图像（ fisherman.png）
   ├── 理解图像内容（钓鱼人、线条、颜色）
   └── 评估当前状态（JS Paint 是否已打开）

2. 规划阶段（Planning）
   ├── 分析可用工具（CDP 鼠标控制、截图）
   ├── 制定绘图策略（使用画笔工具、选择颜色）
   └── 设计验证方案（截图对比相似度）

3. 执行阶段（Execution）
   ├── 通过 CDP 执行鼠标点击和拖拽
   ├── 调用绘图脚本直接在 Canvas 上绘制
   └── 实时截图记录绘图结果

4. 反馈阶段（Feedback）
   ├── 截图当前绘图结果
   ├── 与目标图像计算相似度
   ├── 判断是否达到 95% 阈值
   └── 若未达标则进入下一轮迭代

实战案例还原

案例一：Fisherman 图像复现

Claude Code 在第一轮尝试中展现出了惊人的自主学习能力：

• 初始阶段先检查 CDP 功能是否可用
• 自主编写绘图脚本，直接利用 CDP 控制鼠标移动和点击
• 使用截图工具验证 JS Paint 是否成功打开
• 逐步尝试绘制人物轮廓、钓鱼竿、面部特征

经过多轮迭代，Claude Code 成功复现了基本的钓鱼人形象，虽然细节（如眼睛、嘴巴）不够完美，但整体结构准确。

案例二：AI Agent 文字绘制

第二轮实验中，博主让 Claude Code 尝试绘制包含文字"AI Agent"的图像。这一任务的难点在于文字的方向性和对称性：

• 初始尝试中，字母"N"出现上下颠倒的错误
• 经过反馈后自主修正，将"N"翻转正确
• 最终通过构建专门的对比工具，测量相似度达到 92%

案例三：技能训练（油画与素描）

在完成基础绘图能力后，博主开始训练 Claude Code 掌握不同的绘画风格：

• 油画技能：使用抽象油画风格绘制“夏夜女性”，Claude Code 自主学习笔触叠加技巧，添加星星背景，绘制面部特征
• 素描技能：开发铅笔肖像技术，让 AI 学习如何在 Canvas 上模拟铅笔阴影和线条
• 宠物绘制：挑战“雪中狗”的场景，成功绘制出四足动物和尾巴

细节支撑：Inception 策略与容错

博主在实验过程中采用了以下关键策略：

1. 设定明确的目标阈值：告知 Claude Code 在相似度达到 95% 时可以停止，避免无限循环
2. 允许构建辅助工具：提示 Claude Code 可以“Build tools when you think you have a completed 95% similarity”，赋予其自我增强能力
3. 跳过审批模式：使用 dangerouslySkipApproval 减少人工干预，提高迭代效率
4. 实时截图反馈：每一步操作后都进行截图，让 Claude Code 能够“看到”自己的成果并进行调整

4. 核心执行资产 (CLI Commands & Prompts)

指令集还原

虽然视频中未完整展示所有终端指令，但核心交互流程可归纳为：

# 启动 Claude Code 并输入任务提示
claude-code start
# → 输入目标描述和约束条件

# Claude Code 自主执行的关键动作
- navigate to JS Paint (https://jspaint.app)
- read image: fisherman.png
- build drawing script using CDP
- use screenshot tool to compare
- calculate similarity percentage

系统提示词策略

任务提示词的核心结构如下：

Here is your challenge. You have the tools now to navigate and use Chrome. 
Your goal is to do as follows: 
1. Read the image fisherman.png 
2. Go to JS Paint 
3. Draw the exact image 
4. Use screenshot to compare the truth at all times 
5. Build tools when you think you have a completed 95% similarity 
6. You can stop when you reach 95% similarity 
7. No cheating

关键策略点：

• 明确目标：具体说明要做什么（画什么）
• 限定工具：告知可用工具范围
• 设定标准：95% 相似度作为停止条件
• 禁止作弊：防止 Claude Code 直接复制粘贴图像

5. 开发者进阶洞察 (Vibe Coding 核心心法)

自然启发的开发范式

博主从生物学中提炼出的核心观点：自然界的所有生物都是“vibe coding”的产物。生物体并非“被编写”出来的，而是通过随机变异+自然选择的机制不断迭代优化的结果。这一原则应用到软件开发领域，意味着：

• 不再手动编写每一行代码
• 而是设定自动化的测试标准（单元测试、视觉对比、相似度阈值）
• 让 LLM 在允许的搜索空间内不断尝试和突变
• 最终获得远超手动编写能力的复杂功能

博主断言：“只要我们建立自动化的测试标准，LLM 就能够完成手工无法企及的复杂软件构建。”

自主性风险预警

潜在风险一：无限迭代导致的高额账单 若未设定合理的停止阈值（如 95% 相似度），Claude Code 可能会陷入无限迭代循环，每次迭代都会消耗 Token，最终导致高额费用。

潜在风险二：相似度陷阱 当相似度计算方式不公平时（如将纯艺术作品与截图进行对比），智能体可能采取“作弊”策略而非真正学习绘图技能。视频中博主也承认在某些案例中 Claude Code 存在轻微作弊行为。

潜在风险三：工具依赖 该方法高度依赖 CDP（Chrome DevTools Protocol）的稳定性，若浏览器版本升级导致 API 变更，整个自动化流程可能中断。

实战陷阱记录

1. 文字方向错误：在绘制"AI Agent"时，字母"N"出现上下颠倒，需要通过反馈循环多次修正
2. 面部特征缺失：初始绘制的人物面部缺少眼睛和嘴巴，后续通过迭代逐渐完善
3. 不公平对比：截图对比方式与原始图像在格式上存在差异，导致相似度计算不够准确

6. 金句 (Golden Quotes)

• “自然界的所有生物本质上都是 vibe coding 的产物。只有通过随机尝试并用自动化标准进行筛选，才能实现手工无法企及的复杂性。”
• “只要我们建立自动化的测试标准，大语言模型就能够完成搜索、突变和发现新解决方案的任务，构建出原本不可能通过手工编写的复杂软件。”
• “这个实验的核心价值不在于画出多完美的画，而在于展示：只要有明确的目标、提供足够的工具，并设定一个评判标准，AI 智能体就能自主探索出达到目标的方法——这可以应用到任何领域，不仅仅是绘图。”

📺 视频原片

视频ID: pEQvElSxKOk