html-to-interaction-prompts

name	html-to-interaction-prompts
description	把提供的 HTML 页面或生成的 HTML 参考转成一篇有截图支撑的文章，其中包含多条可复用的交互提示词。当用户提供 HTML 文件、导出页面、generated-page.html 或本地/live 参考，并要求提取动画/交互、创建提示词、为每条提示词采集截图、把它们加进文章，或提交产出的文章/资产时使用。

HTML 转交互提示词

目标

把一个 HTML 参考变成一份可直接成文的提示词包：识别重要的交互、采集恰当的视觉证据、写灵活的提示词、在每个提示词标题下插入截图、校验文章能渲染，并只提交预期的文件。

每日 UI 灵感采集契约

当本 skill 用于每日 UI 灵感工作流程时：

• 每篇每日灵感文章必须恰好包含 5 个灵感，而不是 20 个。
• 不要交付一个截图画廊，也不要附上 20 条浅薄的提示词。
• 5 个灵感中的每一个都必须包含：一张有代表性的本地静态图、一段内嵌的本地 MP4 视频、多张本地截图或动效帧、动效/交互备注、来源元数据，以及一条超详细的 AI-builder 提示词。
• 如果来源是 Framer 模板或任何其他 live 网站，在滚动网站本身时记录实际的落地页或预览 URL。marketplace 封面图、缩略图、截图平移或静态资产幻灯片不算合格的 live 视频证据。
• 对 Framer，检查 marketplace 详情页的 Full Live Preview 或内嵌的 previewUrl，把该 URL 存为 pageUrl，并从该页面录制 MP4。
• 对 live 网站，保存一张整页滚动截图作为一张长图。然后从那张确切的整页图切出逐板块截图，使文章同时包含整页和每个独立板块。
• 板块裁剪相对整页图必须连续且像素完整。板块之间不缺像素，不用任意视口截图作为板块替代，仅当 sticky 元素使之不可避免时才允许重叠。
• 页面有多少个有意义的板块，就包含多少个板块裁剪。至少包含 hero、按页面顺序排列的每个主要中间板块，以及页脚。尽量用基于用途的标签，如 proof、features、process、gallery、pricing、faq 或 final-cta；否则用有序标签如 section-02。
• 在 content.md 中，匹配最近示例确立的每日采集文章结构。使用 ### Full-Page And Section Evidence，把整页截图渲染成普通 Markdown 图片，然后用 #### Section Crops 把每个裁剪渲染成普通 Markdown 图片，自上而下排序。不要把该区块改名为 Local Evidence，不要为该区块使用文字链接、文件名列表、Markdown 表格、原始 HTML 网格或裁剪坐标说明。
• 不要在 content.md 的截图下放裁剪坐标说明；把裁剪坐标细节放在 manifest.json 里。
• 从 live 网站视频中提取多个动效帧。这些帧应展示滚动过程中的真实页面状态，而不是同一张封面图的重复裁剪。
• 如果 live 采集被阻挡，优先用另一个 live 网站替换候选。仅当无法替换或来源仅有图片时，才从静态证据创建本地回退视频，并在 content.md 和 manifest.json 中说明回退原因。
• 每个灵感的提示词应长到能直接粘进 AI builder。它应包含参考边界、反模式、核心思路、设计系统、布局规则、动效系统、逐板块解剖、转化/页脚、响应式行为、无障碍、性能，以及 reduced-motion 指引。
• 每条提示词必须逐板块描述落地页。覆盖全局外壳、header/导航、hero、证明条、feature/service 模块、product/demo/media 板块、process/how-it-works、gallery/case-study/work 板块（如有）、testimonials/社会证明、pricing/套餐/对比（如有）、FAQ、最终 CTA、页脚，以及移动端行为。
• 对每个主要板块，指明用途、布局解剖、视觉细节、动画、交互状态、滚动行为、推荐的实现库/API，以及 reduced-motion 回退。
• 对 Framer/live 网站，每条提示词必须包含一条 Live-site evidence 备注，说明静态图、MP4 和帧是从实际的 pageUrl 采集的，而非来自封面图。
• manifest 必须有 itemCount: 5 且恰好 5 个 items。
• 把所有媒体保留在 articles/YYYY-MM-DD-ui-inspiration-capture/ 内。

工作流程

1. 先检查真实来源。

   • 阅读 HTML、CSS 和脚本。搜索交互相关词，如 mousemove、pointermove、canvas、webgl、ScrollTrigger、requestAnimationFrame、hover、sticky、pin、parallax、magnetic、glow、shader 和 animation。
   • 把源码行为当作真相。当 HTML 可得时，不要仅凭截图推断确切效果。
   • 编辑前检查当前 git 状态。脏工作树很正常；把暂存范围保持狭窄。

