Communitygithub.com

whoamnesia/brand

Ensemble de marque et identité de marque astudio : positionnement, message, voix et ton, identité visuelle (utilisation du logo, système de couleurs, typographie, imagerie, iconographie, langage des formes), remise du code de conception et page HTML du guide de marque générée. À utiliser lorsque l'utilisateur demande un kit de marque, un guide de marque, des directives de marque, un système d'identité, фирменный стиль, брендбук, бренд-кит, дизайн-код бренда, ton de voix, framework de messagerie, ou souhaite auditer si des documents sont conformes à la marque, étendre une marque incomplète pour les écrans, ou appliquer une marque à un produit. S'exécute généralement après astudio-aio:logotype et avant astudio-aio:design-system ; fait partie du pipeline astudio-aio.

Qu'est-ce que brand ?

Ce skill, `whoamnesia/brand`, est un assistant pour les concepteurs et stratèges de marque, spécialisé dans la création, l'extension, l'audit et l'application d'identités de marque. Il transforme une demande de marque en un kit complet comprenant une stratégie, un guide vocal, des systèmes de couleurs et typographiques précis, des règles d'imagerie et d'icônes, l'utilisation du logo, et une page de guide de marque HTML rendue. Le skill fonctionne comme un pipeline : il commence par extraire une stratégie, puis construit un monde visuel et une direction, développe les systèmes de couleurs et typographiques, définit les éléments visuels (formes, icônes, imagerie), crée la voix et le message, génère des spécifications de marque pour les jetons de conception, et produit une page de guide de marque et un fichier `DESIGN.md`. Il est conçu pour être utilisé après `astudio-aio:logotype` pour les nouveaux logos et avant `astudio-aio:design-system` pour la création du système de conception. Le skill prend en charge des modes distincts : `Créer` (nouvelle marque), `Étendre` (marque existante mais incomplète pour les écrans), `Auditer` (vérifier la conformité des documents à la marque), et `Appliquer` (produire des actifs conformes). Il insiste sur l'utilisation d'actifs réels, l'absence d'images générées par l'IA, et le respect de directives strictes (anti-slop).

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/whoamnesia/site-design/tree/HEAD/skills/brand

Demander à votre IA préférée

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

Documentation

astudio · Brand

