Claude一句话生成Three.js寻物游戏：Tree Appreciator实测

AI编程圈最近又多了一个有趣的样本。Simon Willison用Claude的iPhone应用做了一次实验：只用一句提示词，让Claude生成了一款名为Tree Appreciator的Three.js小游戏。这个游戏的核心玩法是找出两棵算法生成树木之间的差异，玩法类似经典的找不同，但美术和交互明显更讲究。

一句提示词跑出3小时

Simon给出的提示词很直接：构建一个叫Tree Appreciator的Three.js游戏，展示两棵算法生成的树，核心机制是欣赏它们之间的差异，并且要「认真思考如何让它既有趣又漂亮」。

结果Claude在移动端的对话模式下连续跑了3小时7分钟，最终交出一款带音乐、动画和成就系统的找不同游戏。Simon自己也承认，他最近在演讲里提到过，告诉Opus「确保它有趣」这件事意外地好用。这次的实验再次验证了这一点。

Three.js 是一个基于 WebGL 的开源 JavaScript 3D 图形库，由 Ricardo Cabello（网名 mr.doob）于 2010 年前后发布，目前是浏览器端 3D 渲染最主流的方案之一。它把底层 WebGL 的着色器、缓冲区、矩阵运算等复杂 API 封装成场景图（Scene Graph）、相机（Camera）、材质（Material）、光照（Light）等直观对象，开发者只需几十行代码就能搭出带光照、阴影和动画的 3D 场景。Three.js 本身不含物理引擎和游戏逻辑，通常需要搭配模型加载器（GLTFLoader）、动画库或第三方物理库使用。它被广泛用于数据可视化、产品展示、网页游戏和交互艺术。Tree Appreciator 正是用 Three.js 在同一页面渲染两套程序化生成的树木场景，因此对场景组织、光照和动画循环的处理要求较高。

游戏实际长什么样

从截图看，Tree Appreciator的界面偏暗色系，顶部标注了树种编号和名称，例如「No. 003 Acer autumnalis」。中间是上下排列的两幅3D场景，标记为Fig. i和Fig. ii，都渲染了深色树干、红橙与浅桃色叶片、飘落的叶子、金色草地和远处的山丘剪影。

两幅图的差异用蓝色圆圈标注：a圈在树根处，Fig. i有小蘑菇而Fig. ii没有；b圈在右侧树冠，Fig. i是一片绿叶，Fig. ii里变成红色。底部有进度「2 of 4」、重置按钮、带三点提示的Hint按钮，以及分数显示。整体观感像一本自然观察手账，而不是普通的休闲小游戏。

为什么这个实验值得注意

Vibe coding的真实样本

这个案例展示了当前「vibe coding」的能力边界。开发者不再逐行写代码，而是用自然语言描述目标，把美术风格、交互细节和玩法规则一并交给模型。Three.js这种需要处理3D场景、光照和动画的框架，过去对提示词工程的要求不低，但这次Claude在单轮提示下完成了整套实现。

Vibe coding 一词由 Andrej Karpathy 在 2025 年初提出，指的是开发者不再逐行审查代码，而是用自然语言描述意图，让大模型直接生成可运行的程序，自己主要凭「感觉」（vibe）判断结果好坏、再补充提示迭代。它和传统的 AI 辅助编程（如 Copilot 补全单行代码）区别在于粒度：vibe coding 往往一次让模型产出整个功能模块甚至完整项目。这种模式降低了入门门槛，但也带来可维护性、安全性和调试困难等问题——因为开发者可能并不完全理解生成代码的内部逻辑。Simon Willison 本人是这一概念的积极讨论者，他多次记录自己在不细读代码的情况下用 LLM 搭建小工具的实验，Tree Appreciator 就是这类实践的又一实例。

「有趣」是可以被提示的

Simon提到自己有点尴尬地发现，直接告诉模型「确保它有趣」效果好得不太自然。这句话看起来空泛，但实际上它把模型从「完成功能」的模式推向了「打磨体验」的模式。3小时的生成时间，换来的不是原型，而是带成就和音乐的可玩成品。

程序化生成（Procedural Generation） 指不依赖美术手工建模，而是用算法和随机数在运行时生成内容。文中两棵树的树干、枝叶、飘落叶片和草地细节很可能都由固定随机种子加参数化规则生成，这样才能保证同一棵树在 Fig. i 和 Fig. ii 中大体一致，只在几处被刻意植入差异。程序化生成常见于 Roguelike 游戏的地图、植被和纹理，优点是体积小、变化多，缺点是难以精确控制画面。对「找不同」玩法而言，程序化生成还有一个隐性优势：差异点可以被算法记录（如第 a、b 处），从而自动生成蓝色圆圈标注和进度提示，无需人工标记。

移动端对话模式的潜力

说个细节，这次使用的不是Claude Code，而是iPhone应用的普通对话模式。也就是说，在没有专为编程优化的工具链情况下，模型依然能完成一个完整的Three.js项目。这对习惯用手机随手做点小东西的开发者来说，是个有参考意义的信号。

Claude Code 是 Anthropic 推出的命令行/IDE 集成编程代理，具备直接读写本地文件、运行终端命令、查看报错并自我修正的能力，属于「agentic coding」工具。相比之下，iPhone 应用里的普通对话模式只能输出文本，无法访问文件系统或执行代码。因此这次实验真正值得关注的不是工具能力，而是模型在缺少外部工具链、无法运行和调试的情况下，仅凭一次长对话就完成整个 Three.js 项目。这说明模型对 3D 库 API、游戏循环和视觉细节的知识已相当扎实，但同时也意味着任何运行时错误都无法被自动发现修正——Simon 拿到的其实是「盲写」一次通过的成果。

对开发者的启示

Tree Appreciator本身是个小实验，但它反映出的趋势不小。提示词里的审美要求、玩法目标和情感基调，正在成为生成结果的一部分。想让模型输出好玩的游戏，光描述技术栈不够，还得把「好玩」这两个字写进去。

另外，3小时的生成时间说明这类复杂前端项目的成本仍然不低，适合在明确需求后一次性交给模型长跑，而不是反复打断追问。对于想复现类似效果的开发者，可以参考Simon的提示词结构：技术栈加玩法描述，再加一句开放式的体验要求。