Vibe Coding 视觉词典（下篇）：滚动动作、提示加载、视觉风格与高级效果

上篇解决了四个问题：

• 页面布局 Layout：页面上的内容怎么排。
• 页面结构 Page Structure：用户先看到什么，接着看到什么。
• 导航 Navigation：用户如何移动、跳转和切换。
• 组件 UI Components：用户如何点击、展开和输入。

Adrian Punk@AdrianPunk115

X 引用

Vibe Coding 视觉词典（上篇）：布局、页面结构、导航与常用组件

这篇文章以 Punk 的个人网站为例，整理 Vibe Coding 中常见的网页视觉词汇，涵盖页面布局、页面结构、导航与切换、常用组件四类概念，每个词条包含概念说明、适用场景和可直接复制给 AI 的提示词。

阅读完整整理 →

下篇继续解决另外四个问题：

• 滚动与动作 Scroll & Motion：内容如何出现，页面如何建立节奏。
• 提示与加载 Feedback & Loading：等待、成功、失败和空白状态如何反馈。
• 视觉风格 Visual Styles：网页整体看起来属于哪一种设计语言。
• 高级效果与体验 Advanced Effects & Quality：如何使用 3D、过渡和高级交互，同时兼顾性能与可访问性。

每个词条只保留三部分：概念说明、适用场景，以及可以直接复制给 AI 的提示词。

第五章：滚动与动作 Scroll & Motion

滚动与动作决定页面如何“活起来”。它回答的是：内容何时出现、用户滚动时会发生什么，以及页面怎样在不打断阅读的前提下建立节奏。

41. 滚动出现 Scroll Reveal

元素在进入视口时逐渐出现，常见变化包括淡入、轻微上移或缩放。它的作用是建立阅读节奏，而不是让每个元素都表演一次。

适合： 长页面、个人介绍、项目案例、数据区块、章节过渡。

为 Punk 的个人网站添加 Scroll Reveal。
标题、正文、项目卡片进入视口时淡入并向上移动 16px，动画时长控制在 400—600ms；
同一组卡片使用轻微错峰，不要让整页所有元素同时动画；
用户启用 prefers-reduced-motion 时取消位移动画，只保留即时显示或轻微淡入。

42. 视差滚动 Parallax

前景、中景和背景以不同速度移动，制造空间深度。效果越大越容易干扰阅读，因此适合用在局部视觉，而不是整页持续晃动。

适合： Hero、品牌故事、作品封面、沉浸式章节、视觉型个人网站。

为 Punk 的首页 Hero 添加轻量 Parallax。
背景抽象山形移动速度最慢，中层半透明网页面板使用中等速度，前景标题保持接近正常滚动速度；
移动距离控制在较小范围，禁止大幅缩放和快速位移；
移动端降低效果，reduced motion 模式下完全关闭视差。

43. 阅读进度条 Scroll Progress Indicator

根据页面滚动位置显示阅读进度，常见形式是顶部细线、侧边刻度或圆形百分比。它告诉用户还剩多少内容。

适合： 推特长文落地页、博客、案例研究、教程、文档。

在 Punk 的长篇文章页顶部添加 Scroll Progress Indicator。
使用 3px 深绿色进度线，从左向右反映当前阅读百分比；
导航栏保持 Sticky，进度条位于导航底部；不要遮挡内容，并使用 requestAnimationFrame 或 CSS Scroll-driven Animation 实现平滑更新。

44. 滚动吸附 Scroll Snap

用户滚动后，内容会自动停在预设位置，像翻页一样对齐到某一张卡片或某一个完整章节。

适合： 横向作品集、全屏章节、移动端卡片浏览、产品故事。

为 Punk 的精选作品区添加 CSS Scroll Snap。
横向容器使用 scroll-snap-type: x mandatory，每个项目卡片使用 scroll-snap-align: center；
允许触摸滑动和触控板滚动，保留自然惯性；
不要劫持整个页面滚动，桌面端同时提供上一项和下一项按钮。

45. 横向滚动 Horizontal Scroll

