Loading…
Case library · Public evidence
React + Tailwind v4 + Motion 的高性能落地页区块，依赖清单和安装步骤全在 prompt 里，开箱即建。
Prompt
Build a modern, high-performance landing page section using React, TypeScript, Tailwind CSS v4, and Motion. The application should match the following exact specifications: 1. Dependencies…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sparkles」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/sparkles.tsx "use client"; import React, { useId, useMemo } from "react"; import { useEffect, useState } from "react"; import Particles, { initParticlesEngine } from…
沉浸式视频背景配液态玻璃 footer，Tailwind v4 + motion/react，把通常最无聊的 footer 做成了页面主视觉。
Prompt
Create a React frontend using Tailwind CSS v4, the `motion/react` library for animations, and `lucide-react` for icons. I want to build a page with an immersive video background and a…
销售自动化品牌的单文件 HTML footer，样式脚本全部内联，自包含到能直接双击打开，适合学组件级交付。
Prompt
Build a single-file HTML footer component called Kresna — a sales-automation SaaS brand. The deliverable is one self-contained .html file with inline <style> and inline <script>. Render it…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Notch」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/notch.tsx "use client"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from…
要求逐项精确复刻的 hero，全屏视频绝对定位铺满视口，object-cover 这类实现细节直接写在 prompt 里。
Prompt
Recreate this hero section exactly. Here are the complete specifications: Video Background: Full-screen background video, absolutely positioned, covering the entire viewport (object-cover)…
Prompt
Build a Hero section for a DeFi dashboard named RIVR showcasing a sleek, glassmorphism aesthetic. Please mimic these exact specifications to ensure a premium UI. Dependencies: - Use…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Pointer Highlight」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/pointer-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { useRef, useEffect, useState } from "react"; export…
HLS 流媒体全屏视频背景加玻璃拟态导航，hero 内容压在左下角，视频走 HLS 而非 mp4 是工程上的差异点。
Prompt
Create a modern React landing page with a full-screen HLS video background, glassmorphic navigation header, and hero content positioned in the bottom-left corner.
安全公司暗色 hero，背景用内嵌 Spline 3D 场景替代常规视频，@splinetool 接进 React + shadcn/ui 的用法是主要看点。
Prompt
Create a full-screen dark hero landing page for a security company called "SENTINEL AI" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and an embedded Spline 3D scene as the…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Hover Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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，色彩字体自成系统，是这批里少见的多区块完整页。
Prompt
Create an NFT landing page called "Orbis.Nft" with 4 sections, using a dark space theme. The page uses video backgrounds served from CloudFront, a liquid glass UI effect, and a specific…
白底设计工作室单页，React + TypeScript + Tailwind 配 lucide-react 图标，看点在双字体排版体系怎么撑起极简白底的高级感。
Prompt
Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. The page has a white…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Comet Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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，复刻过程零猜测。
Prompt
Create a full-screen hero section for a product design education platform called "DesignPro" with the following exact specifications: Background: Full-screen looping video background using…
白底液态玻璃 hero，1600px 宽版面，左上角层叠渐变光晕打氛围，浅色玻璃拟态比深色更难做，这条给了完整参数。
Prompt
System Prompt: High-Fidelity "Liquid Glass" Hero Section Core Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Colourful Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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
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…
循环视频背景的现代 hero，视频地址、字体、间距全部写成明细规格，一份标准的视频底首屏模板。
Prompt
HERO SECTION CREATION PROMPT Create a modern hero section with a looping video background and the following specifications: Video Background: URL:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 斜体的字体策略可整套复用。
Prompt
Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and…
分析仪表盘 SaaS 的暗色落地页，React + Framer Motion + shadcn/ui，字体按正文和标题分工，一副标准 SaaS 官网骨架。
Prompt
Create a dark landing page for "Neuralyn" — an analytics dashboard SaaS. Use React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui. Fonts Inter (400, 500, 600, 700) for…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Wobble Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 类名，照抄即得。
Prompt
Create a SaaS landing page hero section with the following exact specifications: Page Layout The entire page is h-screen flex flex-col bg-background overflow-hidden — the Navbar + Hero…
