---

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 DesignCourse UI challenge or building landing-page concepts

Source

https://youtube.com/watch?v=Em9EzurouOU