内容沿水平方向浏览，可以显示一排项目、时间线或视觉画廊。它应当有明确的方向提示，否则用户容易不知道还能继续滑动。

适合： 项目画廊、时间线、客户 Logo、移动端作品浏览、横向叙事。

为 Punk 的项目档案创建 Horizontal Scroll。
桌面端展示 3.5 张卡片，让下一张卡片露出一部分作为继续浏览提示；
支持触控板和触摸滑动，并提供左右箭头；
卡片保持键盘可聚焦，手机端使用自然横向滚动。

46. 无限滚动 Infinite Scroll

用户接近列表底部时自动加载下一批内容，不需要手动翻页。它适合连续消费内容，但不适合需要精确定位和返回某一页的任务。

适合： 动态内容流、灵感墙、AI 图片库、社交列表、探索页。

为 Punk 的 AI 灵感流实现 Infinite Scroll。
每次加载 12 个项目，在列表底部设置 sentinel，并使用 IntersectionObserver 在 sentinel 接近视口时请求下一页；
加载期间显示 Skeleton；加载失败时显示 Retry 按钮；
保存滚动位置，避免返回页面时丢失当前位置。

47. 跑马灯 Marquee

文字、Logo 或标签持续横向移动，形成动态信息带。现代网页通常使用 CSS 动画实现，而不是旧式 marquee 标签。

适合： 客户 Logo、技能列表、活动信息、品牌口号、作品标签。

在 Punk 首页的 Hero 下方添加一个循环 Marquee，内容为 Design、Frontend、AI Prototyping、Writing、Creative Tools；
两组内容无缝衔接，移动速度缓慢；鼠标悬停时暂停；
内容必须在动画关闭时仍可阅读，reduced motion 模式下改为普通换行标签列表。

48. 悬停微交互 Hover Micro-interaction

鼠标经过按钮、链接或卡片时发生细小变化，例如上移、边框加深、箭头移动或图片轻微放大。微交互用于确认“这个东西可以点”。

适合： 项目卡片、按钮、链接、导航项、图片画廊。

为 Punk 的项目卡片添加 Hover Micro-interaction。
鼠标进入时卡片上移 4px，边框由浅灰变为深绿色，封面图轻微放大到 1.03，右下角箭头向右移动 4px；
动画使用 180—240ms ease-out；
键盘 focus-visible 状态提供同等清晰反馈，不要只依赖 hover。

49. 错峰动画 Staggered Animation

同一组元素不是同时出现，而是按很短的间隔依次进入。它能强化顺序和节奏，但间隔过长会让页面显得迟钝。

适合： 卡片网格、菜单项、数据列表、Logo 墙、功能模块。

为 Punk 的四张能力卡片添加 Staggered Entrance。
第一张进入视口后开始动画，其余卡片每隔 70ms 依次淡入并上移 12px；总等待时间不要超过 300ms；
重复滚动时不要反复播放；reduced motion 模式下让所有卡片直接显示。

50. 滚动驱动动画 Scroll-driven Animation

动画进度由滚动位置决定，而不是由固定时间决定。例如滚动到章节中段时，进度线正好走到一半。

适合： 进度图、产品拆解、数字叙事、背景变化、章节动画。

在 Punk 的项目案例页使用 Scroll-driven Animation。
滚动经过 Process 章节时，左侧进度线随章节阅读进度增长，右侧三个原型面板依次从低透明度变为完全可见；
优先使用 CSS animation-timeline 和 view()，为不支持的浏览器提供 IntersectionObserver 降级方案，并尊重 reduced motion。

第六章：提示与加载 Feedback & Loading

提示与加载决定用户等待时看到什么、出错时怎么办、操作完成后如何确认。它回答的是：系统现在处于什么状态，以及用户下一步应该做什么。

51. 骨架屏 Skeleton Screen

真实内容加载前，先显示与最终布局相似的灰色占位结构。它不能让网络变快，但能减少页面突然跳动和空白等待感。

适合： 项目卡片、文章列表、Dashboard、详情页、图片画廊。

