加载中…
案例库 · 公开证据
要求逐项精确复刻的 hero，全屏视频绝对定位铺满视口，object-cover 这类实现细节直接写在 prompt 里。
提示语
精确复刻这个 hero section。完整规格如下： 视频背景： 全屏背景视频，使用绝对定位，覆盖整个 viewport（object-cover） 视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH…
提示语
为名为 RIVR 的 DeFi 仪表盘构建一个 Hero 区域，呈现简洁精致的 glassmorphism 美学。请严格仿照以下规格，确保 UI 具有高级质感。 依赖项： - 使用 `lucide-react` 提供图标。 - 使用 `motion`（从…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Pointer Highlight」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/pointer-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { useRef, useEffect, useState } from "react"; export…
提示语
创建一个现代 React 落地页，采用全屏 HLS 视频背景、玻璃拟态导航页眉，并将 hero 内容置于左下角。
安全公司暗色 hero，背景用内嵌 Spline 3D 场景替代常规视频，@splinetool 接进 React + shadcn/ui 的用法是主要看点。
提示语
使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui，以及作为背景嵌入的 Spline 3D scene，为一家名为“SENTINEL AI”的安防公司创建一个全屏深色 hero landing page。技术栈使用…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Hover Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-hover-effect.tsx "use client"; import React, { useRef, useEffect, useState } from "react"; import { motion } from "motion/react"; export const TextHoverEffect = ({…
四区块暗色太空主题 NFT 落地页，CloudFront 视频背景加液态玻璃 UI，色彩字体自成系统，是这批里少见的多区块完整页。
提示语
创建一个名为 "Orbis.Nft" 的 NFT 落地页，包含 4 个区块，采用深色太空主题。页面使用由 CloudFront 提供的视频背景、液态玻璃 UI…
白底设计工作室单页，React + TypeScript + Tailwind 配 lucide-react 图标，看点在双字体排版体系怎么撑起极简白底的高级感。
提示语
使用 React、TypeScript、Vite 和 Tailwind CSS，为名为 "Viktor Oddy" 的创意设计工作室创建一个单页落地页。使用 lucide-react 提供图标。整个页面采用白色背景，并使用两种自定义字体："PP Neue…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Comet Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/comet-card.tsx "use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, } from "motion/react";…
设计教育平台的全屏 hero，循环视频背景直接给出 CloudFront 源地址，连素材 URL 都写进 prompt，复刻过程零猜测。
提示语
为名为“DesignPro”的产品设计教育平台创建一个全屏 HERO 区段，具体要求如下： 背景： 使用以下精确 CloudFront URL 作为全屏循环视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJO…
提示语
System Prompt：高保真“Liquid Glass”主视觉区 核心布局：创建一个最大宽度为 1600px 的落地页主视觉区。背景应为纯白色，左上角带有细腻的分层渐变光晕（使用浅蓝色 #60B1FF 和 #319AFF…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Colourful Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/colourful-text.tsx "use client"; import React from "react"; import { motion } from "motion/react"; export default function ColourfulText({ text }: { text: string }) {…
暗色作品集单页，GSAP 与 Framer Motion 双动画库再加 hls.js 视频流，先定全局设计系统再逐区块展开，prompt 结构本身就是模板。
提示语
Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design…
提示语
创建一个带循环视频背景的现代首屏区域，规格如下： 视频背景： URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23d…
复制这段 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 = ({…
暗色单色系 newsletter 落地页，React + shadcn/ui + Framer Motion，Inter 配 Instrument Serif 斜体的字体策略可整套复用。
提示语
构建一个名为 Mindloop 的深色单色 landing page——一个 newsletter/content platform。使用 React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion。字体：Inter（sans）和 Instrument…
分析仪表盘 SaaS 的暗色落地页，React + Framer Motion + shadcn/ui，字体按正文和标题分工，一副标准 SaaS 官网骨架。
提示语
为“Neuralyn”——一款分析仪表板 SaaS——创建一个深色落地页。使用 React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui。 字体 正文/UI 使用通过 @fontsource/inter 引入的…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Wobble Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/wobble-card.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const WobbleCard =…
导航加 hero 精确填满 100vh 且禁止滚动的 SaaS 首屏，布局约束全部写成 Tailwind 类名，照抄即得。
提示语
创建一个 SaaS 落地页的 hero section，严格遵循以下规格： 页面布局 整个页面采用 h-screen flex flex-col bg-background overflow-hidden——Navbar + Hero 恰好填满…
预订类应用的全屏 hero，三套 Google 字体各管 UI、按钮和标题，prompt 先立设计系统再写布局，这个结构本身就值得抄。
提示语
使用 React 和 Tailwind CSS 为 Web 应用创建一个响应式的全屏 hero section。 设计系统与资源： 字体：加载并使用 'Manrope'（用于 UI/Nav）、'Cabin'（用于按钮/标签）、'Instrument…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Flipping Board」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-flipping-board.tsx "use client"; import React, { useEffect, useRef, useState, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from…
React 函数组件形态的品牌 footer，Tailwind + motion/react + lucide-react，字重配置写死，证明 footer 也能做出动效层次。
提示语
使用 Tailwind CSS、`motion/react` 实现动画，并使用 `lucide-react` 提供图标，构建一个 React 函数组件。 **1. 字体排版与设置：** - 从 Google Fonts 导入 "Inter" 字体（字重…
数据安全 SaaS 的全屏 hero，循环视频背景、悬浮胶囊导航加大字号错落标题，React + TypeScript + Tailwind。
提示语
使用 React + TypeScript + Tailwind CSS，为名为 "securify" 的数据安全 SaaS 落地页构建一个全屏首屏区域，包含循环播放的全屏背景视频、悬浮的胶囊形导航栏和错落排布的大号文字。 字体与全局样式…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Scales」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/scales.tsx import { cn } from "@/lib/utils"; import React from "react"; export interface ScalesProps { orientation?: "horizontal" | "vertical" | "diagonal"; size?: number;…
