Stellar AI

Prompt

使用 React、Tailwind CSS 和 Lucide React icons 创建一个 "Stellar.ai" 落地页 hero section。使用 Inter 字体（从 Google Fonts 导入）。页面采用白色背景（bg-white），max-width 为 max-w-7xl，并通过 mx-auto 居中。

字体：从 Google Fonts 导入 Inter（字重 400、500、600、700）。在 body 上设置 font-family: 'Inter', sans-serif。

自定义 CSS 动画（位于 index.css）：

@keyframes fadeInUp -- 从 opacity: 0; transform: translateY(30px) 到 opacity: 1; transform: translateY(0)。Class .animate-fade-in-up 使用此动画，并设置 0.6s ease-out forwards。
@keyframes fadeInOverlay -- 从 opacity: 0 到 opacity: 1。Class .animate-fade-in-overlay 使用此动画，并设置 0.4s ease-out forwards。
@keyframes fadeInDialog -- 从 opacity: 0 到 opacity: 1。Class .animate-slide-up-overlay 使用此动画，并设置 0.5s ease-out forwards，同时带有 transform: translate(-50%, -50%)。
每个主要 section 都使用 .animate-fade-in-up，并通过内联样式设置错开的 animationDelay（从 0.1s 开始，每次递增 0.1s）。每个元素的内联 opacity 初始值均为 0，以便动画将其变为可见。

Tailwind config：使用默认配置，不添加自定义 theme extensions。使用标准 content paths。

NAVIGATION（animationDelay: 0.1s）：
px-6 py-4 flex items-center justify-between max-w-7xl mx-auto
左侧：Lucide Star icon（w-5 h-5，fill-black）+ "Stellar.ai" 文本（text-lg font-semibold）
中间（移动端隐藏，hidden md:flex items-center gap-8）："解决方案" 搭配 ChevronDown、"面向团队" 搭配 ChevronDown、"关于我们"、"学习中心"——全部使用 text-sm text-gray-700 hover:text-black
右侧："登录" 链接（text-sm text-gray-700）+ "免费开始使用" 按钮（bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors）

HERO SECTION（px-6 pt-24 pb-32 max-w-7xl mx-auto text-center）：
评价 Badge（delay: 0.2s）：inline-flex items-center gap-2 mb-8。包含一个带边框的正方形（w-6 h-6 border border-gray-300 rounded），内部放置填充样式的 Star icon，旁边是 "来自 18.3K+ 位用户的 4.9 分评价"（text-sm font-medium text-black）。

主标题（delay: 0.3s）：text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5。第一行："更聪明地工作。更快速地行动。" 第二行："AI 为你赋能。"，使用渐变文本（bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent）。

副标题（delay: 0.4s）：text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto。文本："智能自动化与你喜爱的工具同步，简化任务、提高产出并节省时间。"

CTA Button（delay: 0.5s）：bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12。文本："开始免费试用"。

Tab Bar（delay: 0.6s）：居中的 bg-gray-100 rounded-lg p-1 容器。
移动端（md:hidden）：2x2 网格，包含 4 个按钮：分析（BarChart3）、训练（BookOpen）、测试（Users）、部署（Rocket）。Active：bg-white text-black shadow-sm。Inactive：text-gray-600。
桌面端（hidden md:flex）：相同的 4 个按钮横向排列，并带有垂直分隔线（w-px h-5 bg-gray-300）。
Tabs 使用 setInterval 每 4s 自动循环。State：useState('analyse')。

Video + Overlay Section（delay: 0.7s）：
容器：relative rounded-3xl overflow-hidden h-[400px] md:h-[500px]
Video：src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4"，autoPlay、loop、muted、playsInline、w-full h-full object-cover。

每个 tab 对应 1 个条件式 Overlay，共 4 个；外层使用 animate-fade-in-overlay，内部卡片使用 animate-slide-up-overlay：
a. 分析："设置你的 AI 工作区" 向导，带有进度为 25% 的紫色进度条和 4 个步骤
b. 训练："AI 模型训练"，带有进度为 67% 的橙色进度条和 4 项指标
c. 测试："测试套件结果"，显示绿色成功状态和 127/127 项测试
d. 部署："部署到生产环境"，包含 4 个检查清单项目和“立即部署”按钮

公司 Logos（delay: 0.8s）：mt-24 flex，包含 INTERSCOPE、SPOTIFY、Nexera（圆点网格）、M3（serif italic）、LAURA COLE（LC 圆形）、vertex（圆点）

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

