Back to marketplace

Front-End Designer Hero Section

Load the front-end design skill file into the Claude Code skills folder so /frontend-design one-shots premium landing-page hero sections.

Designstandard
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Build a landing page hero for my AI productivity app with blue-to-purple gradient.”
Beforegeneric AI agent
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?
Afterwith Front-End Designer Hero Section
<!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 queries

About this skill

name: frontend-designer-hero-section description: Load the front-end design skill file into the Claude Code skills folder so /frontend-design one-shots premium landing-page hero sections.

Front-End Designer Hero Section

What This Does

The creator downloads the front-end design skill.md into the Claude Code skills/designer folder and runs /frontend-design with a short prompt describing the business, color palette, and hero animation. Claude produces a single HTML file with CSS variables and a fictional UI animation matching the brief.

What You Get

  • Manual skill install path for Windows and Mac
  • /frontend-design slash command
  • one-shot HTML + CSS output with variables
  • animated UI mock inside hero
  • palette and layout controls in the prompt

Customize

  • business_idea: what the landing page sells
  • color_palette: hex values or descriptive palette
  • hero_layout: two-column left copy right visual
  • animation_type: subtle UI mock or 3D illustration
  • call_to_action_copy: CTA button text

Sample Output

One prompt produces a full hero for an AI identity-verification service with a light beige background, headline and CTA on the left, and a simplistic UI animation on the right.

Target Audience

Designers running the the original author UI challenge or building landing-page concepts

SKILL.md preview

SKILL.md
---
name: frontend-designer-hero-section
description: Use this skill when a landing page needs a premium hero section generated in a single pass from a short brief describing the business, palette, and animation style.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - standard
---

# Front-End Designer Hero Section

Produces a polished, single-file landing-page hero section from a short brief, using CSS variables and a fitting UI animation matched to the described business and palette.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More design skills

View all Design skills →

shadcn/ui Skill

The official shadcn/ui component-library skill for Claude.

Design

UI UX Pro Max

A Claude skill that adds design intelligence for multi-platform UI/UX builds.

Design

UI Polish Slash Commands

Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.

Design

Motion Polish Pass

Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass.

Design