AI 旅行规划器

Prompt

**使用 Vite、Tailwind CSS 和 lucide-react，为名为 "Wandor" 的旅行应用构建一个单页 React + TypeScript 落地页。页面是一个全视口 hero 区域，包含循环背景视频、磨砂玻璃提示卡片和导航栏。**

**字体（在 index.html `<head>` 中加载）：**
- Google Fonts 链接：`https://fonts.googleapis.com/css2?family=Special+Elite&family=Geist:wght@400;500;600;700&display=swap`
- 包含到 fonts.googleapis.com 和 fonts.gstatic.com 的 preconnect（crossorigin）。
- Body / UI 字体："Geist"（sans-serif），字重 400/500/600/700。
- Logo 字体："Special Elite"（打字机衬线体），仅用于文字标识。
- 页面标题：`Wandor — 下一站去哪里？`

**Tailwind 配置（tailwind.config.js）——扩展主题：**
- `fontFamily.sans`：`['Geist', 'sans-serif']`
- `fontFamily.display`：`['Special Elite', 'serif']`
- 在 `wandor` 键下添加自定义颜色：
  - `dark: '#0a0a0a'`
  - `text: '#1a1a1a'`
  - `muted: '#767676'`
  - `prompt: '#905831'`（棕色/陶土色）

**全局 CSS（index.css）：**
- 标准 Tailwind 指令（base/components/utilities）。
- `body`：`font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff;`

**布局——填满视口的单个 `<section>`：**
- Section：`relative min-h-svh w-full overflow-hidden`。

**背景视频（z-0）：**
- `<video>` 使用 absolute 定位：`inset-0 w-full h-full object-cover z-0`。
- 精确 `src`：`https://pollen-batch-41236914.figma.site/_components/v2/f0ee2dae7671c170c34f12e31c4cb41418976c98/769c564298c132f7919405cd9f17c1b1231f341d.769c5642.mp4`
- 属性：`autoPlay muted loop playsInline`。

**顶部渐变遮罩（z-1）：**
- 使用 absolute 定位：`inset-x-0 top-0 h-[687px] pointer-events-none z-[1]`。
- 行内样式 background：`linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)`——从白色到透明的垂直渐隐，覆盖顶部 687px，确保导航和标题在视频上清晰可读。

**内容容器（z-2）：**
- `relative z-[2] max-w-[1360px] mx-auto`。

**导航栏：**
- `<nav>`：`flex items-center justify-between px-20 pt-6 pb-4`（移动端：`px-6 pt-5`）。
- 左侧：文字标识 `<span className="font-display text-[40px] text-black leading-none select-none">wandor</span>`（移动端：`text-[32px]`）。
- 中间：绝对居中的组 `absolute left-1/2 -translate-x-1/2 flex gap-8`（通过 `max-md:hidden` 在移动端隐藏）。三个按钮：“发现”、“价格”、“常见问题”。每个按钮：`bg-transparent border-none cursor-pointer font-sans text-[15px] font-medium uppercase text-wandor-text tracking-[0.04em] transition-opacity hover:opacity-55`。
- 右侧：flex 组 `flex items-center gap-8`：
  - “登录”按钮（移动端隐藏）：`bg-transparent border-none cursor-pointer font-sans text-[15px] font-semibold uppercase text-[#292929] tracking-[0.04em] transition-opacity hover:opacity-55`。
  - “规划我的旅行”按钮：`bg-wandor-dark text-[#fafafa] border-none cursor-pointer font-sans text-[15px] font-medium uppercase tracking-[0.04em] px-5 py-3.5 rounded-full transition-all hover:bg-[#333] active:scale-95`。

**Hero 主体：**
- 容器：`flex flex-col items-center px-6 pt-16 pb-24 text-center`。
- 标题 `<h1>`：`font-sans text-[clamp(40px,6vw,68px)] font-medium text-wandor-text leading-[1.05] tracking-[-0.04em] max-w-[820px] mb-5`。文字：“下一站去哪里？”
- 副标题 `<p>`：`font-sans text-xl font-medium text-wandor-muted leading-relaxed max-w-[500px] mb-10`。文字：“告诉我们的 AI 你要去哪里以及你喜欢什么。我们会为你创建个性化行程。”

