大家好，我是二哥呀。
一个 Agent 工具能不能把想法变成可落地的产品，还得看它自身的工程能力给不给力。来看看我用 QoderCN + Qwen3.8-Flash 完成的第一个 Case，用孟菲斯风格的动画演示冰球滑行与伽利略斜面实验，直观讲清楚牛顿第一定律，是不是很惊艳？
如果觉得截图不过瘾，我还录了屏，大家可以一睹为快。
是不是瞬间觉得很香？
大多数时候，只要我们配好恰当的 Skill 和目标清晰的提示词，国产 Agent 加国产模型跑出来的交付效果照样很顶。
01、安装 QoderCN 与站点
下载并把客户端安装好之后，我建议先体验一下【站点】这个功能，直观感受一下 QoderCN 帮你生成线上站点的工程能力。
操作方法很简单，点击页面左下角的“站点”按钮，再点击右上角的【添加站点】。
接着把我们的开源项目、专栏和作品集告诉 QoderCN，让它帮我们搭建一个个人作品展示站点。
QoderCN 拿到需求后，会在本地生成包含 index.html、styles.css、app.js 和图片素材的完整网页工程，启动本地预览检查电脑端和手机端的排版，确认没问题后一键发布到 qoder.zone 线上域名。看看 QoderCN 为我生成的个人站点，是不是很 nice？
同样我也录了一个屏，大家可以感受下。
02、QoderCN 制作 Vibe 视频
看完了站点功能，接下来看第一个 Case。我用自己开源的 one-minute-remotion Skill，让 QoderCN 驱动 Qwen3.8-Flash 制作一条“牛顿第一定律”的 Vibe 科普视频。
是不是瞬间感觉学习物理没那么枯燥了？
要是当初上学时也有这样的动画课件，还怕物理概念搞不懂。这也是 AI 时代带给我们的最大便利，只要有一套顺手的开发工具，就能把原本抽象的书本知识做成直观的动画。
请读取当前工作区的 one-minute-remotion/SKILL.md 技能规范，制作一期“牛顿第一定律”的 1 至 2 分钟孟菲斯风格中文科普视频，一口气完成从写稿到导出 MP4 的全流程：
1. 文字稿（保存到 docs/src/ai/one-minute/newton-first-law.md）：严格按入口、名词、结论、例子、为什么成立、收尾六段结构起草口播稿。从推书本和冰球滑行切入，通过伽利略理想双斜面实验（右侧斜面逐渐放平，小球为回到初始高度而在无摩擦水平面上一直匀速滚下去）推导牛顿第一定律与惯性概念。
2. 配音与时间轴：调用项目内置的火山引擎 TTS 二哥音色合成完整语音，生成 spoken.txt、narration-lock.json 与记录每个字发音时刻的 beats.json 文件，实测音频时长。
3. 孟菲斯风格分镜与动画渲染（1920x1080，30fps）：编写 OUTLINE.md 与 Remotion 动画组件，采用浅色纸张背景、粉彩几何图形和深蓝色描边的孟菲斯插画风格，按语音节奏依次展示推书、冰球滑行、速度与合力箭头、伽利略双斜面实验以及急刹车安全带等动画场景。
4. 本地预览与导出验证：启动 Remotion Studio 本地预览服务，在浏览器里检查画面和字幕没有遮挡后，导出带二哥配音的 MP4 成片。
打开 QoderCN 输入这段提示词后，QoderCN 处理多步骤任务的能力就体现出来了。
它会先读取 skills/ 目录下的技能规范起草口播稿，接着调用本地 Python 脚本请求火山引擎 TTS 接口，生成配音文件 voiceover.wav 以及记录每个字发音时刻的 beats.json 文件。
整体的稿子水平还可以，我简单微调了几句措辞，大家可以感受一下，千问的文本能力真的可以。
---
title: 牛顿第一定律
---
大家好，我是二哥呀，今天来给大家 Vibe 牛顿第一定律。
先说清两个词。运动状态，指物体速度的大小和方向，静止就是速度为零的状态；速度的大小和方向只要有一个变了，运动状态就变了。合力，也就是物体受到的所有力合在一起产生的效果。
牛顿第一定律说的是，一切物体在没有受到力的作用时，总是保持静止状态或匀速直线运动状态。
为什么说运动不需要力来维持？可以来看看伽利略的理想斜面实验。让小球从左侧斜面滚下，小球会冲上右侧的斜面；斜面越光滑，小球冲上去的高度越接近释放时的高度。伽利略由此推断：如果完全没有摩擦，小球会回到原来的高度。
如果把右侧斜面放得平缓一些，小球要回到原来的高度，就得滚得更远。把右侧斜面放平，小球再也到不了原来的高度，就会沿水平面以不变的速度一直滚下去。
现实中没有绝对光滑的表面。牛顿在伽利略等人研究的基础上，总结出第一定律：力不是维持物体运动的原因，而是改变物体运动状态的原因。
物体保持原来运动状态不变的性质叫惯性。惯性是物体本身的属性，不是力；质量越大，惯性越大。
现实中的物体总会受到力，只要合力为零，效果就和不受力一样，运动状态保持不变；合力不为零，运动状态才会改变。冰球能滑出去很远，靠的就是惯性，冰面摩擦越小，冰球的速度越接近不变。
口播稿确定后，QoderCN 先编写了 OUTLINE.md 分镜脚本，把整条视频划分为速度与合力、伽利略双斜面实验、惯性对比等 11 个场景，再编写 remotion/src/Chapter1.tsx 和 remotion/src/ThreeScenes.tsx 动画组件，采用浅色纸张背景、粉彩几何色块和深蓝色轮廓线的孟菲斯风格把各个物理场景画出来。
视频开场放了一个伽利略理想斜面实验，和牛顿第一定律的标题，画风还是很可爱的。
接着用箭头动画演示速度与合力的关系。
再通过小球在左右斜面上的滚动、右侧斜面一步步放平的过程，直观推导出牛顿第一定律。
代码编写完成后，QoderCN 自动启动了本地 3121 端口的 Remotion Studio 预览服务，逐帧检查画面与底部字幕没有重叠。
确认没有问题之后，再出片。
03、QoderCN 制作 3D 机械表
第一个视频任务还在后台运行，我们接着在 QoderCN 左侧任务栏新建第二个任务，让 QoderCN 驱动 Qwen3.8-Flash 做一个可拆解的 3D 机械表网页。
完整提示词如下，大家可以复制到 QoderCN 里复现。
请使用 Vite + Three.js 构建一个可交互的“3D 机械表机芯实验室（The Mechanical Watch）”网页应用，不依赖外部 3D 模型文件，全部用代码构建 29 个三维零件并实现联动：
1. 界面布局：米黄色复古说明书风格。左侧是标题和 7 个阶段按钮（1 翻转表背 / 2 旋转上链 / 3 摆轮摆动 / 4 齿轮传动 / 5 拆解机芯 / 6 重新组装 / 7 模拟 24 小时）；右侧是墨绿色工作垫上的 3D 机械表，下方实时显示振频（28,800 次/小时）、今日摆动次数、动力储存（最高 40.0 小时）、秒轮圈数、宝石数（21）和零件数（29）六个指标卡片；底部配机芯原理解说和五种表盘配色切换按钮。
2. 7 层 29 个零件建模：从下往上分 7 层搭建 29 个零件，包含表壳、透明蓝宝石表背、表带、表冠、发条盒、中心轮、过轮、秒轮、擒纵轮、擒纵叉、摆轮游丝和红宝石轴承。
3. 7 个阶段的交互效果：
- 阶段 1：把表身翻转 180 度，透过透明表背展示内部机芯；
- 阶段 2：上下拖动表冠上发条，动力储存从 0 增加到 40.0 小时；
- 阶段 3：拉近镜头观察摆轮来回摆动，提供慢动作开关，看清擒纵轮和擒纵叉一卡一放的过程；
- 阶段 4：高亮展示齿轮传动过程，带动秒针、分针、时针按各自转速运转；
- 阶段 5 与 6：点击拆解时先停下摆轮，再把 29 个零件分成 7 层向上展开，支持鼠标拖拽旋转观察，点击组装后合拢并恢复运转；
- 阶段 7：加速模拟 24 小时运转和动力消耗过程。
来看看 QoderCN 任务列表多任务并行执行的状态。
这是机械表的正面。
然后我们看背面。
这个 Case 把 QoderCN 拆分代码和管理多文件项目的能力展现得淋漓尽致。
QoderCN 在本地工作区自动初始化了标准的 Vite 项目，把代码拆分成四个职责清楚的文件。src/geometry.js 定义齿轮、发条和表壳的 3D 几何形状，src/parts.js 把 29 个零件按从下到上的 7 层结构组装成完整机芯，src/watch.js 控制发条和表针转动，src/main.js 绑定页面左侧的 7 个按钮来控制镜头切换与数据面板刷新。
代码写完后，QoderCN 自动在终端执行 npm run build 验证项目能否正常打包，随后启动本地 5182 端口的开发服务器预览三维渲染效果。
点击左侧按钮切换阶段时，无论是翻转表身、拖动表冠上发条，还是把 29 个零件分成 7 层展开，画面过渡都很流畅。
04、QoderCN 制作工程蓝图
测完机械表，我们接着在 QoderCN 里新建了第三个任务来复刻一个新 Case，让 QoderCN 驱动 Qwen3.8-Flash 用代码给杭州西湖的保俶塔和雷峰塔做一套可交互的 3D 建筑蓝图。
用代码给古建筑建模，难点在于准确还原八角塔身、飞檐和塔顶的比例，同时保证左上角的二维立面图与中间的 3D 模型尺寸一致。完整提示词如下，同样可以复制复现。
请使用 Vite + Three.js 编写一套“杭州西湖古建筑工程蓝图（保俶塔 / 雷峰塔）”交互式 3D 网页应用，支持顶部一键切换保俶塔与雷峰塔：
1. 视觉风格：浅灰蓝方格坐标纸背景，古塔采用蓝色半透明线框材质渲染，呈现建筑蓝图的视觉效果。
2. 页面布局：
- 左上角：展示当前古塔的二维立面图（保俶塔总高约 45.3 米、八角七层；雷峰塔总高约 71.7 米、八角五层）和八角平面图；
- 右上角：提供旋转、平移、正视、侧视、俯视、局部放大和视角复位按钮；
- 底部中央：左侧显示建筑铭牌，右侧提供“展开 / 合拢”按钮。
3. 古塔建模与拆解交互：
- 分别搭建八角七层的保俶塔和八角五层的雷峰塔，还原塔基、塔身、飞檐、栏杆和塔顶结构；
- 点击“展开”按钮或按空格键时，整座塔沿竖直方向分成 6 段展开，每一段自动延伸出带有中英文名称的指示线；拖动鼠标旋转视角时，指示线的位置随塔身实时更新。
先看保俶塔和雷峰塔在默认状态下的蓝图主界面。
再看点击底部“展开”按钮后，古塔分成六段向上展开并显示中英文指示线的效果。
这个 Case 体现了 QoderCN 在前端项目设计上的严谨性。
页面左上角需要绘制古塔的二维立面图，中间需要渲染 3D 古塔模型。如果两个模块各自在代码里写死尺寸，修改时很容易出现二维图纸与 3D 模型高度不一致的问题。因此，QoderCN 单独创建了一个 src/specs.js 配置文件，集中定义雷峰塔与保俶塔的总高、层高和各层宽度。
在此基础上，src/panels.js 读取这份配置文件来绘制左上角的二维立面图，src/tower.js 读取同一份配置来生成中间的 3D 古塔模型，从源头上保证了二维图纸与三维模型的数据一致。
当点击“展开 UNFOLD”按钮将古塔分成六段展开时，src/overlay.js 会将各段 3D 构件的空间坐标实时换算为屏幕上的二维坐标，无论怎样旋转或缩放视角，指示线都能准确指向对应的塔身部位。
05、QoderCN 重新设计个人网站
第四个 Case，我们继续复刻一个有趣的网页交互效果，让 QoderCN 驱动 Qwen3.8-Flash 为我的开源知识库网站《Java 进阶之路》（javabetter.cn）制作一个可以用鼠标拖拽捏脸的首页交互原型。
要在不引入第三方物理引擎的前提下实现这种弹力捏脸效果，需要用原生 WebGL 将头像图片划分为细密的网格，并通过物理公式计算网格顶点的拉伸与回弹。完整提示词如下，替换成你自己的头像图片就能运行。
请使用原生 WebGL（不依赖第三方物理或渲染库）为《Java 进阶之路》（javabetter.cn）制作一个可交互的“二哥捏脸彩蛋”首页原型，实现拖拽拉伸与弹性回弹效果：
1. 页面布局：左侧为《Java 进阶之路》导航栏、主标题（“你好，我是沉默王二 / 二哥”）、个人与开源知识库简介、学习路线入口与搜索框；右侧为圆形橙色背景衬托的二哥头像交互画布；顶部配亮色/暗黑模式切换开关、音效开关与参数调节面板。
2. WebGL 网格划分与回弹公式：将头像划分为 72x72 的网格，画布四周留出充足的透明边距，确保脸部可以被拉出橙色圆盘外。每个网格点记录当前的拉伸位移，通过阻尼波动方程实时计算相邻五官的连带变形，松开鼠标后网格经过几次弹性摆动，在 2 秒左右恢复原状。
3. 鼠标捏脸交互与光影效果：
- 鼠标按住头像任意位置拖拽时，带动鼻子、脸颊、眼镜和下巴一起拉伸变形，松手后如果在回弹过程中再次点击，也能继续抓住脸部；
- 在片元着色器中根据网格变形程度实时计算明暗与高光，增强皮肤拉伸时的立体感，并提供柔软度与阻尼调节滑块。
来看看 QoderCN 在本地工作区写完代码后，在浏览器里按住二哥鼻子往右拖拽的实测画面。
松开鼠标后，被拉长的脸颊迅速回弹，伴随几次轻微晃动后恢复原状。
在这个 Case 中，QoderCN 将项目拆分为 js/plushie.js 和 js/main.js 两个核心文件。js/plushie.js 负责编写 WebGL 着色器、划分 72×72 的图像网格，并在每一帧计算网格节点的拉伸位移与回弹速度；js/main.js 则负责合成拖拽音效、切换亮暗主题以及处理页面搜索交互。
除了编写核心代码，QoderCN 还会通过内置预览排查页面布局问题。
为了让头像可以被拉出橙色圆形背景之外，WebGL 画布的尺寸比圆形背景更大，四周留出了透明边距。QoderCN 在浏览器预览时发现，扩大后的透明画布挡住了页面顶部的主题切换按钮，并且在手机窄屏下会导致页面出现横向滚动条，随后主动调整了画布的点击穿透属性与页面宽度样式，解决了按钮无法点击和手机端出现横向滚动条的问题。
ending
我最大的感受是，Qwen3.8-Flash + QoderCN 大幅降低了日常尝试复杂创意的成本，而 QoderCN 的工程能力则决定了这些创意能否转化为结构清晰、可维护的完整项目。
无论是读取 Skill 自动完成配音合成与孟菲斯动画渲染，还是将复杂的 3D 机械表、西湖古塔拆分为职责明确的多个源码文件，并通过浏览器预览自动排查页面遮挡与移动端排版问题，QoderCN 展现出的都是成熟的项目开发与交付能力。
文中每个 Case 的提示词都已经整理好了。
我们下期见。
