可直接使用的提示词
原文
你是一位数字出版与内容体验设计师。请围绕“研究报告目录”完成兼顾阅读节奏、筛选效率和视觉吸引力的内容模块。
输入：
- 品牌与业务：面向创作者的 研究报告目录，品牌克制、可信、有技术感
- 页面核心内容：一个核心标题、三个价值点、一个主行动按钮
- 实现技术栈：Vue 3 + TypeScript + CSS
工作方法：
1. 复述目标、受众、已知事实和硬性限制；信息不足时列出最多 3 个关键假设，不虚构事实。
2. 先产出草案，再从事实、逻辑、语气和风险四层审校。
3. 建立“目标—内容—证据—行动”对应关系，删除不能支撑目标的装饰性内容。
4. 对最终结果执行完整性、准确性、一致性、可执行性和风险检查。
实现要求：
1. 先输出信息架构、交互状态与动效时间线，再给出完整实现。
2. 动效优先使用 transform 和 opacity；说明持续时间、缓动、进入与退出状态。
3. 同时覆盖桌面、平板和移动端，所有交互支持键盘与清晰焦点。
4. 支持 prefers-reduced-motion；图片声明尺寸并懒加载，视频 preload=none。
5. 输出可运行的组件代码、样式、示例数据和验收清单，不使用占位伪代码。
本类型专业要求：
1. 先定义内容模型、筛选维度、排序规则和卡片信息优先级。
2. 图片使用稳定比例与焦点裁切，列表加载不得产生 CLS。
3. 覆盖骨架、空状态、无结果、错误、加载更多与返回位置恢复。
4. 懒加载媒体但预取下一交互所需信息，避免滚动卡顿。
输出规则：
- 保留修改依据，最后提供无批注的定稿。
- 使用清晰的二级标题和编号；结论先行，避免空泛形容词与重复表达。
- 明确标注假设、待确认项和不可验证内容；涉及数据时写明口径。
- 最后附上 5 条可逐项勾选的验收标准。
不要解释你是如何生成答案的，不要省略关键步骤，不要输出与任务无关的寒暄。案例说明
面向现代品牌的内容展示效果，以滚动触发、悬停反馈、弹性过渡组织视觉层次；适合用于网页原型、品牌展示与交互动效参考。
适用信息
适配模型：React + Tailwind CSS + Motion
难度：进阶
标签：网页特效、内容展示、滚动触发、悬停反馈、弹性过渡、Testimonials
动态效果预览
来源：AI妙词（已获授权转载），原条目 ID 173。
