Repolode
freshtechbro

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. 1

    将插件市场添加到 Claude Code

    /plugin marketplace add freshtechbro/claudedesignskills
  2. 2

    安装单个插件

    /plugin install threejs-webgl
  3. 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 数据每日更新。

相关项目