Communitygithub.com

TheMattBerman/landing-page-factory

Construisez une page de destination déployable à partir de la stratégie, du texte, des visuels et du profil de marque, en utilisant un routage sensible à la catégorie, une hiérarchie de préservation et une QA explicite. Sortie en fichier HTML unique.

Qu'est-ce que landing-page-factory ?

Cette compétence (skill) est conçue pour les agents d'IA ou les pipelines automatisés qui doivent produire une page de destination (landing page) HTML à partir d'entrées structurées telles que la stratégie de page, les textes marketing, les actifs visuels et le profil de marque. Elle garantit que la construction de la page respecte des conventions de catégorie critiques pour la confiance (par exemple, produit physique vs SaaS) et s'applique dans un ordre de priorité strict : d'abord la confiance, puis la clarté du mécanisme, puis l'identité visuelle, et enfin les améliorations esthétiques (anti-slop) dans les limites de la préservation. La compétence utilise des scripts Python locaux (comme `resolve-visual-assets.py` et `build-page.py`) pour résoudre les métadonnées d'image, préparer les métadonnées de build et assembler le fichier `index.html` final ainsi que les artefacts de QA (`qa.md`, `meta.json`). Elle est idéale pour les agents (tels que Cursor, Codex, Claude Code) qui doivent produire de manière fiable des pages marketing de haute qualité à partir de briefs stratégiques et de directives de marque, tout en évitant les motifs de conception « sloppy » (banals, hors marque ou nuisibles à la conversion). Les principaux points de décision sont le routage de mise en page basé sur le type de page (produit, SaaS, lead gen, service, régulé), une hiérarchie de préservation explicite pour empêcher les dérives esthétiques, et une table de QA post-build appliquée systématiquement.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheMattBerman/landing-page-factory/tree/HEAD/skills/page-build
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Construction de page

La qualité de construction vient après la fidélité stratégique, pas avant.

Cette étape assemble la page tout en préservant ce qui compte pour la confiance et la conversion.

Entrées requises

  1. workspace/pages/[nom-page]/strategy.json
  2. workspace/brand/profile.md
  3. workspace/brand/palette.json
  4. workspace/pages/[nom-page]/copy.md
  5. workspace/pages/[nom-page]/visuals/
  6. references/anti-slop.md (fourni avec cette compétence)

Si la stratégie est manquante, arrêtez-vous.

Si workspace/pages/[nom-page]/visuals/manifest.json existe, utilisez-le comme source visuelle canonique lisible par machine. N'ignorez pas les métadonnées du fournisseur lorsqu'elles affectent la confiance, la fidélité ou l'historique de repli.

Hiérarchie de préservation

Appliquez dans cet ordre :

  1. préserver les conventions de catégorie critiques pour la confiance
  2. préserver les besoins de communication du mécanisme
  3. préserver l'identité visuelle de la marque
  4. améliorer le rythme de mise en page et la qualité de l'interaction
  5. appliquer des améliorations de goût anti-slop uniquement là où elles ne déforment pas 1 à 4

L'anti-slop est un filtre de qualité, pas une licence de refonte.

Liste de vérification pré-construction

Avant de générer le HTML, confirmez :

  • type de page confirmé
  • mécanisme de conversion confirmé
  • inventaire des preuves chargé
  • signaux de confiance sélectionnés
  • manifeste visuel résolu en chemins d'image prêts pour la construction
  • conventions de catégorie requises préservées
  • destination du CTA connue
  • choix de mise en page justifié en une ligne

Si l'un d'eux est faux, arrêtez-vous ou rétrogradez.

Logique de routage

Route produit physique

Utilisez lorsque le type de page de la stratégie est axé sur le produit.

Au-dessus de la ligne de flottaison doit inclure :

  • visuel clair du produit ou du mécanisme
  • titre de l'offre
  • CTA
  • signal de confiance

Route SaaS / application

Au-dessus de la ligne de flottaison doit inclure :

  • capture d'écran ou traitement d'interface utilisateur préservé si requis
  • titre de résultat
  • signal de confiance
  • CTA

Route de capture de leads

Au-dessus de la ligne de flottaison doit inclure soit :

  • formulaire + réducteur de friction ou
  • CTA clair vers une destination connue

Route d'autorité / service

Doit inclure :

  • signal d'autorité au-dessus de la ligne de flottaison
  • section de preuve tôt
  • traitement des objections autour de la confiance et de l'adéquation

Route réglementée

Doit inclure :

  • certitude rétrogradée lorsque la preuve est partielle
  • drapeau de révision de conformité dans les métadonnées

Règles de conception

  • fichier HTML unique
  • responsive aux points de rupture minimum 768px et 1024px
  • HTML sémantique
  • états de focus visibles
  • texte alternatif sur toutes les images
  • aucune attribution de constructeur sauf demande explicite
  • aucun motif de goût importé qui écrase les signaux de confiance source

Utilisation de l'anti-slop

Chargez references/anti-slop.md et appliquez-le après la hiérarchie de préservation, pas avant.

Table de QA post-construction

