brand-landingpagepar Seth Hobson

Brand Landing Page Skill.

Un skill Claude Code et Codex pour le design UI : interview d'identité de marque d'abord, puis génère et itère une page d'accueil via Stitch.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md

--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation

En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 15 626 caractères au total

01 Ce qu'il fait

Ce que fait le Skill brand-landingpage dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un concepteur de landing page axé sur la marque qui mène un entretien en trois parties (objectif du produit, ressenti de marque, préférences visuelles), traduit les réponses en un système de design Stitch (en associant les adjectifs à colorVariant, les polices à headlineFont/bodyFont, les formes à roundness), génère des écrans desktop et mobile, guide un raffinement itératif via un retour structuré (variantes, modifications, rollback), et livre un pack prêt au déploiement avec un HTML versionné, DESIGN.md, des tokens de couleur et DEPLOY.md.

Pour les utilisateurs qui créent des landing pages à objectif unique ou des sites marketing produit sans direction visuelle établie. Pas destiné aux tableaux de bord, aux applications multi-pages, au travail au niveau des composants, ou aux utilisateurs disposant déjà de maquettes de design.

Ce qu'il produit

Pack zip prêt au déploiement contenant index.html (desktop), mobile.html (si généré), DESIGN.md, color-tokens.json, les assets utilisateur, et la checklist DEPLOY.md
DESIGN.md documentant le système de design avec le ressenti de marque, l'orientation couleur avec code hex et justification, les choix typographiques, et la description de l'arrondi des formes
color-tokens.json avec des tokens de design structurés : couleur primaire, colorMode, colorVariant, polices, roundness
Checklist de déploiement DEPLOY.md générée à partir du modèle dans references/state-and-pitfalls.md

Voir l'exemple de prompt ↗

Fonctionnement

01
Vérifier le SDK Stitch et l'environnement
Avant de démarrer l'entretien, le skill installe le SDK s'il est manquant, vérifie que la variable d'environnement de la clé API est définie, et effectue un appel SDK minimal pour confirmer l'authentification.
02
Mener l'entretien de marque en trois parties
La phase A recueille le nom du produit, ce qu'il fait, les utilisateurs cibles, et le CTA souhaité. La phase B recueille 3 adjectifs de marque et une préférence clair/sombre.
03
Traduire l'entretien en paramètres Stitch
Le skill associe les adjectifs de marque à l'énumération colorVariant, le choix clair/sombre à colorMode, la préférence de police à headlineFont et bodyFont, et net/arrondi à l'énumération roundness à l'aide d'une table de traduction.
04
Générer l'écran et l'ouvrir dans le navigateur
Le skill appelle generate_screen_from_text avec deviceType DESKTOP, enregistre le HTML renvoyé sous le nom desktop-v1.html dans .stitch/designs/, et l'ouvre localement à l'aide de la commande spécifique au système d'exploitation.
05
Itérer via la boucle de feedback
Après chaque génération, le skill pose trois questions de feedback, traduit le retour de l'utilisateur en appels edit_screens pour des modifications ciblées ou en generate_variants pour l'exploration, puis enregistre les nouvelles versions avec des noms de fichiers incrémentés.
06
Livrer le bundle de déploiement
Le skill crée une archive zip avec le HTML final renommé en index.html, mobile.html si généré, DESIGN.md documentant le système de marque, color-tokens.json, les assets de l'utilisateur, et une checklist DEPLOY.md.

02 Trouvez celui qui vous convient

Quand utiliser le skill brand-landingpage

Utilisez le skill brand-landingpage dans Claude Code ou Codex lorsque le travail relève de ce type de design UI. L'adéquation et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

L'utilisateur demande de créer, concevoir ou construire une landing page, une page d'accueil ou une page marketing, sans direction visuelle établie
L'utilisateur a construit un produit, un side project ou un service et a besoin d'une landing page, mais n'a pas beaucoup réfléchi à l'identité de marque ou à la direction visuelle
Landing pages monofonctionnelles et sites marketing produit

