加载中…
案例库 · 公开证据
私人飞机租赁的奢华风 hero，CloudFront 视频背景地址直接给定，适合学高端服务业的视觉调性怎么靠排版压出来。
提示语
创建一个高端私人飞机落地页首屏区域，规格如下： 视频背景： 使用此确切的 CloudFront 视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb1…
邮件排版风格的证书课程落地页，React + Vite + Tailwind 复刻 Design Rocket 营销页，看点是邮件式单列布局在网页里怎么落地。
提示语
提示词：复刻“Design Rocket Certificates”电子邮件风格落地页 构建一个单页 React + TypeScript + Vite + Tailwind CSS 项目，渲染一个电子邮件风格的营销页面，宣传与 Microsoft 合作推出的“Design…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「ASCII Art」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/ascii-art.tsx "use client"; import React, { useEffect, useLayoutEffect, useRef, useState, useCallback, useId, } from "react"; import { motion, useInView } from…
复刻多邻国风格的样式指南页，Nunito 配 Feather Bold 双字体，连非官方字体的托管地址都给全了。
提示语
字体 主字体：Google Fonts 的 'Nunito'（字重：400、500、600、700、800、900） 展示/标题字体：'Feather Bold'，来自 https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feath…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Globe」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Keyboard」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/keyboard.tsx "use client"; import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from "react"; import { motion, AnimatePresence } from…
设计机构 Axion Studio 的落地页，hero 背景用 shaders 包做着色器效果，这批里唯一用 WebGL 着色器的。
提示语
为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包（npm: `shaders`），图标使用 `lucide-react`。页面包含 3…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Dither Shader」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/dither-shader.tsx "use client"; import React, { useEffect, useRef, useCallback, useState } from "react"; import { cn } from "@/lib/utils"; type DitheringMode = "bayer" |…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Encrypted Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/encrypted-text.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView } from "motion/react"; import { cn } from…
个人站的 About Me 区块，React + framer-motion，Kanit 字体全字重加载，#0C0C0C 暗底。
提示语
**提示词：** 使用 React、Tailwind CSS 和 **framer-motion** 创建一个“关于我”section。网站使用 **Google Font "Kanit"**（字重 300-900）和深色背景 `#0C0C0C`。 **Section 布局：** - 全宽…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Dotted Glow Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/dotted-glow-background.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; type DottedGlowBackgroundProps = { className?: string; /**…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Canvas Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/canvas-text.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef, useState, useCallback } from "react"; interface CanvasTextProps { text:…
暗色电影感的双全屏区块站点（Hero 加 Capabilities），React + Vite + TypeScript + Tailwind。
提示语
构建一个单页 React + Vite + TypeScript + Tailwind CSS 网站，包含恰好两个全屏区块（Hero 和 Capabilities）。页面是一个深色、富有电影感的网页设计机构落地页，使用“液态玻璃”拟态 UI 元素，并通过…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sticky Banner」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sticky-banner.tsx "use client"; import React, { SVGProps, useState } from "react"; import { motion, useMotionValueEvent, useScroll } from "motion/react"; import { cn }…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Draggable Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/draggable-card.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring,…
旅行品牌 Wanderful 的电影感全屏 hero，React + TypeScript + Tailwind + GSAP。
提示语
使用 React + TypeScript + Vite + Tailwind CSS，为名为 "Wanderful" 的旅行品牌构建一个占满视口、具有电影感的首屏区域。使用 GSAP 制作动画，并使用 `lucide-react` 提供图标。 **字体（通过…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Resizable Navbar」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/resizable-navbar.tsx "use client"; import { cn } from "@/lib/utils"; import { IconMenu2, IconX } from "@tabler/icons-react"; import { motion, AnimatePresence, useScroll,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Container Text Flip」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/container-text-flip.tsx "use client"; import React, { useState, useEffect, useId } from "react"; import { motion } from "motion/react"; import { cn } from "@/utils/cn";…
定价区块 PricingSection 的精确复刻，React 18 + framer-motion，与 Rocket CTA 同一套设计系统。
提示语
构建一个与以下规范完全一致的 `PricingSection` React 组件。 ## 技术栈与全局设置 - React 18 + Vite + TypeScript、TailwindCSS、`framer-motion`、`clsx` + `tailwind-merge`，通过 `@/lib/utils`…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Glowing Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/glowing-effect.tsx "use client"; import { memo, useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; import { animate } from "motion/react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Spotlight New」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/spotlight-new.tsx "use client"; import React from "react"; import { motion } from "motion/react"; type SpotlightProps = { gradientFirst?: string; gradientSecond?: string;…
提示语
构建一个独立的 React + TypeScript + Tailwind CSS 区块组件。这是一个左右两半的香水产品展示：LEFT 是循环播放的视频，RIGHT 是青柠绿色产品面板。在移动端，它会垂直堆叠，产品面板位于视频…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Magnetic Button」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/magnetic-button.tsx "use client"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; export const MagneticButton = ({ children,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Carousel」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/carousel.tsx "use client"; import { IconArrowNarrowRight } from "@tabler/icons-react"; import { useState, useRef, useId, useEffect } from "react"; interface SlideData {…
