Aller au guide d’utilisation
Landing Page Designpar elayadesign

Landing Page Design Skill.

Reliez l'argumentaire de la page et ses règles visuelles autour d'une seule conversion visée.

  • Landing pages
  • Rédaction publicitaire
  • Design web
Analyse de la source · Landing Page DesignSKILL.md
Tâche Landing pages Produit • Un plan de page, un texte de hero, des bénéfices, un parcours et une ébauche de FAQ. • Une recommandation index/noindex avec titre et description, le cas échéant. • Une implémentation section par section selon la mise en page et les règles visuelles retenues. Avant de commencer Aucun environnement d'exécution applicatif unique n'est requis ; les exemples d'implémentation font référence à des valeurs Tailwind, à IntersectionObserver et à un outillage d'animation facultatif.
Résumé éditorial · source consultée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

Construire une landing page autour d'une seule action

Planifiez l'offre, le texte, la structure et le traitement SEO, puis appliquez les règles visuelles détaillées de la source là où elles conviennent au projet.

Workflow issu de la sourcePas un benchmark d'exécution

La méthode de travail

Landing Page Design part d'une seule offre, d'une seule audience et d'une seule action principale. Sa première moitié rassemble l'objectif de conversion, les objections, le contexte de trafic, les preuves et les contraintes, puis propose l'enchaînement des sections et le texte avant la construction. Sa seconde moitié prescrit un système visuel détaillé pour la typographie, les espacements, les rayons, les heroes, les icônes, les animations et les états des composants.

C'est un Skill particulièrement tranché plutôt qu'une checklist neutre. Il comprend des choix restreints de polices et d'espacements, une section obligatoire de révélation du slogan et des conventions d'animation précises. Ces choix peuvent entrer en conflit avec un système de marque établi ou des exigences d'accessibilité, et ne doivent pas les remplacer silencieusement. Son cadrage « à forte conversion » est une intention, pas la preuve d'une amélioration mesurée de la conversion.

Livrables attendus

  • Un plan de page, un texte de hero, des bénéfices, un parcours et une ébauche de FAQ.
  • Une recommandation index/noindex avec titre et description, le cas échéant.
  • Une implémentation section par section selon la mise en page et les règles visuelles retenues.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Clarifier l'offre

    Rassemblez en une seule collecte l'audience, l'action, les objections, la source de trafic et les vraies preuves disponibles.

  2. 02
    Choisir l'argumentaire

    Sélectionnez une structure de hero classique, de récit long, de page de conversion minimale ou de comparaison, et expliquez pourquoi.

  3. 03
    Rédiger avant de construire

    Produisez le plan, le texte, le traitement SEO et la recommandation de mise en page avant l'implémentation.

  4. 04
    Construire et relire section par section

    Avancez dans la page dans l'ordre en vérifiant les états, les liens, la sémantique, les métadonnées et les contraintes de marque.

02 Cas d’usage

Quand l'utiliser

Aucun environnement d'exécution applicatif unique n'est requis ; les exemples d'implémentation font référence à des valeurs Tailwind, à IntersectionObserver et à un outillage d'animation facultatif.

Un bon choix

  • Campagnes à offre uniqueUtile quand le visiteur doit franchir une seule étape suivante clairement définie.
  • De la stratégie à l'implémentationRelie le texte et le traitement des objections à des décisions concrètes de mise en page et d'états.

Limites à vérifier

  • Aucune garantie de conversionLa source fournit des règles de design et de rédaction, pas les résultats d'une expérience sur votre offre.
  • Les règles de marque peuvent entrer en conflitSes polices, dégradés, animations et casses de texte prescrits ne sont pas des exigences universelles pour les produits existants.
  • Les preuves doivent être réellesDes statistiques d'apparence précise, des noms de clients ou des garanties ne doivent jamais être inventés comme preuves factuelles.

Éléments à fournir

  • Offre et conversionIndiquez ce que reçoivent les visiteurs et quelle action compte comme un succès.
  • Audience et objectionsFournissez le contexte des visiteurs, la source de trafic et les véritables raisons d'hésiter.
  • Preuves et contraintes de marqueFournissez les captures d'écran approuvées, les témoignages, les données, les conditions et les exigences du système de design.

03 Décisions importantes

Les décisions qui comptent

  1. La structure avant la décoration

    L'argumentaire de la page est choisi avant les règles visuelles, ce qui réduit le risque de peaufiner des sections sans rôle persuasif.

  2. L'intention du trafic compte

    Une page de téléchargement courte à forte intention exige un argumentaire différent d'une landing page pédagogique issue de la recherche.

  3. Vérifier ses valeurs par défaut

    La précision de la source n'est utile que si ses fortes hypothèses visuelles conviennent au projet.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez la méthode d'installation actuelle du dépôt et incluez le dossier complet du Skill. La source est un ensemble de règles de design, pas un constructeur de pages hébergé.

Fichier source d'origine
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

Aucun environnement d'exécution applicatif unique n'est requis ; les exemples d'implémentation font référence à des valeurs Tailwind, à IntersectionObserver et à un outillage d'animation facultatif.

Commencer par un seul livrable

Adaptez le périmètre, les documents sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilise landing-page-design pour planifier une page evergreen pour notre produit design-review. L'audience est constituée de petites agences et l'action visée est la demande de démo. Utilise uniquement les captures d'écran fournies et les preuves vérifiées. Avant de coder, renvoie le plan, le texte du hero, une FAQ fondée sur les objections, la recommandation SEO et le choix de mise en page. Conserve nos tokens de marque existants et nos exigences de réduction des animations.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Une seule action principale reste cohérente du hero au CTA final.
  • Chaque preuve factuelle provient d'éléments fournis.
  • Les règles visuelles sont conciliées avec la marque existante et les exigences d'accessibilité.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

05 Source et licence

Source et licence

Cette page décrit la révision de la source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
elayadesign
Licence
MIT
Version consultée
2026-10-07 · 1c1e97cb9878
Résumé éditorial de la source
Planifiez l'offre, le texte, la structure et le traitement SEO, puis appliquez les règles visuelles détaillées de la source là où elles conviennent au projet.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Est-il conçu uniquement pour les pages d'accueil ?

Non. Sa distinction centrale est qu'une landing page sert une seule offre et une seule intention, contrairement à une page d'accueil qui s'adresse à plusieurs audiences ou objectifs.

Faut-il suivre chaque recommandation sur un site existant ?

Non. Son propre périmètre reconnaît les instructions explicites de l'utilisateur, et une exigence de marque ou d'accessibilité établie doit être résolue plutôt qu'écrasée silencieusement.

Ajouter sa FAQ garantit-il la visibilité dans les moteurs de recherche ?

Non. Il recommande un contenu de questions-réponses utile et des métadonnées appropriées ; l'indexation et la performance de recherche restent des résultats distincts.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos documents sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

Fichier source d'origine
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md