为 Punk 的项目列表设计 Skeleton Screen。
骨架结构必须与最终卡片尺寸一致，包含封面占位、标题线、两行文字和标签占位；
使用低对比度灰绿色，不要显示虚假文字；
内容加载完成后使用短暂淡入替换，避免布局位移。

52. 懒加载 Lazy Loading

首屏之外的图片、视频或模块在接近视口时才加载，减少初始页面需要下载的资源。

适合： 长页面、图片库、作品集、嵌入视频、文章推荐区。

为 Punk 的作品集实现 Lazy Loading。
首屏 Hero 图片正常加载，不要设置 lazy；
首屏以下的 img 和 iframe 使用 loading=\"lazy\"；为图片预先设置 width、height 或 aspect-ratio，避免布局跳动；
重要项目封面提供合适的 srcset 和 sizes，不要把所有资源都延迟加载。

53. 加载转圈 Loading Spinner

用循环旋转图标表示系统正在处理，但不说明还需要多久。它只适合等待时间短、进度不可预测的任务。

适合： 短请求、局部刷新、按钮处理、图片生成准备阶段。

Punk 网站提交短请求时显示 Loading Spinner。
Spinner 只出现在正在更新的局部区域，不要遮罩整个页面；
同时显示“正在加载项目”文字；
超过 8 秒后追加更明确的等待说明和取消入口；
动画在 reduced motion 模式下改为静态状态图标。

54. 进度条 Progress Bar

显示任务已经完成多少，适合能够计算进度的上传、生成或多步骤任务。确定型进度条比不断转圈更能建立预期。

适合： 文件上传、AI 生成、导出、数据同步、安装流程。

为 Punk 的 AI 图片导出任务添加 Determinate Progress Bar。显示 0—100% 进度、当前阶段名称和取消按钮；
进度条只向前移动，不要伪造倒退；
完成后切换为 Success State，失败后保留当前进度并显示 Retry；使用 role=\"progressbar\" 提供可访问状态。

55. 加载按钮 Loading Button

用户点击提交后，按钮进入处理中状态，通常禁用重复点击，并把原文字替换为加载图标和状态说明。

适合： 保存、发布、登录、生成、上传、表单提交。

Punk 的联系表单点击 Send Message 后，把按钮切换为 Loading Button：禁用重复提交，文字改为“Sending…”并显示小型 Spinner；
保持按钮宽度不变，避免界面跳动；
请求成功后显示“Sent”，失败后恢复可点击状态并显示错误原因。

56. 空状态 Empty State

列表或页面没有内容时的正式界面，而不是一片空白。好的空状态会解释为什么为空，并给出下一步行动。

适合： 新用户后台、搜索无结果、收藏夹、项目列表、通知中心。

为 Punk 的新项目页面设计 Empty State。
中心显示一个简洁抽象图形、标题“还没有项目”、一句说明和“创建第一个项目”按钮；
如果是筛选导致无结果，改为“没有匹配的项目”，并提供清除筛选按钮；不要使用消极或责备用户的文案。

57. 错误状态 Error State

任务失败后明确告诉用户发生了什么、哪些内容受到影响，以及是否需要重新操作。错误状态不应只有红色或一个错误代码。

适合： 表单失败、加载失败、权限问题、断网、404 与 500 页面。

为 Punk 的项目加载失败设计 Error State。
显示清晰标题“项目暂时无法加载”、简短原因、Retry 按钮和返回项目列表链接；保留已经加载的其他内容，不要清空整个页面；
错误信息使用图标、文字和颜色共同表达，并通过 role=\"alert\" 或合适的 live region 通知辅助技术。

58. 重试状态 Retry State

错误发生后提供重新执行操作的入口，并在重试过程中显示新的加载状态。它是错误恢复流程，而不仅是一颗按钮。

适合： 网络请求、图片上传、AI 生成、同步任务、列表加载。

Punk 的图片上传失败后显示 Retry State。
保留失败文件的缩略图和文件名，标出“上传失败”，提供 Retry 和 Remove 两个操作；
点击 Retry 后只重新上传该文件，并切换为进度状态；
成功后替换为完成状态，不要要求用户重新选择所有文件。

