Aller au guide d’utilisation
Landing Page Generatorpar Alireza Rezvani

Landing Page Generator Skill.

Reliez une vraie proposition de valeur aux sections de la page avant de générer les composants.

  • Landing pages
  • Rédaction
  • Frontend
Revue de la source · Landing Page GeneratorSKILL.md
Tâche Landing pages Produit • Des sections de landing page en TSX React ou Next.js avec styles Tailwind • Des variantes de texte organisées autour d’un cadre de message choisi • Une base pour le titre, la description, l’URL canonique et les données structurées Avant de commencer Un projet React ou Next.js compatible avec Tailwind ; les composants d’interface référencés et l’outillage facultatif d’analyse de marque peuvent nécessiter une installation séparée.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Rédiger une landing page React à partir d’un brief produit

Un workflow du brief produit au TSX qui combine cadres de rédaction, sections de landing page et listes de contrôle SEO ou performance.

Workflow fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Landing Page Generator associe des cadres de rédaction marketing à des modèles de sections React ou Next.js et au style Tailwind. Il recueille l’audience, le problème, le bénéfice, le prix et l’orientation de design, puis rédige le texte avant de composer la page. La source propose des modèles de hero, de fonctionnalités, de tarifs, de FAQ et de CTA ; les sections non pertinentes sont omises plutôt que remplies automatiquement.

La source emploie le langage de la conversion et de la performance comme objectifs, non comme résultats mesurés pour une page générée. Ses modèles contiennent aussi des exemples de témoignages, de garanties et d’affirmations produit qu’il faut remplacer par des éléments vérifiés ou supprimer. Les métadonnées SEO et les données structurées sont une base utile, mais elles doivent correspondre à la page réelle ainsi qu’à la politique de routage et d’indexation du site.

Livrables attendus

  • Des sections de landing page en TSX React ou Next.js avec styles Tailwind
  • Des variantes de texte organisées autour d’un cadre de message choisi
  • Une base pour le titre, la description, l’URL canonique et les données structurées
Voir l’exemple de brief

Du brief à la relecture

  1. 01
    Rassembler les faits produit

    Définissez l’audience, l’action principale, le bénéfice et les prix réels. Séparez les preuves approuvées des affirmations non établies.

  2. 02
    Écrire d’abord le message

    Choisissez un récit problème-solution ou avant-après adapté au produit, puis décidez quelles sections sont vraiment nécessaires.

  3. 03
    Construire et valider

    Générez les composants dans le projet existant, vérifiez la mise en page mobile et les métadonnées, et mesurez la performance réelle au lieu de reprendre les objectifs des modèles.

02 Cas d’usage

Quand l’utiliser

Un projet React ou Next.js compatible avec Tailwind ; les composants d’interface référencés et l’outillage facultatif d’analyse de marque peuvent nécessiter une installation séparée.

Un bon choix

  • Premières versions de lancement produitUtile lorsque les faits produit sont connus et qu’une première implémentation cohérente est nécessaire.
  • Variantes de messageConvient pour explorer différentes approches de titre et de CTA tout en conservant la même offre vérifiée.

Limites à vérifier

  • Aucune garantie de conversionUn cadre de rédaction ou un modèle ne démontre pas une meilleure conversion. Cela exige un vrai plan de mesure et suffisamment de données.
  • Aucune preuve inventéeLes témoignages, logos clients, garanties et bénéfices chiffrés doivent provenir de sources approuvées, pas du composant d’exemple.

Éléments à fournir

  • Produit et audienceFournissez l’offre réelle, le client cible et la tâche principale que la page doit soutenir.
  • Offre et preuvesFournissez les prix actuels et les témoignages, indicateurs ou garanties approuvés ; indiquez les preuves indisponibles.
  • Contraintes du projetPrécisez la configuration React ou Next.js, les règles de marque et les conventions SEO du site.

03 Décisions importantes

Décisions importantes

  1. Le texte avant les composants

    Rédiger d’abord la proposition de valeur aide à lier le choix des sections à l’offre plutôt qu’à un inventaire fixe de modèles.

  2. Le SEO dès le brouillon

    Les métadonnées, la gestion de l’URL canonique et la structure sémantique sont pensées en même temps que le code de la page, au lieu d’être oubliées jusqu’à la remise.

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

Chargez le Skill complet et adaptez ses exemples de composants au dépôt. Ne supposez pas que les imports d’exemple ou les fichiers SEO du site existent déjà.

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

Un projet React ou Next.js compatible avec Tailwind ; les composants d’interface référencés et l’outillage facultatif d’analyse de marque peuvent nécessiter une installation séparée.

Commencer par un seul livrable

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

Exemple de brief
Utilise landing-page-generator pour rédiger une page Next.js pour notre produit de planification à partir du brief fourni. Utilise uniquement les prix et bénéfices que je fournis, omets les témoignages et les garanties puisqu’aucun n’est approuvé, et conserve nos tokens de marque. Rédige d’abord les variantes de titre et de CTA, puis construis les sections pertinentes. Ajoute les métadonnées et seulement les données structurées prises en charge, et rapporte séparément les performances mesurées et les objectifs.

Examiner le résultat

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

  • Chaque affirmation et chaque détail de prix correspondent à un élément approuvé.
  • La page a une action principale claire et des sections utilisables sur mobile.
  • Les métadonnées et les données structurées reflètent le contenu visible, et les résultats de performance indiquent leur statut de mesure.

OpenDesign fournit un espace 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 figée de la source liée ci-dessous. Le comportement et les prérequis en amont peuvent changer.

Propriétaire de la source
Alireza Rezvani
Licence
MIT
Version examinée
2026-10-07 · 19392f7a0826
Résumé éditorial de la source
Un workflow du brief produit au TSX qui combine cadres de rédaction, sections de landing page et listes de contrôle SEO ou performance.

Résumé original de OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Garantit-il une meilleure conversion ?

Non. La source propose des modèles de texte et de mise en page ; leur effet commercial doit être testé sur le produit et l’audience réels.

Chaque page doit-elle inclure témoignages et tarifs ?

Non. Le workflow permet explicitement d’ignorer les sections non pertinentes, et il ne faut pas inventer de preuves non étayées.

Les chiffres de performance sont-ils des résultats prouvés ?

Ce sont des objectifs indiqués dans la source. Mesurez la page obtenue dans son environnement réel avant de présenter une métrique comme atteinte.

OpenDesign

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

Gardez votre brief, vos 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 amont
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md