We Structured Our AI Services Page Like a Hormozi Offer
We rebuilt the /ai page that promotes our /impeccable Claude Code skill, and the first version had the same problem most service pages have: it explained the product without making a case for why you'd want it. It read like documentation. We needed it to read like a decision.
We used the Grand Slam framework from Hormozi's $100M Offers as the page structure. Every section has a specific job in the argument. Here's the breakdown.
Hero: Lead With the Result, Not the Product
The headline doesn't mention the skill name. It names the outcome: AI-generated UI that actually looks designed, not like every Tailwind demo from 2022.
Below it, a live-pulse badge handles the two objections that kill conversions before they start: cost and time commitment. "Free skill, install in 10 minutes." Both addressed in six words each.
Two CTAs sit above the fold. One goes straight to the form. One anchors to the value stack. Either way the visitor moves forward.
Agitation: Name the Specific Problem
Generic copy says AI output often needs editing. Agitation copy names the scenes:
- Hero sections lifted from a 2022 Tailwind demo
- Cards that break alignment on mobile
- Three different blues across one page
- And then you spend Saturday rewriting it by hand
Each item is something a developer has actually lived. You're not describing a category of pain, you're triggering a memory. That's the difference between agitation that converts and copy that gets skimmed.
The Value Stack: Six Named Deliverables
Instead of "you get the skill," the page lists six specific items with titles: the SKILL.md itself, a PRODUCT.md template, a DESIGN.md cheatsheet, three install paths, live browser iteration mode, and the hard preflight gate. Each gets a one-sentence mechanism explanation.
Naming the components does two things. First, it makes an invisible product (a Claude Code skill) feel concrete and countable. Second, it gives each item a chance to resonate with a different reader. Someone running Codex cares about the install paths. Someone burned by generic AI output cares about the preflight gate.
The Mechanism: Four Commands
$impeccable teach, $impeccable shape, $impeccable craft, $impeccable critique. The mechanism section explains what each command actually does and, more importantly, what makes the sequence non-skippable.
The key detail: shape produces a confirmed design brief that must be reviewed and approved before any code runs. The skill will not proceed without it. That's not a feature list item. It's the structural reason the output doesn't look AI-generated. Once a skeptic understands the mechanism, they stop asking "is this just another prompt wrapper?" and start thinking about the install.
Before/After: Contrast Closes the Gap
Four rows. Left side is the current state, right side is after. We kept every line specific:
"AI made me a hero section that looks like every Tailwind UI demo" becomes "I have a confirmed design brief before any pixel ships."
"I rewrite my AI output by hand on Saturdays" becomes "It hits production on the first pass."
The specificity is the point. "Better output" is forgettable. "No Saturday rewrites" is a reason to install something this week.
Guarantee: Remove the Last Friction
A 30-day outcome guarantee sits just before the final form. By that point in the page, a converted visitor has already read the mechanism and the before/after. The guarantee isn't doing heavy lifting. It's clearing the last objection for someone who's already mostly convinced but looking for a reason to act now instead of later.
What Changed in the Visual Layer
The page structure is the main work, but the visual treatment reinforces it. The hero has floating Framer Motion orbs, a cursor-following spotlight written directly to CSS custom properties (no React re-renders on pointermove), and a static central halo. The value stack is a six-cell hover-glow grid. The mechanism steps connect with a vertical accent gradient between cards.
No new dependencies. All animation is transform and opacity, GPU-composited. The glow effects are radial gradients stacked in CSS.
The page now runs as an argument. Each section hands off to the next, and by the time someone hits the form they've already made the decision. The form is just paperwork.