Bloom AI

Prompt

为“Bloom”创建一个全屏 hero landing page——这是一个由 AI 驱动的植物/花艺设计平台。设计采用液态玻璃拟态美学，并以循环视频作为背景。

背景
全屏自动播放、循环、静音视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
视频使用 object-cover 覆盖整个 viewport，位于 z-0。所有内容悬浮于其上方的 z-10。

字体
展示/正文：Poppins (Google Fonts)——用于标题和正文文本
衬线强调字体：Source Serif 4 (Google Fonts)——仅用于标题内的斜体/强调文本（例如 h1-h3 内的 <em>、<i>、.italic）
标题使用 font-weight: 500

配色方案
严格仅使用灰度——所有 CSS variables 均为 0 0% X% HSL values
文本按层级使用 text-white、text-white/80、text-white/60、text-white/50
不得使用任何彩色强调色

液态玻璃 CSS（两个层级）
在 @layer components 下定义：

.liquid-glass（轻量）
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
::before pseudo-element：使用 linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) 创建渐变边框，设置 padding: 1.4px，并通过 -webkit-mask-composite: xor; mask-composite: exclude; 进行遮罩；

.liquid-glass-strong（厚重，用于 CTA/panels）
结构相同，但 backdrop-filter: blur(50px)，box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)，且 ::before 使用 0.5/0.2 alpha，而不是 0.45/0.15。

布局——双面板拆分
Flex row，min-h-screen。左侧面板 w-[52%]，右侧面板 w-[48%]（移动端隐藏，lg:flex）。

左侧面板
带有 liquid-glass-strong overlay（absolute inset-4 lg:inset-6 rounded-3xl）
Nav：左侧为 Logo image（/logo.png，32×32）+“bloom”文本（semibold、2xl、tracking-tighter、white）。右侧为带 Menu icon 的“Menu”按钮，采用 liquid-glass pill。
Hero 中心区域（flex-1、居中）：
再次显示 Logo image（80×80）
h1：“Innovating the / spirit of bloom AI”——text-6xl lg:text-7xl、tracking-[-0.05em]、white。斜体部分使用 font-serif text-white/80
CTA button：“Explore Now”，带有一个位于 w-7 h-7 rounded-full bg-white/15 圆形内的 Download icon。按钮使用 liquid-glass-strong、rounded-full、hover:scale-105 active:scale-95
三个 pills：“Artistic Gallery”“AI Generation”“3D Structures”——liquid-glass、rounded-full、text-xs text-white/80
底部引语：
“VISIONARY DESIGN”label（text-xs tracking-widest uppercase text-white/50）
引语：“We imagined a realm with no ending.”——混合使用 font-display/font-serif italic spans
作者：“MARCUS AURELIO”，两侧各有一条水平线

右侧面板（仅桌面端）
顶部栏：Social icons（Twitter、LinkedIn、Instagram）放在带 ArrowRight 的 liquid-glass pill 中。Account button 与 Sparkles icon button，二者均使用 liquid-glass。
社区卡片：小型 liquid-glass card（w-56），包含“Enter our ecosystem”标题 + 描述
底部功能区（mt-auto）：外层为带 rounded-[2.5rem] 的 liquid-glass container
两个并排 cards：“Processing”（Wand2 icon）和“Growth Archive”（BookOpen icon），均使用 liquid-glass rounded-3xl
底部 card：花朵图片 thumbnail（来自 @/assets/hero-flowers.png，96×64）、“Advanced Plant Sculpting”标题 + 描述，以及一个“+”按钮。全部使用 liquid-glass。

图标
全部来自 lucide-react：Sparkles、Download、Wand2、BookOpen、ArrowRight、Twitter、Linkedin、Instagram、Menu

关键细节
所有 interactive elements：hover:scale-105 transition-transform
Social icon links：text-white hover:text-white/80 transition-colors
Icon containers：w-8 h-8 rounded-full bg-white/10 flex items-center justify-center
任何位置均不得使用 border classes——玻璃效果通过 ::before 处理所有边框
border-radius token：--radius: 1rem

溯源 · 已核对已发布案例的 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

