让 AI 做网页时，只说“高级、简洁、有设计感”通常不够。更有效的方式，是把需求拆成概念说明、适用场景、交互边界和可访问性要求。
以下词典适合当作网页需求清单。一次选少量效果，并明确移动端、键盘操作、性能和减少动态模式下的降级方案。
一、滚动与动作
-
Scroll Reveal元素进入视口时淡入或轻微上移，用来建立阅读节奏。
-
Parallax前景、中景和背景以不同速度移动，适合局部 Hero，不宜整页晃动。
-
Scroll Progress用顶部细线或侧边刻度显示长文阅读进度。
-
Scroll Snap让横向卡片或全屏章节停在预设位置，但不要劫持整个页面滚动。
-
Horizontal Scroll用于作品集、时间线和画廊，并提供方向提示和键盘焦点。
-
Infinite Scroll适合连续内容流；要配合加载、失败重试和滚动位置保存。
-
Marquee用 CSS 做缓慢信息带，关闭动画时仍要能阅读。
-
Hover Micro-interaction用轻微上移、边框变化和箭头移动确认可点击性。
-
Staggered Animation同组元素错峰出现，间隔要短，避免页面变慢。
-
Scroll-driven Animation让动画进度与滚动位置对应，并提供不支持浏览器的降级方案。
配图 1
配图 2
配图 3
配图 4
配图 5
二、提示与加载状态
-
Skeleton：占位结构尽量与最终内容尺寸一致，避免布局跳动。
-
Lazy Loading：首屏以外的图片、视频和 iframe 延迟加载，并提前设置尺寸。
-
Spinner：适合短请求；可计算的任务使用 Progress Bar。
-
Loading Button：提交后禁用重复点击，并保留按钮宽度。
-
Empty State：说明为什么为空，并给出下一步行动。
-
Error / Retry：说明影响范围，提供重试和返回路径。
-
Optimistic UI：只用于低风险操作，失败时必须恢复状态。
-
Inline Validation：在字段附近给出具体错误，不要只显示“表单有问题”。
配图 6
配图 7
配图 8
配图 9
三、选择视觉风格
-
Minimalism用留白、字体层级和少量重点内容建立秩序。
-
Editorial借鉴杂志排版，强调大标题、图文比例、栏目节奏和引语。
-
Swiss Style用网格、无衬线字体、清晰对齐和有限颜色建立系统感。
-
Glassmorphism使用半透明面板和模糊，但必须保证文字对比度。
-
Neo-brutalism粗边框、高对比和硬阴影，适合实验型创作者网站。
-
Dark Mode重新设计对比度、边框、图片和原生控件，不是简单反色。
-
Monochrome / Duotone用一到两种颜色控制视觉系统。
-
Gradient Mesh / Grain适合 Hero 和背景，透明度要低，不能抢正文注意力。
-
Neumorphism只适合局部控制组件，必须保留清晰边界和 focus 状态。
配图 10
配图 11
配图 12
配图 13
配图 14
四、高级效果要有边界
Custom Cursor、Magnetic Button、3D Tilt、Spotlight、Text Mask、Clip-path、Three.js 和 View Transitions 都可以增强体验，但不应成为完成任务的必要条件。
所有动画都要支持 prefers-reduced-motion: reduce。移动端和低性能设备应降低效果或使用静态回退图。视觉效果上线前，先给图片、字体、脚本和 WebGL 设定性能预算。
请为「项目」设计响应式网页。请分别说明滚动动作、加载状态、视觉风格和高级效果；每个效果都要给出适用场景、性能限制、键盘操作、移动端降级和 reduced motion 方案。不要为了动画隐藏内容或牺牲首屏加载。
配图 15
配图 16
配图 17
配图 18
配图 19