这是一篇专门为新手写的，零基础入门的 AI 编程教程。
我会一步步带你配置好编程环境，
然后调出免费又好用的大模型，
最后搓出一个超酷的粒子镜头追踪网页👇
我会讲得超级简单，不用担心看不懂。
整个项目做下来很快，入门真的很合适👇
如果下面有不会的，直接截图问 DeepSeek 就行，报错很正常！
第一步：搭建基础环境
我们先去装好两个软件：
第一个：Node.js (https://nodejs.org/zh-cn)
它是让代码跑起来的引擎，选 LTS 版本下载安装。
第二个：VSCode (https://code.visualstudio.com/)
它是我们写代码的工位。安装时，勾选“添加到 PATH”的所有选项，
这能省去后面很多麻烦。
装好之后，在电脑桌面上，新建一个空文件夹，命名 particle-lab
打开 VS Code，点击左上角的文件（File）-> 打开文件夹 (Open Folder...)
选中我们刚建好的 particle-lab 文件夹。
现在，我们就开始给项目打地基了，有点点麻烦，但要坚持哦✊
在 VS Code 黑色的终端窗口（Terminal）里，直接发下面这行命令（Mac 用户跳过这一步）：
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
这行代码你不用懂，就把它当成一张“施工许可证”，
为用户开启了脚本执行的权限。
解锁成功后，继续在终端窗口里，发下面这行创建项目的命令：
npx create-next-app@latest . --typescript --tailwind --eslint --app
这一步你理解为雇一支专业的施工队，帮你打基础。
终端会开始问你一些问题，啥也别管，一路按回车同意就行，它就会开始自动安装工具了！
第二步：搞定关键的 API
地基打完，现在就要请专家来盖房子了。
很多同学想用 Claude Code，但是我不推荐新手直接去用它。
因为你得会科学上网，有国外银行卡，还可能被封号，价格贵。
使用的过程中，还有各种 Bug，90% 的新手会卡在这里。
所以，我们要用一种更聪明的方式，达到一样的效果！
打开 VS Code 左侧边栏的插件 Extension 里，
去搜索一个叫 Cline 的插件，
它是连接你和其他大模型 API 的桥梁，直接跟 AI 对话的编程助手。
下载好后，它会显示在左侧，也有中文版可以用。
去到 Cline 的设置 Settings，这个时候就需要配大模型的 API 了，
这样你的 AI 编程才能跑得起来。
第一，直接用 Cline 里免费的大模型：
在 Settings 中，
API Provider 选择 Cline，这时候可能会跳转到网页让你注册一下。
就可以使用它免费的模型，
选择 Kwaipilot/kat-coder-pro。
第二，花 1 块买国产大模型，以 MiniMax 为例：
直接搜 MiniMax API 开放平台，申请一个专属于你的密钥，并且存好！
点击余额，我们可以充 1 块钱，MiniMax 也会赠送 15 块钱。
回到 VS Code 中的 Cline 插件，开始配置信息～
在设置中，API Provider 选择 MiniMax，
MiniMax Entrypoint 选择 api.minimax.com，
然后 API Key 就填你自己的密钥，Model 选择 M2.1就行。
这样 MiniMax 大模型就可以运行啦！
（其他国产大模型配 API 都是这套流程！）
第三，如果你想试试 Claude 大模型：
大家可以找某些中转站，前期注册付款啥的更方便，这里就不做具体推荐了。
Claude 的 API Key 中，同样要保存好你的密钥。
回到 Cline 的设置中，可以配置信息了～
到这里，你已经半只脚踏入 AI 编程的大门了！后面会越来越简单！
第三步：让大模型写代码
我们在 Cline 对话框新建一个任务，你发个 Hello ！
如果它能正常回复，就证明连上了～
啥是 Vibe Coding ？
哪怕你一句编程语言都看不懂，
直接用说话的语气和它交流（说中文就行），
AI 就能帮你写出所有的代码。
我们要做的是粒子交互效果，直接复制下面这段话，发给 Cline：
（因为是 10 分钟速成，下次再教大家怎么和 AI 聊～）
角色设定：你是一位精通 Three.js 和 WebGL 性能优化的资深创意编程专家。核心任务：重写 src/app/page.tsx，实现一个高性能的 AI 粒子交互系统。技术规格需求：布局设计：采用 Flex 布局。左侧固定 256px 宽度作为控制面板，显示摄像头实时画面，并用 MediaPipe 绘制彩色骨架图（左手青色、右手粉色、面部白色关键点）。右侧占据剩余全部空间，用于渲染 Three.js 粒子海。粒子系统：使用 THREE.BufferGeometry和 Points 渲染 150,000 个白色粒子。粒子初始位置随机分布在 3D 空间中。AI 追踪与物理逻辑：集成 @mediapipe/holistic。核心公式：每一帧，粒子必须根据 MediaPipe 抓取的关键点坐标，使用 lerp 或缓动公式进行位移：newPos = current + (target - current) * 0.1。粒子要能够平滑地从随机分布状态“吸附”到我的面部和双手轮廓上。交互与视觉：监听键盘 'C' 键：按下时在“纯白”、“赛博青”、“极光紫”三种颜色方案间循环切换。渲染器开启 preserveDrawingBuffer: true，并在每一帧绘制一个极薄的黑色半透明遮罩，实现优雅的**粒子拖尾（Motion Blur）**效果。工程要求：自动检查并补全缺少的依赖（如 three、@types/three、@mediapipe/holistic、@mediapipe/drawing_utils、@mediapipe/camera_utils）。确保代码符合 Next.js 的客户端渲染规范（使用 "use client"）。代码注释请使用中文。
这段代码的意思是：
第一，用 MediaPipe 这个人体扫描仪实时捕捉你摄像头画面里脸和手的位置。
第二，用 Three.js 这个 3D 画笔，命令那 15 万个粒子拼命地朝你的脸和手的位置飞过去，从而形成了‘吸附’的效果。
中间 Cline 会问你很多审批的问题，你都点同意就好。
完成后，你会收到一个网址，或者你可以在终端输入：
浏览器里打开 localhost:3000，它会请求打开摄像头权限，
打开后，你就能看到粒子效果了。
Cline 在跑代码的过程中，会出现各种小问题。
有 Bug 是很正常的，你可以同时打开豆包、DeepSeek 或者 Gemini 这些免费的问答 AI。
遇到任何问题，直接把报错信息截图发给它们，
你就会知道怎么改。
然后把 AI 给你的新指令，再发给 Cline，它就会自己去修复 Bug 了。
👆强烈建议新手都这么做！
第四步：优化我们的粒子效果
接下来可以往这三个方向再优化👇
让不同轮廓变颜色，让粒子亮度更高级，让粒子流动更顺滑。
把这些要求发给 Cline ，看看它能不能做出来！
如果咱们电脑配置跟不上，也不必 100% 复刻。
最后
从装环境，部署大模型 API ，到最后的粒子特效，都跑通了，
是不是很简单！
这是第一期，后续我会教大家如何将项目发布到网上，
再带大家做一些好玩的工具。
