Menu
Build a high-converting landing page for your app using a proven 12-section conversion framework.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | iblai-marketing-landing |
| description | Build a high-converting landing page for your app using a proven 12-section conversion framework. |
| globs | null |
| alwaysApply | false |
Build a high-converting landing page for your app. Uses a proven 12-section conversion framework based on 8,000+ pages and 4,000+ brands — not guesswork, not trends, not "good design." Structure.
Follow BRAND.md for colors, typography, spacing, and the Apple-inspired design language.
Component hierarchy (always prefer in this order):
@iblai/iblai-js) — use SDK components firstnpx shadcn@latest add <component>)npx shadcn@latest add @shadcn-space/<block>)Do NOT write custom components when an ibl.ai, shadcn, or shadcn-space equivalent exists. Both ibl.ai and shadcn share the same Tailwind theme and render in ibl.ai brand colors automatically.
You MUST run /iblai-ops-test before telling the user the work is ready.
After all work is complete, start a dev server (pnpm dev) so the user
can see the result at http://localhost:3000.
Use pnpm as the default package manager. Fall back to npm if pnpm
is not installed.
The page follows a psychological flow engineered to match how people think, scroll, and decide:
Top → Trust (Hero, Proof bar, Transformation)
Middle → Belief (Benefits, Features, Social proof, UGC)
Bottom → Decision (Comparison, FAQ, Final CTA)
Every section exists for a reason. Skipping sections costs conversions.
Before building anything, understand what the landing page is selling.
Read CLAUDE.md, README, any marketing copy, App Store metadata, and the app's core features. Form a mental model of:
Present what you've discovered and ask:
If the user skips questions, use sensible defaults derived from the codebase.
Design the section-by-section flow. Present the blueprint to the user for approval before writing any code.
Every section is marked [REQUIRED], [RECOMMENDED], or [OPTIONAL]. Include all REQUIRED sections. Include RECOMMENDED unless the user explicitly opts out. Include OPTIONAL when the content exists.
This is where the page is won or lost. You have seconds.
Layout: Full-width hero section. Centered content, max-w-4xl. Headline uses Display Hero typography (56px/600/1.07). CTA uses pill shape (980px radius). Proof bar sits directly below the CTA as a row of logos/badges.
Key principle: Attention → Trust → Action. All above the fold.
Right after the hero. Answers: "How easy is this going to be?"
Layout: Three-column grid (stacks on mobile). Each step is a card with a number badge, icon, title, and description. Use alternating light/dark section backgrounds per BRAND.md.
Deep, visual, outcome-led. Not features — outcomes.
Bad: "High quality materials" Good: "Built to last 10+ years. Tested across 5,000+ uses."
Specificity = trust. Trust = conversion.
Layout: Alternating two-column sections. Images should be actual app screenshots or product shots where possible.
The scan section. For people who won't read everything (most users).
Layout: Grid layout. Use Lucide icons. Keep text minimal.
Most brands drop the ball here. They assume people scroll to the bottom.
Layout: Centered section with CTA button, star rating display, and a one-line trust statement. Use the ibl.ai gradient background.
One of the highest-impact sections. One of the most ignored.
Layout: Two-column checklist or single column with check icons. Can include a product image or mockup alongside.
Not just one testimonial block. Layered.
Layout: Testimonial grid or carousel. Each card has avatar, name, role, star rating, and quote text. Use Card component from shadcn.
Where attention spikes again. Builds belief + increases dwell time.
Layout: Horizontal scrolling strip. Thumbnail cards with play button overlay. Only include if the user has video content.
Where decisions get made. You vs alternatives. Side by side.
Layout: Two-column comparison table. Product column highlighted. Use the shadcn Table component. Green checkmarks vs red X marks.
Not filler. It's objection handling.
Layout: Accordion component (shadcn Accordion). Full-width, centered content. Questions should be phrased as the visitor would ask them.
Right before the close: more visuals, more context, more immersion.
Layout: Full-width image grid or horizontal scroll strip.
The last push. Must feel different from the mid-page CTA.
Layout: Full-width section with dark or gradient background. Centered headline (Section Heading typography), CTA button, and a row of trust badges/icons below.
Present the complete section sequence as a numbered list showing:
Ask the user to confirm, reorder, add, or remove sections before proceeding.
For each section in the approved blueprint, draft:
Present content section-by-section. Get approval before implementation.
Create the landing page at app/(landing)/page.tsx (or app/page.tsx if the
user wants it as the home page). Use a route group so the landing page can have
its own layout without the app's auth providers.
app/
├── (landing)/
│ ├── layout.tsx ← Minimal layout (no auth, no sidebar)
│ └── page.tsx ← The landing page
└── (app)/
├── layout.tsx ← App layout with providers
└── ...
Add shadcn components needed for the landing page:
npx shadcn@latest add button card accordion table badge separator
Check if shadcn-space has relevant blocks before building from scratch:
npx shadcn@latest add @shadcn-space/hero-1
npx shadcn@latest add @shadcn-space/features-1
npx shadcn@latest add @shadcn-space/testimonials-1
npx shadcn@latest add @shadcn-space/faq-1
npx shadcn@latest add @shadcn-space/cta-1
Adapt shadcn-space blocks to match the approved content. Do NOT use them as-is if they don't fit the framework structure.
Build each section as a separate component in components/landing/:
components/landing/
├── hero.tsx
├── transformation.tsx
├── benefits.tsx
├── features.tsx
├── mid-cta.tsx
├── whats-included.tsx
├── social-proof.tsx
├── ugc-strip.tsx (if included)
├── comparison.tsx (if included)
├── faq.tsx
├── image-strip.tsx (if included)
└── final-cta.tsx
Each component should be self-contained with its own content. The page file assembles them in order.
Typography: Follow BRAND.md Apple-inspired hierarchy:
Layout:
#f5f5f7) / white (#ffffff) section backgroundsCTA Buttons:
bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white)Responsive:
Animations (subtle only):
framer-motion if already in the project)Add a minimal sticky navigation bar at the top:
backdrop-filter: saturate(180%) blur(20px)
on rgba(255,255,255,0.8) (light) or rgba(0,0,0,0.8) (dark)Minimal footer with:
Run /iblai-ops-test before telling the user the work is ready:
pnpm build — must pass with zero errorspnpm dev — start dev serverThis isn't random. The exact flow is engineered to match how people scroll:
Conversion doesn't come from:
Conversion comes from:
{/* TODO: Replace with real content */}
and use realistic placeholder content, not lorem ipsum.<Image> with proper width/height and lazy loading.Brand guidelines: BRAND.md
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see iblai-marketing-analytics-tracking. For page-level conversion optimization, see iblai-marketing-page-cro.
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see iblai-marketing-paid-ads. For landing page copy, see iblai-marketing-copywriting.
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see iblai-marketing-seo-audit. For structured data implementation, see iblai-marketing-schema-markup.
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see iblai-marketing-ab-test-setup.
When the user wants to audit or optimize an App Store or Google Play listing. Also use when the user mentions 'ASO audit,' 'app store optimization,' 'optimize my app listing,' 'improve app visibility,' 'app store ranking,' 'audit my listing,' 'why aren't people downloading my app,' 'improve my app conversion,' 'keyword optimization for app,' or 'compare my app to competitors.' Use when the user shares an App Store or Google Play URL and wants to improve it.
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers or wants to build systems to prevent it. For post-cancel win-back email sequences, see iblai-marketing-email-sequence. For in-app upgrade paywalls, see iblai-marketing-paywall-upgrade-cro.