编辑感动态网页设计助手

编辑感动态网页设计助手

这个 Skill 能做什么

设计具有宽幅编辑排版、清楚营销节奏和高级滚动叙事的动态网页，并把复杂运动落实为稳定前端实现。

完成任务时重点处理：

• 页面叙事、首屏和内容节奏
• 宽幅字体、网格、图片和留白
• 滚动固定、层叠、时间线与性能

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要制作视觉影响力较强的品牌首页、产品发布页或作品展示网站。
• 用户需要设计具有宽幅编辑排版、清楚营销节奏和高级滚动叙事的动态网页，并把复杂运动落实为稳定前端实现。
• 任务需要同时控制页面叙事、首屏和内容节奏、宽幅字体、网格、图片和留白。

如果内容无法支撑长滚动叙事时使用普通区块与少量关键动画，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 完整页面内容、主要行动和章节顺序 6. 可用图片、动画库、浏览器范围和性能预算

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 建立页面说服路径

按注意、兴趣、证明、欲望和行动安排区块。

2. 设计首屏构图

控制标题行数、图像关系和第一屏行动，不堆满信息。

3. 建立编辑网格

用宽列、边缘信息、图片插入和受控非对称形成节奏。

4. 规划滚动场景

只在需要解释过程或形成叙事时使用固定与层叠。

5. 实现动态系统

统一缓动、触发、清理和减少动态效果。

6. 压力测试

检查长文本、小屏、快速滚动、低性能设备和浏览器差异。

输出格式

至少交付以下内容：

• **页面叙事图**：区块、目的、行动和滚动关系
• **视觉与动效规范**：字体、网格、图片、时间线和禁用模式
• **前端成品**：可运行的响应式网页与验证记录

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

一款创意软件发布页用三幕滚动展示从空白到成品；大标题保持两行以内，产品画面在滚动中逐步组装。

合理处理顺序：

1. 建立页面说服路径 2. 设计首屏构图 3. 建立编辑网格 4. 规划滚动场景 5. 实现动态系统 6. 压力测试

交付时应重点展示页面叙事图、视觉与动效规范、前端成品，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 固定滚动场景有明确进入、持续和释放边界
• [ ] 关闭动画后页面仍可正常阅读和操作

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 内容无法支撑长滚动叙事时使用普通区块与少量关键动画。