一行 npx 命令给 Codex 装上「审美基因」：AI 写的 3D 游戏，终于不再像廉价 Demo 了 摘要

文档概览

• 文章从 Scott 在 X 发布的一条帖子切入，帖子本身非常简单：一段 85 秒演示视频，加上一行安装命令。
• 随后文章解释为什么这条命令有意义：因为它不是普通脚手架，而是把 Three.js 优秀开源项目里的视觉经验蒸馏成 Codex 可安装的技能。
• 接着文章介绍 Agent Skills 的机制，包括技能结构、加载方式、安装范式，以及它为什么适合封装“判断力”而不仅是“信息”。
• 在此基础上，作者对比了 Three.js 的视觉上限与 AI 默认生成结果的视觉下限，指出 AI 常会掉入 Demo 诅咒。
• 然后文章详细概括 Scott 的方法论：搜集高质量案例、筛选真正出彩的视觉方案、提炼成可复用配置与代码片段、再以 npx 安装分发。
• 文章还补上 Scott 在 6 月 18 日过山车实验与 6 月 21 日技能包发布之间的演进关系：先证明 AI 能生成超过 demo 水准的结果，再把偶发好结果固化为基础设施。
• 最后作者把 Scott、Majid Manzarpour、Kappaemme、visually-3d 等项目并列，得出结论：2026 年 6 月出现了一波把“审美”“视觉 QA”“最佳实践”做成 AI 代理技能包的同步趋势。

关键事实

Scott 发布的命令与主张

• 文中最核心的命令是：npx threejs-awesome-graphics-agent-skills install --agent codex。
• Scott 在 2026 年 6 月 21 日于 X 发布这条命令，并配有 85 秒演示视频。
• 帖文的直接宣传语是：从 X 上收集了一批视觉效果最好的 Three.js 开源项目，蒸馏成一个 Agent 技能包。
• Scott 的主张非常明确：把这些项目里的图形经验封装起来后，AI 生成的游戏“从此不必看起来像廉价 demo”。
• 文中记录的互动数据为：192 个赞、1.1 万次观看、7 条回复。作者强调，这些数字不大，但意义远大于互动量本身。
• 作者对其意义的概括是：它相当于给 AI 编码代理装上了第一个可安装的“审美插件”。

Codex 的 Agent Skills 机制

• 文章将这个现象建立在 Codex 的 Agent Skills 机制之上。
• 技能本质上是一个可复用工作流封装，不是单纯提示词。
• 一个技能的基本结构包括：一个目录、一份 SKILL.md，其中必须包含名称和描述。
• 技能还可以附带脚本、参考文件和静态资源，因此不仅能放规则，也能放可执行辅助工具与样例。
• Codex 启动时不会把技能全文直接塞进上下文，而是先只加载技能名和简介。
• 只有在真正需要时，系统才展开技能完整内容。
• 文中给出的上下文占用描述是：这种渐进式加载把控制开销维持在 2% 以内。
• 官方安装范式是：npx skills add <repo> --skill '*' -a codex。
• Scott 的命令虽然是自定义包装入口，但作者指出其底层逻辑与官方范式一致：都是把专长打包，然后一键分发、即装即用。

作者对问题的判断：AI 会写 API，不会天然有审美

• 文章明确区分了“会写 Three.js API”与“会做出高级视觉效果”。
• 作者认为，大模型写出 new THREE.BoxGeometry()、new THREE.MeshPhongMaterial()、scene.add(mesh) 这类基础调用并不难。
• 真正困难的是审美与图形判断：灯光如何布置才有电影感，PBR 材质的金属度、粗糙度、清漆参数如何调整，相机该用怎样的视角，后处理链路叠哪些效果。
• 文中列举的效果类型包括：电影感灯光、PBR 材质、Bloom、SSAO、色散、胶片颗粒、相机运镜。
• 作者的核心判断是：这些答案通常不在大模型的预训练代码语料主干里。
• 原因在于，训练数据中的大多数代码仓库主要解决功能问题，而不是视觉打磨问题。
• 因此 AI 的默认路径会落向最安全、最常见、也最平庸的组合。
• 文章给出的典型低配组合包括：BoxGeometry + MeshPhongMaterial + AmbientLight + OrbitControls。

Three.js 的高上限与 AI 输出的低下限