**液态玻璃提示卡片：**
- Wrapper `<div>`：`relative w-[701px] max-md:w-[calc(100vw-48px)] min-h-[208px] bg-white/[0.06] border-[3px] border-white rounded-[44px] shadow-[0_0_4px_0_rgba(0,0,0,0.15)] overflow-hidden backdrop-blur-[20px]`。这就是液态玻璃效果：极低透明度的白色填充、粗白色边框、强背景模糊、柔和阴影和大胶囊圆角。
- 提示文字 `<p>`：绝对定位 `left-[29px] top-[57px] -translate-y-1/2 w-[609px] max-md:w-[calc(100%-58px)] font-sans text-xl max-md:text-[17px] font-medium text-wandor-prompt leading-relaxed break-words`。文字：“我计划十月去日本旅行 7 天。我喜欢美食、隐秘咖啡馆和风景优美的徒步路线，而且想避开人群....”（注意末尾的 “....”）。
- 卡片内的“规划我的旅行”CTA 按钮：`absolute bottom-[21px] right-[21px] w-[156px] h-14 bg-black border-none rounded-[44px] shadow-[0_0_2px_0_rgba(0,0,0,0.05)] cursor-pointer flex items-center justify-center font-sans text-base font-medium text-[#fafafa] uppercase tracking-[0.02em] transition-all hover:bg-[#333] active:scale-95`。文字：“规划我的旅行”。
- 隐藏的文件输入框：`<input ref={fileInputRef} type="file" accept="image/*,.pdf" className="hidden" />`。
- 上传按钮：`absolute left-[21px] top-[137px] w-11 h-11 bg-transparent border border-white/70 rounded-full cursor-pointer flex items-center justify-center backdrop-blur-[14px] transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2`。`aria-label="上传灵感素材"`。点击时，通过 ref 触发隐藏的文件输入框。内部渲染 lucide-react 的 `Upload` 图标：`<Upload className="w-[18px] h-[18px] text-wandor-text flex-shrink-0" />`。

**交互 / 动画：**
- 所有按钮使用 `transition-opacity` / `transition-all` / `transition-transform`，并配合 `hover:opacity-55`、`hover:bg-[#333]`、`hover:scale-105` 和 `active:scale-95`，营造有触感的微交互。
- 玻璃卡片和上传按钮使用 `backdrop-blur-[20px]` / `backdrop-blur-[14px]`，在视频上形成液态玻璃磨砂效果。
- 视频自动静音播放并持续循环，形成环境动态效果。
- 顶部从白色到透明的渐变遮罩确保导航和标题在视频上保持清晰可读。

**响应式行为：**
- 在 `max-width: 760px`（Tailwind `max-md`）时：导航 padding 缩小为 `px-6 pt-5`，logo 降为 32px，中央导航链接和登录按钮隐藏，玻璃卡片宽度变为 `calc(100vw - 48px)`，提示文字变为 17px，宽度为 `calc(100%-58px)`。

**应用结构：**
- `src/App.tsx` 从 `@/components/Hero` 导入 `Hero`，并在外层 `<div>` 中渲染它。
- `Hero.tsx` 包含上述所有标记，以及用于中央链接的 `NavButton` 辅助组件。
- 使用 `@/` 路径别名（映射到 `src/`），通过 `resolve.alias` 在 `vite.config.ts` 中配置。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度: 88 / 100
成本: 中

AI 编程(UI)X收录 2026/07/28

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI收录 2026/08/13

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X收录 2026/09/12

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

Prompt

**使用 Vite、Tailwind CSS 和 lucide-react，为名为 "Wandor" 的旅行应用构建一个单页 React + TypeScript 落地页。页面是一个全视口 hero 区域，包含循环背景视频、磨砂玻璃提示卡片和导航栏。**

**字体（在 index.html `<head>` 中加载）：**
- Google Fonts 链接：`https://fonts.googleapis.com/css2?family=Special+Elite&family=Geist:wght@400;500;600;700&display=swap`
- 包含到 fonts.googleapis.com 和 fonts.gstatic.com 的 preconnect（crossorigin）。
- Body / UI 字体："Geist"（sans-serif），字重 400/500/600/700。
- Logo 字体："Special Elite"（打字机衬线体），仅用于文字标识。
- 页面标题：`Wandor — 下一站去哪里？`

**Tailwind 配置（tailwind.config.js）——扩展主题：**
- `fontFamily.sans`：`['Geist', 'sans-serif']`
- `fontFamily.display`：`['Special Elite', 'serif']`
- 在 `wandor` 键下添加自定义颜色：
  - `dark: '#0a0a0a'`
  - `text: '#1a1a1a'`
  - `muted: '#767676'`
  - `prompt: '#905831'`（棕色/陶土色）

**全局 CSS（index.css）：**
- 标准 Tailwind 指令（base/components/utilities）。
- `body`：`font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff;`

**布局——填满视口的单个 `<section>`：**
- Section：`relative min-h-svh w-full overflow-hidden`。

**背景视频（z-0）：**
- `<video>` 使用 absolute 定位：`inset-0 w-full h-full object-cover z-0`。
- 精确 `src`：`https://pollen-batch-41236914.figma.site/_components/v2/f0ee2dae7671c170c34f12e31c4cb41418976c98/769c564298c132f7919405cd9f17c1b1231f341d.769c5642.mp4`
- 属性：`autoPlay muted loop playsInline`。

**顶部渐变遮罩（z-1）：**
- 使用 absolute 定位：`inset-x-0 top-0 h-[687px] pointer-events-none z-[1]`。
- 行内样式 background：`linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)`——从白色到透明的垂直渐隐，覆盖顶部 687px，确保导航和标题在视频上清晰可读。

**内容容器（z-2）：**
- `relative z-[2] max-w-[1360px] mx-auto`。

