html-to-interaction-prompts

HTML 转交互提示词

何时使用此技能

• 用户提供 HTML 文件、导出的页面、generated-page.html 或本地／线上参考页面，并要求提取其中的动画／交互时使用。
• 目标是撰写一篇有截图佐证的文章，其中包含多个可复用、与品牌无关的交互提示词（核心思路、技术、实现、交互、效果）。
• 用于每日 UI 灵感采集工作流，该工作流要求恰好采集 5 个灵感，每个灵感都包含静态图片、嵌入的本地 MP4、动态帧、来源元数据，以及一条详细的 AI 构建器提示词。
• 用于按提示词捕获和整理截图／视频，包括为线上网站或 Framer 模板截取整页滚动截图，并按连续区段裁剪。
• 用于确定在提示词中建议使用哪种动画库或 API（CSS、IntersectionObserver、Framer Motion、GSAP ScrollTrigger、Lenis、Embla/Swiper、Rive/Lottie、Three.js），或创建／更新目标文章并仅提交预期资源。
• 不要将此技能用于一般 Web 开发、不相关的内容创作或整个代码库范围的提交工作——这些任务应交由标准开发工作流处理；此技能专用于将 HTML 参考页面转化为交互提示词文章。

目标

将 HTML 参考页面转化为可用于文章的提示词包：识别重要交互，捕获合适的视觉证据，撰写灵活的提示词，在每个提示词标题下插入截图，验证文章的渲染效果，并且只提交预期文件。

每日 UI 灵感采集规范

在将此技能用于每日 UI 灵感工作流时：

• 每篇每日灵感文章必须恰好包含 5 个灵感，而不是 20 个。
• 不要提交截图画廊，也不要附加 20 条浅显的提示词。
• 这 5 个灵感中的每一个都必须包含一张本地代表性静态图、一段嵌入式本地 MP4 视频、多张本地截图或动态帧、动态/交互说明、来源元数据，以及一条极其详细的 AI 构建器提示词。
• 如果来源是 Framer 模板或任何其他实时网站，请在浏览网站本身的过程中滚动页面，记录实际的落地页或预览 URL。市场页面封面图、缩略图、截图平移或静态素材幻灯片，都不能作为实时视频证据。
• 对于 Framer，请检查市场详情页中的 Full Live Preview 或嵌入的 previewUrl，将该 URL 保存为 pageUrl，并录制该页面的 MP4。
• 对于实时网站，保存一张涵盖完整落地页滚动内容的长图。然后从这张完整图片中逐段截取各个版块，确保文章中既包含整页截图，也包含每个版块的单独截图。
• 各版块裁剪图必须与整页图片连续衔接，并完整保留像素。不得漏掉版块之间的像素，不得用任意视口截图替代版块截图；只有在粘性元素导致无法避免时才允许重叠。
• 根据页面中有意义的版块数量，尽可能多地提供版块裁剪图。至少包含 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 中。
• 从实时网站视频中提取多个动态帧。这些帧应展示滚动过程中的真实页面状态，而不是对同一张封面图重复裁剪。
• 如果实时采集受阻，优先用其他实时网站替换该候选项。只有在无法替换或来源仅包含图片时，才从静态证据创建本地备用视频，并在 content.md 和 manifest.json 中说明使用备用方案的原因。
• 每个灵感的提示词都必须足够长，可以直接粘贴到 AI 构建器中。内容应包括参考边界、反模式、核心理念、设计系统、布局规则、动态系统、逐版块结构、转化设计/页脚、响应式行为、无障碍、性能和减少动态效果的指导。
• 每条提示词都必须逐版块描述落地页。涵盖全局框架、页眉/导航、hero、信任背书条、功能/服务模块、产品/演示/媒体版块、流程/工作方式、图库/案例研究/作品版块（如有）、客户评价/社会证明、定价/套餐/比较版块（如有）、常见问题、最终行动号召、页脚和移动端行为。
• 对于每个主要版块，都要说明其用途、布局结构、视觉细节、动画、交互状态、滚动行为、建议使用的实现库/API，以及减少动态效果时的替代方案。
• 对于 Framer/实时网站，每条提示词都必须包含 Live-site evidence 说明，明确静态图、MP4 和动态帧均采集自实际的 pageUrl，而非封面图。
• 清单必须包含 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 粒子场、卡片悬停时的光标辉光 或 滚动行为与章节显现系统。