• 文中说明 Three.js 当前版本线索为 r184。
• 它被描述为浏览器里最主流的 JavaScript 3D 库，基于 WebGL/WebGPU，无需插件即可运行复杂 3D 场景。
• 作者强调 Three.js 的上限非常高，官网 showcase 里已有大量生产级作品，涵盖品牌互动、游戏、数据可视化、艺术实验。
• 为了说明视觉上限，文章列举了多个代表作品与团队：slowroads.io、Bruno Simon、Lusion、Codrops。
• slowroads.io 被用来代表程序化世界、体积雾、动态光照等浏览器 3D 的高完成度。
• Bruno Simon 的作品被用来代表物理材质、电影级运镜、艺术方向高度统一。
• Lusion 与 Codrops 则被放在“实验性与高质量案例库”的位置上。
• 与之对照，AI 常见输出长期停留在“旋转立方体、基础 Phong 光照、三个白色点光源均匀打亮、没有阴影层次、所有物体金属度 0、粗糙度 0.5、相机匀速绕圈、动画没有情绪”的水准。
• 作者把这种现象命名为 Demo 诅咒：代码能跑，功能也在，但整体质感像“2015 年 Unity 新手教程”，更像塑料玩具而不是完整作品。

Scott 的方法论链路

• 文章把 Scott 的做法拆成采集、蒸馏、分发三个环节。
• 采集阶段：持续在 X 上追踪视觉效果最好的 Three.js 开源项目。
• 这里的筛选标准不是 star 数，而是光照、材质、构图、后期是否真的出彩。
• 蒸馏阶段：从这些项目中提炼高级材质用法、灯光布局、后处理链路、相机运镜模式、性能优化策略。
• 这些内容被整理成技能文件，并附带可直接引用的代码片段和场景配置。
• 分发阶段：通过 npx 安装到 Codex，让 AI 在生成 3D 代码时优先参考这些高质量案例，而不是回落到默认模板。
• 作者强调，技能机制的价值不只是“让 AI 多知道一些东西”，而是让 AI 在关键决策点调用“已经被人类验证过的正确答案”。
• 这被作者视作从“信息量”问题转向“判断力”问题。

6 月 18 日过山车实验到 6 月 21 日技能包发布的演进

• 文章指出，Scott 在 6 月 21 日正式发布技能包之前，已经在 6 月 18 日做过一次 Three.js + AI 的实验。
• 那次实验是让 glm 5.2 生成一个过山车游戏。
• Scott 对那次结果的评价是：游戏设计很漂亮，glm 5.2 像“开源模型里的 Fable 5”。
• 同时他也承认，复杂逻辑仍需要 GPT 5.5 来修 bug。
• 这说明当时视觉效果已经开始突破 demo 味，但完整产品级逻辑仍要依赖更强模型补足。
• 作者因此把这两次动作连成一条线：6 月 18 日证明“AI 能偶尔做出超过 demo 水平的视觉”，6 月 21 日则把这种一次性结果转成“可复用基础设施”。
• 文中用一句话概括这一跃迁：一次性的好效果不够，要把产生好效果的方法变成可复用基础设施。

重要细节

为什么文章认为这是“审美插件”，而不只是模板库

• 作者没有把这类技能包简单理解为代码片段仓库。
• 原因在于，Agent Skills 会在任务执行时按需展开，并作为代理决策时的参考依据。
• 因此技能包不仅是“给你一份例子”，而是“在需要做灯光、材质、运镜、后处理决策时，给 AI 一个更优先的思考路径”。
• 作者认为这比普通提示词更稳定，也比让用户每次手写冗长审美要求更可复用。
• 在文章逻辑里，过去很多视觉质量依赖人工在提示词中逐条写清参数；技能包则把这些经验外置化、可安装化。

文中对高质量 Three.js 视觉经验的具体描述

• 作者特别强调，高质量 Three.js 项目的关键知识往往散落在具体源码中，而不系统存在于教程、文档或问答站里。
• 这些知识包括 HDRI 环境光、PBR 材质节点、后处理链路、相机缓动曲线等。
• 它们之所以重要，是因为视觉完成度并不来自某个单独 API，而来自一整套组合关系。
• 例如一个“赛博朋克雨夜城市场景”，不只是换模型与贴图，而要一起调用 HDRI 环境光配置、体积雾着色器、PBR 材质参数、UnrealBloom 后处理链路。
• 文章还设想，装包后 Codex 甚至能够说明“参考了项目 A 的光照方案，项目 B 的材质节点”，即具备更明确的来源化复用路径。

与其他同期项目的并列关系

• 作者强调 Scott 并不是孤例。
• 6 月 14 日，Majid Manzarpour 发布了 threejs-game-skills。