**导航栏：**
- `<nav>`：`flex items-center justify-between px-20 pt-6 pb-4`（移动端：`px-6 pt-5`）。
- 左侧：文字标识 `<span className="font-display text-[40px] text-black leading-none select-none">wandor</span>`（移动端：`text-[32px]`）。
- 中间：绝对居中的组 `absolute left-1/2 -translate-x-1/2 flex gap-8`（通过 `max-md:hidden` 在移动端隐藏）。三个按钮：“发现”、“价格”、“常见问题”。每个按钮：`bg-transparent border-none cursor-pointer font-sans text-[15px] font-medium uppercase text-wandor-text tracking-[0.04em] transition-opacity hover:opacity-55`。
- 右侧：flex 组 `flex items-center gap-8`：
  - “登录”按钮（移动端隐藏）：`bg-transparent border-none cursor-pointer font-sans text-[15px] font-semibold uppercase text-[#292929] tracking-[0.04em] transition-opacity hover:opacity-55`。
  - “规划我的旅行”按钮：`bg-wandor-dark text-[#fafafa] border-none cursor-pointer font-sans text-[15px] font-medium uppercase tracking-[0.04em] px-5 py-3.5 rounded-full transition-all hover:bg-[#333] active:scale-95`。

**Hero 主体：**
- 容器：`flex flex-col items-center px-6 pt-16 pb-24 text-center`。
- 标题 `<h1>`：`font-sans text-[clamp(40px,6vw,68px)] font-medium text-wandor-text leading-[1.05] tracking-[-0.04em] max-w-[820px] mb-5`。文字：“下一站去哪里？”
- 副标题 `<p>`：`font-sans text-xl font-medium text-wandor-muted leading-relaxed max-w-[500px] mb-10`。文字：“告诉我们的 AI 你要去哪里以及你喜欢什么。我们会为你创建个性化行程。”

**液态玻璃提示卡片：**
- Wrapper `<div>`：`relative w-[701px] max-md:w-[calc(100vw-48px)] min-h-[208px] bg-white/[0.06] border-[3px] border-white rounded-[44px] shadow-[0_0_4px_0_rgba(0,0,0,0.15)] overflow-hidden backdrop-blur-[20px]`。这就是液态玻璃效果：极低透明度的白色填充、粗白色边框、强背景模糊、柔和阴影和大胶囊圆角。
- 提示文字 `<p>`：绝对定位 `left-[29px] top-[57px] -translate-y-1/2 w-[609px] max-md:w-[calc(100%-58px)] font-sans text-xl max-md:text-[17px] font-medium text-wandor-prompt leading-relaxed break-words`。文字：“我计划十月去日本旅行 7 天。我喜欢美食、隐秘咖啡馆和风景优美的徒步路线，而且想避开人群....”（注意末尾的 “....”）。
- 卡片内的“规划我的旅行”CTA 按钮：`absolute bottom-[21px] right-[21px] w-[156px] h-14 bg-black border-none rounded-[44px] shadow-[0_0_2px_0_rgba(0,0,0,0.05)] cursor-pointer flex items-center justify-center font-sans text-base font-medium text-[#fafafa] uppercase tracking-[0.02em] transition-all hover:bg-[#333] active:scale-95`。文字：“规划我的旅行”。
- 隐藏的文件输入框：`<input ref={fileInputRef} type="file" accept="image/*,.pdf" className="hidden" />`。
- 上传按钮：`absolute left-[21px] top-[137px] w-11 h-11 bg-transparent border border-white/70 rounded-full cursor-pointer flex items-center justify-center backdrop-blur-[14px] transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2`。`aria-label="上传灵感素材"`。点击时，通过 ref 触发隐藏的文件输入框。内部渲染 lucide-react 的 `Upload` 图标：`<Upload className="w-[18px] h-[18px] text-wandor-text flex-shrink-0" />`。

**交互 / 动画：**
- 所有按钮使用 `transition-opacity` / `transition-all` / `transition-transform`，并配合 `hover:opacity-55`、`hover:bg-[#333]`、`hover:scale-105` 和 `active:scale-95`，营造有触感的微交互。
- 玻璃卡片和上传按钮使用 `backdrop-blur-[20px]` / `backdrop-blur-[14px]`，在视频上形成液态玻璃磨砂效果。
- 视频自动静音播放并持续循环，形成环境动态效果。
- 顶部从白色到透明的渐变遮罩确保导航和标题在视频上保持清晰可读。

**响应式行为：**
- 在 `max-width: 760px`（Tailwind `max-md`）时：导航 padding 缩小为 `px-6 pt-5`，logo 降为 32px，中央导航链接和登录按钮隐藏，玻璃卡片宽度变为 `calc(100vw - 48px)`，提示文字变为 17px，宽度为 `calc(100%-58px)`。

**应用结构：**
- `src/App.tsx` 从 `@/components/Hero` 导入 `Hero`，并在外层 `<div>` 中渲染它。
- `Hero.tsx` 包含上述所有标记，以及用于中央链接的 `NavButton` 辅助组件。
- 使用 `@/` 路径别名（映射到 `src/`），通过 `resolve.alias` 在 `vite.config.ts` 中配置。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型