2. 确定提示词清单。

   • 按可复用的交互思路来拆分提示词，而不是按实现的代码行数。
   • 如果用户的一个要点包含两个不同的效果，仅当拆分能让文章更有用时才拆。
   • 用交互概念给每个板块命名：例如 Hero Particle Field That Follows The Mouse、Cursor Glow Hover On Cards 或 Scroll Behavior And Section Reveal System。

3. 写可复用的提示词。

   • 让提示词足够灵活，适配任何品牌、配色系统、卡片尺寸、布局或内容模型。
   • 聚焦核心思路、技术、实现形态、交互行为、滚动编排、性能和无障碍。
   • 避免硬编码值，除非用户明确要求精确复刻。不要把提示词锁死在一种颜色、一个尺寸、一个阈值、一个 DOM id、一种卡片类型或一个资产上。
   • 倾向于用这种结构：
     • Core idea
     • Technology
     • Implementation
     • Interaction
     • Success
   • 对落地页，用一个 Section anatomy 区块扩展该结构。对每个板块，包含：
     • Purpose：该板块在故事、信任建立或转化路径中必须做什么。
     • Layout：网格、列行为、媒体位置、sticky 区域、卡片结构、CTA 位置、间距，以及响应式折叠。
     • Visual details：排版、颜色行为、面板（surfaces）、边框、阴影、媒体处理、图标风格和密度。
     • Animation：初始状态、触发、缓动、时长、错峰（stagger）、transform origin、透明度、模糊、clip/mask、parallax 深度、循环行为和稳定状态。
     • Interaction：hover、focus、tap/click、active/pressed、cursor、accordion、carousel、表单、键盘、加载、disabled 和 error 状态。
     • Scroll interaction：reveal 阈值、sticky/pinned 节奏、scrubbed 值、parallax 图层、板块交接、滚动进度、背景/导航变化，以及靠下板块的显现。
     • Library/API：是否使用原生 CSS、IntersectionObserver、Web Animations API、Framer Motion/Motion One、GSAP ScrollTrigger、Lenis、Embla/Keen/Swiper、Rive/Lottie 或 Three.js/WebGL。
   • 只把来源特定的细节作为示例或可选参考提及，而非强制要求。

4. 为每条提示词采集截图。

   • 需要浏览器工作时用 Codex 内置浏览器。如果直接的 file:// 导航被阻挡，只把相关 HTML 复制到一个临时隔离文件夹并在 localhost 提供服务。
   • 当任务是每日 UI 灵感文章时，为每条提示词采集多张截图或动效帧。
   • 对 live 网站，从网站本身采集首屏加上靠后的滚动状态。不要把 marketplace 封面图复用为动效帧来源。
   • 每次滚动到采集位置后，截图或取帧前等待 2 秒，好让懒加载媒体、reveal 动画、sticky 状态变化和滚动触发的过渡稳定下来。
   • 对 live 网站，采集一张整页滚动截图作为一张长图，然后逐板块裁剪它。整页图是板块裁剪的事实来源。
   • 把页面切成落地页实际拥有的那么多张板块图，包含 hero、每个中间板块和页脚。保持裁剪边界确切且连续，使相邻板块之间不跳过任何像素行。
   • 创建 manifest 时记录 fullPageImage 加上 sectionImages 元数据。对每张板块图，包含板块标签、文件路径、来源整页图、y-start、y-end，以及可得时的 height。
   • 在文章中，用确立的结构展示整页图和板块图：### Full-Page And Section Evidence、整页截图的普通 Markdown 图片、#### Section Crops，然后是按页面顺序排列的裁剪的普通 Markdown 图片。不要在每张图下渲染 y-start/y-end 裁剪元数据，不要用 Markdown 表格或原始 HTML 网格，也不要把裁剪展示为文件名列表。
   • 对一般的单参考提示词包，每条提示词至少采集一张展示交互发生的具体板块的截图。
   • 需要时在采集前触发交互：为光标效果移动指针、hover 卡片、滚动进入 pinned 板块，或等待 canvas/粒子动效。
   • 把图片保存在目标文章文件夹内，用描述性文件名，如 reference-01-hero-particles.png。
   • 把每张截图紧贴插入到它匹配的提示词标题下方。

5. 按需采集视频。

   • 当用户要视频、动效研究或每日灵感采集时，每个灵感或交互录制一段短的本地 MP4。
   • 对 Framer/live 网站，录制一段在实际 pageUrl 上的缓慢滚动：首屏、板块显现、sticky 导航、parallax、marquee/carousel 循环、明显的 hover 状态，以及靠下的页面内容。
   • 不要从封面图做 Ken Burns 平移、缩放或幻灯片，并把它当作网站动效呈现。
   • 用本地相对路径把视频直接嵌进文章。
   • 从视频提取有代表性的帧，使文章不用播放就能被快速浏览。
   • 如果 live 视频被阻挡，记录尝试过的 URL 和原因。对 Framer/live 网站，尽可能替换候选，而不是悄悄回退到封面图。

