Landing Page Generatordi Alireza Rezvani

Landing Page Generator Skill.

Collega una proposta di valore reale alle sezioni della pagina prima di generare i componenti.

Landing page
Copywriting
Frontend

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Landing Page GeneratorSKILL.md

Attività Landing page Produce • Sezioni di landing page in TSX per React o Next.js con stili Tailwind • Varianti di copy organizzate attorno a un framework di messaggio scelto • Struttura di base per title, description, canonical e dati strutturati Prima di iniziare Serve un progetto React o Next.js compatibile con Tailwind; i componenti UI citati e gli strumenti opzionali di analisi del brand potrebbero richiedere una configurazione separata.

Sintesi editoriale · fonte esaminata il 2026-10-07 · non è un esempio generato

01 Funzionalità

Redigere una landing page React a partire da un brief di prodotto

Un flusso di lavoro dal brief di prodotto al TSX che combina framework di copy, sezioni di landing page e checklist SEO o di prestazioni.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Come funziona

Landing Page Generator combina framework di copywriting di marketing con pattern di sezioni React o Next.js e stili Tailwind. Raccoglie pubblico, problema, beneficio, prezzi e direzione di design, poi redige il copy prima di comporre la pagina. La fonte propone pattern per hero, funzionalità, prezzi, FAQ e CTA; le sezioni non pertinenti vengono omesse, non riempite automaticamente.

La fonte usa il linguaggio della conversione e delle prestazioni come obiettivi, non come risultati misurati per una pagina generata. I suoi template includono inoltre esempi di testimonianze, garanzie e affermazioni di prodotto che vanno sostituiti con dati verificati o eliminati. Metadati SEO e dati strutturati sono una base utile, ma devono comunque corrispondere alla pagina reale e alle regole di routing e indicizzazione del sito.

Risultati attesi

Sezioni di landing page in TSX per React o Next.js con stili Tailwind
Varianti di copy organizzate attorno a un framework di messaggio scelto
Struttura di base per title, description, canonical e dati strutturati

Vedi il brief di esempio

Dal brief alla revisione

01
Raccogli i dati di prodotto
Definisci pubblico, azione principale, beneficio e prezzi effettivi. Separa le prove approvate dalle affermazioni non ancora comprovate.
02
Scrivi prima il messaggio
Scegli una narrazione problema-soluzione o prima-dopo adatta al prodotto, poi decidi quali sezioni servono davvero.
03
Costruisci e verifica
Genera i componenti nel progetto esistente, controlla il layout mobile e i metadati, e misura le prestazioni reali invece di ripetere gli obiettivi dei template.

02 Quando usarlo

Quando usarla

Serve un progetto React o Next.js compatibile con Tailwind; i componenti UI citati e gli strumenti opzionali di analisi del brand potrebbero richiedere una configurazione separata.

Quando è adatta

Bozze per il lancio di un prodottoUtile quando i dati di prodotto sono noti e serve una prima implementazione coerente.
Varianti di messaggioAdatta a esplorare diversi approcci di titolo e CTA mantenendo la stessa offerta verificata.

Limiti da controllare

Nessuna garanzia di conversioneUn framework di copy o un template non dimostra una conversione più alta. Servono un vero piano di misurazione e dati sufficienti.
Nessuna prova inventataTestimonianze, loghi dei clienti, garanzie e benefici numerici devono provenire da fonti approvate, non dal componente di esempio.

Cosa portare

Prodotto e pubblicoIndica l'offerta reale, il cliente target e l'attività principale che la pagina deve supportare.
Offerta e proveFornisci i prezzi attuali e le eventuali testimonianze, metriche o garanzie approvate; segnala le prove non disponibili.
Vincoli del progettoSpecifica la configurazione React o Next.js, le regole del brand e le convenzioni SEO a livello di sito.

03 Decisioni importanti

Le decisioni importanti

Prima il copy, poi i componenti
Scrivere prima la proposta di valore aiuta a legare la scelta delle sezioni all'offerta, anziché a un elenco fisso di template.
SEO già nella bozza
Metadati, gestione del canonical e struttura semantica vengono considerati insieme al codice della pagina, invece di essere dimenticati fino alla consegna.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Carica la Skill completa e adatta i suoi esempi di componenti al repository. Non dare per scontato che gli import di esempio o i file SEO a livello di sito esistano già.

File sorgente originale

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

Serve un progetto React o Next.js compatibile con Tailwind; i componenti UI citati e gli strumenti opzionali di analisi del brand potrebbero richiedere una configurazione separata.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa landing-page-generator per redigere una pagina Next.js per il nostro prodotto di pianificazione a partire dal brief fornito. Usa solo i prezzi e i benefici che indico, ometti testimonianze e garanzie perché nessuna è approvata, e rispetta i nostri brand token. Scrivi prima le varianti di titolo e CTA, poi costruisci le sezioni pertinenti. Aggiungi metadati e solo dati strutturati supportati, e riporta separatamente le prestazioni misurate dagli obiettivi.

Verifica il risultato

Confronta l'output reale con questi criteri osservabili.

Ogni affermazione e dettaglio di prezzo corrisponde a un input approvato.
La pagina ha un'azione principale chiara e sezioni mobile utilizzabili.
Metadati e dati strutturati riflettono il contenuto visibile, e i risultati di prestazioni sono etichettati in base allo stato della misurazione.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di programmazione. Questo elenco non significa che la skill sia inclusa né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti originali possono cambiare.

Autore della fonte: Alireza Rezvani
Repository: alirezarezvani/claude-skills
File della skill: product-team/skills/landing-page-generator/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 19392f7a0826

Sintesi editoriale della fonte

Un flusso di lavoro dal brief di prodotto al TSX che combina framework di copy, sezioni di landing page e checklist SEO o di prestazioni.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non un dato sull'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Garantisce una conversione migliore?

No. La fonte offre pattern di copy e layout; il loro effetto sul business va verificato sul prodotto e sul pubblico reali.

Ogni pagina deve includere testimonianze e prezzi?

No. Il flusso di lavoro consente esplicitamente di saltare le sezioni non pertinenti, e le prove non supportate non vanno inventate.

I numeri sulle prestazioni sono risultati dimostrati?

Sono obiettivi dichiarati nella fonte. Misura la pagina risultante nel suo ambiente reale prima di riportare una metrica raggiunta.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design