案例库 · 公开证据
这里不收资讯摘要，只收能指向作品、作者、过程和原始来源的 Case。榜单、收藏、作者页与复测记录都从同一条 Case 继续生长。
创作者 MotionSites →
…/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous">…
提示语
Build Prompt: Cinematic Space-Travel Landing Page Build a single-page…
.webp)
创作者 MotionSites →
…before building the section:** > > **Google Fonts** -- Load these in `index.html` `<head>`: > ```html > <link rel="preconnect" href="https://fonts.g…
提示语
--- > **Setup requirements before building the section:** > > **Google…
.webp)
创作者 MotionSites →
…de-react` for icons. No other UI libraries. **Font & Global CSS (`src/index.css`):** - Import Geist from Google Fonts: `https://fonts.googleapis.com…
提示语
Build a full-screen, single-page React + TypeScript + Vite + Tailwind CSS…
.webp)
创作者 MotionSites →
Build a single-page landing site for "SynapseX" -- a futuristic neural-AI interface product. The entire site uses a black background with white text…
提示语
Build a single-page landing site for "SynapseX" -- a futuristic neural-AI…
创作者 MotionSites →
…600&display=swap`. **Page shell:** - Body: white background `#ffffff`, 80px top/bottom + 20px left/right padding, flex centered, Inter font. - Globa…
提示语
Build a "Core Features" marketing section as a single centered component…
.webp)
创作者 MotionSites →
--- **Prompt:** Create a full-viewport section (100vh) that sits over a fixed background video. The section has no background color of its own -- it…
提示语
--- **Prompt:** Create a full-viewport section (100vh) that sits over a…
.webp)
创作者 MotionSites →
… single-page hero section using Vite. The entire page lives in `src/App.tsx`. No extra libraries beyond `react`, `react-dom`, `lucide-react`, and Ta…
提示语
Build a React + TypeScript + Tailwind CSS single-page hero section using…
.webp)
创作者 MotionSites →
…gh a soft circular mask on top of a base image. Match every detail below exactly. ### Fonts Add this to the top of `src/index.css`, then `@tailwind …
提示语
Build a full-screen, dark-themed hero section for a geology brand called…
.webp)
创作者 MotionSites →
… video, a responsive navbar, a mobile menu, and staggered-animated hero text. **Video Background:** - URL: `https://d8j0ntlcm91z4.cloudfront.net/use…
提示语
Create a fullscreen hero landing page for a creative studio called…
创作者 MotionSites →
…gsap` and `lucide-react`. No other UI libraries.** ### Fonts (in `src/index.css`) Import at the top of index.css BEFORE ` @tailwind ` directives: ``…
提示语
**Build a fullscreen hero section in a Vite + React + TypeScript +…
创作者 MotionSites →
…ot, and the main wrapper Font family: 'Kanit', sans-serif Global reset: box-sizing border-box, margin 0, padding 0 CSS class .hero-heading: gradient…
提示语
Build a 3D Creator portfolio landing page for "Jack" using React,…
.webp)
创作者 MotionSites →
… sm:p-4 md:p-6`. - Inside the root, one large rounded card with `rounded-2xl sm:rounded-3xl`, `overflow-hidden`. Heights: `min-h-[calc(100vh-24px)] …
提示语
Build a single-page React + TypeScript + Vite + Tailwind site that is a…
创作者 MotionSites →
Build a single-page hero landing page for a product called "Axon" — a platform that deploys digital workers for mundane workflows. The page is a ful…
提示语
Build a single-page hero landing page for a product called "Axon" — a…
.webp)
创作者 MotionSites →
…l line. --- ## ROOT CONTAINER (`.site-footer`) - Position relative, z-index 100, overflow hidden. - Background: `#000000`. Color: `#ffffff`. --- ## …
提示语
--- Build a **Site Footer** for an aerospace company called "EngineTech."…
创作者 MotionSites →
…a frosted-glass prompt card, and a navigation bar.** **Fonts (load in index.html `<head>`):** - Google Fonts link: `https://fonts.googleapis.com/css…
提示语
**Build a single-page React + TypeScript landing page for a travel app…
创作者 MotionSites →
…out:** - Full viewport height (`min-height: 100vh`), white background, flex column with `justify-content: space-between` - Fixed navbar at top (z-in…
提示语
Create a full-screen hero section landing page using React, Vite, and…
.webp)
创作者 MotionSites →
Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-mer…
提示语
Build a pixel-faithful recreation of the landing CTA section. Use React…
创作者 MotionSites →
… Lucide React (`ArrowRight` only). No other UI libraries. --- ### Fonts (exact) Load in `index.html`: 1. **Display / serif:** `P22 Mackinac W01 Book…
提示语
Build a single full-viewport marketing landing page for **Boomerang**, a…
创作者 MotionSites →
…h Tailwind CSS and Lucide React icons. **Phone Frame:** - Dimensions: 375px wide x 780px tall - Border radius: 52px - Background color: `#8a9aaa` - …
提示语
Build a mobile wellness quiz screen inside a realistic phone frame…
.webp)
创作者 MotionSites →
… Build a "Categories" section in React + Tailwind CSS with the following exact specifications: > > **Section Container:** > - Full-width `<section>`…
提示语
--- **Prompt to recreate the "Categories" section:** > Build a…
创作者 MotionSites →
Recreate this page **pixel-faithfully**. Single full-viewport hero. React + Tailwind CSS. No cards, no purple, no Inter/Roboto. Black/cream editoria…
提示语
Recreate this page **pixel-faithfully**. Single full-viewport hero. React…
创作者 MotionSites →
**Build a single-page HTML showcase displaying two iOS device frames (370x790px each) side by side on a neutral `#F4F4F4` stage. The stage auto-scal…
提示语
**Build a single-page HTML showcase displaying two iOS device frames…
.webp)
创作者 MotionSites →
…tup The page uses **"TT Norms Pro"** loaded via a stylesheet link in `index.html`: ```html <link href="https://db.onlinewebfonts.com/c/49bf5d043a27b…
提示语
**Prompt:** Build a "Use Cases" section for a fintech stablecoin landing…
创作者 MotionSites →
…t, Tailwind CSS, and Lucide React icons. The page must be a single `App.tsx` component. Use the Inter font (weights 400–900) loaded from Google Font…
提示语
Build a full-screen animated 404 error page for a children's brand called…