59. 乐观更新 Optimistic UI

用户操作后，界面先假设操作会成功并立即更新，再在后台发送请求。失败时需要撤销变化并说明原因。

适合： 点赞、收藏、简单状态切换、排序、轻量编辑。

Punk 的项目收藏按钮使用 Optimistic UI。
点击后立刻把图标切换为已收藏并更新计数，同时后台发送请求；
请求失败时恢复原状态，显示非阻塞错误提示并提供重试；
不要把支付、删除账号等不可逆或高风险操作做成乐观更新。

60. 行内验证 Inline Validation

用户输入时或离开字段后，在输入框附近显示具体错误，而不是提交后只在页面顶部说“表单有问题”。

适合： 注册、联系表单、支付、设置、搜索条件。

为 Punk 的 Contact Form 添加 Inline Validation。
邮箱字段在 blur 后检查格式，错误信息显示在输入框下方并说明如何修正；输入正确后显示简洁确认状态；
不要在用户输入第一个字符时立刻报错；提交失败时把焦点移动到第一个错误字段，并在顶部提供错误摘要。

第七章：视觉风格 Visual Styles

视觉风格决定页面给人的第一印象。它回答的是：页面看起来克制还是张扬、像杂志还是像工具、是轻盈通透还是厚重直接。风格必须服务内容，而不是把所有流行效果堆在一起。

61. 极简主义 Minimalism

减少非必要颜色、装饰和组件，通过留白、字体层级和少量重点内容建立秩序。极简不等于什么都没有，而是每个元素都有理由存在。

适合： 个人主页、设计师作品集、产品介绍、写作网站、高端品牌。

为 Punk 设计一个 Minimalist Portfolio。
使用米白背景、黑色正文和单一深绿色强调色，限制字体、圆角和阴影种类；首页只保留姓名、身份、精选项目和联系入口；
通过大留白和清晰排版建立层级，不要加入多余渐变、发光效果或装饰图标。

62. 编辑杂志风 Editorial Design

借鉴杂志和出版物的排版方式，强调大标题、图文比例、栏目节奏、页码和引语。

适合： 个人品牌、文章站、摄影集、案例研究、文化内容。

为 Punk 的 Journal 设计 Editorial Layout。
使用超大文章标题、窄正文栏、跨栏图片、章节编号、首字下沉和 pull quote；正文保持舒适行长和行高；
不要把每段内容都放进卡片，让页面更接近现代独立杂志。

63. 瑞士风 Swiss Style

强调网格、无衬线字体、客观排版、清晰对齐和有限颜色。它通常看起来理性、精确、系统化。

适合： 设计工作室、建筑网站、作品目录、品牌系统、活动海报页。

为 Punk 的作品索引使用 Swiss Style。
采用严格的 12 列网格、左对齐无衬线字体、明显编号和细分隔线；
颜色仅使用米白、黑和深绿色；
项目信息按年份、类别和角色对齐排列，避免装饰性手写字体与复杂阴影。

64. 玻璃拟态 Glassmorphism

使用半透明面板、背景模糊、细边框和层叠关系，营造玻璃悬浮感。玻璃面板必须有足够对比度，不能让文字融进背景。

适合： AI 产品、科技首页、数据面板、空间化 Hero、控制中心。

为 Punk 的 AI 工具首页添加克制的 Glassmorphism。
深绿色抽象背景上叠加两到三层半透明面板，使用 backdrop-filter: blur(16px)、低透明白色背景和细亮边框；
正文区域保持高对比度，不要让所有卡片都透明，也不要使用过度霓虹发光。

65. 新野兽派 Neo-brutalism

使用粗边框、高对比配色、直接排版和明显阴影，保留原始感，但比早期网页野兽派更系统、更适合产品界面。

适合： 创作者网站、实验产品、活动页、年轻品牌、独立工具。

为 Punk 的实验项目页使用 Neo-brutalist Style。
采用粗黑边框、硬阴影、大字号标题和深绿色重点按钮；
组件保持清晰网格与可读性