Écrivez ceci dans workspace/pages/[nom-page]/qa.md et résumez-le dans meta.json :

VérificationRéussi ?Notes
mécanisme visible au-dessus de la ligne de flottaison
preuve primaire visible au-dessus de la ligne de flottaison
CTA au-dessus de la ligne de flottaison
signal de confiance au-dessus de la ligne de flottaison
aucune preuve inventée
aucun motif slop interdit
effondrement mobile vérifié
contraste vérifié
texte alternatif présent
convention de catégorie préservée

Contrat de métadonnées

meta.json doit inclure :

  • marque
  • page
  • type_de_page
  • type_de_mécanisme
  • route_de_modèle
  • destination_du_CTA
  • éléments_de_preuve avec résumé de provenance
  • présence_de_réduction_de_risque
  • drapeaux_de_conformité
  • drapeaux_de_révision
  • éléments_préservés
  • écarts_par_rapport_à_la_source
  • images_utilisées
  • sections_présentes
  • confiance_de_construction

Lorsqu'un manifeste visuel existe, incluez également :

  • image_hero
  • politique_du_fournisseur_d_image
  • images_utilisées en tant qu'objets structurés, pas seulement des noms de fichiers nus
  • contexte du fournisseur et de repli lorsqu'il est pertinent pour la révision ou la QA

Assistant de construction

Utilisez scripts/resolve-visual-assets.py --page-name [nom-page] pour convertir visuals/manifest.json en métadonnées d'image prêtes pour la construction pour le HTML et meta.json.

Utilisez ensuite scripts/prepare-build-meta.py --page-name [nom-page] --resolved-assets [fichier] pour fusionner ces actifs résolus dans meta.json avec des champs de sélection déterministes :

  • image_hero
  • image_mécanisme
  • image_mode_de_vie
  • image_og
  • emplacements_image.hero
  • emplacements_image.mécanisme
  • emplacements_image.mode_de_vie
  • emplacements_image.og

Utilisez ensuite skills/page-build/scripts/html-image-context.py --meta workspace/pages/[nom-page]/meta.json pour générer des valeurs littérales prêtes pour le HTML telles que :

  • hero_img_src
  • hero_img_alt
  • mechanism_img_src
  • mechanism_img_alt
  • lifestyle_img_src
  • lifestyle_img_alt
  • og_image_path

Constructeur exécutable minimal :

  • skills/page-build/scripts/build-page.py --page-name [nom-page] Il consomme strategy.json, meta.json et html-image-context.json et écrit un véritable squelette index.html.

Utilisez les scripts locaux de la compétence comme interface principale pour Cowork ou tout runtime d'agent qui ne télécharge que le dossier de la compétence. Les copies /scripts à la racine du dépôt sont des commodités de développement local, pas une exigence d'empaquetage.

Référence d'évaluation

Pour les critères de notation et les seuils de réussite, voir skills/page-qa/references/eval-rubric.md. Pour les motifs anti-slop, voir references/anti-slop.md (fourni avec cette compétence).

Logique d'arrêt / de continuation

Arrêtez-vous si :

  • la destination du CTA est inconnue pour une page d'action de lead
  • la page dépend d'une preuve qui est manquante
  • les signaux de confiance requis ne peuvent pas être étayés

Continuez avec rétrogradation si :

  • les actifs visuels sont partiels mais la mise en page de support neutre fonctionne toujours
  • la preuve est légère mais la page est recadrée vers des affirmations plus douces

Sortie

Écrivez :

  • workspace/pages/[nom-page]/index.html
  • workspace/pages/[nom-page]/meta.json
  • workspace/pages/[nom-page]/qa.md

Une construction sans sortie de QA est incomplète.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

TheMattBerman/landing-page-factory

Build an evidence-backed brand profile from site extract and page strategy. Separates observed facts from synthesis so downstream skills preserve the brand instead of rewriting it.

TheMattBerman/landing-page-factory

Top-level operator skill for Landing Page Factory. Classifies requests, chooses stage order, enforces prerequisites and hard stops, manages variant pages, reruns changed stages, and handles page-package admin.

TheMattBerman/landing-page-factory

Write mechanism-preserving, proof-disciplined landing page copy from strategy, brand profile, and extract language bank. Includes mandatory sharpness audit and claim control.

TheMattBerman/landing-page-factory

Final landing-page QA pass against strategy, proof provenance, mechanism clarity, trust preservation, accessibility, and anti-slop. Gates whether a page is shippable or draft-only.

TheMattBerman/landing-page-factory

Normalize raw extract or manual brief into a page strategy artifact: mechanism, offer, audience, proof provenance, CTA, preservation plan, and review flags. Mandatory before copy or build.

TheMattBerman/landing-page-factory

Plan and generate visuals by preservation class: exact product, branded environment, or concept support. Uses strategy-driven shot selection and visual QA instead of generic vibe prompting.

TheMattBerman/landing-page-factory

Extract operator-grade source facts from a website or manual brief: claims, proof, CTAs, mechanism language, trust cues, visual patterns, and page structure with provenance. First stage of Page Factory.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community