加载中…
案例库 · 公开证据
提示语
使用 React + TypeScript 和 Tailwind CSS 构建单个区块。不使用额外库。完全适配移动端。黑色背景，白色文字。 ## 全局前置条件 - 字体：`@import…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Code Block」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/code-block.tsx "use client"; import React from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { atomDark } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Animated Testimonials」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/animated-testimonials.tsx "use client"; import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"; import { motion, AnimatePresence } from "motion/react"; import…
提示语
为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局，包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Lens」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/lens.tsx "use client"; import React, { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; interface LensProps { children:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Timeline」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/timeline.tsx "use client"; import { useMotionValueEvent, useScroll, useTransform, motion, } from "motion/react"; import React, { useEffect, useRef, useState } from…
提示语
创建一个高性能、可交互的 3D 水平圆柱轮播，展示高端动态银行卡。 核心功能与交互： 使用 React (useState, useEffect, useRef)、Tailwind CSS v4 和标准 requestAnimationFrame，实现流畅的 60fps…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Background Beams With Collision」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-beams-with-collision.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence } from "motion/react"; import React, { useRef,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Floating Dock」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/floating-dock.tsx "use client"; /** * 注意：请根据你的需求使用固定定位 * 桌面端导航栏更适合放在底部 * 移动端导航栏更适合放在右下角。 **/ import { cn } from…
订阅制创意机构 Alwayzz 的落地 hero，React + Vite，样式刻意用自定义 CSS，避开 Tailwind 工具类。
提示语
**使用 React + Vite + Tailwind CSS，为名为 "Alwayzz" 的创意机构创建一个单页落地页 hero section。所有样式均使用自定义 CSS（不要使用 Tailwind…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Card Spotlight」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/card-spotlight.tsx "use client"; import { useMotionValue, motion, useMotionTemplate } from "motion/react"; import React, { MouseEvent as ReactMouseEvent, useState } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Animated Modal」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/animated-modal.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import React, { ReactNode, createContext,…
提示语
**使用 React、Tailwind CSS 和 Lucide React icons 构建一个单页“CozyPaws”宠物商店 Hero Section。布局高度为视口高度（h-screen），不可滚动，包含三个响应式断点（移动端、平板端 md、桌面端…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Glare Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/glare-card.tsx "use client"; import { cn } from "@/lib/utils"; import { useRef } from "react"; export const GlareCard = ({ children, className, }: { children:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Link Preview」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/link-preview.tsx "use client"; import * as HoverCardPrimitive from "@radix-ui/react-hover-card"; import { encode } from "qss"; import React from "react"; import {…
三台 iPhone 并排展示教会网站移动端设计，走 React Native + Expo Router 技术栈，这批里少见的原生移动端 prompt。
提示语
创建一个移动应用展示页面，为“Christ Family Church”展示 3 个 iPhone mockups——这是一款教会网站移动端设计。使用 React Native、Expo Router、react-native-reanimated 和 Manrope…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Flip Words」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/flip-words.tsx "use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, LayoutGroup } from "motion/react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Aurora Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/aurora-background.tsx "use client"; import { cn } from "@/lib/utils"; import React, { ReactNode } from "react"; interface AuroraBackgroundProps extends…
复制完整建站 Prompt 到 AI 编程工具（Cursor、v0、Claude 等）生成「Vision Reveal」对应的页面区块，替换文案、品牌与素材链接即可复用。
提示语
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Creative Studio Showcase</title> <link…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Multi Step Loader」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/multi-step-loader.tsx "use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState, useEffect } from "react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Fey.com Macbook Scroll」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/macbook-scroll.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { MotionValue, motion, useScroll, useTransform } from…
iPhone 外框里的旅行日记 App UI mockup，React + TypeScript + Tailwind，移动端设计稿网页化展示的做法。
提示语
创建一个移动旅行应用 UI mockup，显示在逼真的 iPhone-style phone frame 内，并居中置于白色网页上。技术栈：React + TypeScript、Tailwind CSS、Lucide React icons、Vite。字体：Google Fonts…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Google Gemini Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/google-gemini-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, MotionValue } from "motion/react"; import React from "react"; const transition =…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Images Slider」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/images-slider.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence } from "motion/react"; import React, { useEffect, useState } from…
