【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载导读本文以仓库中 gsap 技能 的演示提示词文档 PROMPT.md 为核心系统讲解如何用 GSAPGreenSock的 timelines、stagger、ScrollTrigger 与 Draggable 插件重建一个具备「流体拖拽交互」质感的高完成度响应式页面。你将掌握演示提示词的完整结构Minimal prompt / Recreate / Remix 三层用法、保真度目标如何落地为具体实现以及如何从 index.html 源码中提炼可复用的 GSAP 动画编排与拖拽编排模式。一、演示提示词文档的整体定位agent-skills/web-design/gsap/demo/PROMPT.md是 gsap 技能随附演示的「提示词说明书」它的作用是给 AI 编码代理Codex、Claude、Cursor 等提供一套可执行的复刻指令。文档包含三个递进层级的提示词模板Minimal prompt最小提示词一行话要求使用$gsap生成一个响应式独立 HTML 设计视觉自信度、信息层级与交互完成度对齐附带的 Neuform 参考。Recreate the demo完整重建给出产品简报、技能方向、保真度目标与参考快照要求把demo/index.html当作「视觉与交互参考」而非「松散的情绪板」重建出 Aura - Fluid Drag Interactions 页面。Remix prompt混排改写保留底层布局逻辑、标志性视觉处理与交互编排替换品牌、主题、文案、配色与内容但仍要清晰展示该技能。这套「最小 / 重建 / 混排」的三层结构是仓库中大量技能演示如 cinematic-gsap-lenis-motion-system/demo/PROMPT.md共用的模式先用一句话验证技能可用再用完整重建验证复刻精度最后用混排验证技能的可迁移性。二、产品简报Aura 页面的设计意图PROMPT.md 给出了重建目标的产品定位这是理解后续一切实现决策的起点页面概念Aura - Fluid Drag Interactions流体拖拽交互。用途Aura 流体仪表盘区块用于演示应用工作流与界面层级强调信息密度、模块化面板与界面节奏适合产品展示、管理后台与数据分析类体验。内容锚点Fluid Drag Interactions、Data sync flow、Space gives Focus、THE NEXT WAVE OF INTERACT DESIGN、99。主题标签dashboard仪表盘、animated动画、webgl、threejs、bento模块化网格、dither抖动纹理、charts图表、support支持。这些内容锚点可以直接从 index.html 的编码 HTML 中对应验证页面标题为「Aura - Fluid Drag Interactions」副标题文案为「Grab, move, and arrange the elements freely across the canvas.」抓取、移动并自由排列画布上的元素中心卡片文案为「Expanding the digital mind」侧卡依次是「Data sync flow」「Space gives Focus」「99」与「THE NEXT WAVE OF INTERACT DESIGN」。值得注意的设计策略卡片采用 bento 式布局通过 260–300px 宽的卡片、-22deg到24deg的旋转角度、translateX(-380px)到translateX(380px)的分布构造出松散但有节奏的「画布感」这正好对应「信息密度 模块化面板 界面节奏」的产品定位。三、技能方向明确要求使用的 GSAP 能力PROMPT.md 在「Skill direction」中明确要求Use GSAP timelines, stagger, and scroll-triggered motion.结合 SKILL.md 对 GSAP 核心 API 的归纳这句话应被理解为三层能力要求Tweens补间gsap.to(targets, vars)、gsap.from(targets, vars)、gsap.fromTo(targets, fromVars, toVars)用于单元素动画。Timelines时间线gsap.timeline({ defaults, repeat, yoyo, paused })支持链式编排tl.to(...).from(...).addLabel(x).add(() ...)并通过位置参数控制时序绝对位置1.2、相对位置0.5、重叠-0.3、标签intro。ScrollTrigger滚动触发插件gsap.registerPlugin(ScrollTrigger)后可用内联形式gsap.to(.box, { scrollTrigger: .box, x: 500 })或高级配置scrollTrigger: { trigger, start, end, scrub, pin, snap, markers }以及独立形式ScrollTrigger.create({ trigger, start, end, onUpdate, onToggle })。REFERENCES.mdagent-skills/web-design/gsap/REFERENCES.md为这些 API 提供了官方文档索引覆盖gsap.to()、Timeline 与 ScrollTrigger 三类主题可作为深入学习的入口。四、保真度目标把「参考」转化为可验收标准PROMPT.md 的保真度目标是重建工作的验收清单共五项视觉保真匹配参考的构图、信息密度、字体层级、间距节奏、表面处理、色彩关系与运动克制motion restraint。交互保真保留最强的交互与动画背景行为而不是用通用淡入淡出或装饰性位移替代它。首屏定制首屏需要艺术化编排并将同一设计逻辑贯穿到所有支撑区块。响应式与可访问性从移动端到桌面端保持响应式键盘可访问且启用 reduced motion 时保持稳定。交付物交付完整的index.html页面自有图片、视频、模型与纹理放入demo/assets/外部运行时库在源依赖它们时可保留为固定版本的 CDN 依赖。对照仓库中的实际交付这五条都得到了落实assets 目录demo/assets/下存放了 page-01 纹理图红色卡片的画像纹理800w与 page-02 纹理图中心卡片的霜冻背景800w这正是「页面自有图片放 demo/assets/」的执行结果。CDN 固定版本source.json 的runtime_dependencies记录了三方运行时gsap 3.12.2、Draggable 3.12.2、three.js r128外加 Tailwind CDN 与 Iconify。这些库在仓库中以assets/runtime/下的本地副本形式被固定例如 gsap-min.js、draggable-min.js 与 three-min.js对应「pinned CDN dependencies」的要求。沙箱安全index.html使用sandboxallow-scripts的 iframe 包裹解码后的源码并设置了严格的 CSPdefault-src none、script-src unsafe-inline等源码经 base64 编码后注入srcdoc资产通过postMessage以 blob URL 方式注入——这与 source.json 中的security_profile: sandboxed-srcdoc-v1字段完全对应。五、参考快照排名与热度数据说明了什么PROMPT.md 的 Reference snapshot 记录了参考页面的来源与热度指标来源页面Aura - Fluid Drag InteractionsNeuform 页面。Neuform rank同步时 gsap 排名第 1。热度857 次浏览、19 个收藏、3 次混排。排名规则先按浏览量降序再按收藏量降序。这些数据的机器可读版本存放在 source.json 中skill.usage_count为 2827design.view_count为 857、favorite_count为 19、remix_count为 3排序字段为view_count desc → community_favorite_count desc → relation_created_at desc。这一快照的工程意义在于它把「参考页面值得被复刻」这个主观判断转化为客观的排名证据同时为后续的 Remix 提供了数据基线。六、源码级实现剖析GSAP 入场动画与拖拽编排重建指令要求「保留最强的交互行为」这一点在 index.html 的源码中有完整的 GSAP 实现是理解演示质量的关键。6.1 首屏入场stagger back.out 缓动页面在DOMContentLoaded后执行两段入场标题与导航的淡入gsap.to(.hero-anim, { y: 0, opacity: 1, duration: 1, stagger: 0.15, ease: power3.out, delay: 0.2 });标题、副标题、头部导航等元素初始时带有opacity-0 translate-y-*类通过 stagger 0.15s 依次入场使用power3.out获得「快起慢落」的质感这正是 SKILL.md 中「Hero entrance (stagger)」食谱的实战形态。卡片群的编排式入场gsap.fromTo(card, { x: final.x * 1.5, y: final.y 150, rotation: final.rotation * 1.5, scale: final.scale * 0.8, opacity: 0 }, { x: final.x, y: final.y, rotation: final.rotation, scale: final.scale, opacity: 1, duration: 1.4, ease: back.out(1.2), delay: 0.6 i * 0.08 } );这里的实现细节非常值得借鉴每张卡片的最终状态x、y、rotation、scale从卡片内联transform中通过正则解析得出translateX(...)、rotate(...)、scale(...)做到「起始态 最终态 × 1.5 倍 偏移」的数学化放大入场而不是手写死值。缓动选用back.out(1.2)让卡片以轻微回弹越过终点形成有生命感的着陆。延迟0.6 i * 0.08让五张卡片依次登场对应 SKILL.md 中stagger: 0.05或{ each, from: start|center|end|random, grid }的编排思想。6.2 持续漂浮动画无限循环的 yoyo 时间线入场完成后每张卡片被挂上持续漂浮动画card.floatAnim gsap.to(card, { y: random(-5..5), rotation: random(-1..1), duration: 3 Math.random() * 2, repeat: -1, yoyo: true, ease: sine.inOut });repeat: -1与yoyo: true组合出无限往返的轻微漂浮sine.inOut保证运动平滑无顿挫——这正是 SKILL.md 中timeline({ defaults, repeat, yoyo, paused })能力在「环境氛围动画」上的应用。6.3 拖拽交互Draggable 插件与动画生命周期管理流体拖拽的核心实现是 GSAP 的 Draggable 插件来自runtime-8da2c9e0e562-draggable-min.js对应 CDN 的gsap/3.12.2/Draggable.min.jsgsap.registerPlugin(Draggable); Draggable.create(card, { type: x,y, bounds: window, onPress: function () { // 终止仍在运行的入场动画并暂停漂浮动画 gsap.killTweensOf(this.target, x,y,rotation,scale,opacity); if (this.target.floatAnim) this.target.floatAnim.kill(); // 提升 z-index 使卡片浮到最前 highestZ 1; this.target.style.zIndex highestZ; }, onRelease: function () { // 从新位置继续漂浮 this.target.floatAnim gsap.to(this.target, { y: random(-5..5), rotation: random(-1..1), duration: 3 Math.random() * 2, repeat: -1, yoyo: true, ease: sine.inOut }); } });这一实现同时演示了 SKILL.md「Common pitfalls」中两个反模式的正解动画冲突拖拽按下时先用gsap.killTweensOf(target, x,y,rotation,scale,opacity)杀掉正在运行的补间避免 Draggable 的 transform 与漂浮动画互相覆盖——对应「Animating layout properties → jank」的修复思路始终用 transform而非 top/left。生命周期管理漂浮动画对象被保存在card.floatAnim上按需 kill 与重建避免内存中残留重复的无限循环动画——对应 SPA 中「cleanup / revert」原则的单页版本。6.4 WebGL 背景three.js 点阵粒子场除了 GSAP 负责的 UI 层页面背景是 three.js 的点阵粒子场PointCloud40×40 网格、间距 10、带噪声扰动由一段自定义顶点着色器控制粒子脉冲sin(uTime * 0.5 aOffset) * 0.5 0.5与透明度摄像机对鼠标位置做缓动跟随camera.position.x (targetX - camera.position.x) * 0.02。这段 WebGL 背景与 GSAP 拖拽层的关系值得注意PROMPT.md 明确要求「Preserve the strongest interaction and animated background behavior instead of replacing it with generic fades」——即背景必须是「有行为的」动态场而不是静态渐变。GSAP 负责卡片层的流体拖拽three.js 负责背景层的粒子脉动两者通过z-index分层背景 z-[1]卡片 z-10/20/30互不干扰这正是「motion restraint」的具体体现每个图层只做自己该做的运动。七、Remix 提示词技能的可迁移性验证Remix prompt 的要求是用$gsap和附带的 Neuform 演示作为质量基准但替换品牌、主题、文案、配色与内容。保留底层的布局逻辑、标志性视觉处理、交互编排、响应式行为与性能约束使混排结果依然能清晰展示该技能。这意味着 Remix 不是重画一个页面而是「换肤不换骨」保留bento 卡片布局逻辑、入场 stagger 编排、漂浮 拖拽的交互编排、鼠标跟随的 WebGL 背景行为、CSP 沙箱与资产本地化的交付约定。替换品牌Aura. → 新品牌、主题文案Fluid Drag Interactions → 新主题、配色暗紫渐变 红/蓝/紫卡片 → 新调色板、内容锚点99、Space gives Focus → 新内容。从工程角度看Remix 验证的是技能模板的可参数化程度只要把「内容锚点」「主题标签」「色彩关系」作为变量而把「GSAP 编排结构」作为常量就能在保持质量的同时产出全新主题——这正是技能被设计成可复用资产的核心价值。八、实战要点速查结合 SKILL.md 与演示源码整理出本次重建可直接复用的要点场景推荐写法理由首屏多元素入场gsap.from(selector, { y, autoAlpha, duration, ease: power2.out, stagger: 0.06 })一次调用覆盖整组元素编排式时间线const tl gsap.timeline({ defaults: { ease: power2.out, duration: 0.6 } }); tl.from(...).from(..., -0.2)负位置参数让动画重叠节奏更紧凑滚动驱动故事线gsap.timeline({ scrollTrigger: { trigger, start: top top, end: 800, scrub: 1, pin: true } })scrub 让动画进度与滚动位置绑定无限漂浮氛围repeat: -1, yoyo: true, ease: sine.inOut平滑往返无顿挫拖拽与动画共存Draggable.create(el, { onPress: kill 动画, onRelease: 重建动画 })避免 transform 冲突与动画堆积性能优先x / y / scale / rotation / autoAlpha避免 top/left/width/height合成器友好减少重排字体/图片加载后等布局稳定后初始化必要时ScrollTrigger.refresh()避免 FOUC 与测量错误九、进一步探索提示词原文agent-skills/web-design/gsap/demo/PROMPT.md技能定义与 API 速查agent-skills/web-design/gsap/SKILL.md演示源码含完整 GSAP Draggable three.js 实现agent-skills/web-design/gsap/demo/index.html演示元数据与运行时依赖清单agent-skills/web-design/gsap/demo/source.json页面自有资产page-01 纹理、page-02 纹理同类进阶技能cinematic-gsap-lenis-motion-systemGSAP Lenis 平滑滚动的完整动效系统赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐掌握AvaloniaUI中Thumb控件从基础到高级拖拽交互实现掌握AvaloniaUI中Thumb控件从基础到高级拖拽交互实现 你是否在Avalonia开发中遇到自定义拖拽交互难题是否想实现如滑动条、窗口调整等复杂交互跨平台桌面应用UI组件prompt-optimizer拖拽功能元素拖拽与排序交互prompt optimizer拖拽功能元素拖拽与排序交互 引言为什么需要拖拽功能 在现代Web应用中拖拽交互已经成为提升用户体验的重要功能。对于pro人工智能大模型提示工程AI 应用AI 评测Vue.Draggable 2.24.3重磅发布拖拽交互体验再升级Vue.Draggable 2.24.3重磅发布拖拽交互体验再升级 你是否还在为Vue项目中的拖拽功能实现而烦恼还在忍受复杂的原生API调用和兼容性问题V前端UI组件上一篇PHP-CS-Fixer numeric_literal_separator 规则完全指南为数字字面量自动添加/移除下划线分隔符下一篇tsdown Shims 选项详解打通 ESM 与 CommonJS 模块兼容性创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考