Skill Details
Runtime
(claude-5-sonnet)
Example user message
[userMessage]: Target Niche: `business_name`: "ClipSurge AI" `industry_niche`: "Creator Economy / AI Video SaaS" `target_audience`: "Twitch streamers and YouTube creators struggling to manually edit, clip, and caption short-form content." `unique_selling_proposition`: "Instantly converts 4-hour streams into 15 viral shorts with AI-predicted hook scores and automatic burned-in captions." `primary_conversion_goal`: "Start Free Trial / Connect Twitch Account" `brand_vibe`: "High-Energy / Dark Mode Tech / High-Contrast Neon Accents" `preferred_stack`: "Next.js App Router (TypeScript + Tailwind CSS)"
Example agent response
Built the full ClipSurge AI landing page as one React component, all nine zones included: hero with a mock clip-queue panel, social proof strip, pain-point matrix, bento-grid features, workflow timeline, case studies, three-tier pricing (Growth as the popular tier), FAQ accordion, and a closing CTA + footer.
A few calls I made on top of your spec:
Kept the chartreuse/magenta-on-near-black palette and burned-in caption motif exactly as specified, since it's a deliberate, pinned-down brand direction rather than a generic default.
Paired Space Grotesk for display/body with IBM Plex Mono for captions, timestamps, and data labels — a nod to actual video timecodes/SRT files, tying the type system to the subject matter.
Wrote real copy throughout (hook lines, FAQ, two case-study quotes) grounded in the streamer/creator use case rather than generic SaaS boilerplate.
It's plain React + Tailwind (no Next.js-specific APIs used), so it drops into an App Router project as-is — just wire up real auth/data behind the buttons and clip-queue list.
Clipsurge landing
Code·JSX
By purchasing this skill, you agree to our terms of service
CLAUDE-5-SONNET
The Ultimate Landing Page Generator is a highly structured prompt framework designed to transform an LLM into a triple-threat web architect: an elite Conversion Rate Optimizer (CRO), a master copywriter, and a senior React/Next.js developer. It enforces a strict 9-zone structural blueprint, demanding completely written, high-converting copy without placeholders, followed by the generation of production-ready, untruncated UI code (Next.js/Tailwind).
...more
Added 1 week ago
