3D Studio 是做什么的？
以单一工作流运行一组 3D 网页技能。请求位于 $ARGUMENTS 中。如果智能代理未填充该占位符，则请求为用户与此技能一起编写的内容。
1. 选择技能
以下每一项都是一个独立的技能。请按照智能代理加载技能的方式加载它们，并严格按照所示名称：在 Claude Code 中使用 Skill 工具，或在 Codex 和 Antigravity 中读取其 SKILL.md。加载后，其指令将与此工作流一起应用。第 4 节列出了查找文件夹的位置。
始终加载以下三项： taste-skill（艺术指导；可能以 design-taste-frontend 名称安装）、apple-design（流畅的物理运动、材质和深度）、threejs-fundamentals（场景、相机、渲染器、循环）。
当请求需要时，添加一行：
| 请求涉及 | 加载 |
|---|---|
| 任何会动的东西 | animate、threejs-animation |
| 用代码构建的形状、实例化、大量对象 | threejs-geometry |
| 曲面、木材、金属、光泽 | threejs-materials、threejs-textures |
| 光照、阴影、反射 | threejs-lighting |
| 点击、拖动、轨道旋转、选取部件 | threejs-interaction |
| 自定义视觉效果 | threejs-shaders、threejs-postprocessing |
| 加载或压缩 3D 模型文件 | threejs-loaders、threejs-asset-pipeline |
| 从 Blender 建模或导出 | blender-mcp（首先检查 Blender 是否已安装） |
| React 项目 | threejs-react-three-fiber、r3f-fundamentals |
| 速度慢、卡顿、空白画布、内存问题 | threejs-performance、threejs-debug-profiler |
| 等距图形、示意图或解释工作原理的说明图，或 A4 打印海报 | anatomy |
| 渲染的电影或视频 | Remotion，参见第 3 节 |
这些技能加起来有数千行，全部加载会占用构建所需的工作内存。这就是默认使用表格的原因。
- 使用
--all，无论请求如何，加载表中的所有技能。 - 使用
--plan，列出将要加载的技能及其原因，不加载任何其他内容，然后停止。
用一行说明您正在加载哪些技能。如果某个技能无法加载，请指明其名称并继续处理其他技能，而不是停止。
在此工作流需要时，再加载每个技能。如果某个技能以设置步骤开始，或要求可能会中断工作的问候语，请跳过该部分。
2. 按此顺序工作
- 确定创意。 遵循
taste-skill的艺术指导：阅读简报，绘制方向，撰写文案。创意应源自主题。 - 将逻辑从 3D 中分离。 任何具有实际规则的内容（算术、模拟、定价）都应放在不含 Three.js 的普通模块中，并通过测试覆盖，以便在不渲染任何内容的情况下获得信任。
- 将 3D 构建为状态的函数。 几何代码根据姿态放置部件，且不涉及任何规则。动画应为进度参数的纯函数，以便可以反向播放、中途反转或跳转到终态以实现减少动效。
- 按需渲染。 仅当有对象移动时才绘制，不在屏幕外时完全停止绘制，这样空闲页面不消耗资源，手机也能保持凉爽。
- 使其完全可用。 需要画布旁有真正的按钮、键盘支持、减少动效、无 WebGL 时的降级方案，以及在手机宽度下正常工作的布局。
3. Remotion
此集合中不包含 Remotion 技能，因此直接在项目中使用 remotion 包。
- 通过导入网站使用的相同场景构建代码进行渲染，确保影片和网站不会出现偏差。
- 每一帧必须是帧编号的纯函数。不要使用依赖于先前帧的定时器或弹簧。
- 使用
remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24进行渲染。 - 场景更改不会改变已渲染的影片。重新渲染，或告知用户影片已过期。
4. 在认为完成之前进行检查
检查使用两个技能中的脚本。按以下顺序在项目中的 .claude/skills/ 和 .agents/skills/ 中，然后在 ~/.claude/skills/、~/.agents/skills/ 和 ~/.gemini/config/skills/ 中查找每个技能的文件夹，查找其名称。以下 <anatomy> 和 <taste> 代表这些文件夹。<taste> 的名称为 taste-skill 或 design-taste-frontend。
使用 node <anatomy>/scripts/drive.mjs <url> --actions steps.json 在真实浏览器中模拟真实点击和拖动。两个脚本都需要 Node 22 或更高版本以及已安装的 Chrome、Edge 或 Chromium。
- 静态画面和动态流程应分开运行。
shot动作可以冻结动画直到下一次捕获。使用--reduced拍摄静态画面，这会跳转到最终状态，并使用eval检查测试动画流程，在运行过程中不进行截屏。如果帧出现空白或过时，请在将其视为错误之前重新捕获。 - 测试真实控件。 优先点击实际按钮而不是直接设置状态，并包含反转和中间中断动画的测试。
- 检查设计。 运行
node <taste>/scripts/inspect.mjs <url> --widths 1440,390，然后自己查看截图。通过检查器是最低要求，并非评分标准。 - 运行测试并阅读控制台。 然后在生产构建上重复主要流程，而不仅仅是开发服务器。
报告已验证的内容，以及明确说明未验证的内容：真实设备、音效和全速运动通常在此处无法实现。
5. 安装任何新内容
如果表中缺少某个技能，用户可以使用 npx github:mithulpranav24012008/3d-studio 安装整个集合。对于任务所需的任何其他技能或工具，请将命令提供给用户并让他们运行，以便他们看到安全摘要。不要使用 -y 跳过确认。