Landing Page Generatorby Alireza Rezvani

Landing Page Generator Skill.

Connect a real product proposition to page sections before generating the components.

Landing Pages
Copywriting
Frontend

Source Review · Landing Page GeneratorSKILL.md

Task Landing Pages Produces • React or Next.js TSX landing-page sections with Tailwind styles • Copy variants organized around a chosen message framework • Title, description, canonical and structured-data scaffolding Before You Start A compatible React or Next.js project with Tailwind; referenced UI components and optional brand-analysis tooling may require separate setup.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Draft a React Landing Page from a Product Brief

A product-brief-to-TSX workflow combining copy frameworks, landing-page sections and SEO or performance checklists.

Source-based workflowNot an execution benchmark

The Working Approach

Landing Page Generator combines marketing-copy frameworks with React or Next.js section patterns and Tailwind styling. It gathers the audience, pain point, benefit, pricing and design direction, then drafts copy before composing the page. The source offers hero, feature, pricing, FAQ and CTA patterns, with irrelevant sections omitted rather than filled automatically.

The source uses conversion and performance language as goals, not measured results for a generated page. Its templates also include examples of testimonials, guarantees and product claims that must be replaced with verified inputs or left out. SEO metadata and structured data are useful scaffolding, but they still need to match the real page and the site's routing and indexing policy.

Expected Deliverables

React or Next.js TSX landing-page sections with Tailwind styles
Copy variants organized around a chosen message framework
Title, description, canonical and structured-data scaffolding

See the Example Brief

From Brief to Review

01
Gather Product Facts
Define audience, primary action, benefit and actual pricing. Separate approved proof from claims that have not been established.
02
Write the Message First
Choose a problem-solution or before-after narrative that fits the product, then decide which sections are genuinely needed.
03
Build and Validate
Generate components in the existing project, check mobile layout and metadata, and measure actual performance rather than repeating template targets.

02 When to Use It

When to Use It

A compatible React or Next.js project with Tailwind; referenced UI components and optional brand-analysis tooling may require separate setup.

A Good Fit

Product Launch DraftsUseful when the product facts are known and a coherent first implementation is needed.
Message VariantsFits exploring different headline and CTA approaches while keeping the same verified offer.

Limits to Check

No Conversion GuaranteeA copy framework or template does not demonstrate higher conversion. That requires a real measurement plan and sufficient data.
No Invented ProofTestimonials, customer logos, guarantees and numerical benefits must come from approved sources, not the example component.

Bring These Inputs

Product and AudienceProvide the real offering, target customer and primary task the page should support.
Offer and EvidenceSupply current pricing and any approved testimonials, metrics or guarantees; identify unavailable proof.
Project ConstraintsSpecify the React or Next.js setup, brand rules and site-level SEO conventions.

03 Decisions That Matter

Decisions That Matter

Copy Before Components
Writing the proposition first helps keep section choice tied to the offer rather than to a fixed template inventory.
SEO in the Draft
Metadata, canonical handling and semantic structure are considered alongside page code instead of being forgotten until handoff.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load the complete Skill and adapt its component examples to the repository. Do not assume example imports or site-level SEO files already exist.

Upstream Source File

https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

A compatible React or Next.js project with Tailwind; referenced UI components and optional brand-analysis tooling may require separate setup.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use landing-page-generator to draft a Next.js page for our scheduling product from the supplied brief. Use only the pricing and benefits I provide, omit testimonials and guarantees because none are approved, and preserve our brand tokens. Write the headline and CTA variants first, then build the relevant sections. Add metadata and only supported structured data, and report measured performance separately from targets.

Inspect the Result

Check the actual output against these observable criteria.

Every claim and pricing detail matches an approved input.
The page has a clear primary action and usable mobile sections.
Metadata and structured data reflect visible content, with performance results labeled by measurement status.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Alireza Rezvani
Repository: alirezarezvani/claude-skills
Skill File: product-team/skills/landing-page-generator/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 19392f7a0826

Editorial Source Summary

A product-brief-to-TSX workflow combining copy frameworks, landing-page sections and SEO or performance checklists.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it guarantee better conversion?

No. The source offers copy and layout patterns; their business effect must be tested on the actual product and audience.

Must every page include testimonials and pricing?

No. The workflow explicitly allows irrelevant sections to be skipped, and unsupported proof should not be invented.

Are the performance numbers proven results?

They are stated targets in the source. Measure the resulting page in its real environment before reporting an achieved metric.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills