开头可以先从一个普遍矛盾切入很多开发者都试过让 AI 生成 3D 网页但结果往往只有“炫”的截图落地时问题不断。Skill 机制的出现把 AI 从“能聊天的代码生成器”变成了“有专业路径的执行引擎”。这篇教程会先讲清楚 Skill 与 Agent、插件、Prompt 的区别再手把手写一个能驱动 3D 特效网页从零到上线的 Skill最后给出可直接运行的 Three.js 粒子星云示例和排查清单。如果你只是想要一个“能跑的炫酷网页”可以直接跳到第 5 节复制代码如果你想搞清楚 AI 辅助 3D 开发背后真正被改变的工作流程本文的 Skill 设计思路会更有价值。1. 为什么 3D 特效网页依然不是“一句话就能搞定”先说一个很多人实际遇到过的场面你打开 AI 对话框输入“帮我做一个 3D 粒子特效网页”AI 很快给出几十行代码看起来逻辑完整也确实有粒子在旋转。但等你把它放到真实项目里问题就来了没有适配移动端、没有考虑加载性能、粒子数量一调就崩、想要换一个主题色要改七八个地方。更常见的是AI 每次都从零开始写同一个团队里的两个人问同一个问题得到的代码风格完全不同。这不是 AI 能力不够而是提示词没有给 AI 提供足够的“上下文约束”。普通对话式生成是一次性问答AI 不知道你的项目规范、不知道你偏好哪种 3D 技术栈、不知道你有没有现成的封装组件、更不知道“完成”的定义是什么。于是它只能给出一个“看起来合理、但无法直接进入项目工程”的通用答案。Skill 机制解决的就是这个问题。它不是给 AI 加一条更长的提示词而是把一套可复用的工作流、模板、校验规则、技术选型沉淀成一个结构化单元。AI 在调用 Skill 时不是“凭感觉写代码”而是“按照一个成熟工程师的执行路径走一遍”。这恰恰是 3D 特效网页这类视觉型任务最需要的东西因为这类任务的外显效果很强内隐的工程约束却很容易被忽略。这篇文章要做的就是用一条 Skill 把“生成 3D 特效网页”从碰运气变成走流程顺便给你一个可以直接运行的 Three.js 粒子特效代码。2. Skill 到底是什么和 Agent、插件、Prompt 有什么区别Skill 这个词在 AI 工具圈里出现频率很高但很多开发者对它的理解还停留在“一个高级 Prompt”。从工程角度看这个理解不够准确。2.1 Skill 的本质是“能力封装单元”Prompt 是对话上下文告诉 AI“现在要做什么”插件是外部能力接入让 AI 能调用工具、读写文件、访问网络Agent 是执行主体负责拆解任务、调用工具、循环反馈Skill 则是领域知识 执行步骤 验证方式的组合包。用一个比喻来区别Agent 是“执行任务的员工”Skill 是“员工手里的 SOP 手册和工具模板”。没有 Skill 的 Agent 是一个聪明但没经验的新人什么都能聊但遇到具体任务容易跑偏有了 Skill 的 Agent 是一个懂行业规则的工程师知道第一步做什么、第二步验证什么、哪些地方不能省。2.2 Skill 在 3D 网页场景里的独特价值对比维度普通对话生成使用 Skill 生成技术栈选择每次随机可能 Three.js 也可能纯 CSS由 Skill 定义统一 Three.js 方案工程结构单文件或随意拆分按模板生成固定目录结构运行验证需要人工尝试运行、猜问题Skill 内置启动方式与常见错误检查二次修改重新描述需求AI 可能改坏改模板或配置参数效果可控团队复用个人经验不沉淀Skill 文件可入库团队共享2.3 Skill 在不同工具里的呈现形式目前主流的 AI 编程工具基本都支持 Skill 或类似机制只是叫法略有不同。有的叫 Skill有的叫 Command有的叫 Rule。从材料来看Claude Code、Codex、OpenCode 等工具都在推进这一类能力。它们的共同点是用 Markdown 文件描述技能用途和步骤用目录结构组织模板与脚本AI 在需要时自动读取并执行。考虑到不同工具的规格仍在快速变化本文不绑定某个工具的具体 API。我会用通用的SKILL.md格式来写这套思路可以迁移到你正在使用的绝大多数 AI 编程助手中。3. 一条 Skill 如何驱动 3D 网页从想法到上线在写代码之前先想清楚 Skill 该拆成哪几步。这决定了 Skill 是“能被复用”还是“只适配某个一次性需求”。3.1 把 3D 网页任务拆成六个环节一个完整的 3D 特效网页从想法到产出至少要经过这六步确定视觉效果粒子、几何体、模型、文字、交互方式。确定技术方案Three.js、CSS 3D、Canvas、WebGL 封装。搭建页面骨架HTML 结构、样式、加载进度。实现 3D 逻辑场景、相机、渲染器、对象、动画。接入交互反馈鼠标拖拽、点击、滚动、视口自适应。验证与发布本地运行、真机预览、构建部署。普通对话生成的问题在于AI 经常跳步。它可能把 1 和 2 合并跳过 3直接写 4最后 5 和 6 几乎没有。Skill 的价值就是强制 AI 按顺序走完并在关键节点输出可校验的结果。3.2 Skill 的三个层次从实战角度Skill 可以分成三类通用技能比如“Three.js 场景初始化”任何 3D 项目都能用。项目技能绑定某个项目比如“公司官网 3D 头图”里面包含品牌色、组件封装、性能基线。主题技能面向一类作品比如“粒子星云特效”包含模板和特效参数。本文要写的是第三类主题技能。它能最大程度让读者看到“创建 Skill 之后一条指令生成完整效果”的流程。3.3 Skill 文件的三段式结构从常见实现来看一个标准的 Skill 文件包含三段内容元数据区name、description、version让 AI 知道何时该用这个技能。执行步骤区明确写出操作顺序和每个步骤的产出物。附录区常见错误、验证命令、模板引用路径。这个结构跟人类工程团队里的“任务书”很像先定义目标再写行动计划最后附上验收标准。AI 拿到这份任务书自然比只收到一句“做一个 3D 网页”稳定得多。4. 动手写一个 3D 特效网页 Skill环境与目录设计现在开始实操。目标创建一条 Skill让 AI 编程助手能够按固定流程生成 Three.js 粒子特效网页。4.1 环境准备这条 Skill 本身不要求特定系统。你的本机需要满足一个支持 Skill 机制的 AI 编程助手安装方式以你使用的工具文档为准。Node.js 建议安装 LTS 版本用于本地启动预览服务。现代浏览器推荐 Chrome 或 Edge 最新版用于验证 WebGL 效果。本文演示的 Skill 文件存放在项目目录下的skills/threejs-web-effect/中。如果你已经在使用某个 AI 编程助手可以把它放到对应的 skills 目录如果还没有直接建一个普通文件夹即可重点是理解文件结构和内容设计。4.2 目录结构threejs-web-effect/ ├── SKILL.md ├── templates/ │ └── particle-nebula.html └── scripts/ └── serve.sh目录说明SKILL.md技能定义文件AI 最先读取它。templates/存放可直接复用的页面模板。scripts/存放辅助脚本比如本地启动命令。4.3 编写 SKILL.md--- name: threejs-web-effect description: 使用 Three.js 创建可发布的 3D 特效网页。适用于粒子特效、星空背景、模型展示、数据可视化等视觉场景。 version: 1.0.0 --- # Three.js 3D 特效网页生成 ## 使用场景 - 用户需要生成粒子动画、星云、漂浮文字、3D 模型展示页。 - 用户需要把 3D 效果封装为独立 HTML 页面可内嵌到现有站点。 - 用户需要快速验证某个 3D 视觉创意。 ## 技术选型 - 渲染引擎Three.js通过 importmap 从 CDN 引入避免本地构建。 - 交互控制OrbitControls提供拖拽旋转与缩放。 - 页面格式单 HTML 文件优先便于分享和部署。 ## 执行步骤 1. 询问用户的视觉效果偏好包括主题色、粒子密度、背景色、交互方式。 2. 在 templates/ 中选择最接近的模板文件。 3. 复制模板到用户指定输出目录。 4. 根据用户的偏好参数调整模板内的场景配置。 5. 将打包参数整理为独立配置区块方便二次调整。 6. 输出运行说明包括本地启动命令和浏览器访问地址。 ## 验证清单 - 页面在 Chrome 中无控制台报错。 - 3D 对象正常渲染拖拽交互有效。 - 窗口尺寸变化后画面自适应。 - 移动端预览无严重性能问题。 ## 注意事项 - 不要使用体积过大的模型文件优先使用程序化生成的几何体和粒子。 - 粒子特效使用 AdditiveBlending 时注意背景色适配。 - 如果用户有性能要求优先减少粒子数量而非降低渲染精度。这份 SKILL.md 的作用是让 AI 在拿到任务时先了解边界再按步骤执行。它不是一段对话而是一份稳定的过程约束。5. 完整示例粒子星云 3D 页面复制即可运行这一节给出 Skill 中最重要的模板文件。它是一个完整的 Three.js 粒子星云页面效果包括自动旋转的彩色粒子环、鼠标拖拽视角、自适应窗口尺寸。整个页面是一个独立 HTML 文件不需要 npm 安装依赖打开即用。5.1 模板文件templates/particle-nebula.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title粒子星云 - Three.js 3D 特效/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #050510; font-family: system-ui, -apple-system, sans-serif; } canvas { display: block; } #info { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(200, 210, 255, 0.8); font-size: 14px; letter-spacing: 0.06em; background: rgba(10, 14, 30, 0.55); padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(120, 140, 255, 0.2); backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap; } /style /head body div idinfo粒子星云 · 鼠标拖拽旋转视角/div !-- 通过 importmap 从 CDN 引入 Three.js本地或静态服务器均可运行 -- script typeimportmap { imports: { three: https://unpkg.com/three0.160.0/build/three.module.js, three/addons/: https://unpkg.com/three0.160.0/examples/jsm/ } } /script script typemodule import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; // 1. 场景 const scene new THREE.Scene(); scene.background new THREE.Color(0x050510); // 2. 相机 const camera new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set(0, 2, 8); camera.lookAt(0, 0, 0); // 3. 渲染器 const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.body.appendChild(renderer.domElement); // 4. 轨道控制器鼠标拖拽旋转 const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.08; controls.autoRotate true; controls.autoRotateSpeed 0.8; controls.enableZoom true; // 5. 生成粒子星云 function createNebula(count 8000, radius 5) { const positions new Float32Array(count * 3); const colors new Float32Array(count * 3); const palette [ new THREE.Color(0x4f6df5), new THREE.Color(0x7c5cff), new THREE.Color(0x2e9aff), new THREE.Color(0x36d1dc), new THREE.Color(0xff6b9e) ]; for (let i 0; i count; i) { const i3 i * 3; // 在环形区域内随机分布并加入正弦扰动让分布更自然 const angle Math.random() * Math.PI * 2; const r radius * (0.6 Math.random() * 0.8); const y (Math.random() - 0.5) * 1.5; const wave Math.sin(angle * 3) * 0.4; positions[i3] Math.cos(angle) * r; positions[i3 1] y wave; positions[i3 2] Math.sin(angle) * r; const color palette[Math.floor(Math.random() * palette.length)]; colors[i3] color.r; colors[i3 1] color.g; colors[i3 2] color.b; } const geometry new THREE.BufferGeometry(); geometry.setAttribute(position, new THREE.BufferAttribute(positions, 3)); geometry.setAttribute(color, new THREE.BufferAttribute(colors, 3)); const material new THREE.PointsMaterial({ size: 0.035, vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); return new THREE.Points(geometry, material); } const nebula createNebula(); scene.add(nebula); // 6. 中心光源球体强化星云视觉效果 const glow new THREE.Mesh( new THREE.SphereGeometry(0.3, 32, 32), new THREE.MeshBasicMaterial({ color: 0x88aaff }) ); scene.add(glow); // 7. 动画循环 function animate() { requestAnimationFrame(animate); nebula.rotation.y 0.0008; controls.update(); renderer.render(scene, camera); } animate(); // 8. 窗口尺寸自适应 window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); /script /body /html5.2 核心逻辑说明这段代码的关键点不在“写满 200 行”而在于几个容易被新手忽略的设计importmap方式引入 Three.js。这样做的好处是页面不依赖 npm 构建任何静态服务器甚至本地直接打开都能运行。缺点是首次加载依赖 CDN 网络内网环境需要换成本地文件。Float32Array生成几何数据。粒子数量 8000 个时性能压力很小如果增加到 50000 个就需要考虑分批渲染或使用 ShaderMaterial 优化。AdditiveBlending产生光晕叠加效果。这是粒子星云视觉上“发光”的主要原因。但要注意当背景为纯白或浅色时加法混合会让画面过曝所以背景和粒子颜色需要联动调整。OrbitControls的autoRotate让场景在无操作时缓慢旋转避免静态观感。实际项目中如果希望用户专注阅读文字旋转速度建议控制在 0.5 以下。5.3 启动方式方法一直接用浏览器打开 HTML 文件。由于代码中使用 importmap 从 CDN 加载多数现代浏览器可以直接打开预览。方法二用本地静态服务器启动推荐使用 Node.js 自带命令。# 在 HTML 文件所在目录执行 npx serve .或者使用 Python# 在 HTML 文件所在目录执行 python3 -m http.server 8080启动后访问http://localhost:8080/particle-nebula.html即可看到粒子星云页面。6. 运行结果与效果验证6.1 预期效果正常运行时页面呈现深色背景画面中央是一个缓慢旋转的彩色粒子环粒子呈蓝紫粉渐变中心有一个淡蓝色光球。鼠标左键拖拽可以旋转视角滚轮可以缩放页面底部有一条半透明的提示文字。6.2 如何判断运行成功页面打开后无白屏3 秒内出现粒子。浏览器控制台无红色报错。鼠标拖拽时粒子环跟随视角旋转。窗口大小变化后3D 画面不会拉伸变形。6.3 如果失败第一步排查方向先打开浏览器开发者工具F12的 Console 面板。如果出现Failed to resolve module specifier three说明 importmap 没有生效或 CDN 地址不可达。如果出现THREE is not defined说明 module 脚本没有按预期执行。第一步修正 CDN 地址通常就能解决大半问题。6.4 参数调整建议在createNebula(count 8000, radius 5)中两个参数直接影响效果count粒子总数越大越密集性能消耗越高。radius粒子分布半径越大画面越松散。修改palette数组中的颜色可以快速切换主题配色。例如改成暖色调使用0xff6b6b、0xffa502、0xff4757页面会呈现出日落星云的感觉适合活动营销页使用。7. 使用 Skill 生成网页的常见问题与排查思路Skill 本身不会百分之百避免问题但它能让问题更容易定位。以下是我在实践中最常遇到的几类问题。问题现象可能原因排查方式解决方案AI 助手没有识别到 SkillSkill 目录或元数据格式不符合工具要求查看工具日志或技能列表确认 SKILL.md 是否被读取按工具文档调整目录位置或修正 SKILL.md 的 metadata 格式生成的页面出现白屏浏览器版本过旧不支持 importmap打开 Console 查看模块加载错误升级浏览器或改用本地引入 three.module.js 的方式3D 场景非常卡顿粒子数量过多或设备像素比过高检查页面帧率并查看是否有 GPU 警告降低粒子 count或把devicePixelRatio限制到 1粒子颜色整体过曝背景色太浅AdditiveBlending 叠加后泛白截图观察亮部细节更换深色背景或降低粒子透明度拖拽没反应OrbitControls 未启用或渲染循环未更新确认是否导入 OrbitControls并在animate中调用controls.update()补全控制器的引入和更新逻辑页面在移动端字体模糊未设置 viewport meta或 Canvas 尺寸未同步检查移动端页面缩放表现保留meta nameviewport并在 resize 事件中同步相机与渲染器Skill 生成代码风格不一致多个 Skill 之间定义冲突检查不同 SKILL.md 中的技术选型是否矛盾项目级 Skill 设置最高优先级统一覆盖通用 Skill8. Skill 开发与 3D 网页工程化最佳实践8.1 三种 Skill 分开维护不建议把“3D 网页通用技能”和“项目专用技能”混在一起。通用技能描述 Three.js 的基础流程项目技能描述品牌色、组件规范、部署路径主题技能描述粒子、模型、文字等视觉模板。三种 Skill 分开后更新任意一类都不影响另外两类。8.2 SKILL.md 文档保持“可测量”描述 Skill 时少用“高质量”“炫酷”这类无法验证的词多用“包含 3 个场景对象”“加载耗时小于 1.5 秒”这类可测量指标。AI 在执行时没有审美判断力但能按数字指标调整参数。这套逻辑和写验收标准是一样的。8.3 模板文件与 SKILL.md 分离有人会把完整代码直接写进 SKILL.md结果文件变得非常长AI 每次读取都要消耗大量上下文。更高效的做法是SKILL.md 只写步骤和验证标准具体模板放到templates/目录AI 在需要时按路径读取。这样既能控制上下文长度又便于模板复用和更新。8.4 安全边界与控制使用 AI 编程助手生成代码时要明确授权范围允许读写哪些目录、允许执行哪些命令、是否允许连网安装依赖。特别是在团队项目中不要让 AI 直接执行删除文件、批量修改、自动提交部署等高风险操作。建议采用最小权限原则AI 只负责生成和修改代码发布动作仍由人工确认执行。8.5 在真实项目中的接入方式如果是要把 3D 特效页接入现有站点建议先独立跑通静态页面再通过 iframe 或 web component 方式嵌到现有系统中。不要一上来就改造主应用的构建流程。Three.js 的包体积、WebGL 的初始化时机、移动端的性能都需要在独立页面里先验证清楚再谈集成。9. 总结与后续学习方向在 AI 辅助开发这件事上我越来越觉得一个判断是成立的AI 的价值不在于替你做决定而在于帮你更快地验证决定。Skill 把“让 AI 生成 3D 网页”这件事从一次性碰运气变成了可以重复、可以迭代、可以团队共用的工程流程。今天这条粒子星云 Skill 演示的不仅仅是一个页面效果更是一套“定义任务、拆解步骤、验证输出”的方法。如果你打算继续深入有几个方向值得花时间Three.js 核心概念场景、相机、渲染器的配合关系BufferGeometry 与 ShaderMaterial 的性能差异。更多 3D 视觉实现GLSL 着色器、模型加载glTF/GLB、后期处理合批。性能优化从 8000 个粒子到 10 万粒子的渲染策略PVR 和帧率监控。Skill 工程化把项目内沉淀的模板和规则整理成团队共享库提升多人协作时 AI 输出的稳定性。最后提醒一句做 3D 特效页面时不要被“炫酷”带偏。用户真正需要的往往是清晰的视觉层级和稳定的加载体验。Skill 能帮你把生成过程标准化但视觉判断力这关仍然需要你自己把关。把这套模板保存好下次要做活动页、科技风首页或产品展示时直接调用 Skill会省下不少调试时间。