66. 深色模式 Dark Mode

使用深色背景与浅色文字，降低暗环境中的强光感。它不是简单把黑白反转，而是要重新调整对比度、阴影、边框和图片。

适合： 开发者工具、创作后台、媒体产品、夜间阅读、AI 应用。

为 Punk 网站实现完整 Dark Mode。使用 prefers-color-scheme 读取系统偏好，并提供手动切换和本地保存；
深色背景避免纯黑，正文使用柔和浅灰，深绿色调整为更亮的可见色；表单、滚动条和原生控件同步 color-scheme；
检查两种模式下的对比度和图片表现。

67. 单色与双色 Monochrome / Duotone

用一种主色或两种颜色控制整个视觉系统，通过明度、面积和材质变化建立层次。

适合： 品牌主页、摄影网站、作品目录、专题页、极简产品。

为 Punk 的个人网站使用 Monochrome + Duotone 视觉系统。
全站以米白、黑和深绿色构成，项目图片转换为低饱和绿色双色调，
鼠标悬停后恢复少量原色；保证文字、边框和按钮层级清楚，不要让所有元素使用相同深浅。

68. 网格渐变 Gradient Mesh

多个柔和色块在页面中交融，形成具有空间感的抽象背景。它比普通线性渐变更自然，但容易抢走正文注意力。

适合： Hero 背景、AI 产品、活动页、抽象个人品牌、登录页。

为 Punk 首页 Hero 创建低饱和 Gradient Mesh 背景。
使用米白、灰绿和深绿色的柔和色团，边缘模糊并缓慢漂移；
文字区域保持相对平静，确保标题对比度；动画幅度很小，移动端使用静态背景，reduced motion 模式下关闭漂移动画。

69. 颗粒与噪点 Grain / Noise Texture

在纯色或渐变上叠加细小颗粒，减少数字画面的塑料感，增加印刷、胶片或纸张质感。

适合： 编辑设计、品牌网站、抽象背景、海报式 Hero、作品封面。

在 Punk 网站的米白背景和深绿色 Hero 上添加非常轻的 Grain Texture。
噪点透明度保持低，使用可重复的小型纹理或 CSS/SVG filter，不影响文字清晰度；不要给表单和正文区域增加明显颗粒；
移动端控制纹理资源大小，避免使用超大背景图片。

70. 新拟态 Neumorphism / Soft UI

通过同色系的亮暗阴影，让按钮和面板像从背景中凸起或凹下。它视觉柔和，但边界和可访问性容易不足。

适合： 小型控制组件、播放器、实验界面、展示型仪表盘。

为 Punk 的实验性音乐控制器使用局部 Neumorphism。
仅对播放、音量和模式按钮使用同色亮暗阴影，保留清晰文字、图标和 focus outline；
主要导航、表单与长文本不要使用新拟态；按下状态需要通过阴影、位置和颜色共同表达。

第八章：高级效果与体验 Advanced Effects & Quality

高级效果不等于更复杂。真正成熟的网页会同时考虑表现力、可访问性、兼容性和性能。它回答的是：哪些效果值得做，以及怎样避免效果反过来伤害体验。

71. 自定义光标 Custom Cursor

用自定义圆点、文字或预览替代或补充系统光标，常用于展示当前可执行动作，例如 View、Drag 或 Open。

适合： 创意作品集、图片画廊、实验网站、拖拽区域。

为 Punk 的桌面作品画廊添加 Custom Cursor。
默认显示小型绿色圆点，悬停项目图片时扩展并显示“View”，进入横向画廊时显示“Drag”；
保留原生光标作为可用后备，触屏设备不启用；不要让自定义光标产生明显延迟，也不要遮挡表单与正文。

72. 磁吸按钮 Magnetic Button

鼠标靠近按钮时，按钮或内部文字轻微朝光标方向移动，形成被吸引的感觉。

适合： 主要 CTA、作品入口、联系按钮、创意首页。

