我看完 xuanxuan321/xuanxuan-prompts，第一反应不是“又一个 Prompt 仓库”。
它真正有价值的地方，是把一件很多人说不清楚的事写清楚了：
如何让 AI Agent 不是“生成一个类似风格的网页”，而是尽量按一张效果图、一个演示视频或一套网页视觉，拆出可执行的工程规格。
这和普通 Prompt 收藏夹不一样。
普通 Prompt 往往停在这一层：
- 做高级感。
- 做玻璃拟态。
- 做沉浸式。
- 做很酷的滚动动画。
这些词都对，但 Agent 很难稳定执行。
xuanxuan-prompts 里的几个案例，真正有效的是另一层东西：字体、色值、资源 URL、技术栈、DOM 层级、动效区间、响应式策略、加载失败状态、性能约束，全部写进去了。
所以这篇不建议你只把这些 Prompt 收藏起来。
更建议你学会它背后的方法：把审美拆成规格，把规格拆成可验证的任务。
先把出处讲清楚
这篇是入行365原创整理和方法拆解，不是把别人的 Prompt 原文搬过来重新发布。
我把来源分成三层：
第一层是整理仓：xuanxuan321/xuanxuan-prompts。这个仓库截至 2026-07-03 核验，已经整理了 8 个目录，每个目录通常包含 prompt.md、效果 GIF 和预览图。本文重点拆 4 个最能代表网页复刻方法的案例，完整目录已经放进上方资源模块。
第二层是原始设计或演示来源。能追到的我写清楚；追不到稳定公开链接的，我不硬编。
第三层是入行365自己的拆解：这些 Prompt 到底适合谁用、解决什么问题、怎么转成自己的原子能力。
这里也要提醒一句：这个仓库没有看到明确 License。学习、研究、临摹结构没问题；但不要默认把里面的视频、图片、GIF、整段 Prompt 或页面设计当成自己的可商用资产。
这 4 个案例分别值钱在哪里
1. Liquid Glass Agency：学多段落地页怎么写成工程规格
这个案例表面上是在做深色液态玻璃风格的 AI 网页设计工作室落地页。
但真正值得看的是，它没有只写“做一个高级玻璃拟态网页”。
它写了字体、Tailwind 字体扩展、HSL 主题变量、玻璃拟态 CSS、视频背景、HLS 视频、Framer Motion 动效、页面分区、组件结构、CTA、统计区、推荐语和 Footer。
也就是说，它不是在给 AI 一个审美方向，而是在给 AI 一份可施工的页面说明书。
这个案例可确认的上游设计来源，指向 Aura Build 的 Studio AI Web Design Landing Page 模板；xuanxuan 仓库进一步把它整理成 Coding Agent 可执行的 liquidGlassAgency Prompt。
如果你做官网、产品落地页、AI 服务页，这个案例最适合学两件事：
- 如何把视觉风格写成 CSS 变量和组件规则。
- 如何把一个长页面拆成 Hero、功能区、数据区、案例区、CTA 和 Footer。
2. Interactive Discovery / Lithos：学交互机制怎么写清楚
这个案例看起来是一个地质品牌 Hero：鼠标移动到哪里，哪里就像聚光灯一样揭示第二张图。
很多人写这种需求，会写成：
做一个鼠标跟随的高端互动效果。
这句话基本没法稳定复刻。
这个 Prompt 的写法更具体：父组件跟踪鼠标坐标，使用 requestAnimationFrame 做平滑，RevealLayer 里用 canvas 生成 radial gradient mask，再把 mask 应用到 reveal div 上。
这才是 Agent 能执行的规格。
公开检索可追到 Viktor Oddy 在 X 上分享的 Lithos 互动演示线索；xuanxuan 仓库把它整理成 React + TypeScript + Vite + Tailwind 的 interactiveDiscovery 复刻规格。
如果你做产品官网、品牌页、作品集，这个案例的价值不是“地质风格”，而是学会：
- 互动效果必须写出状态、坐标、平滑算法和渲染层级。
- 视觉复刻不能只写形容词，必须写核心机制。
3. Bloom：学滚动视频为什么不能只靠实时 seek
Bloom 是一个赛博植物学叙事页。
这个案例最有价值的点，是它把滚动驱动视频的性能问题写进了 Prompt。
很多滚动视频页面会翻车，原因是滚动时不断 seek 原始 video，结果卡顿、闪烁、加载不稳。
Bloom 的 Prompt 明确要求：加载时先 fetch 视频，转成 Blob URL，再按时间抽帧，用 createImageBitmap 缓存；滚动时只根据进度选择缓存帧画到 canvas。
这句话很关键。
它说明一个好 Prompt 不只是描述最终效果，还要告诉 Agent：不要走哪条容易出问题的实现路径。
公开检索可追到 Threads 上关于 Bloom 视觉演示的二次传播线索；当前可稳定核验的 Prompt 来源，是 xuanxuan-prompts 的 bloom 目录。
这个案例适合学：
- 长滚动叙事页怎么分阶段。
- 视频背景怎么做缓存。
- loading、错误态、移动端和表单反馈怎么一并写进去。
4. flower / Veldara：学沉浸式落地页的层级和触发区间
flower 目录下的 Veldara，是一个单文件 HTML 沉浸式滚动落地页。
它最值得学的不是花朵视频，而是页面层级。
Prompt 里把页面拆成：
- 滚动驱动的视频背景层。
- 粒子层。
- 固定在视口底部的 3 张卡片层。
- 顶部导航层。
- 真实内容流。
再通过 cards-trigger 这种触发区间，控制卡片什么时候出现、什么时候离开，最后再进入 Presenting / Veldara 8 的揭幕段落。
按已知线索，这个案例的原始演示来自独立开发者兼设计师 lxj1123（林晓杰）于 2026 年 4 月 27 日分享的演示视频；当前可稳定核验的 Prompt 来源，是 xuanxuan 仓库的 flower 目录。
这个案例适合学：
- 单文件 HTML 也可以写出清晰层级。
- 滚动动画要写触发区间，不要只写“滚动时出现”。
- 好的复刻 Prompt 会同时写 DOM、CSS、JS、资源、响应式和验收清单。
真正该沉淀的不是几条 Prompt
这些 Prompt 都很长。
但如果你只是整段复制，其实学到的不多。
真正应该沉淀的是它们共同的结构。
一个高质量网页复刻 Prompt，至少要回答 9 个问题：
入行365网页复刻 Prompt 拆解清单
- 目标是什么：是复刻首页、Hero、动效、单页落地页，还是只提取视觉语言？
- 技术栈是什么：React、Vite、Tailwind、shadcn/ui、Framer Motion，还是单文件 HTML？
- 素材从哪里来：图片、视频、GIF、字体、图标 URL 是否可访问，授权是否明确？
- 页面层级怎么排：背景层、内容层、导航层、交互层、遮罩层、固定层分别是什么？
- 核心交互怎么实现：鼠标跟随、滚动进度、canvas mask、视频抽帧、卡片擦除，必须写机制。
- 动画区间怎么触发：在滚动进度多少开始、多少完成、离开时怎么淡出。
- 性能约束是什么：是否需要预加载、抽帧缓存、降级方案、错误态、减少实时计算。
- 响应式怎么处理：移动端字号、卡片列数、按钮尺寸、视口高度和溢出边界。
- 验收标准是什么：最终页面应该长什么样，哪些元素不能缺，哪些实现路径不能用。
这 9 个问题，比任何一条孤立 Prompt 都值钱。
因为你以后看到一个好网页，就可以按这 9 个问题把它拆成 Agent 能执行的规格。
怎么把它用在自己的项目里
我建议不要直接拿这 4 条 Prompt 去生成一个完整项目。
更好的用法是三步。
第一步，只拿它的结构。
比如你想做一个产品官网，不要直接套 Liquid Glass Agency 的品牌和文案，而是学它怎么写字体、主题变量、玻璃效果、页面分区和动效说明。
第二步，替换成自己的素材和业务。
网页复刻最容易出问题的地方，是把别人的设计、素材和品牌一起搬走。你真正要复用的是方法，不是作品本身。
第三步，让 Agent 先生成最小可验收版本。
不要一上来就要求它做完整长页。可以先让它完成：
- Hero + 核心交互。
- 一组卡片 + 响应式。
- 视频背景 + loading + 错误态。
- 再逐步补完整页面。
这样更容易验收，也更容易改。
这类 Prompt 为什么适合进入入行之路
入行之路不是 Prompt 仓库。
如果只是把 4 条 Prompt 原文搬进来，价值很低。
它应该被拆成原子能力：
- D3 任务拆解与流程建模：把网页复刻拆成素材、层级、动效、状态和验收。
- D4 Prompt 与模型协作能力：把审美语言翻译成 Agent 可执行规格。
- D5 工具链与自动化能力：让 Codex、Claude Code、Kimi 这类 Coding Agent 真的能落地。
- D6 专业融合与价值交付：把设计审美、前端实现和业务落地页结合起来。
所以我把它们放进文章资源模块和知识库，不是为了让你收藏，而是为了让你以后能问：
我现在要复刻一个网页，应该怎么把它拆成 AI 能执行的任务？
这个问题，比“给我一条好看的 Prompt”重要得多。
最后一句
AI 时代，审美本身当然重要。
但更稀缺的是：你能不能把审美拆成结构，把结构写成规格，把规格交给 Agent 执行，再用浏览器验收它是不是真的做到了。
这才是这些 Prompt 对入行365用户的价值。