编写Skill或Prompt提示词必备的网页视觉词典

请为个人作品网站创建响应式卡片布局。
项目区展示 6 张卡片，每张包含封面、名称、两行摘要、技术标签和详情按钮。
桌面端三列、平板端两列、手机端单列；使用暖白背景、深绿色强调色、细边框、轻阴影和克制圆角。

请制作三列瀑布流作品画廊，保留每张图片的原始比例。
平板端改为两列，手机端改为单列；图片接近视口时再加载，点击缩略图后进入全屏预览。
先检查目标浏览器对 CSS Masonry 的支持；不支持时回退到普通 Grid。
DOM 顺序必须与视觉阅读顺序一致。

请设计一个 Bento Grid 个人主页：左侧大模块展示姓名、身份、简介和主要操作；
右侧用不同尺寸的模块呈现 About、Skills、Latest Writing 与 Contact；
底部增加横向 Featured Project。
不要使用平均九宫格，要让模块大小体现主次。

请创建分屏式首屏：左侧约占 45%，放姓名、身份、简介和两个操作按钮；
右侧约占 55%，展示抽象的界面视觉。桌面端保持左右结构，手机端改为文字在前、视觉在后的上下排列。

请用 CSS Grid 构建作品页。桌面端采用 12 列网格，主项目占 8 列、说明区占 4 列，其余项目各占 4 列；
900px 以下切换为 6 列，640px 以下改为单列。
使用 `grid-template-columns` 与 `gap`，不要用 CSS `order` 改变具有语义的阅读顺序，也不要依赖绝对定位拼接版面。

请用 Flexbox 实现顶部导航：左侧放品牌标志，右侧放 Work、About、Writing、Contact 和主题切换按钮；
两端对齐并垂直居中。小屏幕隐藏文字导航，显示汉堡菜单。

请为 Journal 页面添加 260px 宽的左侧栏，包含头像、简介、分类、标签和社交链接，右侧显示文章列表。
桌面端侧边栏使用 sticky；手机端将其收进顶部筛选面板。

请制作个人创作后台。左侧导航包含 Overview、Projects、Writing、Analytics 和 Settings；
顶部放搜索、通知和头像；主区域展示 4 张统计卡片、最近项目与访问趋势。
桌面端固定侧栏，手机端改为抽屉。

请为网站定义 desktop、tablet、mobile 三种布局状态。
桌面端容器最大宽度 1200px，平板端卡片两列，手机端单列并将顶部导航改为汉堡菜单；
禁止横向滚动，并保证触控区域足够大。

请创建全出血 Hero：背景视觉铺满浏览器宽度并占据约 90vh，前景放大标题、简介和 View Work 按钮；
Hero 之后恢复到 1120px 居中内容容器，并确保前景文字具备足够对比度。

请制作单页作品网站，区块顺序为 Hero、About、Selected Work、Writing、Contact、Footer。
导航使用锚点定位到对应区块；为每个区块设置语义标题和唯一 `id`。
启用 `prefers-reduced-motion: reduce` 时关闭平滑滚动，跳转后把焦点放到目标内容或保持清晰的焦点顺序。

请规划 Home、Work、Project Detail、About、Journal、Article、Contact 七类页面。
所有页面共享 Header 与 Footer；
导航显示当前页状态；点击项目卡片后进入独立详情地址。

请为 AI 设计服务制作预约型落地页，依次包含 Hero、价值说明、合作流程、3 个案例、客户评价、FAQ 和最终 CTA。
主要按钮统一使用同一行动文案，移除与预约目标无关的复杂入口。

请创建项目案例页，内容包括项目概览、背景问题、个人职责、过程、关键决策、最终方案、结果数据和复盘。
顶部使用大封面，正文采用较窄行宽，过程图片可穿插全宽展示；桌面端右侧提供 sticky 目录。

请创建信息明确的 Hero。主标题直接概括专业定位，副标题不超过两行，提供 View Work 与 Contact 两个按钮；
右侧搭配低饱和的抽象界面视觉，不使用无关的图库人物或办公场景。

请在 About 下方添加四项 Feature Grid：Design、Frontend、AI Prototyping、Writing。
每项使用线性图标、标题和两行以内说明；桌面四列、平板两列、手机单列，并避免厚重阴影。

请设计 Sticky Storytelling 区块。桌面端左侧约占 38%，保持固定并显示当前阶段；
右侧依次滚动呈现 Discover、Design、Build。
进入新阶段时同步更新左侧内容；手机端取消 sticky，改为普通纵向排列。