为 Punk 首页的 View Work 按钮添加轻量 Magnetic Effect。
只有当光标距离按钮较近时，按钮内容最多偏移 6px，鼠标离开后快速回到原位；按钮本身不能逃离点击区域；
触屏和 reduced motion 模式下关闭磁吸，只保留普通 hover 状态。

73. 三维倾斜卡片 3D Tilt Card

卡片根据光标位置轻微旋转，并改变内部层次或高光，形成具有深度的立体反馈。

适合： 精选项目、产品卡片、收藏卡、视觉作品、实验性主页。

为 Punk 的 Featured Project 卡片添加 3D Tilt。
光标移动时 rotateX 和 rotateY 最大不超过 5deg，封面、文字和高光使用很小的 Z 轴层次；鼠标离开后平滑归位；
移动端和 reduced motion 模式关闭倾斜，卡片点击区域保持稳定。

74. 聚光灯悬停 Spotlight Hover

光标经过大卡片或网格时，局部出现柔和光斑，突出当前区域并弱化周围内容。

适合： Dashboard、深色界面、功能网格、项目卡片、定价表。

在 Punk 的深色功能网格上添加 Spotlight Hover。
使用鼠标位置控制径向渐变，光斑范围只覆盖当前卡片附近，亮度克制；
焦点进入卡片时提供静态高亮替代；不要使用持续追踪的强烈发光，也不要降低文字对比度。

75. 图片与文字蒙版 Image / Text Mask

让图片或动态纹理只显示在文字、圆形或自定义形状内部，制造强烈但可控的视觉焦点。

适合： Hero 大标题、项目封面、章节数字、品牌标语。

为 Punk 首页标题“MAKE IDEAS VISIBLE”添加 Text Mask，低饱和抽象动画只显示在文字内部；
在不支持 background-clip: text 的环境中回退为深绿色实心文字；
标题必须保持可选择、可读和语义化，不要把重要文字只做成图片。

76. 裁切揭示 Clip-path Reveal

元素通过圆形、矩形或多边形裁切区域逐渐展开，像幕布被打开一样展示图片或页面。

适合： 项目切换、图片入场、章节过渡、按钮预览、全屏菜单。

为 Punk 的项目封面添加 Clip-path Reveal。
图片进入视口时从 inset(0 100% 0 0) 过渡到完整显示，持续 500ms；
动画只播放一次；为不支持或 reduced motion 用户直接显示完整图片；不要同时叠加大幅位移和缩放。

77. WebGL / Three.js Hero

使用 GPU 渲染实时 3D、粒子、材质或交互场景，可以创造普通 CSS 难以实现的空间视觉。

适合： 科技产品、AI 品牌、实验作品集、数据艺术、交互叙事。

为 Punk 的首页制作一个轻量 Three.js Hero。
场景包含一个低多边形抽象球体和三层半透明界面平面，跟随鼠标产生非常轻微视差；限制几何体数量、纹理尺寸和像素比；
页面隐藏时暂停渲染；移动端使用简化场景，低性能或 WebGL 不可用时显示静态海报图。

78. 视图过渡 View Transitions

页面或界面状态切换时，让旧内容与新内容平滑衔接，例如项目卡片自然放大为详情页封面。

适合： 项目列表到详情页、SPA 状态切换、多页网站导航、图片画廊。

Punk 的项目卡片点击后使用 View Transition 进入详情页。
卡片封面与详情页 Hero 共享 view-transition-name，让图片从卡片位置自然扩展；过渡控制在 300—450ms；浏览器不支持时正常导航；
不要让过渡影响焦点、阅读位置或返回按钮行为，并在 reduced motion 下跳过动画。

79. 减少动态 Reduced Motion

当用户系统开启“减少动态效果”时，网站降低或移除非必要位移、缩放、视差和自动播放，保留功能与信息反馈。

适合： 所有包含动画、滚动效果、视差或 3D 的网页。