Connaître les limites

L'utilisateur a une maquette de design
L'utilisateur a besoin d'un dashboard ou d'une UI d'application
L'utilisateur travaille au niveau des composants
L'utilisateur construit une application multi-pages ou refait le style avec des tokens de design connus (utiliser plutôt frontend-design)

Quoi fournir

Nom et objectif du produitCe que fait le produit, qui sont les utilisateurs cibles, et quelle action les visiteurs doivent entreprendre (s'inscrire, essayer la démo, rejoindre la liste d'attente).
Trois adjectifs de marqueLe skill propose un menu d'adjectifs parmi lesquels choisir. Requis pour passer de la Phase B à la Phase C.
Préférence clair ou sombreCorrespond directement au paramètre colorMode (LIGHT ou DARK) dans le système de design Stitch.
Direction des couleursCouleurs de marque ou d'application existantes en hexadécimal, ou une ambiance colorée si aucune palette n'est établie. Correspond au paramètre customColor.
Préférences de police et de formeLa préférence entre police moderne et traditionnelle correspond à headlineFont et bodyFont.

03 Dans le skill

Règles que le skill brand-landingpage donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Ne jamais afficher les clés API
Le skill ne doit jamais afficher, transcrire ou répéter la clé API Stitch lors de la vérification de l'environnement ou du diagnostic des échecs d'authentification.
Ne pas demander d'images
Le skill ne doit pas demander aux utilisateurs de fournir des images ou des logos, car Stitch n'accepte pas les téléversements d'images via l'API.
Versionner les fichiers HTML de manière séquentielle
Enregistrer le HTML généré sous desktop-v1.html pour la première génération, desktop-v2.html pour l'itération suivante, et ainsi de suite.
Toujours ouvrir le HTML mis à jour dans le navigateur
Après chaque génération, modification ou sélection de variante, le skill doit enregistrer le HTML mis à jour depuis la réponse Stitch et ouvrir le fichier local dans le navigateur de l'utilisateur.
Proposer la mise en production après 3 tours positifs
Après 3 tours de retours positifs, le skill doit demander : « C'est solide. On continue d'itérer ou on met en production et on affine plus tard ? »
Quatre réponses d'entretien non négociables
Le skill doit recueillir le nom du projet, ce qu'il fait, les utilisateurs cibles et le CTA souhaité avant de passer de la phase A à la phase B. Ces quatre éléments sont non négociables.
Ne pas relancer immédiatement les générations échouées
Si la génération échoue, ne pas relancer immédiatement. Utilisez get_screen ou list_screens pour vérifier si elle s'est terminée de manière asynchrone.

04 Mettez-le en pratique

Installer brand-landingpage dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter brand-landingpage à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/wshobson/agents --skill brand-landingpage

Forme générique de la CLI skills pour plugins/brand-landingpage/skills/brand-landingpage/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Le SKILL.md ne contient pas d'exemple de prompt ; ce démarrage est rédigé à partir du résumé en une ligne du catalogue. Remplacez la ligne de tâche par votre vrai brief.

Starter prompt

Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Source : prompt de démarrage rédigé à partir de l'utilisation en une ligne du catalogue (pas à partir du SKILL.md).

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Ouvrez le fichier HTML enregistré dans le navigateur de l'utilisateur avec la commande spécifique au système (open sur macOS, xdg-open sur Linux, start sur Windows) pour voir le design en pleine fidélité
Posez les trois questions de retour : réaction instinctive dans les 5 premières secondes, est-ce que cela ressemble à votre produit, et y a-t-il quelque chose qui semble faux ou manquant
Attirez l'attention de l'utilisateur sur des dimensions de design spécifiques : clarté du message, visibilité du CTA, alignement des couleurs avec ses adjectifs, et flux de lecture
Vérifiez que .stitch/metadata.json existe et contient l'ID du projet, l'ID de l'asset du système de design, le résumé de l'entretien et l'historique des écrans lors de la reprise d'une session
Suivez la checklist de déploiement dans DEPLOY.md qui couvre l'hébergement, la configuration du domaine, l'analytics et les remplacements d'images

