让 AI 帮你搭 Awwwards 级 3D 网站：3D Website Architect Skill
每次让 AI 写网页，出来的东西是不是都长一个样？紫蓝渐变、Inter 字体、规规矩矩的卡片——能用，但绝不像 Awwwards 上那种让人”哇”出声的网站。今天搬一个彻底解决这问题的新 Skill：3D Website Architect，把你的 Claude/Cursor 直接变成会写 Three.js 的高级前端工程师。
它到底干了啥
这货不是那种”教你写一个 Hero 组件”的浅薄模板。它内置一套 13 步沉浸式设计流程，把 AI 强行从”瞎写代码”拽回”按工程思路设计”：
- 产品理解：先分析你的产品类型、用户、转化目标，再下笔
- 视觉调研：参考 Awwwards 级别的暗色渐变、玻璃拟态、电影感 3D Hero
- 设计系统：建立包含 3D 材质色的色彩板、字体配对、间距体系
- 网站结构：先画章节层级（Hero → 信任 → 功能 → Demo → 价格 → CTA）再写组件
- 3D 互动场景：Three.js / R3F 造漂浮几何、地球仪、粒子场、变形 blob
- 动效系统：Framer Motion 滚动揭示 + GSAP 时间线 + 微交互一锅端
- 响应式 3D 降级：桌面端跑完整场景，手机自动简化到 CSS fallback
最后还塞了 Lighthouse 审计、60fps 监控、WebGL 兼容性检查、生产构建。从灵感到上线，整条龙服务。
为什么值得装
市面上会写 React 的 Skill 一堆，会写 Three.js 的凤毛麟角。原因很简单：3D 需要审美、需要节奏感、需要懂材质和光照，而这些是模型最薄弱的环节。3D Website Architect 的解法很聪明——把专业前端的设计决策写进 SKILL.md 当成铁律，让模型没机会滑回 AI 模板的舒适区。
它支持全栈主流 Agent：
- Claude Code：
npx skills add deveshpunjabi/3d-website-architect - Cursor / Windsurf / Cline：直接复制
skills/3d-website-architect/到项目 - Codex / OpenAI Agents：放到
.codex/skills/或.agents/skills/ - Aider：在
.aider.conf里 read 一下 SKILL.md 即可
附带 10 个垂直行业（SaaS、电商、AI 工具、品牌官网…）的细分设计指引，连”该用哪种 3D 元素”都替你想好了，彻底告别千站一面。
实战示例
装好之后，给 Claude 一句 prompt：
“给我的 AI 创业项目做一个高级落地页，要求 3D Hero 区域加滚动动画”
它会先分析产品 → 调研 Awwwards 风格 → 建设计系统 → 规划章节 → 写出 Three.js 组件，最后还能自己检查渲染性能。输出不是代码海，是带分层目录（components/three/、animations/、public/models/）的生产级项目。
适合谁
前端工程师想搭高端作品集、AI 产品经理要做能拿出手的落地页、独立开发者想做 SaaS 营销页——只要你想摆脱”AI 模板味”，这玩意就是当下最对症的解药。海外设计圈已经在疯传，国内目前还是蓝海，先用先吃肉。
🔗 GitHub：github.com/deveshpunjabi/3d-website-skill
装上之后你就知道，Awwwards 那种”高级感”其实是流程化的，不靠灵感靠 SOP。
评论区
登录后可评论。