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、每个中间板块和页脚。保持裁剪边界确切且连续，使相邻板块之间不跳过任何像素行。

提示词风格规则

• 让提示词可移植。说 "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 行为和性能约束。