Nexora 自动化

Prompt

创建一个 SaaS 落地页的 hero section，严格遵循以下规格：

页面布局

整个页面采用 h-screen flex flex-col bg-background overflow-hidden——Navbar + Hero 恰好填满 100vh，不可滚动。
页面使用两种通过 CSS 导入的 Google Fonts：Instrument Serif（用于展示文字/标题，包括斜体）和 Inter（用于正文）。
字体与设计 Token（index.css）

导入字体：

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');
CSS 变量（:root）：

--background: 0 0% 100%（白色）
--foreground: 210 14% 17%（深炭灰色）
--primary: 210 14% 17% / --primary-foreground: 0 0% 100%
--secondary: 0 0% 96% / --secondary-foreground: 0 0% 9%
--muted: 0 0% 96% / --muted-foreground: 184 5% 55%
--accent: 239 84% 67%（靛蓝色/蓝色）/ --accent-foreground: 0 0% 100%
--border: 0 0% 90%
--ring: 239 84% 67%
--radius: 0.5rem
--font-display: 'Instrument Serif', serif
--font-body: 'Inter', sans-serif
--shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06)
Tailwind 配置扩展 fontFamily，将 display 和 body 映射到 CSS 变量。所有颜色均使用 hsl(var(--token)) 模式。

Navbar

flex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body
左侧：Logo 文字 ✦ Nexora——text-xl font-semibold tracking-tight text-foreground
右侧（在移动端隐藏）：导航链接“首页”“定价”“关于”“联系”——text-sm text-muted-foreground hover:text-foreground，gap-8
CTA 按钮：rounded-full px-5 text-sm font-medium，使用 primary 样式
Hero Section




背景视频：全屏静音自动播放循环视频，absolute inset-0 w-full h-full object-cover z-0
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4
所有内容包裹在 relative z-10 flex flex-col items-center w-full 中
1. 徽章（顶部）

Framer Motion：从 y:10 向上淡入，duration 0.5s
inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body
文字：“现已支持 GPT-5 ✨”
mb-6
2. 标题

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.1s
text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl
内容：更智能自动化的未来——“更智能”一词使用 Instrument Serif italic 渲染
3. 副标题

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.2s
mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body
文字：“利用能够学习、适应并执行任务的智能代理，将繁忙工作自动化——让你的团队专注于最重要的事情。”
4. CTA 按钮

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.3s
mt-5 flex items-center gap-3
主按钮：rounded-full px-6 py-5 text-sm font-medium font-body——文字“预约演示”
播放按钮：ghost variant，h-11 w-11 rounded-full border-0 bg-background shadow-[0_2px_12px_rgba(0,0,0,0.08)] hover:bg-background/80，包含一个 Play icon（lucide），h-4 w-4 fill-foreground
5. Dashboard 预览（自定义编码，NOT an image）

Framer Motion：从 y:30 向上淡入，duration 0.8s，delay 0.5s
容器：mt-8 w-full max-w-5xl
磨砂玻璃 wrapper：rounded-2xl overflow-hidden p-3 md:p-4，使用 inline styles：
background: rgba(255, 255, 255, 0.4)
border: 1px solid rgba(255, 255, 255, 0.5)
boxShadow: var(--shadow-dashboard)
Dashboard 内部元素（全部使用 React 编码，text-[11px]、select-none pointer-events-none）：

Top bar：圆角方框中的 Logo“N”+“Nexora”+ chevron | 带 ⌘K shortcut 的搜索栏 | “转账”+ bell + avatar“JB”
Sidebar（w-40）：项目——首页（active）、任务（badge“10”）、交易、付款（chevron）、卡片、资金、账户（chevron）。分区“工作流”：跟踪路线、付款、通知、设置
Main content（bg-secondary/30）：
问候语：“欢迎，Jane”——text-sm font-semibold
操作按钮行：发送（primary/accent）、请求、转账、存款、支付账单、创建发票——rounded-full pill buttons text-[10px]，+“自定义”文字
两个等宽卡片（flex-1 basis-0）并排显示：
余额卡片：“Mercury 余额”，带 checkmark，金额 $8,450,190.32（美分部分使用 text-xs text-muted-foreground），统计数据（过去 30 天、+$1.8M 绿色、-$900K 红色），SVG area chart（h-20），带平滑的 cubic Bézier curve，linear gradient fill 从 15% opacity 的 accent 渐变至透明，stroke 使用 accent color，strokeWidth="1.5"
账户卡片：Header“账户”，带 + 和 ⋮ icons。三行（py-3、无 dividers、text-xs、justify-between）：信贷 $98,125.50、财资 $6,750,200.00、运营 $1,592,864.82
交易表格：“近期交易”heading，表格 columns 为日期/说明/金额/状态。4 行：AWS -$5,200 待处理（amber）、客户付款 +$125,000 已完成（green）、工资 -$85,450 已完成、办公用品 -$1,200 已完成
依赖项

framer-motion 用于所有动画
lucide-react 用于所有 icons
shadcn/ui Button component
Tailwind CSS，配合 tailwindcss-animate plugin
关键设计决策

Dashboard 向 viewport 底部溢出，并由 parent 上的 overflow-hidden 裁剪
无 dark mode——仅 light
所有颜色均使用语义化 Tailwind tokens，components 中绝不使用 raw color values
SVG chart 使用手工制作的 cubic Bézier path，而非 charting library

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

创建一个 SaaS 落地页的 hero section，严格遵循以下规格：