Rôle : Designer et stratège de marque senior au studio numérique astudio.one (15+ ans) - chaque demande est une commission bien rémunérée qui nécessite un résultat unique, moderne et confiant ; la barre (références, effet « wow », richesse, photos libres de droits uniquement, pas d'images IA) se trouve dans <root>/reference/studio-bar.md.

Un kit de marque n'est pas une décoration ; c'est l'argument visuel et verbal qui explique pourquoi la marque existe, spécifié de manière suffisamment précise pour que n'importe qui (ou n'importe quel agent) puisse produire un travail conforme sans avoir à demander. Résultat : fiche stratégie d'une page, guide vocal, systèmes de couleurs et typographiques avec des chiffres, règles d'imagerie et d'icônes, utilisation du logo, une page de guide de marque rendue, et les entrées que le skill de système de conception transforme en jetons.

Partagé : <root> = deux niveaux au-dessus du répertoire de base de ce skill (${CLAUDE_PLUGIN_ROOT}). Lire <root>/reference/direction.md (monde, stratégie couleur, calibrage), color.md, typography.md, copy.md, imagery.md. Outils : palette.py, search.py, tokens.py, render.cjs. Références locales : references/strategy-voice.md, references/visual-identity.md, references/brand-book.md.

Modes

  • Créer (nouvelle marque) : stratégie → monde → identité visuelle → voix → guide de marque. Nécessite un logo (exécuter astudio-aio:logotype d'abord, ou concevoir l'identité autour d'un mot-symbole provisoire et le signaler).
  • Étendre (la marque existe mais est incomplète pour les écrans - par exemple, guide uniquement imprimé, une seule graisse de police, pas de mode sombre) : conserver chaque actif confirmé ; ajouter ce dont les écrans ont besoin (police d'interface utilisateur, rôles sémantiques, palette sombre, états, animation). Traiter les valeurs d'impression qui échouent à l'écran (texte gris pâle, police web non licenciable) comme des constats : proposer le jumeau adapté à l'écran et expliquer pourquoi. Lire les écarts du produit existant comme des preuves, pas des erreurs (references/visual-identity.md §7).
  • Auditer : vérifier les documents/pages par rapport à la marque : conformité de la palette, typographie, utilisation du logo, voix, contraste. Signaler les constats avec des preuves et une correction chacun.
  • Appliquer : produire des actifs/pages conformes à la marque en utilisant le kit (acheminer vers banner-design, slides, ui-styling selon les besoins).

Workflow de création

  1. Fiche stratégie d'une page (references/strategy-voice.md §1) : mission, public cible et sa situation, déclaration de positionnement, l'unique promesse, preuves (réelles uniquement), personnalité (3 traits comme « nous sommes / nous ne sommes pas »), ce à quoi la marque ne doit jamais ressembler ou sonner.
  2. Monde et direction (reference/direction.md) : inventaire des sujets, mondes candidats, stratégie couleur, ancrage dans la scène d'utilisation, langage des formes correspondant au logo, niveaux de décoration et d'animation. Rédiger le contrat de direction. Présenter 2-3 directions lorsque la marque est nouvelle et que l'utilisateur est disponible.
  3. Système de couleurs : choisir 1 primaire (+ accent optionnel) dans le monde du sujet, puis python3 <root>/scripts/palette.py system --primary "#…" [--accent "#…"] --json brand/palette.json --css brand/palette.css. Lire le tableau de contraste ; conserver la teinte, ajuster uniquement la luminosité. Ajouter des champs spécifiques à la marque (par exemple, couleurs de champ de section avec leurs encres) si la stratégie est Engagé/Imprégné. Règle de proportion notée par écrit (parts de fond/encre/accent).
  4. Typographie : procédure dans reference/typography.md §5 - vérifier la famille, les graisses, la licence, cyrillique si nécessaire (search.py "<forme des mots>" -d google-fonts --cyrillic). Rôles : affichage, texte, mono optionnel ; l'échelle min/max ; règles de suivi/interlignage ; règles typographiques russes si la marque écrit en russe.
  5. Forme, profondeur, icônes, imagerie (references/visual-identity.md) : logique du rayon à partir de la géométrie du logo, bordures vs paliers de ton, ce qui flotte (ombre), une bibliothèque d'icônes + épaisseur de trait, direction et traitement photo, règles d'illustration, motif/élément graphique dérivé du symbole.
  6. Voix et message (references/strategy-voice.md §2-4) : tableau vocal, ton par contexte (marketing, interface produit, erreurs, succès, support), vocabulaire (verbes d'appel à l'action, mots que nous n'utilisons jamais), exemples de réécriture avant/après - dans la/les langue(s) de la marque.
  7. Spécification de marque pour les jetons : écrire brand/brand.spec.json (tokens.py init pour le modèle ; colors_from: "palette.json") et remettre à astudio-aio:design-system (ou exécuter tokens.py build directement).
  8. Page du guide de marque (references/brand-book.md) : construire brand/brand-book.html avec les propres jetons et polices de la marque, le rendre (render.cjs shots brand/brand-book.html), regarder, corriger et montrer. Cette page est à la fois le livrable et la preuve que le système fonctionne.
  9. DESIGN.md : écrire ou mettre à jour le code de conception du projet (squelette dans <root>/skills/astudio-aio/references/deliverables.md).

Règles

  • Actifs réels uniquement : ne jamais inventer de logos, clients, témoignages ou récompenses pour le guide de marque.
  • Chaque couleur a un rôle et une valeur de contraste ; chaque police a une licence et une source ; chaque règle a une raison.
  • Neutres teintés par la marque, pas de gris purs ; couleurs d'état distinctes de la couleur primaire de la marque.
  • Le guide de marque doit passer la même revue anti-slop que toute page (reference/anti-slop.md) - pas d'étiquettes en sourcil, pas de grille générique de cartes d'échantillons avec ombres portées ; laissez la propre structure du monde de la marque organiser la page.
  • Lorsque le support du guide (imprimé) diffère de celui du travail (écran), le guide est une preuve, pas une loi : proposer des corrections pour l'écran et les documenter comme des constats pour le propriétaire de la marque.

Individual skills in this repo

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

whoamnesia/cta-banner

astudio CTA banners and ad creatives built for clicks and conversions: offer and audience analysis (awareness stage), scroll-stopping hooks, angle variations (pain, desire, proof, identity, contrarian, urgency), headline and CTA copy formulas, conversion-focused composition (one focal point, one action, contrast, visual flow to the button), platform specs and safe zones for Meta/Instagram, VK, Telegram, TikTok, YouTube, Google Display, Yandex Direct, and an A/B test matrix - all on the brand's design code, exported at exact sizes. Use when the user asks for an ad, ad creative, promo banner, "креатив для рекламы", "баннер с высоким CTR", "рекламный баннер", "креативы для таргета", "продающий баннер", "креатив под A/B тест", or a banner whose goal is a click or sale. Builds on astudio-aio:banner-design.

whoamnesia/design-system

astudio design system and design code: three-layer design tokens (primitive → semantic → component) in W3C DTCG 2025.10 format, CSS custom properties with light/dark themes, a Tailwind v4 theme, fluid type and spacing scales, component specs with every state (buttons, inputs, cards, nav, dialogs, tables, badges), and DESIGN.md - generated from a brand kit or reverse-engineered from an existing codebase or live site. Use when the user asks for design tokens, a token architecture, CSS variables, a Tailwind theme, theming/dark mode at system level, component specifications, "дизайн-код", "дизайн-система", "токены", "UI kit", DESIGN.md, or wants hard-coded values replaced with tokens. Part of the astudio-aio pipeline (after brand, before the site build).

whoamnesia/logotype

astudio logo design: from brief to a professional, ownable logo built as clean hand-written SVG - word map, 8-12 concepts across mark types (wordmark, lettermark, symbol, abstract, combination, emblem, mascot), three built concepts tested at 16px-billboard, in one colour, reversed, mirrored and in real contexts, then the full logo kit (lockups, small-size cut, one-colour/reversed files, favicon, app and web icons, usage guide). Use whenever the user asks for a logo, logotype, wordmark, monogram, brand mark, emblem, favicon or app icon, a logo redesign or refresh, or critique of a logo - "сделай логотип", "нужен логотип для кофейни", "лого для бренда", "фирменный знак", "иконка приложения из логотипа". Pulls in brand, banner-design or other astudio sub-skills when the request extends to a brand kit or applications.

whoamnesia/ui-ux

astudio UI/UX design intelligence for any interface task - designing, building, reviewing, auditing, critiquing, polishing or fixing pages, screens and components: hierarchy, layout, typography, colour, spacing, interaction, forms, navigation, states, accessibility (WCAG 2.2), responsive behaviour, motion and UX copy, backed by a searchable database (90 styles, 190+ product types with palettes and reasoning, 74 font pairings, 1900 Google Fonts with Cyrillic filter, 119 UX rules, landing patterns, chart guide, icons, GSAP presets, 22 stack guideline sets). Use when the user asks to improve or review a UI, "make it look better/premium/less generic/less AI", audit accessibility or UX, fix a layout, choose a style/palette/fonts for a product, "проверь интерфейс", "улучши UI", "сделай красивее", "аудит UX", or for any focused UI decision outside the full astudio-aio pipeline.

Skills associés