Communitygithub.com

BeautifulEngine/brand-snapshot

Lit le site web en direct de n'importe quelle marque et renvoie un PDF de synthèse de deux pages ainsi que des jetons de conception (JSON et CSS) : palette de couleurs avec hexadécimal, RVB et vérifications de contraste, polices avec alternatives gratuites, description textuelle du logo avec liens vers les fichiers officiels, motifs d'interface comme les coins arrondis et les boutons, échantillons de voix, style d'imagerie et emplacement des lignes directrices officielles. Utilisez-le quand on vous demande les couleurs, polices, style, résumé des lignes directrices, jetons de conception ou une référence rapide d'une marque avant de commencer un travail de conception. Utilisation : /brand-snapshot suivi d'une URL de site web ou du nom de la marque.

Qu'est-ce que brand-snapshot ?

Cette compétence d'agent IA génère un instantané visuel et verbal condensé de n'importe quelle marque en lisant son site web en direct. Elle extrait les couleurs calculées, les polices chargées (avec alternatives gratuites pour les polices payantes), la description textuelle du logo (sans jamais copier l'image), les motifs d'interface utilisateur et les traits de voix. Le résultat final comprend un PDF de deux pages, un fichier `tokens.json` et un fichier `tokens.css` avec la palette de couleurs, les typos et d'autres jetons de conception. La compétence suit des règles strictes : les couleurs et polices sont marquées « Vérifiées » et datées ; les sources officielles (dossier de presse, portail de marque) priment sur le site en cas de divergence ; les logos sont décrits mais jamais redessinés ; les polices payantes ou personnalisées sont étiquetées comme remplacements. Elle fonctionne sur n'importe quel site web public et est particulièrement utile pour les designers, les rédacteurs de pitchs ou les chefs de produit qui ont besoin d'une référence rapide de marque avant de commencer un travail. Le processus comprend l'ouverture du site, l'extraction des styles, la vérification des sources officielles, la construction de la palette (4 à 8 couleurs), l'installation des polices, l'analyse de la voix, et la génération du PDF à partir d'un modèle HTML. La sortie est nommée `<Marque>-Brand-Snapshot-<AAAA-MM>.pdf`.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BeautifulEngine/brand-snapshot/tree/HEAD/brand-snapshot
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

Brand Snapshot

Obtenez les bases visuelles et verbales d'une marque en deux pages en quelques minutes : des couleurs que vous pouvez utiliser en toute confiance, la police et ses alternatives gratuites, le comportement du logo et de l'interface utilisateur, la tonalité de la marque, et des liens vers les fichiers officiels. C'est la version rapide de la section marque de la compétence Company Brief.

Utilisation

/brand-snapshot <url ou nom de marque> [tokens only]

Les requêtes simples fonctionnent aussi :

  • « Brand snapshot pour linear.app. »
  • « Quelles sont les couleurs et polices utilisées par Patagonia ? »
  • « Extrais les jetons de conception de stripe.com pour une maquette de pitch. »
  • « Instantané de Oatly et Liquid Death, côte à côte. » (produit un instantané pour chaque)

« tokens only » ignore le PDF et renvoie tokens.json et tokens.css.

Fichiers. <skill-dir> désigne le dossier de cette compétence, celui qui contient ce SKILL.md. Les modèles sont dans assets/, les scripts dans scripts/, et les étapes PDF partagées (polices, couleurs, rendu, vérification) sont dans references/rendering.md.

Règles strictes

  • Le site en direct d'abord. Les couleurs et polices proviennent des styles calculés du site (references/brand-extraction.md), marqués « Vérifié » et datés. Les lignes directrices officielles ou un dossier de presse priment sur le site lorsqu'ils divergent ; notez les deux. Les sources tierces comme Brandfetch sont « Rapporté ».
  • Décrire les logos, ne pas les copier. Décrivez le symbole et le logotype en mots et liez le dossier de presse officiel ou le portail de marque. Ne redessinez, ne tracez et n'intégrez jamais un logo, une mascotte ou une image publicitaire. Les échantillons de couleurs et les spécimens de polices définis dans une police de remplacement sont acceptables.
  • Indiquez ce qui est un remplacement. Si une police de marque est payante ou personnalisée, nommez-la, nommez sa fonderie et définissez les spécimens dans l'alternative gratuite la plus proche, étiquetée comme telle.
  • Les conditions d'utilisation s'appliquent. Rappelez au lecteur que les actifs de la marque appartiennent à la marque et que ses lignes directrices régissent leur utilisation.
  • Mention de crédit : l'instantané se termine par un petit crédit Beautiful Engine. Conservez-le sauf si la personne demande de le supprimer.

Flux de travail

  1. Ouvrez le site dans un navigateur si disponible (approuvez le domaine une fois si demandé) ; sinon récupérez-le. Confirmez qu'il s'agit bien de la marque que la personne veut.
  2. Extrayez avec le script dans references/brand-extraction.md, section 1, sur la page d'accueil et une autre page (tarifs, produit ou à propos) : style du titre, polices chargées, couleurs par zone à l'écran, couleurs de la feuille de style, propriétés personnalisées CSS, dégradés, styles de boutons et de cartes, et informations sur le logo. Zoomez une capture d'écran sur le logo pour le décrire, et sur le héros pour décrire l'imagerie.
  3. Vérifiez les sources officielles : recherchez le dossier de presse de la marque, le portail de marque, le site du système de conception ou le PDF des lignes directrices, et la fonderie de ses polices de caractères. Notez les sous-marques (événements, gammes de produits) séparément.
  4. Choisissez la palette : 4 à 8 couleurs par ordre d'importance (primaire, secondaire, accents, neutres), chacune avec un nom simple et un rôle. Exécutez ensuite : python3 <skill-dir>/scripts/palette.py --colors "Nom:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<Marque>" > swatches.html Cela écrit tokens.json et tokens.css et imprime la table d'échantillons avec les vérifications de contraste.
  5. Polices pour le PDF : installez les polices gratuites de la marque ou les alternatives avec scripts/fonts.py, et exécutez scripts/tokens.py avec la couleur primaire et d'accent de la marque pour que l'instantané lui-même porte la marque (references/rendering.md).
  6. Voix : 3 à 4 traits, chacun avec une ligne réelle du site entre guillemets.
  7. Construisez à partir de assets/snapshot-template.html (copiez base.css), collez la table d'échantillons, effectuez le rendu, vérifiez et contrôlez la fiche de contact. Deux pages ; taillez plutôt que de déborder sur une troisième.
  8. Livrez le PDF, tokens.json et tokens.css. Dans la réponse : les couleurs primaire et d'accent avec hexadécimal, les polices et les alternatives, et l'emplacement des lignes directrices officielles (ou qu'aucune n'est publique).

Nom de sortie : <Marque>-Brand-Snapshot-<AAAA-MM>.pdf.

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