6. 创建或更新文章。

   • 如果用户指向一篇已有文章，更新那篇文章的 content.md。
   • 如果没有已有文章且任务处于文章/内容 workspace 中，在 articles/YYYY-MM-DD-.../content.md 下创建一个带日期的文章文件夹。
   • 让本地 markdown 图片路径相对于文章文件夹。
   • 当用户要的是文章时，不要把一个独立的提示词文件当作唯一交付物留下。

7. 校验。

   • 对改动过的 markdown 运行 git diff --check。
   • 确认每个被引用的截图和视频文件都存在且非空。
   • 对每日 UI 灵感文章，校验恰好 5 个灵感、5 段内嵌视频或明确的回退视频，以及每个灵感至少 4 张截图/帧图片。
   • 对 live 网站每日灵感条目，校验存在一张整页滚动截图，且板块裁剪自上而下覆盖 hero、所有有意义的中间板块和页脚。
   • 只要有坐标可得，就校验板块裁剪坐标相对整页图是连续的。
   • 校验 content.md 对每个 live 网站条目遵循确立的整页/板块裁剪结构，含渲染的 Markdown 图片，不含文字链接、文件名列表、Markdown 表格、原始 HTML 网格、Local Evidence 标题或裁剪坐标说明。
   • 对 Framer/live 网站灵感，校验每个条目都有 pageUrl、一个 live-site 采集类型（如 websiteScrollVideo）、一段从实际页面录制的 MP4，以及没有封面图回退措辞。
   • 用 ffprobe 确认 MP4 文件可读，然后每篇文章至少抽查一段 Framer 视频，确保它确实在滚动真实网站。
   • 如果 Content 应用/服务器在运行，通过其 UI 或 API 校验文章，并滚动到足够远处以触发懒加载图片。
   • 如果校验被阻挡，报告在本地检查了什么。

8. 窄范围提交。

   • 只暂存文章 markdown 和必需的截图资产。仅对必须提交的被忽略文章资产使用 git add -f。
   • 避免暂存不相关的脏文件。
   • 当 workspace 指令要求时，任务后提交。

提示词风格规则

• 让提示词可移植。说 "derive colors from the page theme" 而不是点名一种颜色。
• 让尺寸自适应。说 "scale density to the layout and device" 而不是点名一个粒子数或卡片尺寸。
• 让交互清晰。描述它应有的手感、由什么驱动、测量了什么数据，以及它如何稳定下来。
• 让实现务实。点名可能的 API 和库，但让项目已有的技术栈占上风。
• 为动画密集的提示词包含 reduced-motion 和性能备注。
• 把截图当作动效思路的证据，而非确切的样式规格。

库指南

• 只在有助于 builder 选择实现路径时才点名一个库。优先用项目已有的技术栈，而不是加新依赖。
• 对简单的 hover、focus、透明度、transform、颜色、下划线、背景和循环装饰状态，用 CSS transitions/keyframes。
• 当不需要时间线控制时，对轻量的 reveal-on-scroll 用 IntersectionObserver 或 Web Animations API。
• 对 React 组件入场、布局过渡、共享元素过渡、错峰列表、模态框、抽屉和状态驱动的 UI 动效，用 Framer Motion 或 Motion One。
• 对复杂的滚动工作，用带 ScrollTrigger 的 GSAP：pinned 板块、scrubbed 时间线、多层 parallax、图片序列 scrubbing、遮罩文字显现、背景过渡，以及精确的板块交接。
• 仅当平滑滚动实质性支撑滚动编排时才用 Lenis；不要把它当作通用点缀来加。
• 简单的横向条带优先用 CSS scroll-snap。当需要 carousel 控制、循环、拖拽物理或响应式滑块逻辑时，用 Embla、Keen Slider 或 Swiper。
• 对需要设计师控制时间线的编排型矢量/界面动画，用 Rive 或 Lottie。离屏时暂停或简化它们。
• 仅对真正的 3D、shader、粒子或 canvas 场景用 Three.js/WebGL。封顶像素比、离屏暂停、移动端降低密度，并提供静态回退。
• 简单的 sticky 面板用 CSS position: sticky。仅当板块需要时间线控制、scrubbed 值或多元素交接时，才用 GSAP pinning。
• 每个动画方案都必须包含 prefers-reduced-motion、触屏设备行为、键盘/focus 行为和性能约束。