加载中…
创作者 · viktoroddy
查看原始来源 ↗Prompt
提示词: 构建一个 Hero 区域,具体规格如下: 整体布局: 全宽版块,背景色 #000000(纯黑) overflow hidden 所有内容背后播放背景视频(详情见下) 背景视频: 来源: 自动播放、循环、静音、playsInline 缩放到容器的 120%(宽度和高度均为 120%) 水平居中,焦点锚定在底部 位于所有内容之下(最低层级) 模糊背景元素: 绝对定位,水平居中,顶部偏移约 215px 尺寸:宽 801px × 高 384px,完全圆角(药丸形状) 颜色:纯黑 #000000 模糊:77.5px z-index: 1(位于视频之上,内容之下) 所有文字和 UI 内容位于 z-index: 2(位于最上层) 导航栏(顶部): 最大宽度:1440px,水平居中 水平内边距:120px,垂直内边距:16px,高度:102px Flexbox 横向排列,两端对齐 左侧:Logo 加导航链接,间距 80px Logo:「LOGOIPSUM」SVG 标志,134px × 25px,白色填充 导航链接横向排列,间距 10px 每个链接:字体 Manrope,中等字重,14px 字号,22px 行高,白色,内边距水平 10px / 垂直 4px 项目:「Home」、「Services」(右侧带一个 24×24 白色向下箭头图标,间距 3px)、「Reviews」、「Contact us」 右侧:两个按钮,间距 12px 「Sign In」按钮:白色背景,内边距水平 16px / 垂直 8px,圆角 8px,Manrope semibold 14px/22px,颜色 #171717,叠加 1px #d4d4d4 边框 「Get Started」按钮:背景 #7b39fc(紫色),内边距 16px/8px,圆角 8px,Manrope semibold 14px/22px,颜色 #fafafa,细微阴影 0px 4px 16px rgba(23,23,23,0.04) Hero 内容(导航栏下方居中): Flex 纵向排列,居中,最大宽度 871px,顶部外边距 162px 标题区块与按钮之间间距 24px 标题区块:flex 纵向,间距 10px,文字居中 第一行:「Automate repetitive.」—— 字体 Inter,中等字重,76px,白色,字间距 -2px,行高 1.15 第二行:「Focus on growth.」—— 字体 Instrument Serif,斜体,76px,白色,字间距 -2px,行高 1.15 副标题:「The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build.」—— 字体 Manrope,常规字重,18px,行高 26px,颜色 #f6f7f9,透明度 90%,最大宽度 613px CTA 按钮:flex 横向,间距 22px,垂直居中 「Get Started Free」:背景 #7b39fc,内边距水平 24px / 垂直 14px,圆角 10px,字体 Cabin medium 16px,行高 1.7,白色文字 「Watch 2min Demo」:背景 #2b2344(深紫色),相同的内边距 / 圆角 / 字体规格,颜色 #f6f7f9 仪表盘图片(Hero 内容下方): 居中,顶部外边距 80px,底部内边距 40px 外层容器:宽 1163px(最大为视口的 90%),圆角 24px,背景模糊 backdrop-blur 10px,背景 rgba(255,255,255,0.05)(玻璃拟态),透明边框 1.5px 内边距:四周 22.5px 内部图片:全宽,高度自动,圆角 8px,object-fit cover
适用模型与稳定度
建议模型
独立复测证据
2026年8月9日
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例,包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词:「设计一个机构网站,把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型,然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集,请保存这条 🛒
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「3D Animated Pin」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// 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…

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