SuperAPI AI 工具集

html-to-interaction-prompts

前端与建站

查看项目

更新于 10-15 19:53

技能介绍

用途:把 HTML 参考(本地 HTML 文件、导出页、generated-page.html 或本地/线上参考)转换为可发布的“交互动效提示词包”文章:识别关键交互、采集视觉证据、撰写灵活提示词、在每个提示词标题下插入截图、验证文章渲染,并只提交目标文件。

主要能力:按可复用的交互概念而非代码行数拆分提示词,命名如“随鼠标的 Hero 粒子场”“卡片悬停光标辉光”;为每个交互采集截图与动效帧(每日灵感文章要求 5 条灵感、每条含静态图、本地嵌入 MP4、多张动效帧、动效说明、来源元数据及一条超详细 AI 构建提示词);线上站点先截一张整页长图,再按区块连续裁切,区块至少覆盖 hero、各主要中间区块与 footer;提示词可给出动效实现库建议(CSS、IntersectionObserver、Web Animations API、Framer Motion/Motion One、GSAP ScrollTrigger、Lenis、Embla/Keen/Swiper、Rive/Lottie、Three.js/WebGL),并优先沿用项目现有技术栈。

使用方式:先阅读源 HTML/CSS/脚本,搜索 mousemove、canvas、ScrollTrigger、requestAnimationFrame、sticky、parallax 等交互关键词,以源码行为为准;检查 git 状态后再编辑,暂存范围保持最小。提示词推荐结构为核心想法、技术、实现、交互、成功标准;落地页再增加分区块剖析(目的、布局、视觉细节、动画、交互、滚动交互、库/API)。截图与视频保存在文章目录(如 articles/YYYY-MM-DD-ui-inspiration-capture/),用相对路径嵌入,裁切坐标记录进 manifest.json 而非写在图下。提交前运行 git diff --check,确认素材非空,可选用 ffprobe 校验 MP4。

限制:不用于通用网页开发、无关内容撰写或全仓库提交;实时抓取被阻止时优先更换候选站点,仅在无法替换或源为纯图片时使用本地兜底视频,并说明原因;每个动画方案必须包含 prefers-reduced-motion、触屏、键盘/焦点与性能约束;内容.md 需遵循既定整页与区块裁切结构,不得使用文字链接、文件名列表、Markdown 表格或原始 HTML 网格。具体库、版本、价格与运行平台资料未提供。