使用 React、Tailwind CSS 和 Lucide React icons 创建一个 "Stellar.ai" 落地页 hero section。使用 Inter 字体（从 Google Fonts 导入）。页面采用白色背景（bg-white），max-width 为 max-w-7xl，并通过 mx-auto 居中。

字体：从 Google Fonts 导入 Inter（字重 400、500、600、700）。在 body 上设置 font-family: 'Inter', sans-serif。

自定义 CSS 动画（位于 index.css）：

@keyframes fadeInUp -- 从 opacity: 0; transform: translateY(30px) 到 opacity: 1; transform: translateY(0)。Class .animate-fade-in-up 使用此动画，并设置 0.6s ease-out forwards。
@keyframes fadeInOverlay -- 从 opacity: 0 到 opacity: 1。Class .animate-fade-in-overlay 使用此动画，并设置 0.4s ease-out forwards。
@keyframes fadeInDialog -- 从 opacity: 0 到 opacity: 1。Class .animate-slide-up-overlay 使用此动画，并设置 0.5s ease-out forwards，同时带有 transform: translate(-50%, -50%)。
每个主要 section 都使用 .animate-fade-in-up，并通过内联样式设置错开的 animationDelay（从 0.1s 开始，每次递增 0.1s）。每个元素的内联 opacity 初始值均为 0，以便动画将其变为可见。

Tailwind config：使用默认配置，不添加自定义 theme extensions。使用标准 content paths。

NAVIGATION（animationDelay: 0.1s）：
px-6 py-4 flex items-center justify-between max-w-7xl mx-auto
左侧：Lucide Star icon（w-5 h-5，fill-black）+ "Stellar.ai" 文本（text-lg font-semibold）
中间（移动端隐藏，hidden md:flex items-center gap-8）："解决方案" 搭配 ChevronDown、"面向团队" 搭配 ChevronDown、"关于我们"、"学习中心"——全部使用 text-sm text-gray-700 hover:text-black
右侧："登录" 链接（text-sm text-gray-700）+ "免费开始使用" 按钮（bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors）

HERO SECTION（px-6 pt-24 pb-32 max-w-7xl mx-auto text-center）：
评价 Badge（delay: 0.2s）：inline-flex items-center gap-2 mb-8。包含一个带边框的正方形（w-6 h-6 border border-gray-300 rounded），内部放置填充样式的 Star icon，旁边是 "来自 18.3K+ 位用户的 4.9 分评价"（text-sm font-medium text-black）。

主标题（delay: 0.3s）：text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5。第一行："更聪明地工作。更快速地行动。" 第二行："AI 为你赋能。"，使用渐变文本（bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent）。

副标题（delay: 0.4s）：text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto。文本："智能自动化与你喜爱的工具同步，简化任务、提高产出并节省时间。"

CTA Button（delay: 0.5s）：bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12。文本："开始免费试用"。

Tab Bar（delay: 0.6s）：居中的 bg-gray-100 rounded-lg p-1 容器。
移动端（md:hidden）：2x2 网格，包含 4 个按钮：分析（BarChart3）、训练（BookOpen）、测试（Users）、部署（Rocket）。Active：bg-white text-black shadow-sm。Inactive：text-gray-600。
桌面端（hidden md:flex）：相同的 4 个按钮横向排列，并带有垂直分隔线（w-px h-5 bg-gray-300）。
Tabs 使用 setInterval 每 4s 自动循环。State：useState('analyse')。

Video + Overlay Section（delay: 0.7s）：
容器：relative rounded-3xl overflow-hidden h-[400px] md:h-[500px]
Video：src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4"，autoPlay、loop、muted、playsInline、w-full h-full object-cover。

每个 tab 对应 1 个条件式 Overlay，共 4 个；外层使用 animate-fade-in-overlay，内部卡片使用 animate-slide-up-overlay：
a. 分析："设置你的 AI 工作区" 向导，带有进度为 25% 的紫色进度条和 4 个步骤
b. 训练："AI 模型训练"，带有进度为 67% 的橙色进度条和 4 项指标
c. 测试："测试套件结果"，显示绿色成功状态和 127/127 项测试
d. 部署："部署到生产环境"，包含 4 个检查清单项目和“立即部署”按钮

公司 Logos（delay: 0.8s）：mt-24 flex，包含 INTERSCOPE、SPOTIFY、Nexera（圆点网格）、M3（serif italic）、LAURA COLE（LC 圆形）、vertex（圆点）

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

适用模型与稳定度

建议模型

待补充模型