3. 编写可复用的提示词。

   • 提示词要足够灵活，适用于任何品牌、配色系统、卡片尺寸、布局或内容模型。
   • 聚焦核心理念、技术、实现方式、交互行为、滚动编排、性能和无障碍。
   • 除非用户明确要求精确复现，否则避免写死具体值。不要将提示词限定为某一种颜色、尺寸、阈值、DOM id、卡片类型或资源。
   • 优先采用以下结构：
     • 核心理念
     • 技术
     • 实现方式
     • 交互
     • 成功标准
   • 对于落地页，使用 Section anatomy 区块扩展结构。每个章节都要包括：
     • 目的：该章节在故事叙述、建立信任或转化路径中必须发挥什么作用。
     • 布局：网格、列布局行为、媒体位置、粘性区域、卡片结构、CTA 位置、间距以及响应式折叠。
     • 视觉细节：排版、颜色表现、表面样式、边框、阴影、媒体处理、图标和内容密度。
     • 动画：初始状态、触发条件、缓动、时长、交错、变换原点、不透明度、模糊、裁剪／蒙版、视差深度、循环行为和最终静止状态。
     • 交互：悬停、焦点、轻触／点击、激活／按下、光标、手风琴、轮播、表单、键盘、加载、禁用和错误状态。
     • 滚动交互：显现阈值、粘性／固定停留节点、随滚动进度变化的数值、视差图层、章节衔接、滚动进度、背景／导航变化以及下方章节的显现。
     • 库／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 灵感文章，请为每条提示词捕获多张截图或动态帧。
   • 对于在线网站，请捕获网站自身的首屏视图以及后续滚动状态。不要将市集封面图用作动态帧来源。
   • 每次滚动到捕获位置后，等待 2 秒再截取截图或帧，以便延迟加载的媒体、显现动画、粘滞状态变化和滚动触发的过渡效果稳定下来。
   • 对于在线网站，请将整页滚动截图捕获为一张长图，然后逐个版块裁剪。整页图片是版块裁剪图的事实来源。
   • 根据落地页实际包含的版块，将页面裁剪成尽可能多的版块图片，包括首屏、每个中间版块和页脚。确保裁剪边界精确且连续，相邻版块之间不遗漏任何像素行。
   • 创建清单时，记录 fullPageImage 和 sectionImages 元数据。对于每张版块图片，请在可用时包含版块标签、文件路径、来源整页图片、y-start、y-end 和高度。
   • 在文章中，按照既定结构展示整页图片和版块图片：使用 ### Full-Page And Section Evidence、整页截图的普通 Markdown 图片、#### Section Crops，然后按页面顺序展示各版块的普通 Markdown 图片。不要在每张图片下方显示 y-start/y-end 裁剪元数据，不要使用 Markdown 表格或原始 HTML 网格，也不要将裁剪图列成文件名清单。
   • 对于常规的单参考提示词包，每条提示词至少捕获一张显示交互发生位置的截图。
   • 必要时，在捕获前触发交互：移动指针以呈现光标效果、悬停卡片、滚动到固定版块，或等待画布/粒子动画。
   • 将图片保存在目标文章文件夹中，并使用描述性文件名，例如 reference-01-hero-particles.png。
   • 将每张截图紧接在对应的提示词标题下方。

5. 按需录制视频。

   • 用户要求提供视频、动态研究或每日灵感采集时，为每项灵感或交互录制一段本地 MP4 短视频。
   • 对于 Framer/在线网站，请通过实际的 pageUrl 慢速滚动录制：首屏、版块显现效果、粘滞导航、视差、跑马灯/轮播循环、明显的悬停状态以及页面下方内容。
   • 不要用封面图制作 Ken Burns 平移、缩放或幻灯片，并将其当作网站动态效果。
   • 在文章中使用本地相对路径直接嵌入视频。
   • 从视频中提取具有代表性的帧，让读者无需播放视频也能快速浏览。
   • 如果无法录制在线视频，请记录尝试访问的 URL 和原因。对于 Framer/在线网站，如果可能，请更换候选网站，而不是悄然改用封面图。

6. 创建或更新文章。

   • 如果用户指定了现有文章，请更新该文章的 content.md。
   • 如果文章不存在且任务位于文章/内容工作区，请在 articles/YYYY-MM-DD-.../content.md 下创建一个带日期的文章文件夹。
   • 本地 Markdown 图片路径必须相对于文章文件夹。
   • 用户要求创建文章时，不要只留下单独的提示词文件作为唯一交付内容。

