让Claude直接输出3D大片场！22个技能打包网页动画全链路

让Claude Code直接输出3D大片场！22个技能打包网页动画全链路

你有没有这种感觉——让AI写一个Three.js页面，出来的代码要么是静态方块，要么动画僵硬得跟PPT翻页似的？问题不在模型，在于AI根本不知道怎么做才是”对”的。

这个仓库干的事情很直接：把专业前端动画知识打包成AI能理解的Skill，Claude Code装上之后，真的知道Three.js怎么搭场景、R3F怎么写组件、GSAP时间轴怎么串。

22个技能，覆盖3D/动画/交互全链路

这个Claude Design Skills合集，目前779星，包含22个独立Skill，分成几个方向：

Core 3D & Animation（5个）
threejs-webgl、react-three-fiber、gsap-scrolltrigger、motion-framer、babylonjs-engine

Extended 3D & Scroll（6个）
aframe-webxr、playcanvas-engine、pixijs-2d、locomotive-scroll、barba-js等

Animation & Components（5个）
react-spring-physics、lottie-animations、animejs等

3D Authoring & Motion（4个）
blender-web-pipeline、spline-interactive、rive-interactive、substance-3d-texturing

简单说就是：从前端轻量动效到专业级3D工作流，全覆盖了。

安装方式极其简单

Claude Code用户直接plugin marketplace安装：

/plugin marketplace add freshtechbro/claudedesignskills
/plugin install threejs-webgl

或者直接npx一键：

npx skills add https://github.com/freshtechbro/claudedesignskills

每个Skill独立安装，互不依赖，按需取用即可。

最实用的几个场景

场景一：想让Claude写一个Apple官网那种滚动视差
装上gsap-scrolltrigger + locomotive-scroll，告诉Claude”做一个类似Apple官网的滚动视差页面”，它输出的代码直接带时间轴控制、scrub参数、刷新清理逻辑——这些细节没装Skill之前基本不会自己带。

场景二：需要R3F写的3D组件
装上react-three-fiber，它知道如何用useFrame写动画循环、用useRef处理DOM引用、用gsap.context()做React下的GSAP清理——这些是官方文档写法，不是网上那些过时的博客写法。

场景三：想用Spline或Rive的动画资源
spline-interactive和rive-interactive两个Skill教Claude如何读取.spline场景文件或.rive动画资源，生成对应的React集成代码，而不是生硬地塞iframe。

50+生成脚本，懒人直接用

除了Skill本身，这个仓库还附带了50+个生成脚本，专门用来快速输出样板代码。比如：

.skills/threejs-webgl/scripts/generate_scene.py

跑一下直接生成一个带PBR材质、灯光系统、相机控制的Three.js项目骨架，不是那种”Hello World”级别的方块展示。

总结一下：如果你想让AI真正写出能用的前端动画和3D交互，而不是每次都要手动改代码，这个仓库值得装两个Skill试试水。安装量253K+，说明需求是真的大。

GitHub：https://github.com/freshtechbro/claudedesignskills

GitHub: https://github.com/freshtechbro/claudedesignskills