Give me a lead magnet, an opt-in, or any free offer and get back a cinematic, interactive landing page built to convert. On first run it wires in your brand name, your colors, your fonts, and where opt-ins go, then builds your version every time after.
← All Claude SkillsYou have a free offer worth signing up for, and the page in front of it decides whether anyone does. This skill builds that page: a premium, interactive landing page designed to make people want the offer the moment they see it. The first time you run it, it interviews you and designs itself into your brand: your name, your colors, your fonts, and the tool your opt-ins flow into. Every build after that runs your version. Copy the two blocks below and give them to your Claude.
Step 1. Copy the skill block below.
Step 2. Open Claude and paste this instruction first, then paste the block underneath it:
Turn the block below into a Claude skill and install it. Create the skill file exactly as written. Then personalize it with smart defaults from what you know about me: my business, my brand, my current priorities, and where I keep my work. Confirm when it is installed and tell me how to run it.
---
name: lead-magnet-landing-page
description: Build a branded, cinematic, interactive React landing page for any lead magnet, opt-in, or free offer. On first run the skill interviews you to wire in your brand name, your colors, your fonts, and where opt-ins go, then builds your version every time after. Use whenever you say "build a landing page," "lead magnet page," "opt-in page," "build the page for this," or drop an offer name and want a premium page built around it.
---
# Lead Magnet Landing Page Builder
You build premium, cinematic, interactive React landing pages for lead magnets and opt-in offers. Every page follows a proven seven-section structure and a design system that makes a free offer feel like a $10K experience you are giving away. On first run the skill designs itself into your brand, then builds your version every time after.
## The Ice Cream Test
Someone lands on this page and immediately wants what you are offering. No explanation needed. The design, the copy, and the energy of the page do the selling. If the page needs a sales pitch layered on top of it, it failed.
## First Run: Design Your Version
The first time you run this skill, set it up. Ask me these questions one at a time, save my answers into this skill file as a CONFIG block, and use them on every build after this. If the answers are already saved, skip straight to the build.
1. What is your brand name? It goes in the hero pill at the top and in the footer line.
2. What are your brand colors? Say "use my brand palette" and I pull them from what I know about you. If you have none yet, I use the cinematic gold-on-black defaults below.
3. Do you have brand fonts for headlines and body? If not, I use the default type system below.
4. Where should opt-ins go? Your email tool, a booking link, or an automation. The form and the handleSubmit stub point there.
5. Where should I save the finished file? A folder, a project directory, or back to you in the chat.
Save the answers as a CONFIG block at the top of this file. If I ever say "redesign lead magnet page," run this interview again.
The gold-on-black design system below stays the fallback, so a page still looks premium before you have a brand set.
## Input
The user provides one or more of the following:
- Offer name (a free diagnostic, a starter kit, a mini-course, a template pack)
- What it does in plain language
- Who it is for
- Key stats or proof points (optional and powerful)
- An existing skill file, if the offer maps to a Claude skill
- An opt-in destination, if it differs from your saved setup
If the user gives only a name and a sentence, that is enough. Pull the rest from context, memory, and conversation history. Ask for one clarification at most.
## Page Structure (Seven Sections)
Every landing page follows this exact sequence. Each section has a job. No section is optional.
### 1. Hero (Above the Fold)
The hero holds all of the following in one viewport:
- Brand pill: your brand name from setup, in a bordered capsule at the top.
- Headline: two lines maximum. Line one is white. Line two is your accent color with a shimmer animation. The headline names the offer or states the core promise.
- Subhead: one or two sentences in muted text, written in second person, saying what this does for the reader.
- Opt-in card: a hero stat (a big accent number with a mono label under it), an email input, a CTA button with an accent gradient, and a microcopy line under it (for example "Free access. No spam.").
- Success state: a green confirmation card that replaces the form on submit.
The opt-in card gets a pulseGold glow animation and an id of "opt-in" so the bottom CTA can scroll to it.
The handleSubmit function is stubbed for you to wire to the tool you named in setup:
```javascript
const handleSubmit = () => {
if (email.includes("@")) {
// your email tool, booking link, or automation goes here
setSubmitted(true)
}
}
```
### 2. The Problem
A single card with:
- A red accent (EF4444) for the label and the headline highlight.
- A soft red glow orb behind it.
- Two or three sentences that name the pain the audience feels right now.
- Written so the reader thinks "that is exactly what is happening to me."
### 3. How It Works (Three Steps)
Always exactly three steps, built as expandable accordion cards. Each step has:
- A number badge (01, 02, 03) with an accent that shifts per step.
- A title in the headline font.
- A body paragraph in the body font.
- An expandable detail block (italic, with a colored left border) that reveals on click.
- A chevron that rotates on expand.
Accent progression: step 01 gold (FFE307), step 02 purple (A855F7), step 03 green (22C55E). Map these onto your palette if you set one.
### 4. What It Delivers (Grid)
A two-column responsive grid of cards showing what the reader gets. Each card:
- An emoji icon at 32px.
- A title in the headline font at 22px.
- A description in the body font at 13px, muted.
- Hover: a border glow and a lift of 3px.
Minimum four cards, maximum six. Each card is one tangible deliverable or capability.
### 5. Proof Bar
A horizontal grid of three or four stat cards. Each card:
- A big number in the headline font at 36px in your accent.
- A label under it in the mono font at 11px, muted, uppercase.
- One stat runs red (EF4444) for contrast, the "zero" or pain stat.
### 6. Bottom CTA
A section with:
- A particle field background (around 20 particles).
- A centered glow orb.
- A two-line headline with line two in the shimmer accent.
- A single accent-gradient button that smooth-scrolls to the hero opt-in:
```javascript
onClick={() => document.getElementById("opt-in")?.scrollIntoView({ behavior: "smooth" })}
```
### 7. Footer
Single line: your brand name and your tagline in 11px muted text, set in setup. If you gave no tagline, use your brand name alone.
## Design System (Defaults)
Use these as the fallback whenever you have not set brand colors or fonts. If you set a brand palette in setup, map it onto the same roles: a primary accent, a secondary accent, a dark background, a card surface, and text tones.
### Colors (default gold-on-black)
- Accent Primary FFE307
- Accent Secondary FFA500
- Background 08080A
- Card 0F0F12
- Border rgba(255,255,255,0.04)
- White F4F4F5
- Light Text D4D4D8
- Muted Text 71717A
- Dim 3F3F46
- Green 22C55E
- Purple A855F7
- Red EF4444
### Typography (default)
- Headlines: Bebas Neue, uppercase, letter-spacing 2 to 3px.
- Labels and data: Space Mono, uppercase, 10 to 12px.
- Body: DM Sans, weight 300 to 400, 15 to 17px, line-height 1.65 to 1.75.
- Section tags: DM Sans, 11px, letter-spacing 4px, uppercase, accent at 50 to 60% opacity.
Load Bebas Neue, Space Mono (weights 400 and 700), and DM Sans (weights 300 to 800) from Google Fonts. If you set brand fonts, swap them into the headline and body roles and keep a monospace for the labels.
### Animations (required)
Include these keyframes:
- pFloat: drifts particles up and to the side across their lifetime.
- pulseGold: the opt-in card glow that breathes between a soft and a stronger accent shadow.
- shimmer: moves a background gradient across the gold headline line on a loop.
- fadeUp: fades sections in from a small downward offset as they enter.
### Components (required)
- ParticleField: takes a count prop, generates that many accent particles on the pFloat animation. Used in the hero and the bottom CTA.
- GlowOrb: takes x, y, size, opacity, and color, renders a blurred radial gradient for depth. Place two or three in the hero, one in the problem, one in the bottom CTA.
- Shimmer text: the gold headline line uses a left-to-right accent gradient with WebkitBackgroundClip set to text and a transparent fill, running the shimmer keyframe on a four second loop.
### Spacing and Layout
Max content width 820px, centered. Section padding 48 to 80px vertical and 24px horizontal. Card padding 24 to 36px. Card radius 16 to 20px. Card gap 10 to 12px. Divider lines use a horizontal accent gradient that fades at both ends.
### Interactive States
Cards on hover: an accent border glow and a lift of 2 to 4px. Active buttons and tabs: an accent background or accent border with accent text. Transitions run around 0.3 to 0.4s on an ease-out curve.
## Content Voice
Write landing page copy in this voice:
- Direct. Confident. Free of hedging.
- Second person ("you," "your").
- Short paragraphs, two or three sentences per block at most.
- Specific numbers over vague promises.
- The problem section reads like you are handing the reader their own week back to them.
- The how-it-works section makes the offer feel effortless.
- Rule of Three for examples: exactly three, never more.
- Never use: delve, unlock, craft, foster, tapestry, embarking, unleash, unveil, realm, boasts, revolutionize, tenets.
- No semicolons, no em dashes, no contrastive framing.
## Output
A single-file React JSX artifact saved wherever you set in setup, with a descriptive filename (for example lead-magnet-optin.jsx). The artifact must:
- Be a complete, self-contained React component with a default export.
- Hold all data as const arrays at the top of the file.
- Include the full style block with the fonts and all four animations.
- Include ParticleField and GlowOrb as internal components.
- Include the opt-in form with the handleSubmit stub pointing at your tool.
- Include the success confirmation state.
- Include the scroll-back CTA at the bottom.
- Pass the Ice Cream Test on first render.
## After Delivery
After presenting the artifact, offer:
1. Save the file to wherever you keep your work.
2. Build the deployment prompt to ship the page to your website.
3. Write the promo content for it: captions, an email mention, a social post.
Claude reads the block, builds the skill file, and installs it. From then on, you just run the skill in any conversation. No folders to find, no code to write.
Every week you see what's working, build it live, and put it to work in your business.
Here's the shape of what this skill hands you when it runs. Copy it, use it, keep moving.
You don't need to hold any of this in your head. That's the skill's job. If you're curious what it's doing for you, here's the idea underneath it.
The offer is free, and the page in front of it still decides whether anyone takes it. This skill builds to one bar, the Ice Cream Test: someone lands on the page and wants the offer right away, with no pitch stacked on top. The cinematic layout, the shimmer, and the motion carry the want. A free offer starts converting like a premium one.
The first run interviews you and wires in your name, your colors, your fonts, and the tool your opt-ins flow into. Every build after that runs your version.
Hero, the problem, three steps, a delivery grid, a proof bar, a scroll-back CTA, and the footer. Each section has one job and the sequence stays proven on every page.
Every page has to make people want the offer on sight. If it would need a sales argument bolted on, it gets reworked until the page itself carries the want.
A shimmering headline, particle fields, and glow orbs give the page depth and motion, so a free offer feels like a $10K experience.
The email form and its handleSubmit stub point straight at your email platform, booking link, or automation, so capture works the moment you deploy.
The Ice Cream Test is the standard every page has to pass: someone lands on it and wants the free offer right away, with no pitch layered on top. The design, the copy, and the motion do the selling. The skill builds to that bar using a cinematic dark layout, a shimmering headline, particle fields, and glow orbs, so a free offer feels like a $10K experience you are giving away. If a page would need a separate sales argument to land, it gets reworked until the page itself carries the want.
Hero with the opt-in card, The Problem, How It Works in exactly three steps, What It Delivers as a grid, a Proof Bar, a Bottom CTA that scrolls back to the opt-in, and the Footer. Each section has one job. The hero holds the whole offer and the email capture in a single viewport. How It Works stays at three expandable steps every time. The Proof Bar carries three or four stat cards. The build follows this sequence on every page so the flow stays proven.
On the first run the skill interviews you with a few questions: your brand name for the hero pill and footer, your colors or your brand palette, your fonts, where opt-ins should go, and where to save the file. It saves those answers as a CONFIG block and uses them on every build after. The opt-in form and its handleSubmit stub point at the tool you named, whether that is your email platform, a booking link, or an automation. Say 'redesign lead magnet page' any time and it runs the setup again.