用途
epic-design 面向需要打造电影感、沉浸式 2.5D 交互网站的场景。它强调仅使用平铺 PNG/静态素材、CSS 和 JavaScript，不依赖 WebGL 或 3D 建模软件。目标是让页面具备景深层级、文字进出节奏、区块间的电影式过渡，以及元素在空间中存在的观感。
主要能力
- 2.5D 深度系统：将每个元素分配到 0-5 六个深度层级，并对应视差系数、模糊与缩放参数。例如 depth-0 为远景背景（parallax 0.10x、blur 8px、scale 0.70），depth-3 为主对象（0.80x、0px、1.05），depth-5 为前景特效（1.20x、0px、1.10）。在 HTML 中使用 data-depth="3" 并匹配 .depth-3 类。
- 滚动与动画技术决策：根据项目类型与滚动行为意图，从滚动架构、文字动画、方向性揭示、区块间效果等参考体系中选取组合。例如产品发布/品牌站可组合区块间浮动产品 + 透视缩放、分列汇聚 + 文字点亮、DJI 式缩放固定；滚动行为如“原地停留”对应 pin: true + scrub timeline，“整块区域变换”对应窗格瞳孔 + scrub timeline。
- 文字动画：资料列出 13 种文字技术，包括分列汇聚、逐词滚动点亮、变量字体波浪、擦除式线条揭示等。
- 方向性揭示：资料列出 8 种“从顶部/两侧诞生”的 clip-path 技术，例如自上而下的 clip 诞生、幕布卷起。
- 区块间效果：浮动产品、GSAP Flip 跨区块、跨区块路径移动等。
- 素材检查管线：对用户提供的每张图片运行 scripts/inspect-assets.py，判断格式、背景状态，并提示是否需要去除背景。该脚本的图像分析需要可选运行时依赖 pip install Pillow。
- 输出与验证：交付单一自包含 HTML 文件（内联 CSS + JS），通过 jsDelivr 引入 GSAP 3.12.5，并用 node scripts/validate-layers.js 检查深度属性、aria-hidden、reduced-motion、alt 文本与性能限制。
使用方式
技能有三种模式：
- Mode 1：从零构建——按 Step 1-5 完整工作流执行。
- Mode 2：增强现有站点——跳过 Step 1，从 Step 2 开始分析现有结构并推荐深度分配与动画机会。
- Mode 3：调试/修复——使用 scripts/validate-layers.js、检查 GPU 规则并验证 reduced-motion 处理。
核心工作流：先读取 project-context.md 或 product-context.md（若存在），再提取需求、检查每张图片素材、规划视觉层级（如确定一个 hero 占 50–80vw、depth-3，伴随元素为 hero 显示尺寸的 15–25%、depth-2 并贴近 hero 边缘，点缀为 1–5vw、depth-5），然后选择技术、用 6 层结构实现并进行无障碍与性能优化。
适用场景
资料给出的适用类型包括：产品发布/品牌站、大标题 hero、电影感区块、Apple 风格动画、区块间元素、卡片/特性区、作品集/展示、SaaS/创业站点等。同时明确区分了相关但不适用的技能：senior-frontend 用于围绕 2.5D 站点构建完整应用，ui-design 用于视觉布局与组件设计，landing-page-generator 用于快速 SaaS 落地页脚手架，page-cro 用于站点建成后的转化优化，senior-architect 用于更大系统架构，accessibility-auditor 用于完整 WCAG 合规验证。
限制
- 不依赖 WebGL 或 3D 建模软件，因此效果基于平铺素材、CSS 与 JS。
- 强制要求每段最小 3 个深度层、每个文字元素至少 1 种动画技术、每个项目包含 prefers-reduced-motion 回退。
- 只允许动画化 GPU 友好属性：transform、opacity、filter、clip-path，禁止动画化 width/height/top/left。
- 需要在动画完成后移除 will-change，并对离屏区块使用 content-visibility: auto，通过 IntersectionObserver 仅动画视口内元素。
- 移动端通过 window.matchMedia('(pointer: coarse)') 检测并减少效果。
- 存在性能关注点：超过 80 个动画元素时需提示性能问题并建议减少或懒加载。
- 资料未提供具体收费、价格或平台信息。