一组 Claude Code 技能,通过代码逐帧生成画面与配乐来制作视频,每个技能对应一种视觉风格。
freshtechbro/claudedesignskills
一套 Claude Code 技能与插件集合,让 Claude 掌握 Three.js、GSAP、React Three Fiber 等 3D 与动效开发知识。
- Star
- 1,080
- Fork
- 185
- 未关闭 Issue
- 6
- 最近提交
- 11个月前
这是什么?
这是一个 Claude Code 插件市场仓库,包含 22 个面向现代 Web 开发的技能,重点覆盖 3D 图形、动画和交互式网页体验。每个技能是一个文件夹,内含 SKILL.md 指令与模式说明,以及参考文档、辅助脚本和模板,Claude 仅在任务需要时加载。
技能涵盖 Three.js、React Three Fiber、Babylon.js、PlayCanvas、A-Frame、PixiJS、GSAP ScrollTrigger、Framer Motion、React Spring、Anime.js、Lottie、Rive 等库,也包括 Blender、Spline、Substance 3D 等 3D 制作工具。技能按五个捆绑包组织,也可以在 Claude Code 中用一条命令单独安装某个插件。
技能还可以打包为 zip 上传到 claude.ai,或复制到本地项目的 .claude/skills 目录中使用。
核心功能
- 01覆盖 Three.js、React Three Fiber、Babylon.js、PlayCanvas 等 3D 场景开发库。
- 02包含 GSAP ScrollTrigger、Framer Motion、Anime.js、Lottie 等动画工具。
- 03可在 Claude Code 中单独安装插件,也可安装五个分类捆绑包。
- 04每个技能包含 SKILL.md 指令、参考文档和辅助脚本。
- 05技能可上传至 claude.ai,或复制到本地项目中使用。
适用场景
- 让 Claude 编写带 PBR 材质的 Three.js 场景或 React Three Fiber 组件。
- 为网页添加 GSAP 滚动动画或 Framer Motion 过渡效果。
- 借助 Claude 在多个 3D 引擎或动画库之间做选型对比。
- 快速生成交互式 WebGL 或 WebXR 体验的项目模板。
快速上手
- 1
将插件市场添加到 Claude Code
/plugin marketplace add freshtechbro/claudedesignskills - 2
安装单个插件
/plugin install threejs-webgl - 3
或安装完整的插件包
/plugin install core-3d-animation
使用前须知
- 这些技能是供 Claude Code 使用的指令包,并非可独立运行的软件。
- 生成器脚本需要 Python 3 环境。
标签
常见问题
- claudedesignskills 是什么?
- 一套 Claude Code 技能与插件集合,让 Claude 掌握 Three.js、GSAP、React Three Fiber 等 3D 与动效开发知识。 这是一个 Claude Code 插件市场仓库,包含 22 个面向现代 Web 开发的技能,重点覆盖 3D 图形、动画和交互式网页体验。每个技能是一个文件夹,内含 SKILL.md 指令与模式说明,以及参考文档、辅助脚本和模板,Claude 仅在任务需要时加载。
- claudedesignskills 可以免费使用吗?用的什么许可证?
- claudedesignskills 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- claudedesignskills 还在维护吗?
- 超过半年未提交。claudedesignskills 最近一次提交是在 2025年11月20日。
- claudedesignskills 适合用来做什么?
- 让 Claude 编写带 PBR 材质的 Three.js 场景或 React Three Fiber 组件。 为网页添加 GSAP 滚动动画或 Framer Motion 过渡效果。 借助 Claude 在多个 3D 引擎或动画库之间做选型对比。 快速生成交互式 WebGL 或 WebXR 体验的项目模板。
- claudedesignskills 怎么安装和运行?
- 将插件市场添加到 Claude Code: /plugin marketplace add freshtechbro/claudedesignskills 安装单个插件: /plugin install threejs-webgl 或安装完整的插件包: /plugin install core-3d-animation
- 在哪里获取 claudedesignskills?
- 源代码和安装说明在 GitHub 上:https://github.com/freshtechbro/claudedesignskills
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
一个 Claude Code 技能,用 51 种影片风格制作短片,全部由代码生成,不依赖视频生成模型。
在浏览器中搭建场景、摆放角色、编排镜头运动,并将分镜交给 AI 视频模型的预演工具。
一个让 Claude Code、Codex 等 agent 用代码直出商业级产品发布片的 skill,支持作曲配乐和在画面上指点修改。
一个智能体技能,只需一句需求即可让 AI 编程助手构建有设计感的获奖级网站,并附带网站评分技能 /jury。
面向 Claude Code 等编码智能体的动效设计工具包,内含 Remotion 视频流程、画面自检循环与 Python 音效引擎。