AI灵感世界AI Skills · 设计3d-website-skill
入馆：2026 年 11 月 4 日
3d-website-skill
让 AI 编程助手按 13 步做出带 3D 和动画网站的 Skill。
- 生态
- Agent Skills
- Skill 分类
- 设计
- 创建者 / 机构
- deveshpunjabi
它是什么
3d-website-skill 是 GitHub 用户 deveshpunjabi 做的 Agent Skill，里面的 Skill 叫 3d-website-architect。你让 AI 编程助手做一个带 3D 的落地页时，它会自动启用。它要求 AI 按 13 步走：先理解产品和受众，再定设计规范、页面结构和组件，然后加滚动动画和 Three.js 3D 场景，最后做性能优化、适配手机、测试和部署。技术栈是 Next.js、TypeScript、Tailwind、React Three Fiber、Framer Motion 和 GSAP。特别的地方是它给 3D 做了降级方案：设备跟不上时，从完整场景退到简化版，再退到纯 CSS。
亮点：
- Skill 是纯 Markdown，没有运行时依赖
- README 给了 Claude Code、Cursor、Windsurf、Cline、Codex、Aider 等工具的安装方法
- 流程里包含 Lighthouse 检查和帧率监测。
怎么用：
- 先在 Claude Code 里运行 npx skills add deveshpunjabi/3d-website-architect，用其他工具就把 skills/3d-website-architect/ 文件夹复制到对应目录
- 再开新会话，让它做一个带 3D 首屏和滚动动画的落地页。
适合谁：
想让 AI 编程助手做出带 3D 和动效的产品落地页的前端开发者。
使用前提：
- 需要一个能读 Skill 或指令文件的 AI 编程助手，生成的网站要用 Node.js 跑。
- README 的安装命令写的是 3d-website-architect，和本仓库名不同，安装前请核对。
- 部署到 Vercel、Netlify 等平台的费用以官网为准。
- 许可证是 MIT。
以上根据项目公开说明整理，本站没有实际测试。