一行 npx 命令给 Codex 装上「审美基因」：AI 写的 3D 游戏，终于不再像廉价 Demo 了.md13.9 KBit/ai/一行 npx 命令给 Codex 装上「审美基因」：AI 写的 3D 游戏，终于不再像廉价 Demo 了.md
--- title: "一行 npx 命令给 Codex 装上「审美基因」：AI 写的 3D 游戏，终于不再像廉价 Demo 了" source_url: "https://mp.weixin.qq.com/s/0g8hGJdGxq5is3lIh2iggQ?scene=1&click_id=752061965" source_site: "mp.weixin.qq.com" clipped_at: "2026-07-06T10:48:28.654841+00:00" clipper: "aiwiki-url-ingest" extractor: "weixin_static" source_strategy: "normal_web_clip" source_strategy_label: "普通网页抓取" author: "神经界碑" --- # 一行 npx 命令给 Codex 装上「审美基因」：AI 写的 3D 游戏，终于不再像廉价 Demo 了 2026 年 6 月 21 日，Scott（@scottstts）在 X 上发了一条帖。 没有产品发布会的排场，没有预热海报。只有一段 85 秒的演示视频，和一行命令： ``` npx threejs-awesome-graphics-agent-skills install --agent codex ``` 帖文解释得很干脆：从 X 上收集了一批视觉效果最好的 Three.js 开源项目，蒸馏成一个 Agent 技能包。AAA 级游戏图形，开箱即用。**"任何人创建的游戏，从此不必看起来像廉价 demo。"** 192 个赞，1\.1 万次观看，7 条回复。数据不算大。 但这条帖真正做的事情，比它的互动数字重要一个数量级—— **它给 AI 编码代理，装上了第一个可安装的「审美插件」。** ▲ Scott 的正式发布帖：顶部为蓝色视频封面与安装命令，附带 85 秒演示，192 赞、1\.1 万次观看 ## Codex 的「技能」机制：为什么装一个包就能改变 AI 的品味 要理解这一行的分量，得先拆开 Codex 的 Agent Skills。 Codex 是 OpenAI 推出的 AI 编码代理，和 Claude Code、Cursor 并列，被开发者用来写真实项目。2026 年，官方文档里重点推了一个机制：**Agent Skills**。 技能是一个可复用的工作流封装。一个目录，一份`SKILL.md`（必须有名称和描述），加可选的脚本、参考文件、静态资源。Codex 启动时只加载技能名和简介，控制上下文占用在 2% 以内；真正需要时，才展开完整内容。 安装只需要一行： ``` npx skills add <repo> --skill '*' -a codex ``` Scott 套了一层自定义包装，变成了自己的 npx 入口。背后的逻辑完全一致：**把专长打包，一键分发，即装即用。** ▲ OpenAI 官方技能文档：技能通过 SKILL.md 定义，支持渐进式加载，可安装在项目、用户或系统级目录 重点来了。 代码语法，AI 本来就会。`new THREE.BoxGeometry()`、`new THREE.MeshPhongMaterial()`、`scene.add(mesh)`——任何一个大模型都能原样吐出这些调用。 但灯光怎么布置才有电影感？PBR 材质的金属度、粗糙度、清漆参数调到多少才像真东西？相机应该用 35mm 还是 50mm 的 FOV？后处理链路上要叠哪几层——Bloom？SSAO？色散？胶片颗粒？ 这些问题的答案，不在语言模型的预训练语料里。训练数据里的代码仓库，99% 都在解决功能问题，视觉打磨几乎不出现。 **它们藏在 Scott 收集的那批「最好看的 Three.js 开源项目」源码里。** 技能机制的核心价值：让 AI 在关键决策点上，能参考**已经人类验证过的正确答案**。这跟「让 AI 多知道一点东西」有本质区别——后者是信息量的问题，前者是判断力的问题。 ## Three.js 的上限和 AI 的下限 Three.js（当前 r184）是浏览器里最主流的 JavaScript 3D 库。基于 WebGL/WebGPU，无需插件就能在网页里跑复杂 3D 场景。官网的 showcase 区汇集了大量生产级作品：品牌互动、游戏、数据可视化、艺术实验。 上限极高。 但 AI 生成的 Three.js 代码，长期被困在一个固定的水准线下。 典型症状：旋转立方体、基础 Phong 光照、三个白色点光源均匀打亮、没有阴影层次、所有物体金属度 0、粗糙度 0\.5、相机匀速绕圈、动画没有任何情绪。 圈内管这叫**「Demo 诅咒」**。代码能跑，功能不缺，但视觉停留在 2015 年 Unity 新手教程的质感。 塑料玩具。 问题出在 AI 的「默认路径」。泛化模型给出的永远是统计意义上的最安全解——BoxGeometry \+ MeshPhongMaterial \+ AmbientLight \+ OrbitControls。问题不出在任何人身上，只因为语言模型的工作方式如此：概率最高的 token 序列，就是最平庸的视觉选择。 ▲ slowroads.io：程序化世界 \+ 体积雾 \+ 动态光照，Three.js 在浏览器里能达到的品质上限 ▲ Bruno Simon 的标志性创意 3D 站点：物理材质、电影级运镜、艺术方向高度统一，行业公认的完成度标杆 而另一边，slowroads.io 的雾气公路、Bruno Simon 的物理材质与电影运镜、Lusion 的实验、Codrops 的案例——这些作品里藏着真正能打的视觉参数。HDRI 环境光、PBR 材质节点、后处理链路、相机缓动曲线。 高质量 Three.js 的秘诀全在这些细节里。但它们既不属于教程范畴，也不属于文档体系，StackOverflow 的答案里也找不到。**它们散落在具体项目的源码中，等着被人找到、提炼、复用。** Scott 的包，做的就是这件事。 ## 审美蒸馏：从过山车实验到一键安装 Scott 的思路很明确：把人类验证过的视觉解法，固化成 AI 可加载的上下文。 具体拆开来看—— **采集**：在 X 上持续追踪视觉效果最好的 Three.js 开源项目。筛选标准很明确——光照、材质、构图、后期是否真正出彩。star 数高低不说明问题。 **蒸馏**：提炼其中的高级材质用法、灯光布局、后处理链路、相机运镜模式、性能优化策略。打包成技能文件，附带可直接引用的代码片段和场景配置。 **分发**：用 npx 一键安装到 Codex，让 AI 在生成 3D 代码时先参考这些高质量案例，而非默认模板。 效果是直接的。装了包之后，你告诉 Codex「做一个赛博朋克雨夜城市场景」，它不再从 BoxGeometry 加三个白光源起步。它会调用包里收录的 HDRI 环境光配置、体积雾着色器、PBR 材质参数、UnrealBloom 后处理链路，并且能说出「参考了项目 A 的光照方案，项目 B 的材质节点」。 这不是 Scott 第一次做 Three.js \+ AI 实验。 三天前（6 月 18 日），他刚发过一段视频：让 glm 5\.2 生成一个过山车游戏。他当时的评价是「游戏设计很漂亮，glm 5\.2 就像开源模型里的 Fable 5」。虽然复杂逻辑还需要 GPT 5\.5 修 bug，但视觉已经突破了 demo 味的天花板。 ▲ Scott 三天前的过山车实验：glm 5\.2 生成视觉，GPT 5\.5 修补逻辑，证明了 AI 已经能产出「超出 demo 水平」的 3D 视觉 从过山车到技能包，中间只隔了三天。这三天里，Scott 的思路完成了一次跃迁：**一次性的好效果不够，要把产生好效果的方法，变成可复用的基础设施。** 他承诺持续更新，不断加入新的史诗级项目。 ## 不约而同：四个人，四个包，同一条路 Scott 不是唯一在做这件事的人。 几乎同一时期，多个独立团队发布了高度相似的东西。方向不同，解法一致，说明这些项目背后有一个真实且紧迫的需求在同步爆发，不是某个人拍脑袋的想法。 **6 月 14 日，Majid Manzarpour 发布了 threejs\-game\-skills。** 一套更完整的「游戏导演」系统。除了 AAA 级图形，还覆盖 gameplay 循环、HUD/UI、调试、QA 检查清单。支持可选的 Tripo 3D 生成、ElevenLabs 音频、Gemini 图像。安装方式和 Scott 如出一辙：`npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex`。 这条帖拿了 848 个赞、13\.3 万次观看、54 条回复。 社区反应几乎是清一色的「立刻装」：「我文件夹里一堆废弃的游戏创意在瑟瑟发抖」「疯了，马上装」「效果太好了」。 Majid 的包还内置了一套**视觉评分卡机制**：构建检查、截图对比、像素级审计、移动端视口验证、性能快照。等于把 QA 流程也技能化了——AI 写出来的东西，AI 自己先打一轮分。 ▲ Majid 的游戏导演技能包，848 赞、13\.3 万次观看，涵盖 gameplay、AAA 图形、UI、调试、QA 全流程 **6 月初，Kappaemme 发布了 mengtofrontend。** 一个专门审计落地页「AI 味」的 Codex 技能。基于设计师 MengTo 的分析，逐项检查：字体间距、假图、泛 AI 区块、视觉层级、移动端打磨、人性化细节。 安装：`npx --yes mengtofrontend@latest`。 它跟 Scott 的包解决的是同一个问题，只是战场从 3D 换到了落地页视觉。 ▲ Kappaemme 将设计师 MengTo 的落地页审美分析做成了 Codex 技能，一键审计前端页面的「AI 味」 此外还有**visually\-3d**（`npx visually-3d`），让 Codex 和 Claude CLI 在浏览器里直接生成 Three.js 3D 模型，不需要 Blender，不需要 GPU。 四个项目，四条独立轨道，同时指向同一个结论：**用技能包的形式，把人类积累的品味与最佳实践固化下来，供 AI 代理随时调用。** 如果只有 Scott 一个人在做，你可以说这是个有趣的实验。四个人独立撞向同一个方向，说明这个需求是真实且紧迫的。 ## 「审美」变成可安装模块之后 把这几件事放在一起看，一条线索就清楚了。 2025 到 2026 年，AI 编码工具在「能不能写代码」上进步神速。Codex、Claude Code、Cursor，都能在功能层面交出及格的答卷。但「写得好不好看」——这个维度一直被搁置。 「好看」过去是软技能。靠设计师的眼睛，靠多年的手感，靠在提示词里写两百字灯光描述。费时，费人，不可复用。 Scott、Majid、Kappaemme 这批人做的事，本质就是把「好看」变成了可安装的模块。npx 一行命令，审美到位。过去做一个好看的 Three.js 英雄页，找参考花半天，调参数花一天，优化性能再花半天。现在装一个包，AI 能直接给出 70\-80 分的视觉基础，人类只需要在艺术方向和最终微调上投入精力。 门槛在塌缩。 但这件事的走向，跟「AI 取代设计师」的恐惧剧本无关。恰恰相反——Scott 包里每一段参考代码都来自人类创作者的公开作品，Majid 系统里的 QA 检查清单是人类经验的工程化转译，Kappaemme 的审计规则来自 MengTo 这样的真实设计师。 **人类负责品味与 curation，AI 负责执行与迭代。** 技能包，就是人类品味的「外置硬盘」。 局限当然存在。Scott 的包刚发布，大规模安装后的实际效果需要时间验证。开源的版权归属需要持续关注。如果所有人都引用同一批「最佳项目」，可能出现新的风格趋同。浏览器的性能天花板还在，移动端更严苛。 但这些局限不改变一个基本判断：**2026 年 6 月的这几条帖，标记了 AI 编码工具从「能写代码」迈向「能写好看的东西」的关键转折。** 从前，想让 AI 做出一个视觉上能打的 3D 场景，你得自己懂灯光、懂材质、懂后处理，然后在提示词里逐条手写参数。 现在，装一个包就够了。 这件事，三年前的任何一条提示词都做不到。