为 Punk 网站完整支持 prefers-reduced-motion: reduce。
关闭 Parallax、磁吸按钮、3D Tilt、自动 Marquee 和大范围页面过渡；
Scroll Reveal 改为直接显示或短淡入；Carousel 停止自动播放；所有功能仍可操作，不能因为关闭动画而隐藏内容或丢失状态反馈。

80. 性能预算 Performance Budget

在开发前为脚本、图片、字体、请求数量和关键性能指标设定上限，避免视觉效果无限增加导致网站越来越慢。

适合： 图片型作品集、动画网站、AI 产品、营销页、WebGL 项目。

为 Punk 的个人网站制定 Performance Budget：
移动端首屏 JavaScript 尽量控制在 170KB gzip 以内，首屏关键图片使用现代格式并严格压缩，WebGL 场景延迟到需要时加载，字体不超过两个家族和必要字重；
在 CI 中运行 Lighthouse 或等价检查，超过预算时提示优化，不要为了动画牺牲核心内容加载。

一段可以直接复制的完整提示词

请为 Punk 设计并实现一个响应式个人作品网站的体验增强版本。

注意：Punk 是人物姓名和网站署名，不是朋克文化或朋克视觉风格。不要自动使用皮衣、莫霍克发型、涂鸦、铆钉或反叛海报元素。

【滚动与动作】
首页和项目案例使用轻量 Scroll Reveal，元素进入视口时淡入并向上移动 16px。
精选项目区使用 Horizontal Scroll 与 CSS Scroll Snap。
长篇文章顶部显示 Scroll Progress Indicator。
AI 灵感流使用 Infinite Scroll，并通过 IntersectionObserver 在接近底部时加载下一批内容。
技能标签使用缓慢 Marquee，但 reduced motion 模式下改为静态标签。
卡片 hover 只使用轻微上移、边框变化和箭头移动。
所有滚动动画都必须支持 prefers-reduced-motion。

【提示与加载】
项目列表加载前显示与最终布局一致的 Skeleton Screen。
首屏以下图片和 iframe 使用 Lazy Loading，并预设尺寸避免布局跳动。
短任务使用局部 Spinner，可计算进度的任务使用 Progress Bar。
提交按钮进入 Loading Button 状态，防止重复提交。
项目为空时显示 Empty State，并提供创建项目按钮。
加载失败时显示 Error State 和 Retry 操作。
收藏等低风险操作可以使用 Optimistic UI。
表单使用 Inline Validation，并通过合适的 live region 通知状态变化。

【视觉风格】
整体采用 Minimalism 与 Editorial Design 的组合。
米白背景、黑色正文、深绿色强调，严格控制颜色数量。
使用清晰网格、大标题、编号、跨栏图片和充足留白。
Hero 可以局部使用克制 Glassmorphism 和低饱和 Gradient Mesh。
背景可以加入极轻的 Grain Texture。
不要把所有元素都做成透明玻璃卡片，也不要使用家居产品摆拍。

【高级效果】
桌面端作品画廊可以使用 Custom Cursor，但触屏设备保持原生交互。
主要 CTA 可以使用轻量 Magnetic Button。
精选项目卡片可以使用最大 5deg 的 3D Tilt。
图片进入视口时可以使用一次性的 Clip-path Reveal。
首页允许使用轻量 Three.js 抽象场景，但必须提供静态回退图。
项目卡片到详情页使用 View Transitions，并为不支持浏览器正常降级。
完整支持 prefers-reduced-motion。
制定性能预算，限制脚本、字体、图片和 WebGL 资源，不要为了视觉效果牺牲首屏加载和可访问性。

【技术要求】
使用语义化 HTML、现代 CSS 和少量必要 JavaScript。
优先使用 CSS Scroll Snap、CSS Scroll-driven Animations、IntersectionObserver、原生 lazy loading 和 View Transition API。
所有交互支持键盘操作、清晰焦点状态和屏幕阅读器。
动画不能隐藏重要内容，也不能成为完成任务的必要条件。

关于作者

Punk｜中科大 MBA｜HerName 首席设计师｜Stanley 商学院执行院长｜AI提示词｜3个月赚了8位数｜Learn in Public｜@AdrianPunk115