适合谁来做
需要为落地页、产品功能卡或加载状态增加适度动效的独立开发者和小网站团队。
能写和调试 HTML / CSS / JavaScript，懂响应式与键盘交互；先取得客户现有页面的布局和文案。
Prompt Motion：动效节奏与提示词结构参考
Claude 或代码助手：原创 HTML / CSS 实现
浏览器开发者工具：视口、键盘与 prefers-reduced-motion 检查
查找适合这份样品的 AI 工具你要交付什么
先把范围说清楚，让客户知道会收到什么。
- 一个限定范围的动效页面模块与静态稿
- 可运行的 HTML / CSS / JavaScript 工程和接入说明
- 390px / 1440px、键盘与减少动画模式的验收记录
我的行动单
把这一份指南变成你的交付计划。行动单仅保存在当前浏览器，不会上传或跨设备同步。
选定客户与范围，再逐项完成下方的样品行动和交付验收。
从样品开始行动
这是一份起步方案，可按你的经验调整节奏。想记录进度？先建立行动单。
- 01
把视频节奏转成页面需求
从 Prompt Motion 记录一个入场顺序或图形过渡的参考，保留作者链接。确认要改善的是首屏阅读、状态反馈还是功能解释，只做一个模块；写明触发条件、可点击区域和静态降级画面。
完成标志一个模块的静态稿、触发规则与参考记录。 - 02
在自己的页面里实现最小动效
将自己的布局、文案和运动规则交给代码助手，先用 HTML / CSS 实现可操作版本。逐个测试按钮与键盘焦点，再加动画；避免为了展示效果重做整站，用明确开关控制循环与自动播放。
完成标志可运行模块与运动参数说明。 - 03
核对移动端与减少动画模式
在 390px 与 1440px 视口检查溢出、点击和文本阅读，用浏览器模拟 prefers-reduced-motion: reduce 并提供静态或弱化动画版本。检查加载、控制台和交互反馈，将工程与接入范围交给客户。
完成标志桌面 / 移动与减少动画检查记录。
找到首批客户
选客户现有的一张功能卡做原型，询问信息是否更容易理解，再讨论接入范围。
发布自己的可操作示例和减少动画版本，邀请开发者反馈接入难点，先接一个模块。
交付验收清单
用客户能检查的结果验收，而不是只看生成速度。先建立行动单，即可逐项勾选。
做一次小试验，再决定下一步
下面是建议的试验目标，不是已经验证的业绩。
- 先试这些
- 做 1 个原型，让 3 位目标用户完成同一个页面任务。
- 记录什么
- 记录任务完成、文字可读性反馈、接入工时和动效引起的问题；不将样品反馈视为转化率提升。
- 何时停下
- 动效遮挡操作、妨碍阅读或没有明确需求时，先交付静态模块，再决定是否增加运动。
开始前，读读这些经验提醒 3 条
- 网页原型是本站对作品库方法的延伸，Prompt Motion 本身不生成网页。
- 视频能播放不代表同样动效适合网页；交互、性能与减少动画模式要单独验收。
- 不要照搬作者完整代码或提示词，先确认许可，再使用自己的布局与文案。
给你的第一份提示词
用于起草和梳理；交付前仍需按上面的清单人工核验。
在行动单填写客户或交付范围后，可直接套用到提示词。
为【页面中的一个模块】实现原创动效原型。用户任务：【填写】；我的布局与文案：【填写】；触发条件：【填写】；动画顺序与停留：【填写】。先给静态 HTML / CSS，确认后添加最少的运动。按钮可点击、键盘焦点可见，在 390px 和 1440px 都可阅读。支持 prefers-reduced-motion: reduce，使用完整静态或弱化动画版本。输出独立工程、参数说明和验收步骤，不加入跟踪脚本或未授权素材。
这一单，值得做吗？
以下为可修改的假设值，非市场报价。总工时包含获客、沟通、制作和返工。
报价 − 模型与素材 − 其他直接成本；按输入总工时计算，未计税费与固定开支。
点击保存可建立行动单，留存本次试算；示例值不会自动写入行动单。
原文与整理说明
Prompt Motion · 作品与提示词参考库参考官网配对展示作品、Prompt 与 Skill 的方法；网页实现与接入流程为本站扩展，减少动画行为参考 MDN 文档。
参考 Prompt Motion 的作品与 Prompt / Skill 配对方式；以下提示词、客户、交付和验收方案为本站原创扩展，尚未实测生成效果或客户收益。官网声明视频与提示词归原作者所有，公开展示不等于统一商用授权。
整理日期：2026-10-07