加载中…
创作者 · viktoroddy
查看原始来源 ↗复刻提示词保留原文,另附运行环境、素材与验收要求;附加说明不是原作者原话。
提示词:
构建一个高级电动车落地页,具有深色电影感美学。整个网站使用黑色背景(hsl(0,0%,0%)),配浅色文字(主色 hsl(0,0%,95%))和橙色强调色(hsl(25,100%,50%))。不使用默认字体——保持极简和编辑感。使用 shadcn/ui 设计令牌。以下是按顺序排列的各版块:
设计系统(index.css)
--background: 0 0% 0%
--foreground: 0 0% 12%(用于 CTA 按钮内圆等深色元素)
--primary: 0 0% 95%(接近白色,用于所有文字)
--primary-foreground: 0 0% 12%
--accent-warm: 25 90% 55%(橙色强调色)
所有版块背景均为纯黑 hsl(0,0%,0%)
版块 1:导航栏
固定在顶部,全宽,圆角药丸形状
初始透明,滚动后:黑色背景加 backdrop-blur-xl,边框 primary/10
左侧 Logo:「Electric」加一个橙色圆点「.」——Logo 颜色随滚动从黑变白
导航链接:Services、About、Team、Contact —— 悬停时有放大的圆角背景药丸效果
右侧 CTA 按钮:「Get Started」,圆角药丸形状,内含一个圆形前景色背景中的 ArrowUpRight 图标
CTA 随滚动从黑色背景切换为白色背景
移动端:汉堡菜单,打开一个圆角深色遮罩层,内含链接和 CTA
版块 2:Hero
全视口高度,视频背景(/videos/hero_bg.mp4,自动播放、循环、静音)
左上方大标题:「Drive Beyond. / Unlock Pure Power」—— 白色文字,桌面端 78px
标题下方:「Learn more」链接,配箭头图标,带边框按钮(border-foreground),无填充
版块 3:Connected Systems(BigLinks)
上半部分:视频背景(/videos/biglinks_bg.mp4),带 60% 黑色叠加层
左对齐内容:药丸徽标「Connected Systems」,标题「Seamlessly Integrate / Every System」,副标题段落
12 列图标网格(移动端 4 列,平板 6 列,桌面端 12 列):每个图标 80x80px,圆角 rounded-xl,边框 white/10,背景 white/5,backdrop-blur。图标为橙色并带发光效果(drop-shadow-[0_0_8px_hsl(25,100%,50%)])。图标包括:Gauge、Zap、Shield、Cog、Fuel、Navigation、Bluetooth、Wifi、Radio、Car、Wrench、Settings(来自 lucide-react)
「Explore All」圆角药丸边框按钮
下半部分:3 个纵向堆叠的超大全宽文字链接:「Find a dealer」「Fleet & lease」「Book a test drive」—— 每个都是巨大字号(桌面端 110px),右对齐配一个 ChevronRight 图标,用 border-b border-primary/10 分隔,悬停时降低透明度
版块 4:Services
视频背景(/videos/services_card.mp4,自动播放、循环、静音)
居中内容:药丸徽标「Next-Gen Driving」,标题「Design, build and perfect / every single detail」
下方:一个玻璃拟态卡片(max-w-2xl,居中,bg-primary/5 backdrop-blur-xl border-primary/10 rounded-2xl)标题:「Effortless, All-Electric / Performance」
描述自适应技术的段落
3 个带橙色 Zap 图标(带发光)的要点:「Full-spectrum torque & drivetrain control」「Personalised driving & comfort profiles」「Track range & plan routes easily」
版块 5:About
黑色背景,左对齐
标签:一条线加「About Us」文字
标题:「Why You Absolutely Should / Experience Our Electric Range」(后半部分为 primary/50)
下方:两栏布局左侧:3 张抽象形状图片并排(shape-1.png、shape-2.png、shape-3.png),均为 object-contain,高 256px
右侧:两段正文文字,颜色 primary/70
版块 6:Audience(For Whom?)
黑色背景,左对齐
标签:一条线加「For Whom?」
标题:「Who Should Experience / Our Electric Range」(第二行为 primary/50)
4 列卡片网格:第一张卡片:圆形,带背景图片(audience-icon.png),aspect-square rounded-full border-primary/10
其余 3 张卡片:圆角 rounded-3xl 边框卡片,配 lucide 图标(Users、Gauge、Wrench),颜色 primary/50,下方配标签文字
底部:圆角信息条,配说明段落
版块 7:CTA
黑色外层背景,内层圆角 rounded-2xl 卡片,视频背景(/videos/services_card.mp4)加 50% 黑色叠加层
左对齐内容:标题「Experience the future / of driving today.」
副标题:「Book your test drive — one click, instant access. / No commitment, pure electric.」
圆角 CTA 按钮:「Book a Test Drive」,配一个圆形前景色徽标内的 ArrowUpRight 图标,药丸形状,背景 bg-primary
所需素材:
4 个视频:hero_bg.mp4、biglinks_bg.mp4、services_card.mp4(使用两次:Services 和 CTA)
3 张抽象形状 PNG:shape-1.png、shape-2.png、shape-3.png
1 张受众图标图片:audience-icon.png
所有图标使用 lucide-react
关键设计模式:
所有版块内边距:px-7 py-16 md:px-12 lg:px-20 lg:py-24,最大宽度 7xl 居中
标签模式:h-px w-6 bg-primary/40 线条加小号文字
徽标模式:圆角药丸,边框 primary/30,全大写字间距宽松
CTA 按钮模式:圆角,bg-primary text-primary-foreground,内含圆形图标徽标
橙色强调色仅用于:Logo 圆点、图标发光、特定高亮——始终为 hsl(25,100%,50%),可选叠加 drop-shadow 发光适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
多人复现
继续探索
@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
提示词: 构建一个 Hero 区域,具体规格如下: 整体布局: 全宽版块,背景色 #000000(纯黑) overflow hidden 所有内容背后播放背景视频(详情见下) 背景视频: 来源: 自动播放、循环、静音、playsInline 缩放到容器的 120%(宽度和高度均为 120%) 水平居中,焦点锚定在底部 位于所有内容之下(最低层级) 模糊背景元素: 绝对定位,水平居中,顶部偏移约 215px 尺寸:宽 801px × 高 384px,完全圆角(药丸
@viktoroddy 使用 Nano Banana · Flow · AntiGravity完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
提示词: 为一家名为「Logoisum」的视频剪辑机构构建一个高级、高端的 Hero 区域,具体规格如下: 背景:实现一个全屏循环播放的视频背景,使用这个 URL:。视频必须静音、自动播放,并设置为 object-cover 以铺满整个版块,不加任何颜色叠加层。 导航栏:一个悬浮的白色导航栏,圆角 rounded-[16px],带细微阴影。 左侧:机构 Logo。 中间:一个菜单,包含「About」「Works」「Services」和「Testimonial」链接,字
@viktoroddy 使用 GPT Image 2 · Veo 3 · Lovable完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词: # 提示词:精确复刻这个落地页 为一个名为「Mindloop」的用心经营的通讯平台构建一个生产级质量的营销落地页,使用 Vite + React + TypeScript 应用,配 Tailwind CSS、shadcn/ui、framer-motion 和 lucide-react。整体美学是平静、编辑感、电影感——黑色背景、白色前景、衬线斜体点缀、环境氛围的循环背景视频,以及交互表面上标志性的「液态玻璃」效果。不使用紫色 / 靛
Gemini 中类似 CapCut 的视频编辑器 UIAI 编程(UI) · Gemini 3 Pro · 2026-08-12
生成 40 个带下载按钮的简单 SVG 图标AI 编程(UI) · Gemini 3 Pro · 2026-08-12
基于 React 的高端瑞士风格着陆页生成器AI 编程(UI) · Gemini 3 Pro · 2026-08-12
纽约天际线 SVG 单 HTML 场景AI 编程(UI) · Gemini 3 Pro · 2026-08-12
为客户 AP 打造的代理机构风格网站AI 编程(UI) · Gemini 3 Pro · 2026-08-12Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。