请在 About 页面添加纵向时间线。每个节点包含年份、事件标题和两行说明；
桌面端内容位于轴线右侧，手机端保持单列；视觉上使用细线和简洁圆形节点。

请在联系区之前加入 6 项 FAQ。标题使用原生 `button`，放在符合文档层级的标题元素中；
通过 `aria-expanded` 与 `aria-controls` 关联内容面板。
是否限制一次只展开一项，应根据阅读任务决定，而不是作为 Accordion 的固定规则。

请设计完整页脚：左侧为品牌与一句简介，中间分为 Explore、Connect、Elsewhere 三组链接，右侧提供邮箱和订阅框，底部展示版权与隐私链接。
使用深绿底和暖白文字，与正文形成明确分界。

请添加 Sticky Navbar。页面顶部时背景透明，滚动超过 40px 后切换为暖白背景、细边框和轻微 backdrop blur；
切换过程中导航高度保持不变，移动端使用汉堡菜单。

请在 768px 以下显示汉堡按钮，点击后从右侧打开包含主要页面入口的 Drawer。
打开菜单时锁定背景滚动；支持 Esc、遮罩点击和完整的键盘焦点管理。

请在项目详情顶部加入 Home › Work › AI Tools › Project Detail。
使用带 `aria-label="Breadcrumb"` 的 `nav` 和有序列表；最后一项表示当前页，不设置链接，并添加 `aria-current="page"`。

请为 About、Work、Writing、Contact 添加页内锚点。滚动定位时为固定 Header 预留空间，并根据当前可见区块同步高亮导航项；
动效需要尊重 `prefers-reduced-motion` 设置。

请为作品区添加 All、Web、AI、Experiments 四个标签，默认选择 All。
使用 `tablist`、`tab`、`tabpanel`、`aria-selected` 和 roving `tabindex`；水平方向支持左右方向键，Home 和 End 可移动到首尾标签。
仅在面板能够即时显示时使用焦点自动激活，否则由 Enter 或 Space 确认切换。

请为创作后台添加侧边导航，包含 Overview、Projects、Posts、Media、Analytics、Settings。
当前页面使用强调色和图标标识，二级菜单可折叠；手机端整体收进 Drawer。

请让 Work 入口打开三列 Mega Menu，分别展示 Projects、Experiments、Resources，并在右侧加入精选项目预览。
菜单通过点击触发，支持键盘操作和 Esc；移动端改为 Accordion。

请在移动端固定显示 Home、Projects、Create、Notes、Profile 五个入口，当前项使用填充图标和强调色。
适配 safe-area-inset-bottom；桌面端隐藏整个组件。

请为文章归档添加分页，每页展示 10 条内容。底部提供 Previous、页码和 Next；
当前页状态明确，并把页码保存到 ?page=2 形式的 URL 中。翻页控件使用真实链接，便于刷新、分享与返回。

请在滚动超过 800px 后显示右下角返回顶部按钮。按钮使用可理解的可见文本或 `aria-label="返回顶部"`；
普通模式下可以平滑滚动，`prefers-reduced-motion: reduce` 模式下直接跳转。返回顶部后确保键盘焦点位置仍然合理。

请让 Contact 按钮打开 Modal，表单包含姓名、邮箱、项目类型和留言。
优先使用原生 `<dialog>` 与 `showModal()`，为对话框提供可访问名称和明确的关闭按钮，并选择合理的初始焦点；
关闭后把焦点还给触发按钮。保留浏览器提供的 Esc 关闭和背景 `inert` 行为。

请在点击项目卡片后从右侧打开 420px 宽的详情 Drawer，展示封面、简介、技术栈与访问链接。
打开时管理初始焦点和焦点循环，使背景内容不可交互；支持 Esc 与明确的关闭按钮，关闭后恢复触发位置。
手机端改为从底部打开并接近全屏。

请实现 Accordion。每个 `button` 放在符合文档层级的标题元素中，通过 `aria-expanded` 和 `aria-controls` 关联内容面板；
图标在展开时改变状态，过渡时长以 200 ms 为起点。只有产品需求明确要求时才限制为单开式。

请为仅有图标的操作添加 Tooltip，同时支持 hover 与 focus。
内容限制为一句短语；Tooltip 本身不进入 Tab 顺序，并通过 `role="tooltip"` 与 `aria-describedby` 关联触发元素。
指针停留在触发元素或 Tooltip 上时保持显示，按 Esc 时关闭；
触屏设备使用可见标签或其他等价说明。

