转换数据

Prompt

首屏区域创建提示词

创建一个带循环视频背景的现代首屏区域，规格如下：

视频背景：

URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4

尺寸：宽度和高度均为 115%

位置：水平居中，锚定顶部，焦点为 object-top

自定义 JavaScript 淡入淡出系统（不使用 CSS transitions）：

加载或循环开始时，使用基于 requestAnimationFrame 的 250ms 淡入

视频结束前剩余 0.55 秒时进行 250ms 淡出

fadingOutRef 布尔值可防止重复的 timeUpdate 事件再次触发淡出

On ended：将 opacity 设为 0，延迟 100ms，重置为 currentTime = 0，play，然后重新淡入

每次开始新的淡入淡出时，取消正在运行的动画帧，防止动画相互冲突

淡入淡出从当前 opacity 继续（不跳变）

所需字体：

Schibsted Grotesk（字重：400、500、600、700）

Inter（字重：400、500、600、700）

Noto Sans（字重：400、500、600、700）

Fustat（字重：400、500、600、700）

导航栏：

Logo：“Logoipsum”（Schibsted Grotesk SemiBold，24px，字距 -1.44px）

菜单项（Schibsted Grotesk Medium，16px，字距 -0.2px）：

平台

功能（带下拉 chevron icon）

项目

社区

联系

右侧按钮：

“注册”（透明背景，宽 82px）

“登录”（黑色背景、白色文字，宽 101px）

内边距：水平 120px，垂直 16px

首屏内容（使用 -mt-[50px] 上移 50px）：

徽章组件：

深色徽章，带 star icon 和“新功能”文字

浅色背景，文字为：“探索无限可能”

字体：Inter Regular，14px

圆角并带细微阴影

主标题：

文字：“快速转换数据”

字体：Fustat Bold，80px，字距 -4.8px，line-height: none

颜色：黑色，居中对齐

副标题：

文字：“上传你的信息，立即获得强大洞察。更聪明地工作，轻松实现目标。”

字体：Fustat Medium，20px，字距 -0.4px

颜色：#505050

最大宽度：736px，宽度：542px

搜索输入框：

Backdrop blur 搭配深色透明背景（rgba(0,0,0,0.24)）

尺寸：最大宽度 728px，高 200px，圆角 18px

顶行：额度信息

左侧：“60/450 额度”，带绿色“升级”按钮

右侧：AI icon + “由 GPT-4o 提供支持”

字体：Schibsted Grotesk Medium，12px，白色文字

主输入区域：

白色背景，圆角 12px，带阴影

Placeholder：“输入问题...” （16px，rgba(0,0,0,0.6)）

黑色圆形提交按钮，带 up arrow icon（尺寸 36px）

底行：

左侧：三个操作按钮（灰色背景，圆角 6px）：

“附件”，带 paperclip icon

“语音”，带 microphone icon

“提示词”，带 search icon

右侧：字符计数器“0/3,000”（12px，灰色）

图标（来自导入文件的 SVG paths）：

Chevron down arrow

Up arrow

Star icon

AI sparkle icon

Attach/paperclip icon

Voice/microphone icon

Search icon

间距：

导航与首屏之间的间距：60px

标题区域与搜索框之间的间距：44px

标题区域内部元素间距：34px（徽章到标题、标题到副标题）

首屏内容上移：50px 负外边距

水平内边距：120px

配色方案：

黑色文字：#000000

灰色文字：#505050

浅灰色背景：#f8f8f8

绿色升级按钮：rgba(90,225,76,0.89)

深色徽章：#0e1311

白色：#ffffff

透明遮罩：rgba(0,0,0,0.24)

组件结构：

带自定义淡入淡出逻辑的 VideoBackground 组件

导航栏（固定间距，水平布局）

首屏内容容器（居中，带最大宽度约束）

徽章、标题区域和搜索输入框使用嵌套组件

所有元素均置于全屏视频背景之上

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

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

AI 编程(UI)X

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

3D 动画图钉

Aceternity UI 的 AI Coding (UI) 案例“3D Animated Pin”——GoodCase.ai 上提供完整提示词与原始来源。

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)Aceternity UI

