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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

为浩然的实验项目页使用 Neo-brutalist Style，采用粗黑边框、硬阴影、大字号标题和深绿色重点按钮；组件保持清晰网格与可读性，避免装饰性手写字体与复杂阴影。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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