brand-landingpage
Concevoir une page d'accueil centrée sur la marque avec des interviews interactives
La plupart des pages d'accueil échouent parce qu'elles sautent l'étape d'identité de marque. Ce skill guide les utilisateurs à travers un interview de marque structuré, puis génère une page d'accueil soignée avec un système de design cohérant utilisant le Stitch SDK.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "brand-landingpage". Create a landing page for my API tool called DataPipe
Résultat attendu:
Le skill pose des questions sur le but de votre produit, puis vous guide dans le choix de 3 adjectifs de marque comme propre, technique et moderne. Après confirmation d'un thème sombre avec des accents indigo, il génère une page d'accueil desktop avec les sections hero, extrait de code, fonctionnalités et pied de page.
Utilisation de "brand-landingpage". The colors feel wrong, can you change them?
Résultat attendu:
Le skill demande ce qui ne va pas avec les couleurs : trop vives, trop ternes, ou la mauvaise teinte. Après avoir répondu trop vives, il génère une variante atténuée avec la même mise en page mais une saturation ajustée.
Utilisation de "brand-landingpage". I want to compare different layout options
Résultat attendu:
Le skill génère 3 variantes de la page d'accueil avec un hero centré, une mise en page divisée et un en-tête pleine largeur. Il ouvre les trois dans des onglets du navigateur et demande quelle direction vous préférez.
Audit de sécurité
Risque faibleAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
Problèmes à risque faible (1)
Facteurs de risque
⚙️ Commandes externes (7)
🌐 Accès réseau (1)
🔑 Variables d’environnement (1)
Score de qualité
Ce que vous pouvez construire
Lancer une page d'accueil pour un projet secondaire
Un développeur qui construit un outil CLI ou un projet open source a besoin d'une page d'accueil mais n'a pas d'expérience en design. Ce skill réalise un interview de marque et génère une page professionnelle.
Créer un site marketing pour une startup
Une startup en phase de démarrage a besoin d'une page d'accueil pour son produit SaaS. Le skill aide à définir l'identité de marque et produit une page avec des sections fonctionnalités, tarifs et témoignages.
Construire une page de portfolio développeur
Un développeur ou designer souhaite une page d'accueil de portfolio personnel. Le skill mène un interview de marque et génère une page avec des sections projets phares et à propos.
Essayez ces prompts
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
Bonnes pratiques
- Réalisez l'interview de marque même si vous avez envie de le sauter. Les questions prennent 5 minutes et font la différence entre un modèle générique et une page adaptée à votre produit.
- Examinez les pages générées en ouvrant le HTML dans votre navigateur plutôt que de demander des descriptions textuelles. Le retour visuel permet de meilleures itérations de design.
- Sauvegardez votre clé API Stitch dans votre environnement avant de commencer afin que le skill puisse générer et itérer sur les designs sans interruption.
Éviter
- Demander au skill d'intégrer le logo de votre entreprise ou de télécharger des images. Le Stitch SDK génère à partir d'invites textuelles et n'accepte pas les entrées d'images.
- Fournir des retours au niveau CSS comme ajouter un padding-top de 40px. Traduisez vos retours en intention de design, par exemple ajoutez plus d'espace au-dessus du titre principal.
- Sauter la variante mobile. La mise en page desktop nécessite souvent des ajustements pour l'affichage mobile et générer les deux garantit une expérience cohérente.
Foire aux questions
Ai-je besoin d'un compte Stitch pour utiliser ce skill ?
Que se passe-t-il si ma session est interrompue ?
Puis-je utiliser mes propres couleurs de marque ?
Ce skill fonctionne-t-il avec des images et des logos ?
Quels types de pages ce skill peut-il créer ?
Puis-je modifier le HTML après génération ?
Détails du développeur
Auteur
wshobsonLicence
MIT
Dépôt
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/Réf
main
Structure de fichiers