请在保存成功后显示右上角 Toast，包含状态图标、说明和关闭按钮。普通成功消息可在 4 秒后消失；
包含操作的消息、错误消息以及键盘焦点进入后的 Toast 不自动关闭。
成功状态使用 `role="status"`，需要立即处理的错误使用 `role="alert"`，避免重复设置造成二次播报。

请创建 Featured Projects Carousel，每次突出 1 个项目并露出下一项的一部分。
提供 Previous、Next 与 01 / 05 序号；默认不自动播放，支持触摸和键盘，`prefers-reduced-motion: reduce` 模式下取消滑行动画。

请为作品画廊添加 Lightbox。点击缩略图后全屏显示原图，支持前后切换、Esc 关闭和标题展示，并锁定背景滚动；
触发元素需可通过键盘使用，所有图片提供准确的 alt。

请创建可访问的联系表单，包含 Name、Email、Project Type、Budget Range、Message。
每个字段都有可见 label，错误信息与字段明确关联；
提交中显示 loading，成功后给出 Toast，在服务端确认成功前不要清空输入。

请添加 Command Palette，使用 Command+K 或 Ctrl+K 打开。
支持搜索页面与操作，使用上下方向键选择、Enter 执行、Esc 关闭，并按“页面”和“命令”分组展示结果。

请在项目后台右下角加入带加号的 Floating Action Button，点击后展开 New Project、New Post、Upload Image 三项操作。
按钮不得遮挡底部导航或主要内容，并适配移动端安全区域。

请为标题、正文和项目卡片添加 Scroll Reveal。元素进入视口时淡入并上移 16px，时长控制在 400–600 ms；
同组卡片可以轻微错峰，但不要让整页同时播放。`prefers-reduced-motion: reduce` 模式下取消位移，直接显示或仅做短淡入。
即使脚本失败，内容也必须默认可见。

请为 Hero 添加轻量视差：背景抽象图形移动最慢，中层半透明面板速度居中，前景标题保持正常文档流。
限制最大位移，不做剧烈缩放；移动端降低强度，`prefers-reduced-motion: reduce` 模式完全关闭。
仅动画 `transform` 和 `opacity`，避免滚动期间持续触发布局。

请在长文章顶部加入 3px 深绿色阅读进度线，放在 sticky 导航下方并从左向右增长。
优先使用 CSS Scroll-driven Animation；JavaScript 降级方案在 `requestAnimationFrame` 中合并更新。
纯装饰进度线使用 `aria-hidden="true"`；
若需要向辅助技术提供进度，使用带名称的 `<progress>`，不要高频播报每个百分比变化。

请为横向精选作品使用 CSS Scroll Snap。
容器在行内轴设置 `scroll-snap-type: inline proximity`，每张卡片使用 `scroll-snap-align: center`；
只有确实需要逐页停靠时才改为 `mandatory`。
保留自然触摸与触控板惯性，桌面端提供前后按钮，不接管页面纵向滚动。

请创建横向项目档案。桌面端同时露出约 3.5 张卡片，用下一张的局部提示可继续浏览；
支持触控板、触摸和左右箭头，卡片保持键盘可聚焦，手机端使用原生横向滚动。

请为灵感流实现 Infinite Scroll，每批加载 12 个项目。
列表底部放 sentinel，并用 `IntersectionObserver` 提前请求下一页；
同时提供可聚焦的“加载更多”后备入口和明确的结束状态。加载中显示 Skeleton，失败时提供 Retry；
在 URL 或历史状态中保存分页与滚动位置，确保刷新、返回和分享后仍可恢复。

请在 Hero 下加入缓慢循环的技能 Marquee，两组内容无缝衔接，hover 或键盘焦点进入时暂停。不要使用已废弃的 `<marquee>` 元素；`prefers-reduced-motion: reduce` 模式改为普通的自动换行标签列表，并避免辅助技术重复读取复制出的内容。

请为项目卡片添加微交互：hover 时上移 4px，边框切换为深绿色，封面缩放到 1.03，箭头向右移动 4px；使用 180–240 ms `ease-out`。`focus-visible` 必须提供同等清晰的反馈，`prefers-reduced-motion: reduce` 下取消位移和缩放。