7. 验证。

   • 对修改过的 Markdown 运行 git diff --check。
   • 确认所有引用的截图和视频文件都存在且非空。
   • 对每日 UI 灵感文章，验证恰好有 5 个灵感、5 个嵌入视频或明确标注的备用视频，并且每个灵感至少有 4 张截图或视频帧图片。
   • 对每日灵感中的实时网站条目，验证存在一张完整页面滚动截图，且各分区截图按从上到下的顺序覆盖首屏、所有有意义的中间分区和页脚。
   • 如果有分区截图坐标，验证它们相对于完整页面图片是连续的。
   • 验证每个实时网站条目的 content.md 都遵循既定的完整页面／分区截图结构，使用渲染后的 Markdown 图片，且不包含文本链接、文件名列表、Markdown 表格、原始 HTML 网格、Local Evidence 标题或裁剪坐标说明。
   • 对 Framer／实时网站灵感，验证每个条目都有 pageUrl、websiteScrollVideo 等实时网站捕获类型、实际录制自页面的 MP4，且没有封面图片备用方案的措辞。
   • 使用 ffprobe 确认 MP4 文件可读取，然后对每篇文章至少抽查一个 Framer 视频，确保视频中能看到真实网站滚动。
   • 如果 Content 应用／服务器正在运行，通过其 UI 或 API 验证文章，并滚动足够远，以加载延迟加载的图片。
   • 如果验证受阻，报告本地检查的内容。

8. 精简提交。

   • 仅暂存文章 Markdown 和所需的截图素材。只有必须提交但被忽略的文章素材才使用 git add -f。
   • 避免暂存无关的脏文件。
   • 如果工作区说明要求任务完成后提交，则完成任务后提交。

提示词风格规则

• 让提示词具有可移植性。使用“根据页面主题提取颜色”，而不是指定某种颜色。
• 让尺寸具有适应性。使用“根据布局和设备调整密度”，而不是指定粒子数量或卡片尺寸。
• 清楚描述交互。说明交互应带来的感受、由什么驱动、测量哪些数据，以及如何逐渐稳定下来。
• 让实现切实可行。指出可能使用的 API 和库，同时优先遵循项目现有技术栈。
• 对动画密集型提示词，补充减少动态效果和性能方面的说明。
• 将截图作为动态效果创意的佐证，而不是精确的样式规范。

库使用指南

• 仅在有助于构建者选择实现路径时才提及库。优先使用项目现有技术栈，而不是添加新的依赖项。
• 对于简单的悬停、焦点、透明度、变换、颜色、下划线、背景和循环装饰状态，使用 CSS 过渡或关键帧。
• 无需控制时间线时，使用 IntersectionObserver 或 Web Animations API 实现轻量的滚动显现效果。
• 对于 React 组件的进入动画、布局过渡、共享元素过渡、交错列表、模态框、抽屉和状态驱动的 UI 动效，使用 Framer Motion 或 Motion One。
• 对于复杂的滚动效果，例如固定区块、随滚动播放的时间线、多层视差、图像序列随滚动播放、遮罩文字显现、背景过渡和精确的区块衔接，使用 GSAP 和 ScrollTrigger。
• 仅当平滑滚动能实质性地支持滚动编排时才使用 Lenis；不要将其作为通用润色工具添加。
• 对于简单的水平条带，优先使用 CSS scroll-snap。需要轮播控制、循环、拖动惯性或响应式幻灯片逻辑时，使用 Embla、Keen Slider 或 Swiper。
• 对于需要设计师控制时间线的矢量或界面动画，使用 Rive 或 Lottie。页面滚动到视口外时，暂停或简化动画。
• 仅对真正的 3D、着色器、粒子或画布场景使用 Three.js/WebGL。限制像素比，页面滚动到视口外时暂停，在移动设备上降低密度，并提供静态回退方案。
• 简单的固定面板使用 CSS position: sticky。只有当区块需要时间线控制、随滚动变化的数值或多元素衔接时，才使用 GSAP 固定区块。
• 每个动画方案都必须说明 prefers-reduced-motion、触摸设备行为、键盘/焦点行为和性能限制。

参考资料

• 上游来源：MengTo/Skills — html-to-interaction-prompts
• agents/openai.yaml — 此技能附带的 OpenAI Agent 接口元数据