3D 地球

Aceternity UI 的 AI 编程（UI）案例“3D 地球”——完整提示词和原始来源见 GoodCase.ai。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

Prompt

首屏区域创建提示词

创建一个带循环视频背景的现代首屏区域，规格如下：

视频背景：

URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4

尺寸：宽度和高度均为 115%

位置：水平居中，锚定顶部，焦点为 object-top

自定义 JavaScript 淡入淡出系统（不使用 CSS transitions）：

加载或循环开始时，使用基于 requestAnimationFrame 的 250ms 淡入

视频结束前剩余 0.55 秒时进行 250ms 淡出

fadingOutRef 布尔值可防止重复的 timeUpdate 事件再次触发淡出

On ended：将 opacity 设为 0，延迟 100ms，重置为 currentTime = 0，play，然后重新淡入

每次开始新的淡入淡出时，取消正在运行的动画帧，防止动画相互冲突

淡入淡出从当前 opacity 继续（不跳变）

所需字体：

Schibsted Grotesk（字重：400、500、600、700）

Inter（字重：400、500、600、700）

Noto Sans（字重：400、500、600、700）

Fustat（字重：400、500、600、700）

导航栏：

Logo：“Logoipsum”（Schibsted Grotesk SemiBold，24px，字距 -1.44px）

菜单项（Schibsted Grotesk Medium，16px，字距 -0.2px）：

平台

功能（带下拉 chevron icon）

项目

社区

联系

右侧按钮：

“注册”（透明背景，宽 82px）

“登录”（黑色背景、白色文字，宽 101px）

内边距：水平 120px，垂直 16px

首屏内容（使用 -mt-[50px] 上移 50px）：

徽章组件：

深色徽章，带 star icon 和“新功能”文字

浅色背景，文字为：“探索无限可能”

字体：Inter Regular，14px

圆角并带细微阴影

主标题：

文字：“快速转换数据”

字体：Fustat Bold，80px，字距 -4.8px，line-height: none

颜色：黑色，居中对齐

副标题：

文字：“上传你的信息，立即获得强大洞察。更聪明地工作，轻松实现目标。”

字体：Fustat Medium，20px，字距 -0.4px

颜色：#505050

最大宽度：736px，宽度：542px

搜索输入框：

Backdrop blur 搭配深色透明背景（rgba(0,0,0,0.24)）

尺寸：最大宽度 728px，高 200px，圆角 18px

顶行：额度信息

左侧：“60/450 额度”，带绿色“升级”按钮

右侧：AI icon + “由 GPT-4o 提供支持”

字体：Schibsted Grotesk Medium，12px，白色文字

主输入区域：

白色背景，圆角 12px，带阴影

Placeholder：“输入问题...” （16px，rgba(0,0,0,0.6)）

黑色圆形提交按钮，带 up arrow icon（尺寸 36px）

底行：

左侧：三个操作按钮（灰色背景，圆角 6px）：

“附件”，带 paperclip icon

“语音”，带 microphone icon

“提示词”，带 search icon

右侧：字符计数器“0/3,000”（12px，灰色）

图标（来自导入文件的 SVG paths）：

Chevron down arrow

Up arrow

Star icon

AI sparkle icon

Attach/paperclip icon

Voice/microphone icon

Search icon

间距：

导航与首屏之间的间距：60px

标题区域与搜索框之间的间距：44px

标题区域内部元素间距：34px（徽章到标题、标题到副标题）

首屏内容上移：50px 负外边距

水平内边距：120px

配色方案：

黑色文字：#000000

灰色文字：#505050

浅灰色背景：#f8f8f8

绿色升级按钮：rgba(90,225,76,0.89)

深色徽章：#0e1311

白色：#ffffff

透明遮罩：rgba(0,0,0,0.24)

组件结构：

带自定义淡入淡出逻辑的 VideoBackground 组件

导航栏（固定间距，水平布局）

首屏内容容器（居中，带最大宽度约束）

徽章、标题区域和搜索输入框使用嵌套组件

所有元素均置于全屏视频背景之上

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

适用模型与稳定度

建议模型

待补充模型