SuperAPI AI 工具集

html-to-interaction-prompts

设计与创作

查看项目

更新于 10-15 21:09

技能介绍

用途:把 HTML 参考稿转成文章级提示词包,识别关键交互、采集视觉证据、撰写可复用提示词、在每条提示词标题下插入截图、验证文章渲染,并只提交预期文件。

主要能力:先阅读 HTML、CSS 与脚本,搜索 mousemove、pointermove、canvas、webgl、ScrollTrigger、requestAnimationFrame、hover、sticky、pin、parallax、magnetic、glow、shader、animation 等交互线索,以源码行为为准,不单凭截图推断效果。按可复用交互概念拆分提示词,而非按实现行数;提示词保持品牌、配色、尺寸、布局与内容模型无关,结构含核心思路、技术、实现、交互、成功标准;落地页另加逐段解剖(目的、布局、视觉细节、动画、交互、滚动交互、库/API)。

使用方式:编辑前检查 git 状态,保持暂存范围窄。需要浏览器时用 Codex 应用内浏览器;file:// 被阻止时把相关 HTML 复制到临时隔离目录并在 localhost 提供。每次滚动到采集位置后等待 2 秒再截图。图片存入目标文章文件夹并使用描述性文件名,插在对应提示词标题下方。文章放在 articles/YYYY-MM-DD-.../content.md,图片路径相对文章文件夹。验证时运行 git diff --check,确认引用的截图与视频存在且非空。

每日 UI 灵感采集约定:每篇文章恰好 5 条灵感,每条含代表性本地静图、本地 MP4、多张本地截图或动态帧、动效/交互说明、来源元数据,以及一条可直接粘贴进 AI 构建器的超详细提示词。Framer 模板或实时网站需记录真实落地页或预览 URL 并从中录制 MP4,不接受市场封面图或静态素材幻灯片作为实时视频证据。实时网站需保存一张整页滚动长图,再按区块连续、像素完整地裁切,覆盖 hero、各主要中间区块与页脚,坐标细节写入 manifest.json,不在正文截图下标注裁切坐标。

限制:实时采集受阻时优先更换候选网站,仅在无法替换或来源仅为图片时才用静态证据生成本地回退视频,并在 content.md 与 manifest.json 说明原因。manifest 需 itemCount: 5 且恰好 5 项。所有媒体放在 articles/YYYY-MM-DD-ui-inspiration-capture/ 内。仅暂存文章 markdown 与所需截图资源,忽略文件用 git add -f。动画方案须包含 prefers-reduced-motion、触屏行为、键盘/焦点行为与性能约束。库选择优先项目现有技术栈,仅在有助于实现路径时点名库。