请为四张能力卡片添加错峰入场。首张触发后，其余卡片每隔 70 ms 淡入并上移 12px，总等待不超过 300 ms；
动画只播放一次，`prefers-reduced-motion: reduce` 模式直接显示全部内容。

请在案例页 Process 章节使用滚动驱动动画：左侧进度线随阅读推进，右侧三个原型面板逐步显现。
在 `@supports` 中使用 `animation-timeline` 与 `view()`，并把 `animation-timeline` 写在 `animation` 简写之后，避免被重置；
不支持时用 `IntersectionObserver` 降级。`prefers-reduced-motion: reduce` 下直接显示最终状态。

请为项目列表制作 Skeleton。
占位结构与最终卡片尺寸一致，包括封面、标题、两行摘要和标签位置；使用低对比灰绿色，不放虚假文字。
骨架本身对辅助技术隐藏，加载容器设置 `aria-busy="true"`；数据返回后移除忙碌状态并替换真实内容，避免布局位移。

请正常加载首屏关键图片；
首屏以下的 `<img>` 和 `<iframe>` 使用 `loading="lazy"`。
所有图片预设 `width`、`height` 或 `aspect-ratio`，并为响应式封面提供合理的 `srcset` 与 `sizes`。
不要延迟加载最大内容绘制元素，也不要依赖懒加载替代图片压缩。

请只在正在更新的局部区域显示 Spinner，并通过 `role="status"` 提供“正在加载项目…”等状态文字。
等待超过 8 秒后追加说明和取消入口；
`prefers-reduced-motion: reduce` 模式改用静态状态图标。

请为导出任务显示 0–100% 确定型进度、当前阶段和取消按钮。
优先使用带可见 `<label>` 的原生 `<progress>`；自定义实现需提供 `role="progressbar"`、可访问名称和实时更新的 `aria-valuenow`。
进度无法计算时省略数值并说明当前阶段，不伪造百分比。

请在点击 Send Message 后阻止重复提交，将按钮文字改为 Sending…，显示小型 Spinner，并设置 `aria-busy="true"`。
保持按钮宽度不变；成功后显示 Sent，失败后恢复可用状态并说明原因。不要让状态变化导致键盘焦点丢失。

请为没有项目的页面设计 Empty State，包含简洁图形、明确标题、一句说明和“创建第一个项目”按钮。
若为空是筛选导致，则改为“没有匹配结果”，并提供清除筛选入口。

请为项目加载失败设计错误状态，显示清晰标题、简短原因、Retry 和返回列表入口。
保留已经成功加载的其他内容；用图标、文字和颜色共同传达错误。动态出现且需要立即处理的错误使用 `role="alert"`，页面初始内容中的错误使用普通语义结构，避免加载时打断式播报。

请在图片上传失败后保留缩略图和文件名，显示失败标识以及 Retry、Remove 两项操作。Retry 只重新上传当前文件，并切换到进度状态；
成功后直接替换为完成状态。

请让收藏按钮点击后立即更新图标和数量，再发送后台请求。
失败时恢复原状态，显示非阻塞错误并允许重试。
支付、删除账号等高风险或不可逆操作不要使用乐观更新。

请在邮箱字段 blur 后检查格式，在输入框下方显示具体修正建议；
错误字段设置 `aria-invalid="true"`，并通过 `aria-describedby` 关联错误说明。
不要在用户刚输入第一个字符时立刻报错。提交失败时聚焦错误摘要，并提供跳转到各错误字段的链接。

请设计极简作品集，使用暖白、黑和单一深绿色强调色，限制字体、圆角与阴影种类。
首页只保留身份、精选项目和联系入口，通过留白与排版建立层级，不增加无目的渐变和装饰图标。

请为 Journal 使用 Editorial Layout，包括超大标题、窄正文栏、跨栏图片、章节编号、首字下沉和 pull quote。
正文保持舒适行长与行高，不要把每段内容都包装成卡片。

请使用 12 列网格、左对齐无衬线字体、明显编号和细分隔线构建作品索引。
只采用暖白、黑、深绿；年份、类别和角色按列对齐，不使用手写字体与复杂阴影。

请在深绿色抽象背景上叠加两至三层半透明面板，使用约 16px `backdrop-filter: blur()`、低透明浅色背景和细亮边框。
正文保持足够对比；通过 `@supports` 检测能力，不支持背景模糊时使用不透明度更高的纯色面板。不要把所有卡片都透明化。

