哈喽大家好呀！看惯了千篇一律的静态网页，现在越来越多的大厂官网和高级独立站都在大面积使用动态交互组件，比如极具空间感的 3D 悬停卡片、直观的图片前后对比滑块，或者是灵动的粒子特效。
想要自己手写这些特效，往往需要耗费大量时间去调整物理惯性和数学矩阵。尤其是我们在运营设计素材资源站时，经常需要高频地产出各种特效代码供用户复制。如果利用 AI，我们只需几秒钟就能生成一个“所见即所得”的特效调试工作台，直接拖拉滑块就能生成完美的前端代码。
这期给大家分享 4 个专门用来生成“高级互动视觉与前端动效组件”的在线工具提示词。全部基于纯浏览器本地运行，把它们部署在你的工具矩阵上，绝对能极大提升网站的技术调性！
Before/After 图片前后对比滑动组件生成器
展示产品修图效果、照片调色对比或者模型渲染前后的绝佳方案。通过纯原生事件监听，生成带有一个丝滑拖拽中心轴的对比图像。
复制下方提示词发给 AI (如 Claude/Cursor)：
请用纯 HTML+JS+CSS 编写一个“Before/After 图片前后对比滑动组件生成器”。
核心要求：
1. 交互上传：提供两个拖拽上传框，分别用于上传“修改前 (Before)”和“修改后 (After)”的相同尺寸图片。
2. 组件逻辑：在画布中央将两张图片重叠渲染，利用 CSS clip-path 属性和原生鼠标/触摸拖拽事件，实现一个居中的分割线和控制手柄，用户可以左右拉动查看对比。
3. 参数设置：提供控件允许调节图片比例、手柄的颜色与样式、以及默认滑块所处的百分比位置。
4. 代码导出：右侧提供代码面板，一键生成带有内联 CSS 和响应式处理的独立 HTML 组件代码片段。
5. UI 风格：现代极简的设计系统，背景采用深色暗黑模式。
6. 交付：输出单文件 index.html 源码。
高级 3D 悬停视差倾斜卡片 (Parallax Tilt) 生成器
类似 Apple TV 卡片的那种高级空间感交互：当鼠标在图片上移动时，卡片会随着鼠标位置进行 3D 旋转翻转，并伴随逼真的光晕反光效果。
复制下方提示词发给 AI：
请开发一个“纯前端 3D 悬停视差倾斜卡片 (Hover Tilt) 特效生成器”。
核心要求：
1. 底层实现：纯原生 JavaScript，利用 requestAnimationFrame 和 CSS transform (perspective, rotateX, rotateY) 计算鼠标相对卡片中心的坐标比例。
2. 视觉渲染：中央展示一张卡片（支持用户上传自定义封面），鼠标悬停时卡片随之 3D 倾斜，并在卡片表面叠加一层基于鼠标位置动态变化的径向渐变 (radial-gradient) 高光层。
3. 调节面板：提供滑块实时调节“最大倾斜角度 (Max Tilt)”、“透视景深 (Perspective)”、“反光强度 (Glare)”以及“动画回弹阻尼”。
4. 代码输出：提供“一键复制”按钮，将调节好的参数直接打包成一段极其干净的 Vanilla JS 和 CSS 代码。
5. 交付：包含完整逻辑的 HTML 单文件，界面要求极客科技感。
Lottie 动画 JSON 纯本地预览与快速调色器
动效设计师经常提供 Lottie JSON 动画文件，但前端开发想修改里面的某些颜色通常无从下手。这个工具能在网页端实时渲染动画，并且暴露底层色彩属性供直接替换。
复制下方提示词发给 AI：
请编写一个“纯本地 Lottie 动画预览与参数编辑台”。
核心要求：
1. 核心依赖：通过 CDN 引入 lottie-web (bodymovin) 库。
2. 预览模块：支持拖入一个 lottie.json 文件，立即在画布中央进行循环播放，并提供播放、暂停、进度条拖拽功能。
3. 解析与调色：深度遍历解析传入的 JSON 数据树，提取出其中定义的所有色彩属性（HEX 或 RGB）。在侧边栏生成色块列表，支持用户点击色块并通过原生 Color Picker 替换颜色，替换后动画实时刷新。
4. 导出更新：调色完成后，一键将修改过后的 JSON 数据打包下载。
5. 容错处理：确保大型多图层 JSON 文件解析时不会卡死页面。
6. 交付：HTML 单文件交付，样式要求干净清爽的开发者面板风格。
交互式 Canvas 粒子文字避让排版特效画板
想在网站首页做一个极具视觉冲击力的开屏大字？输入一段文字，工具会将其转化成成千上万个彩色粒子。鼠标滑过时，粒子会自动散开避让，随后又物理回弹拼合成文字。
复制下方提示词发给 AI：
请开发一个“纯原生 Canvas 粒子文字跟随与避让特效生成器”。
核心要求：
1. 像素采样：提供输入框让用户输入主文字（支持大字号和中英文）。使用隐形 Canvas 将文字绘制并进行像素级采样（获取非透明像素坐标），转化为粒子数组。
2. 物理引擎：给每个粒子赋予坐标、初始位置和摩擦系数。鼠标在画布上移动时，计算鼠标与粒子的半径距离，实现带有弹性的排斥力（避让动效）。
3. 参数控制面板：支持修改“粒子大小”、“粒子散落颜色”、“避让半径”、“回弹速度”等。
4. 代码导出：自动生成一段独立的包含 HTML 结构和底层 Canvas 动画类的演示代码，可无缝嵌入任何系统框架。
5. 交付：输出单文件 index.html 源码。
核心总结：
对于这类重视觉和重交互的生成器应用，给 AI 的提示词必须明确指出核心渲染 API（如 CSS clip-path、Canvas 像素采样或 lottie-web），还要特别叮嘱生成一键复制或打包导出的功能面板。把这些技术细节拿捏死，生成的代码质量直接就可以拿来当建站工具发光发热！
