如果你经常让 Codex、Claude Code、Kimi 这类 Coding Agent 做网页，大概率踩过这个坑：
你给它一张很漂亮的网页截图，或者丢一句“做得高级一点”，它确实能生成页面，但最后往往只是“有点像”。
字体不对，层级不对，动效不对，移动端一塌糊涂。
问题不在模型不行，而在你给它的任务太模糊。
网页设计里的“高级感”，对人来说是一种感受；对 Agent 来说，必须变成字体、色值、素材、层级、交互机制、动画区间、性能约束和验收标准。
这就是 xuanxuan321/xuanxuan-prompts 这个仓库真正有价值的地方。
它不是普通 Prompt 收藏夹。
它把 4 个漂亮网页案例，整理成了 Agent 能照着执行的网页复刻 Prompt：每个目录都有 prompt.md，也有对应的生成效果图。
这篇文章适合 3 类人看：
- 看到一个好网页，想让 AI 复刻成自己的官网、落地页或作品集。
- 会用 Codex / Claude Code / Kimi，但写出来的网页 Prompt 总是太抽象。
- 想把外部 Prompt 从“收藏品”变成自己的可复用能力。
你能拿走的东西也很明确：
- 4 个网页复刻 Prompt 的效果图和入口。
- 每个 Prompt 适合解决什么问题。
- 它们为什么能让 Agent 更稳定地执行。
- 一张入行365原创的网页复刻 Prompt 拆解清单。
先看效果，再讲方法。
这类 Prompt 解决的核心问题
普通人写网页 Prompt，常常写成这样：
做一个高级感官网，暗色背景，玻璃拟态，滚动动画，适合 AI 产品。
这句话没有错，但 Agent 很难稳定做对。
因为它缺了 4 类关键信息：
- 视觉规格：字体、字号、色值、背景素材、按钮形态、卡片样式。
- 页面结构：Hero、功能区、案例区、CTA、Footer 怎么分层。
- 交互机制：鼠标跟随、滚动触发、视频抽帧、遮罩、卡片进出场怎么实现。
- 验收标准：最后应该长什么样，哪些元素不能缺，哪些路径不能走。
xuanxuan-prompts 里的几个 Prompt，价值就在这里。
它把“审美要求”写成了“工程规格”。
你不是只能照抄它的 Prompt，而是可以学它怎么拆任务。
4 个案例分别适合什么场景
1. Liquid Glass Agency：适合做 AI 服务官网、产品落地页
效果图来自 xuanxuan-prompts 仓库的 Liquid Glass Agency 目录。
这个案例表面上是在做深色液态玻璃风格的 AI 网页设计工作室落地页。
但它真正值得学的，不是“液态玻璃”这几个字。
它把一个长页面拆得很细：字体、Tailwind 字体扩展、HSL 主题变量、玻璃拟态 CSS、视频背景、HLS 视频、Framer Motion 动效、页面分区、组件结构、CTA、统计区、推荐语和 Footer。
也就是说，它不是在给 AI 一个审美方向，而是在给 AI 一份可施工的页面说明书。
这个 Prompt 最适合用在：
- AI 服务官网。
- SaaS 产品落地页。
- 个人工作室主页。
- 需要暗色、玻璃拟态、视频背景的品牌页面。
你真正应该学的是：不要只说“做得高级”，而要把高级感拆成 CSS 变量、组件规则、页面分区和动效依赖。
这个案例可确认的上游设计来源，指向 Aura Build 的 Studio AI Web Design Landing Page 模板；xuanxuan 仓库进一步把它整理成 Coding Agent 可执行的 Prompt。
2. Interactive Discovery / Lithos：适合做互动 Hero 和作品集首屏
效果图来自 xuanxuan-prompts 仓库的 Interactive Discovery 目录。
这个案例看起来是一个地质品牌 Hero：鼠标移动到哪里，哪里就像聚光灯一样揭示第二张图。
很多人写这种需求，会写成：
做一个鼠标跟随的高端互动效果。
这句话基本没法稳定复刻。
这个 Prompt 的写法更具体：父组件跟踪鼠标坐标，使用 requestAnimationFrame 做平滑，RevealLayer 里用 canvas 生成 radial gradient mask，再把 mask 应用到 reveal div 上。
这就从“效果描述”变成了“实现机制”。
这个 Prompt 最适合用在：
- 品牌官网首屏。
- 作品集互动封面。
- 新产品发布页。
- 想做鼠标跟随、遮罩、揭示效果的视觉页面。
你真正应该学的是：互动效果不能只写“炫酷”，必须写状态、坐标、平滑算法、渲染层级和响应式边界。
公开检索可追到 Viktor Oddy 在 X 上分享的 Lithos 互动演示线索；xuanxuan 仓库把它整理成 React + TypeScript + Vite + Tailwind 的复刻规格。
3. Bloom：适合做滚动叙事页和视频驱动页面
效果图来自 xuanxuan-prompts 仓库的 bloom 目录。
Bloom 是一个赛博植物学叙事页。
这个案例最有价值的点，是它把滚动驱动视频的性能问题写进了 Prompt。
很多滚动视频页面会翻车，原因是滚动时不断 seek 原始 video，结果卡顿、闪烁、加载不稳。
Bloom 的 Prompt 明确要求：加载时先 fetch 视频，转成 Blob URL，再按时间抽帧，用 createImageBitmap 缓存；滚动时只根据进度选择缓存帧画到 canvas。
这句话很关键。
它说明一个好 Prompt 不只是描述最终效果，还要告诉 Agent：不要走哪条容易出问题的实现路径。
这个 Prompt 最适合用在：
- 品牌故事页。
- 产品发布叙事页。
- 滚动视频展示页。
- 需要把“视觉大片感”落到前端性能实现的页面。
你真正应该学的是：Prompt 里要写失败路径和性能约束。否则 Agent 可能做出一个截图很好看、实际滚动就卡的页面。
公开检索可追到 Threads 上关于 Bloom 视觉演示的二次传播线索；当前可稳定核验的 Prompt 来源，是 xuanxuan-prompts 的 bloom 目录。
4. flower / Veldara：适合做沉浸式落地页和滚动展示页
效果图来自 xuanxuan-prompts 仓库的 flower 目录。
flower 目录下的 Veldara，是一个单文件 HTML 沉浸式滚动落地页。
它最值得学的不是花朵视频，而是页面层级。
Prompt 里把页面拆成：滚动驱动的视频背景层、粒子层、固定在视口底部的卡片层、顶部导航层和真实内容流。
再通过 cards-trigger 这种触发区间，控制卡片什么时候出现、什么时候离开，最后再进入 Presenting / Veldara 8 的揭幕段落。
这个 Prompt 最适合用在：
- 沉浸式产品页。
- 创意工具展示页。
- 3D / 视频视觉落地页。
- 想用单文件 HTML 快速做原型的页面。
你真正应该学的是：滚动动画要写触发区间，不要只写“滚动时出现”。页面越有视觉冲击力，越需要把 z 轴层级、时间线和状态变化写清楚。
按已知线索，这个案例的原始演示来自独立开发者兼设计师 lxj1123（林晓杰）于 2026 年 4 月 27 日分享的演示视频；当前可稳定核验的 Prompt 来源，是 xuanxuan 仓库的 flower 目录。
这 4 条 Prompt 真正带来的价值
如果你只把它们当成“漂亮网页 Prompt”，价值其实不大。
因为别人的品牌、素材、审美和交互，不一定适合你的项目。
它们真正能帮你的是 3 件事。
第一，让你知道一个好网页 Prompt 不能只写风格词。
风格词只解决方向，不能解决执行。
第二，让你知道什么信息应该交给 Agent。
比如素材 URL、字体、技术栈、动画库、页面结构、加载态、错误态、响应式和性能约束。
第三，让你把网页复刻变成一个可复用流程。
以后你看到任何一个好网页，都可以先拆结构，再交给 Agent 做最小可验收版本，而不是一上来让它“完整复刻一个高级页面”。
资源来源和使用边界
这篇是入行365原创整理和方法拆解，不是把别人的 Prompt 原文搬过来重新发布。
来源分三层：
第一层是整理仓：xuanxuan321/xuanxuan-prompts。这个仓库目前把 4 个网页复刻案例整理成目录，每个目录包含 prompt.md 和效果图。
第二层是原始设计或演示来源。能追到的我写清楚；追不到稳定公开链接的，我不硬编。
第三层是入行365自己的拆解：这 4 个 Prompt 到底适合谁用、解决什么问题、怎么转成自己的原子能力。
这里也要提醒一句：这个仓库没有看到明确 License。学习、研究、临摹结构没问题；但不要默认把里面的视频、图片、GIF、整段 Prompt 或页面设计当成自己的可商用资产。
真正该沉淀的不是 4 条 Prompt
这 4 条 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用户的价值。