请为实验项目页使用 Neo-brutalist 风格：粗黑边框、硬阴影、大字号标题和高对比重点按钮。
组件仍需遵守清晰网格与信息层级，不能以故意错位牺牲可读性和触控体验。

请用 `prefers-color-scheme` 读取系统初始偏好，并提供可持久化的手动主题切换；
用户手动选择优先于系统值。深色背景避免大面积纯黑，正文使用柔和浅灰，强调绿适当提亮；
通过 `color-scheme` 同步原生控件，并检查两种模式下的对比度、焦点和图片效果。

请用暖白、黑和深绿构建单色加双色系统。项目图片默认呈低饱和绿色双色调，hover 后恢复少量原色；
文字、边框与按钮必须使用不同明度保持层级。

请为 Hero 创建低饱和 Gradient Mesh，使用暖白、灰绿与深绿色团，模糊边缘并做极慢漂移。
文字所在区域保持平静和高对比；移动端使用静态版本，`prefers-reduced-motion: reduce` 下关闭动画。

请在暖白背景和深绿 Hero 上加入低透明度 Grain。
使用小型可重复纹理或 CSS/SVG filter，不影响文字清晰度；正文和表单区域保持干净。
测量滤镜的绘制开销，低性能设备使用静态小纹理或关闭效果。

请只在播放器的播放、音量和模式按钮中使用局部 Neumorphism，并保留清楚文字、图标和 focus outline。
导航、表单和长文本不要使用；按下状态需同时通过阴影、位置和颜色表达。

请在桌面画廊用跟随指针的视觉层补充原生光标，悬停图片时显示 View，进入横向画廊时显示 Drag。
不要隐藏系统光标，也不要改变真实点击目标；触屏、精细指针不可用和 `prefers-reduced-motion: reduce` 时关闭该效果。

请为 View Work 添加轻量磁吸。仅移动按钮内部的装饰层，最大偏移 6px；真实按钮位置和点击区域保持不变。
触屏、键盘焦点和 `prefers-reduced-motion: reduce` 模式使用普通按钮反馈。

请为 Featured Project 添加 3D Tilt，`rotateX` 与 `rotateY` 最大不超过 `5deg`，封面、文字和高光只使用很小的 Z 轴差异；
离开时平滑归位。
移动端、键盘操作和 `prefers-reduced-motion: reduce` 模式关闭倾斜，并保留等价的焦点样式。

请用鼠标位置控制当前卡片内的径向渐变，光斑范围和亮度保持克制。
键盘焦点进入时提供静态高亮替代；不要持续使用强烈发光，也不能降低文字对比度。

请为 Hero 大标题添加 Text Mask，让低饱和抽象纹理仅在文字内部显示。
不支持 background-clip: text 时回退为深绿色实心字；标题必须保留语义、可选择且可阅读。

请让项目封面进入视口时，从水平完全裁切过渡到完整显示，时长以 500 ms 为起点，只播放一次。
默认状态必须显示完整图片；仅在 `@supports (clip-path: inset(0))` 且脚本成功初始化后应用裁切起始态。
`prefers-reduced-motion: reduce` 下直接显示图片。

请制作轻量 Three.js Hero，包含低多边形抽象物体和少量半透明界面平面，只做轻微指针视差。
限制几何体数量、纹理尺寸和设备像素比；页面不可见时暂停渲染，组件卸载时释放 GPU 资源。
移动端使用简化场景；WebGL 不可用、设备性能不足或 `prefers-reduced-motion: reduce` 时显示带替代文本策略的静态海报。

请让项目卡片封面与详情 Hero 共享唯一的 `view-transition-name`，过渡时长控制在 300–450 ms。
同文档切换检查 `document.startViewTransition`；跨文档切换只在同源页面中启用 `@view-transition`。
不支持时保持正常导航，`prefers-reduced-motion: reduce` 下跳过动画，并验证焦点、滚动位置和返回行为。

请完整支持 `prefers-reduced-motion: reduce`：关闭 Parallax、磁吸、3D Tilt、自动 Marquee 和大范围页面过渡；
Scroll Reveal 改为直接显示或短淡入；Carousel 停止自动播放。关闭动画后不能隐藏内容或丢失状态反馈。

请先测量当前页面，再为移动端首屏 JavaScript、关键图片、字体、第三方请求和 Core Web Vitals（核心网页指标）写出可量化预算。
关键图片使用合适格式与尺寸，WebGL 按需加载，字体只保留必要家族和字重。
在 CI 中使用固定设备、网络和多次采样检查回归；超过预算时让检查失败或要求明确审批。

