Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill web-section-recreation-spec --global --copy --yes --full-depthSkill · Shared method
Web section recreation spec
Turn a single hero, footer, pricing block, or 404 page into a pixel-level spec a coding agent can build as written.
152 Cases · 5 Creators · AI Coding (UI) · Latest example 09/19/2026
Method skeleton
- 01Scope a single section with size, grid, and breakpoints
- 02Pin down type, color, spacing, and motion values layer by layer
- 03List what must not be added so the agent does not expand it into a full page
Creator evidence
Methods stay attached to their makers.
Case evidence
Judge the Skill through finished work.
AI Coding (UI)MotionSitesAdded 09/18/2026
Quantum Lucid
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Quantum Lucid, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a SINGLE standalone file: index.html (inline CSS + JS, no frameworks, no extra files). Recreate this exact Quantum² marketing landing page pixel-for-pixel: one-screen hero, black pill nav, two-line headline, subcopy, Get Started, ful…
Source heat · MotionSites
—
Stability
90
AI Coding (UI)MotionSitesAdded 08/30/2026
Rare Gallery
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Rare Gallery, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a single-page luxury brand landing (navbar + full-viewport hero only). Stack: React 18 + TypeScript + Vite + Tailwind CSS 3. No extra UI kits. Use lucide-react only for the Flower2 icon. Page title: Aurevon. Root wrapper: bg-black. h…
Source heat · MotionSites
—
Stability
91
AI Coding (UI)MotionSitesAdded 08/30/2026
Palomar Labs
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Palomar Labs, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a standalone pixel-accurate recreation of the Palomar Labs marketing landing page: fixed navbar + full-viewport video hero only. No other sections. Match this spec exactly. Do not invent extra copy, buttons, gradients, overlays, or d…
Source heat · MotionSites
—
Stability
94
AI Coding (UI)MotionSitesAdded 08/30/2026
Quantum Core
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Quantum Core, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
# PROMPT — Recreate the "Apogee" Hero Section Exactly Build a pixel-exact, fully mobile-responsive hero landing section called **"Apogee"**. Follow every specification below literally — exact hex values, exact pixel numbers, exact class na…
Source heat · MotionSites
—
Stability
AI Coding (UI)MotionSitesAdded 08/19/2026
Agent Wave
Single-file HTML recreation of the Vesper.ai one-screen landing page, using inline CSS and a small IIFE for the menu and animation fallback, with no framework and no dependencies. Useful for learning how to fit a whole page spec into one file.
Prompt
Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#00…
Source heat · MotionSites
—
Stability
71
AI Coding (UI)MotionSitesAdded 08/19/2026
Aurex Finance
One-screen DeFi hero with a private-bank feel, locked to a single screen with no scrolling, built with React 18 and Tailwind. Useful for learning financial-style typography and controlling information density on one screen.
Prompt
Build a **single full-screen hero section** for a DeFi / private-banking landing page called **LŪMEN // ÍNDEX**. Use **React 18 + TypeScript + Vite + Tailwind CSS**, with `lucide-react` for icons. The entire page is ONE component rendering…
Source heat · MotionSites
—
Stability
94
AI Coding (UI)MotionSitesAdded 08/19/2026
Growth Decisions
A strict single-page SaaS hero recreation task that explicitly forbids adding sections or copy on your own. Plain HTML, CSS, and JS only, good for practicing delivery to spec without improvising.
Prompt
**Recreate this exact single-page SaaS hero. Do not invent extra sections, extra pages, extra images, or extra copy. Implement only what is specified. Stack: one `index.html`, one `styles.css`, one `main.js`. No frameworks.** ### What this…
Source heat · MotionSites
—
Stability
94
AI Coding (UI)MotionSitesAdded 08/19/2026
Pet Diagnostics
A single self-contained index.html with no build, no framework and no external JS, where all numeric requirements must match exactly. Suited to testing a model's ability to deliver to spec at pixel level.
Prompt
Build a **single self-contained `index.html`** file. No build step, no framework, no external JS, no local image files. All CSS in one `<style>` block in `<head>`; one small `<script>` before `</body>`. Match every number below exactly — t…
Source heat · MotionSites
—
Stability
92
AI Coding (UI)MotionSitesAdded 08/19/2026
Planetary Pulse
One-screen hero with no scrolling, where a live-refracting liquid-glass card floats over a full-width looping video. The refraction is both the technical challenge and the memorable part.
Prompt
Build a single-screen, non-scrolling hero landing page called **Terranova — Signals from the Deep Green**. It is a full-bleed looping background video with a real-time refractive "liquid glass" card floating over it, plus a slide-in fullsc…
Source heat · MotionSites
—
Stability
61
AI Coding (UI)MotionSitesAdded 08/19/2026
Stellar AI
Light-background hero for the Stellar.ai landing page, using Inter and a max-w-7xl grid. One of the few light-themed entries in this batch, useful for studying color inversion against the dark versions.
Prompt
Create a "Stellar.ai" landing page hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font (imported from Google Fonts). The page has a white background (bg-white), max-width max-w-7xl, and is centered with mx-au…
Source heat · MotionSites
—
Stability
91
AI Coding (UI)MotionSitesAdded 08/19/2026
Power AI
Full-screen dark hero with a looping video, navigation, a large headline and a logo marquee at the bottom. All theme colors sit in CSS variables, so changing one variable swaps the brand.
Prompt
Create a full-screen dark hero section with a looping background video, navbar, headline, subtitle, CTA button, and a logo marquee at the bottom. Here are the exact specifications: Theme & Colors (index.css CSS variables): Background: 260 …
Source heat · MotionSites
—
Stability
79
AI Coding (UI)MotionSitesAdded 08/19/2026
Bloom AI
First screen for an AI floral platform, with liquid-glass morphism layered over a looping video background. The way the glass layer works with the video base is the part that can be lifted out whole.
Prompt
Create a full-screen hero landing page for "Bloom" — an AI-powered plant/floral design platform. The design uses a liquid glass morphism aesthetic over a looping video background. Background Full-screen autoplaying, looping, muted video ba…
Source heat · MotionSites
—
Stability
85