Animated Landing Hero From a Short Brief
Turns a short brief into a single-file HTML hero with a looping product-UI animation, tokenized palette, and accessible motion.
Before & after
Same prompt, same agent — the only difference is the skill.
I can create a hero section for a landing page. A good hero typically has a headline, subheading, and call-to-action button. You might want to include a background with some visual interest, like a gradient or pattern. Some designs include an image or illustration on one side. You could use CSS for styling and maybe add some subtle animation. I'd suggest thinking about your brand colors and typography first. Would you like me to build something based on specific design preferences? What's your headline and CTA text?
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-dark: #1e40af;
--primary-light: #3b82f6;
--accent: #9333ea;
--text-white: #ffffff;
}
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent) 100%);
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.hero-content { max-width: 600px; padding: 2rem; z-index: 10; }
.hero h1 { font-size: 3.5rem; font-weight: 700; margin: 0; color: var(--text-white); }
.hero p { font-size: 1.25rem; color: rgba(255,255,255,0.9); margin: 1rem 0 2rem; }
.cta-button { background: var(--text-white); color: var(--primary-dark); padding: 14px 32px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer; }
.cta-button:hover { transform: scale(1.05); }
.floating-card { position: absolute; right: 60px; top: 50%; width: 300px; height: 280px; background: rgba(255,255,255,0.15); border-radius: 12px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<h1>Work Faster With AI</h1>
<p>Automate your daily tasks, reclaim your time, focus on what matters.</p>
<button class="cta-button">Start Free Trial</button>
</div>
<div class="floating-card"></div>
</section>
</body>
</html>
COLOR PALETTE: Blue-to-purple gradient (brand aligned)
ANIMATION: Floating card rises/falls, 3s loop
BREAKPOINT: Mobile-responsive via flex + media queriesAbout this skill
Your AI-generated heroes all look the same: a purple gradient, floating blobs, "Revolutionize your workflow," and a spinning shape that says nothing about the product. This skill turns a three-line brief into one self-contained HTML hero. The headline names an outcome, and the animation acts out what your product actually does.
What it does
- Turns the brief into a 3-5 beat animation story (input, processing, result) and builds it as a fictional product UI that loops cleanly
- Derives a full token set (bg, surface, ink, muted, accent, line) from one or two colors and fixes contrast failures before they ship
- Animates only transform and opacity, and ships a reduced-motion version that shows the finished state
- Writes headline, subhead, and CTA copy tuned to the business type, with placeholders instead of invented stats or logos
- Checks the hero at mobile, tablet, and desktop sizes so the CTA stays above the fold on a 375px phone
- Reviews a pasted hero and returns specific fixes, not a rewrite you did not ask for
What you get
One HTML file with inline CSS, inline SVG, and no build step, ready to open in a browser. It comes with a short design note covering palette tokens, animation beats, and the assumptions made.
Best for
Designers doing hero or landing-page concept challenges, founders who need a credible above-the-fold for a launch, and developers who want a polished hero to drop into an existing site.
SKILL.md preview
---
name: animated-landing-hero-from-brief
description: Builds a single-file HTML/CSS landing-page hero from a short brief (business, palette, layout, animation). The hero has a looping fictional product-UI animation that acts out what the product does, a contrast-checked token palette, and responsive, reduced-motion-safe behavior. Use when the user says "make me a hero section for my startup", "one-shot a premium landing hero", "hero with a UI animation on the right", "use these hex colors for the hero", "my AI-generated heroes all look generic", "the hero animation is just floating blobs", "redesign this hero", or "give me 3 hero variations".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.