Vibe Coding 视觉词典：滚动、反馈、风格与高级效果

让 AI 做网页时，只说“高级、简洁、有设计感”通常不够。更有效的方式，是把需求拆成概念说明、适用场景、交互边界和可访问性要求。

以下词典适合当作网页需求清单。一次选少量效果，并明确移动端、键盘操作、性能和减少动态模式下的降级方案。

一、滚动与动作

1. Scroll Reveal元素进入视口时淡入或轻微上移，用来建立阅读节奏。
2. Parallax前景、中景和背景以不同速度移动，适合局部 Hero，不宜整页晃动。
3. Scroll Progress用顶部细线或侧边刻度显示长文阅读进度。
4. Scroll Snap让横向卡片或全屏章节停在预设位置，但不要劫持整个页面滚动。
5. Horizontal Scroll用于作品集、时间线和画廊，并提供方向提示和键盘焦点。
6. Infinite Scroll适合连续内容流；要配合加载、失败重试和滚动位置保存。
7. Marquee用 CSS 做缓慢信息带，关闭动画时仍要能阅读。
8. Hover Micro-interaction用轻微上移、边框变化和箭头移动确认可点击性。
9. Staggered Animation同组元素错峰出现，间隔要短，避免页面变慢。
10. Scroll-driven Animation让动画进度与滚动位置对应，并提供不支持浏览器的降级方案。

二、提示与加载状态

• Skeleton：占位结构尽量与最终内容尺寸一致，避免布局跳动。
• Lazy Loading：首屏以外的图片、视频和 iframe 延迟加载，并提前设置尺寸。
• Spinner：适合短请求；可计算的任务使用 Progress Bar。
• Loading Button：提交后禁用重复点击，并保留按钮宽度。
• Empty State：说明为什么为空，并给出下一步行动。
• Error / Retry：说明影响范围，提供重试和返回路径。
• Optimistic UI：只用于低风险操作，失败时必须恢复状态。
• Inline Validation：在字段附近给出具体错误，不要只显示“表单有问题”。

三、选择视觉风格

1. Minimalism用留白、字体层级和少量重点内容建立秩序。
2. Editorial借鉴杂志排版，强调大标题、图文比例、栏目节奏和引语。
3. Swiss Style用网格、无衬线字体、清晰对齐和有限颜色建立系统感。
4. Glassmorphism使用半透明面板和模糊，但必须保证文字对比度。
5. Neo-brutalism粗边框、高对比和硬阴影，适合实验型创作者网站。
6. Dark Mode重新设计对比度、边框、图片和原生控件，不是简单反色。
7. Monochrome / Duotone用一到两种颜色控制视觉系统。
8. Gradient Mesh / Grain适合 Hero 和背景，透明度要低，不能抢正文注意力。
9. Neumorphism只适合局部控制组件，必须保留清晰边界和 focus 状态。

四、高级效果要有边界

Custom Cursor、Magnetic Button、3D Tilt、Spotlight、Text Mask、Clip-path、Three.js 和 View Transitions 都可以增强体验，但不应成为完成任务的必要条件。

所有动画都要支持 prefers-reduced-motion: reduce。移动端和低性能设备应降低效果或使用静态回退图。视觉效果上线前，先给图片、字体、脚本和 WebGL 设定性能预算。