请设计并实现一个响应式个人作品网站。

信息架构包含 Home、Work、Project Detail、About、Journal 和 Contact。首页采用 Split-screen Hero：左侧放专业定位、简短介绍和主要操作，右侧展示抽象的界面视觉；下方用 Bento Grid 组织 Featured Project、About、Skills、Latest Writing 和 Contact。

作品页使用响应式 Card-based Layout：桌面三列、平板两列、手机单列。视觉作品在浏览器支持时使用 Masonry Gallery，否则回退到普通 Grid，并保持 DOM 与阅读顺序一致。项目详情采用 Case Study 结构，包含 Overview、Problem、Role、Process、Key Decisions、Solution、Outcome、Reflection；桌面端增加 sticky 目录。

桌面端使用 Sticky Navbar，移动端使用 Hamburger Menu 与右侧 Drawer；项目详情提供 Breadcrumb，单页区块支持 Anchor Links。联系表单放入原生 dialog，作品图支持 Lightbox，保存和复制通过 Toast 反馈，FAQ 使用 Accordion，站内跳转提供 Command Palette。Dialog、Drawer、Tabs、Accordion、Lightbox 和 Command Palette 都要实现正确的焦点管理、键盘操作、可访问名称与关闭方式。

视觉采用暖白背景、深绿色强调色和深色正文，搭配低饱和抽象图形、半透明界面面板与适度空间层次。不要使用无关的家居产品、办公摆拍、图库人物或卡通插画。

采用 Mobile-first、语义化 HTML、CSS Grid 和 Flexbox。覆盖加载、空、错误、成功、禁用和长文本状态。所有交互支持键盘、清晰焦点和屏幕阅读器；尊重 prefers-reduced-motion；图片提供 width、height 和符合语境的 alt，首屏之外使用原生懒加载。实验性能力必须采用特性检测、渐进增强和不依赖动画的降级体验。

请为响应式个人作品网站增加完整的体验层。

【滚动与动作】
首页和案例页使用轻量 Scroll Reveal；精选作品采用 Horizontal Scroll 与 CSS Scroll Snap；长文顶部显示阅读进度。灵感流通过 IntersectionObserver 实现 Infinite Scroll，同时保留可聚焦的“加载更多”入口、结束状态和历史位置恢复。技能标签可使用缓慢 Marquee。所有效果都支持 prefers-reduced-motion，脚本失败时内容默认可见。

【提示与加载】
项目列表使用与最终布局一致的 Skeleton，并通过 aria-busy 表达加载状态。首屏以下图片和 iframe 使用 Lazy Loading，并预设尺寸；最大内容绘制图片不延迟加载。短任务使用带状态文字的局部 Spinner，可计算任务优先使用原生 progress；提交按钮进入 Loading 状态并阻止重复操作。为无内容、加载失败和重试分别设计 Empty、Error、Retry 状态；低风险且可回滚的收藏允许 Optimistic UI；表单使用 aria-invalid、aria-describedby、错误摘要和 Inline Validation。

【视觉风格】
整体结合 Minimalism 与 Editorial Design，使用暖白背景、黑色正文和深绿色强调。保持清晰网格、大标题、编号、跨栏图片与充足留白。Hero 可局部使用克制 Glassmorphism、低饱和 Gradient Mesh 和轻微 Grain；不要让所有内容都变成透明卡片。

【高级效果】
桌面画廊可以使用不替代系统光标的 Custom Cursor，主要 CTA 可以有轻量 Magnetic Effect，精选卡片允许不超过 5deg 的 3D Tilt，图片可以使用一次性 Clip-path Reveal。Hero 可按需加入轻量 Three.js 场景，但必须提供静态回退并释放 GPU 资源；列表到详情可使用 View Transitions，不支持时保持正常导航。

【质量要求】
使用语义化 HTML、现代 CSS 和必要的 JavaScript，优先采用 CSS Scroll Snap、Scroll-driven Animations、IntersectionObserver、原生懒加载与 View Transition API。明确目标浏览器矩阵；所有实验性能力使用特性检测和渐进增强。所有交互支持键盘、清晰焦点和屏幕阅读器。动画不能隐藏重要信息，也不能成为完成任务的前提。先测量基线，再建立可量化的脚本、字体、图片、第三方资源、Core Web Vitals 和 WebGL 性能预算。