为“Bloom”创建一个全屏 hero landing page——这是一个由 AI 驱动的植物/花艺设计平台。设计采用液态玻璃拟态美学，并以循环视频作为背景。

背景
全屏自动播放、循环、静音视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
视频使用 object-cover 覆盖整个 viewport，位于 z-0。所有内容悬浮于其上方的 z-10。

字体
展示/正文：Poppins (Google Fonts)——用于标题和正文文本
衬线强调字体：Source Serif 4 (Google Fonts)——仅用于标题内的斜体/强调文本（例如 h1-h3 内的 <em>、<i>、.italic）
标题使用 font-weight: 500

配色方案
严格仅使用灰度——所有 CSS variables 均为 0 0% X% HSL values
文本按层级使用 text-white、text-white/80、text-white/60、text-white/50
不得使用任何彩色强调色

液态玻璃 CSS（两个层级）
在 @layer components 下定义：

.liquid-glass（轻量）
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
::before pseudo-element：使用 linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) 创建渐变边框，设置 padding: 1.4px，并通过 -webkit-mask-composite: xor; mask-composite: exclude; 进行遮罩；

.liquid-glass-strong（厚重，用于 CTA/panels）
结构相同，但 backdrop-filter: blur(50px)，box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)，且 ::before 使用 0.5/0.2 alpha，而不是 0.45/0.15。

布局——双面板拆分
Flex row，min-h-screen。左侧面板 w-[52%]，右侧面板 w-[48%]（移动端隐藏，lg:flex）。

左侧面板
带有 liquid-glass-strong overlay（absolute inset-4 lg:inset-6 rounded-3xl）
Nav：左侧为 Logo image（/logo.png，32×32）+“bloom”文本（semibold、2xl、tracking-tighter、white）。右侧为带 Menu icon 的“Menu”按钮，采用 liquid-glass pill。
Hero 中心区域（flex-1、居中）：
再次显示 Logo image（80×80）
h1：“Innovating the / spirit of bloom AI”——text-6xl lg:text-7xl、tracking-[-0.05em]、white。斜体部分使用 font-serif text-white/80
CTA button：“Explore Now”，带有一个位于 w-7 h-7 rounded-full bg-white/15 圆形内的 Download icon。按钮使用 liquid-glass-strong、rounded-full、hover:scale-105 active:scale-95
三个 pills：“Artistic Gallery”“AI Generation”“3D Structures”——liquid-glass、rounded-full、text-xs text-white/80
底部引语：
“VISIONARY DESIGN”label（text-xs tracking-widest uppercase text-white/50）
引语：“We imagined a realm with no ending.”——混合使用 font-display/font-serif italic spans
作者：“MARCUS AURELIO”，两侧各有一条水平线

右侧面板（仅桌面端）
顶部栏：Social icons（Twitter、LinkedIn、Instagram）放在带 ArrowRight 的 liquid-glass pill 中。Account button 与 Sparkles icon button，二者均使用 liquid-glass。
社区卡片：小型 liquid-glass card（w-56），包含“Enter our ecosystem”标题 + 描述
底部功能区（mt-auto）：外层为带 rounded-[2.5rem] 的 liquid-glass container
两个并排 cards：“Processing”（Wand2 icon）和“Growth Archive”（BookOpen icon），均使用 liquid-glass rounded-3xl
底部 card：花朵图片 thumbnail（来自 @/assets/hero-flowers.png，96×64）、“Advanced Plant Sculpting”标题 + 描述，以及一个“+”按钮。全部使用 liquid-glass。

图标
全部来自 lucide-react：Sparkles、Download、Wand2、BookOpen、ArrowRight、Twitter、Linkedin、Instagram、Menu

关键细节
所有 interactive elements：hover:scale-105 transition-transform
Social icon links：text-white hover:text-white/80 transition-colors
Icon containers：w-8 h-8 rounded-full bg-white/10 flex items-center justify-center
任何位置均不得使用 border classes——玻璃效果通过 ::before 处理所有边框
border-radius token：--radius: 1rem

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

适用模型与稳定度

建议模型

待补充模型