页面布局

整个页面采用 h-screen flex flex-col bg-background overflow-hidden——Navbar + Hero 恰好填满 100vh，不可滚动。
页面使用两种通过 CSS 导入的 Google Fonts：Instrument Serif（用于展示文字/标题，包括斜体）和 Inter（用于正文）。
字体与设计 Token（index.css）

导入字体：

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');
CSS 变量（:root）：

--background: 0 0% 100%（白色）
--foreground: 210 14% 17%（深炭灰色）
--primary: 210 14% 17% / --primary-foreground: 0 0% 100%
--secondary: 0 0% 96% / --secondary-foreground: 0 0% 9%
--muted: 0 0% 96% / --muted-foreground: 184 5% 55%
--accent: 239 84% 67%（靛蓝色/蓝色）/ --accent-foreground: 0 0% 100%
--border: 0 0% 90%
--ring: 239 84% 67%
--radius: 0.5rem
--font-display: 'Instrument Serif', serif
--font-body: 'Inter', sans-serif
--shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06)
Tailwind 配置扩展 fontFamily，将 display 和 body 映射到 CSS 变量。所有颜色均使用 hsl(var(--token)) 模式。

Navbar

flex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body
左侧：Logo 文字 ✦ Nexora——text-xl font-semibold tracking-tight text-foreground
右侧（在移动端隐藏）：导航链接“首页”“定价”“关于”“联系”——text-sm text-muted-foreground hover:text-foreground，gap-8
CTA 按钮：rounded-full px-5 text-sm font-medium，使用 primary 样式
Hero Section




背景视频：全屏静音自动播放循环视频，absolute inset-0 w-full h-full object-cover z-0
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4
所有内容包裹在 relative z-10 flex flex-col items-center w-full 中
1. 徽章（顶部）

Framer Motion：从 y:10 向上淡入，duration 0.5s
inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body
文字：“现已支持 GPT-5 ✨”
mb-6
2. 标题

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.1s
text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl
内容：更智能自动化的未来——“更智能”一词使用 Instrument Serif italic 渲染
3. 副标题

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.2s
mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body
文字：“利用能够学习、适应并执行任务的智能代理，将繁忙工作自动化——让你的团队专注于最重要的事情。”
4. CTA 按钮

Framer Motion：从 y:16 向上淡入，duration 0.6s，delay 0.3s
mt-5 flex items-center gap-3
主按钮：rounded-full px-6 py-5 text-sm font-medium font-body——文字“预约演示”
播放按钮：ghost variant，h-11 w-11 rounded-full border-0 bg-background shadow-[0_2px_12px_rgba(0,0,0,0.08)] hover:bg-background/80，包含一个 Play icon（lucide），h-4 w-4 fill-foreground
5. Dashboard 预览（自定义编码，NOT an image）

Framer Motion：从 y:30 向上淡入，duration 0.8s，delay 0.5s
容器：mt-8 w-full max-w-5xl
磨砂玻璃 wrapper：rounded-2xl overflow-hidden p-3 md:p-4，使用 inline styles：
background: rgba(255, 255, 255, 0.4)
border: 1px solid rgba(255, 255, 255, 0.5)
boxShadow: var(--shadow-dashboard)
Dashboard 内部元素（全部使用 React 编码，text-[11px]、select-none pointer-events-none）：

Top bar：圆角方框中的 Logo“N”+“Nexora”+ chevron | 带 ⌘K shortcut 的搜索栏 | “转账”+ bell + avatar“JB”
Sidebar（w-40）：项目——首页（active）、任务（badge“10”）、交易、付款（chevron）、卡片、资金、账户（chevron）。分区“工作流”：跟踪路线、付款、通知、设置
Main content（bg-secondary/30）：
问候语：“欢迎，Jane”——text-sm font-semibold
操作按钮行：发送（primary/accent）、请求、转账、存款、支付账单、创建发票——rounded-full pill buttons text-[10px]，+“自定义”文字
两个等宽卡片（flex-1 basis-0）并排显示：
余额卡片：“Mercury 余额”，带 checkmark，金额 $8,450,190.32（美分部分使用 text-xs text-muted-foreground），统计数据（过去 30 天、+$1.8M 绿色、-$900K 红色），SVG area chart（h-20），带平滑的 cubic Bézier curve，linear gradient fill 从 15% opacity 的 accent 渐变至透明，stroke 使用 accent color，strokeWidth="1.5"
账户卡片：Header“账户”，带 + 和 ⋮ icons。三行（py-3、无 dividers、text-xs、justify-between）：信贷 $98,125.50、财资 $6,750,200.00、运营 $1,592,864.82
交易表格：“近期交易”heading，表格 columns 为日期/说明/金额/状态。4 行：AWS -$5,200 待处理（amber）、客户付款 +$125,000 已完成（green）、工资 -$85,450 已完成、办公用品 -$1,200 已完成
依赖项

framer-motion 用于所有动画
lucide-react 用于所有 icons
shadcn/ui Button component
Tailwind CSS，配合 tailwindcss-animate plugin
关键设计决策

Dashboard 向 viewport 底部溢出，并由 parent 上的 overflow-hidden 裁剪
无 dark mode——仅 light
所有颜色均使用语义化 Tailwind tokens，components 中绝不使用 raw color values
SVG chart 使用手工制作的 cubic Bézier path，而非 charting library

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

适用模型与稳定度

建议模型

待补充模型