Landing Page Designdi elayadesign

Landing Page Design Skill.

Collega l'argomentazione della pagina e le sue regole visive attorno a un'unica conversione prevista.

Landing page
Copywriting
Web design

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Landing Page DesignSKILL.md

Attività Landing page Produce • Una bozza con struttura della pagina, copy dell'hero, vantaggi, flusso di lavoro e FAQ. • Una raccomandazione index/noindex con title e description, dove appropriato. • Un'implementazione sezione per sezione con il layout e le regole visive scelti. Prima di iniziare Non è richiesto un singolo runtime applicativo; gli esempi di implementazione fanno riferimento a valori Tailwind, IntersectionObserver e strumenti di animazione facoltativi.

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

01 Funzionalità

Costruisci una landing page attorno a una sola azione

Pianifica offerta, copy, struttura e trattamento SEO, poi applica le regole visive dettagliate della fonte dove si adattano al progetto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Landing Page Design parte da una sola offerta, un solo pubblico e una sola azione principale. La prima metà raccoglie obiettivo di conversione, obiezioni, contesto del traffico, prove e vincoli, poi propone la sequenza delle sezioni e il copy prima di costruire. La seconda metà prescrive un sistema visivo dettagliato per tipografia, spaziature, raggi, hero, icone, animazioni e stati dei componenti.

È una skill insolitamente impostata, non una checklist neutrale. Include scelte limitate di font e spaziatura, una sezione obbligatoria di rivelazione dello slogan e convenzioni specifiche per le animazioni. Queste scelte possono entrare in conflitto con un sistema di brand consolidato o con requisiti di accessibilità e non devono prevalere su di essi in modo silenzioso. L'impostazione orientata all'alta conversione è un'intenzione, non la prova di un miglioramento misurato della conversione.

Risultati attesi

Una bozza con struttura della pagina, copy dell'hero, vantaggi, flusso di lavoro e FAQ.
Una raccomandazione index/noindex con title e description, dove appropriato.
Un'implementazione sezione per sezione con il layout e le regole visive scelti.

Vedi il brief di esempio

Dal brief alla revisione

01
Chiarisci l'offerta
Raccogli in un'unica fase pubblico, azione, obiezioni, fonte del traffico e materiali di prova reali.
02
Scegli l'argomentazione
Seleziona una struttura tra hero classico, storia lunga, pagina di conversione minimale o confronto, e spiega perché.
03
Scrivi prima di costruire
Prepara struttura, copy, trattamento SEO e raccomandazione sul layout prima dell'implementazione.
04
Costruisci e verifica sezione per sezione
Procedi con la pagina in ordine, controllando stati, link, semantica, metadati e vincoli di brand.

02 Quando usarlo

Quando usarla

Non è richiesto un singolo runtime applicativo; gli esempi di implementazione fanno riferimento a valori Tailwind, IntersectionObserver e strumenti di animazione facoltativi.

Quando è adatta

Campagne con una sola offertaUtile quando il visitatore deve compiere un unico passo successivo ben definito.
Dalla strategia all'implementazioneCollega copy e gestione delle obiezioni a decisioni concrete su layout e stati.

Limiti da verificare

Nessuna garanzia di conversioneLa fonte fornisce regole di design e copy, non risultati di un esperimento sulla tua offerta.
Le regole di brand possono entrare in conflittoI font, i gradienti, le animazioni e l'uso di maiuscole/minuscole nel copy che prescrive non sono requisiti universali per i prodotti esistenti.
Le prove devono essere realiStatistiche dall'aspetto specifico, nomi di clienti o garanzie non vanno mai inventati come prove di fatto.

Cosa portare

Offerta e conversioneIndica che cosa ricevono i visitatori e quale azione conta come successo.
Pubblico e obiezioniFornisci il contesto dei visitatori, la fonte del traffico e i reali motivi di esitazione.
Prove e vincoli di brandFornisci screenshot approvati, testimonianze, dati, condizioni e requisiti del design system.

03 Decisioni importanti

Decisioni che contano

Prima la struttura, poi la decorazione
L'argomentazione della pagina viene scelta prima delle regole visive, riducendo il rischio di rifinire sezioni prive di un ruolo persuasivo.
L'intento del traffico conta
Una pagina di download breve e ad alta intenzione richiede un'argomentazione diversa da una landing page informativa per la ricerca.
Verifica le impostazioni predefinite
La specificità della fonte è utile solo quando le sue forti ipotesi visive si adattano al progetto.

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

Usa la procedura di installazione attuale del repository e includi l'intera cartella della skill. La fonte è un insieme di regole di design, non un page builder ospitato.

File sorgente originale

https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

Non è richiesto un singolo runtime applicativo; gli esempi di implementazione fanno riferimento a valori Tailwind, IntersectionObserver e strumenti di animazione facoltativi.

Parti da un solo risultato

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

Brief di esempio

Usa landing-page-design per pianificare una pagina evergreen per il nostro prodotto design-review. Il pubblico sono le piccole agenzie e l'azione è la richiesta di una demo. Usa solo gli screenshot forniti e prove verificate. Prima di scrivere codice, restituisci la struttura, il copy dell'hero, le FAQ basate sulle obiezioni, la raccomandazione SEO e la scelta del layout. Mantieni i nostri token di brand esistenti e i requisiti di movimento ridotto (reduced-motion).

Controlla il risultato

Verifica l'output effettivo rispetto a questi criteri osservabili.

Un'unica azione principale è coerente dall'hero alla CTA finale.
Ogni prova fattuale proviene dalle evidenze fornite.
Le regole visive sono conciliate con il brand esistente e con i requisiti di accessibilità.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che gli 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. Il comportamento e i requisiti upstream possono cambiare.

Proprietario della fonte: elayadesign
Repository: elayadesign/ai-design-skills
File della skill: skills/landing-page-design/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 1c1e97cb9878

Sintesi editoriale della fonte

Pianifica offerta, copy, struttura e trattamento SEO, poi applica le regole visive dettagliate della fonte dove si adattano al progetto.

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

06 Domande prima di iniziare

Domande prima di iniziare

È pensata solo per le homepage?

No. La sua distinzione centrale è che una landing page serve una sola offerta e un solo intento, a differenza di una homepage che si rivolge a più pubblici o obiettivi.

Ogni raccomandazione va seguita su un sito esistente?

No. Il suo stesso ambito riconosce le istruzioni esplicite dell'utente, e un brand consolidato o un requisito di accessibilità vanno risolti, non sovrascritti in silenzio.

Aggiungere le sue FAQ garantisce visibilità nella ricerca?

No. Raccomanda contenuti utili in forma di domande e risposte e metadati appropriati; indicizzazione e prestazioni nella ricerca restano risultati distinti.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali 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