Dans OpenDesign, importez brand-landingpage depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour brand-landingpage.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Phase 0 : prérequis & connexion StitchVérifiez l'installation du SDK, la variable d'environnement de la clé API, et effectuez un appel test minimal avant de commencer l'entretien
Fichiers de référenceIndique quand lire interview-framework.md, stitch-architecture.md et state-and-pitfalls.md pendant le workflow
Aperçu du workflowQuatre phases : configuration, entretien en trois parties, traduction du système de design, boucle de génération et de révision, paquet de livraison
Phase 1 : entretien de marqueTrois parties : objectif du produit, ressenti de marque avec des adjectifs, préférences visuelles pour la couleur, la police et la forme
Phase 2 : création du système de designTraduisez les réponses de l'entretien en paramètres Stitch à l'aide d'un tableau de correspondance, créez et mettez à jour le système de design, rédigez DESIGN.md
Phase 3 : boucle de génération & révisionGénérez l'écran desktop, ouvrez-le dans le navigateur, recueillez les retours via trois questions, itérez avec des modifications ou des variantes
Phase 4 : paquet de livraisonEmpaquetez le HTML final, DESIGN.md, les tokens de couleur, les assets utilisateur et la checklist DEPLOY.md dans un zip versionné
Documentation StitchLiens vers la documentation d'utilisation du SDK et des exemples de DESIGN.md sur stitch-design.ai
Reprise & récupération d'erreursChargez l'état depuis metadata.json, gérez les échecs de génération, la limitation de débit et les projets expirés lors de la reprise

Description du skill lui-même

Concepteur de page d'accueil axé sur la marque — mène un entretien d'identité de marque (couleurs, typographie, langage de forme), puis génère et itère sur une page d'accueil soignée via Stitch avec du HTML prêt au déploiement. Utilisez quand l'utilisateur demande de créer, concevoir ou construire une page d'accueil, une page principale ou une page marketing et n'a pas de direction visuelle établie. Ignorez quand il a une maquette de design, a besoin d'un tableau de bord ou d'une interface d'application, travaille au niveau composant, construit une application multi-pages, ou restyling avec des tokens de design connus — utilisez frontend-design à la place.

Description front-matter de SKILL.md. Le fichier complet fait environ 15 626 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill brand-landingpage

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Puis-je fournir mon propre logo ou des captures d'écran de produit ?

Stitch génère à partir de prompts textuels et n'accepte pas de téléversement d'images via l'API. Si vous joignez une image, le skill vous demandera de décrire ses couleurs dominantes, son ambiance et son langage de formes avec vos propres mots, puis d'intégrer ces attributs dans le design.

Votre fichier original est enregistré dans le pack, vous pouvez donc l'intégrer dans le HTML final par un simple remplacement de balise img.

Pourquoi dois-je passer par l'entretien au lieu de passer directement à la génération ?

C'est l'entretien qui crée la majeure partie de la valeur. Sans lui, le résultat serait un modèle générique.

L'entretien dure environ 5 minutes et recueille l'objectif du produit, les utilisateurs cibles, les adjectifs de marque et les préférences visuelles, que le skill traduit en un système de design réellement adapté à votre marque plutôt qu'un résultat standardisé.

Qu'obtiens-je à la fin ?

Un pack zip prêt au déploiement contenant le HTML desktop final renommé index.html, mobile.html si vous avez demandé une variante mobile, DESIGN.md documentant votre système de design de marque, color-tokens.json avec des tokens de design structurés, tous les assets fournis par l'utilisateur, et DEPLOY.md avec une checklist de déploiement. Toutes les versions intermédiaires et l'état sont conservés dans .stitch/ à titre de référence.

Page de destination de marque

Exécuter brand-landingpage sur une tâche de conception d'interface réelle.

Téléchargez OpenDesign, importez brand-landingpage depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills