ckm:design

Vue d’ensemble

Qu’est-ce que ckm:design ?

ckm:design est une compétence unifiée, orientée design, qui aide votre agent à planifier et produire des assets visuels pour l’ensemble de votre expérience de marque. Elle est pensée pour les workflows UI/UX et de marque, pas seulement pour produire du code, et combine des références structurées avec des scripts locaux optionnels pour prendre en charge :

• L’identité de marque et l’orientation visuelle
• Les design tokens et les spécifications de design system
• Les recommandations de stylisme UI pour shadcn/ui et Tailwind
• La conception de logos et la génération de logos par IA (55 styles)
• Les livrables et maquettes de Corporate Identity Program (CIP)
• Les présentations et pitch decks en HTML (avec Chart.js)
• Le design de bannières pour le social, la publicité, le web et l’impression (22 styles, matrice complète de tailles)
• Le design d’icônes avec SVG générés par IA (15 styles)
• Les photos sociales et visuels marketing pour les principales plateformes

La compétence est livrée avec un riche corpus de références et des tableaux de données pour que l’agent puisse formuler des recommandations concrètes et prêtes à être mises en œuvre, sans que vous ayez à chercher manuellement des tableaux de tailles ou des normes de marque.

À qui s’adresse ckm:design ?

ckm:design est adapté si vous êtes :

• Un designer UI/UX qui veut un assistant parlant en termes de flows, composants, tokens et direction artistique.
• Un développeur frontend qui a besoin de dimensions précises pour les bannières, les spécifications d’icônes ou la structure HTML des slides, tout en gardant code et design alignés.
• Un responsable marque ou marketing qui planifie des logos, des déploiements CIP, des campagnes sociales et des slide decks pour des pitchs.
• Un fondateur ou une petite équipe qui a besoin d’un accompagnement global sur la marque et l’UI sans disposer d’un département design complet.

Si vous ne cherchez que de la génération de code brute sans justification de design, une compétence plus légère, centrée ingénierie, sera peut-être plus adaptée. ckm:design est pensée pour les cas où la qualité visuelle, la cohérence et l’alignement avec la marque sont essentiels.

Quels problèmes ckm:design résout-il ?

En s’appuyant sur les références et données fournies, ckm:design aide votre agent à :

• Standardiser les productions de marque – aligner logos, bannières, photos sociales et assets CIP dans un système visuel cohérent.
• Obtenir les bonnes tailles et formats dès le premier essai – grâce à des tableaux spécifiques par plateforme pour les réseaux sociaux, Google Display Network, les héros web et l’impression.
• Industrialiser les programmes d’identité visuelle – en reliant secteurs, styles et livrables pour de grands ensembles CIP.
• Faire le lien entre design et implémentation – en connectant les décisions de marque aux design tokens, variables CSS, shadcn/ui et à l’usage de Tailwind.
• Prototyper rapidement – avec des templates de slides HTML et des maquettes CIP à valider bien avant la mise en place d’un design system complet.

---

Guide d’utilisation

1. Installer la compétence ckm:design

Vous installez ckm:design dans votre configuration de compétences compatible Claude à partir du dépôt upstream :

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Cette commande récupère la compétence design depuis le dépôt nextlevelbuilder/ui-ux-pro-max-skill dans votre répertoire local ~/.claude/skills/design (ou équivalent selon votre environnement).

Après l’installation, vous devriez voir :

• SKILL.md – description générale et guide de routage.
• data/ – jeux de données CSV pour les styles CIP, logo et icônes.
• references/ – la base de connaissances principale pour les tâches de design.
• scripts/ – utilitaires Python optionnels pour la CIP et la génération d’icônes.

2. Comprendre le modèle de routage design

ckm:design sert de point d’entrée design et route le travail vers des sous-compétences spécialisées telles que décrites dans references/design-routing.md et SKILL.md.

Domaines design clés :

• Identité de marque → généralement gérée par une compétence brand séparée.
• Design systems et tokens → via la compétence design-system.
• Implémentation UI (shadcn/ui, Tailwind) → via la compétence ui-styling.
• Création de logo → références intégrées pour le design de logos.
• Design CIP → livrables et maquettes d’identité corporate.
• Slides → présentations HTML utilisant Chart.js.
• Design de bannières → bannières social, ads, web, print.
• Design d’icônes → génération d’icônes SVG via scripts.

Dans vos prompts, vous pouvez indiquer le type de design grâce au pattern argument-hint de la compétence :

ckm:design [design-type] [context]

Exemples :

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Utiliser les références pour les décisions UI/UX et de marque

La force de ckm:design repose sur ses fichiers de références structurées. Servez-vous-en comme source canonique lorsque vous demandez des spécifications à votre agent.

Planification UI/UX et design system

Même si l’exécution peut être déléguée à design-system ou ui-styling, vous pouvez utiliser ckm:design pour :

• Discuter des tokens et spécifications au niveau design (couleurs, typographie, espacements, états).
• Mapper les couleurs et la typographie de marque vers des variables CSS et la configuration Tailwind.
• Planifier le comportement des composants et leurs états avant l’implémentation.

L’agent peut combiner l’intention design de haut niveau issue de ckm:design avec des compétences orientées code pour l’implémentation.

Création de bannières et campagnes

Pour les campagnes et bannières UI, appuyez-vous sur references/banner-sizes-and-styles.md :

• Choisissez les bonnes tailles par plateforme (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, site web, email et formats print).
• Sélectionnez parmi 22 styles de direction artistique (ex. Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Demandez à l’agent d’aligner message et layout sur des emplacements précis comme :
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

Exemple de prompt pour la planification d’une campagne :

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Déploiements de Corporate Identity Program (CIP)

Le support CIP est détaillé dans :

• references/cip-deliverable-guide.md – que doit contenir un système d’identité complet.
• references/cip-design.md – comment les données et scripts prennent en charge 50+ livrables, 20 styles et 20 secteurs.
• references/cip-style-guide.md – archétypes de styles détaillés (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic, etc.).
• references/cip-prompt-engineering.md – structures de prompts pour la génération de maquettes.

Utilisez ces ressources pour :

• Définir le périmètre d’une refonte (cartes de visite, signalétique, véhicules, textile, assets digitaux, événements, etc.).
• Aligner chaque livrable sur un style adapté au secteur.
• Générer des prompts très structurés pour des maquettes qu’un modèle Gemini ou un autre moteur d’images pourra interpréter de façon cohérente.

Exemple de prompt stratégique :

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. Générer des briefs CIP et des maquettes avec les scripts (optionnel)

Si vous voulez aller au-delà de la planification conceptuelle et générer réellement des maquettes CIP à l’aide des scripts Python fournis, suivez references/cip-design.md.

Assurez-vous que Python 3 est installé et que vous avez accès à un modèle Gemini compatible comme décrit dans votre propre toolchain.

4.1. Rechercher dans les données CIP et créer un brief

Utilisez le script de recherche basé sur BM25 pour explorer livrables, styles et secteurs, et générer un brief de départ :

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

Vous pouvez cibler des domaines spécifiques :

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

Les fichiers CSV data/cip/ stockent les livrables, secteurs, styles et contextes de maquettes utilisés par cet utilitaire de recherche.

4.2. Générer des images de maquettes CIP

references/cip-design.md inclut des commandes pour utiliser scripts/cip/generate.py afin de piloter la génération de maquettes via Gemini :

# Maquette d’un livrable unique avec logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Ensemble CIP complet avec logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Utilisez vos propres clés de modèle et votre configuration d’environnement ; ckm:design fournit la structure de données, les squelettes de prompts et les points d’entrée scripts, pas le modèle lui-même.

4.3. Générer des présentations HTML des résultats CIP

Une fois les données de maquettes disponibles, vous pouvez produire une présentation HTML avec :

python3 ~/.claude/skills/design/scripts/cip/render-html.py

Cela génère une vue d’ensemble HTML que vous pouvez partager avec les parties prenantes comme synthèse visuelle du système d’identité.

5. Concevoir logos et icônes avec l’aide de l’IA

ckm:design inclut également des guides dédiés et des scripts pour le travail sur les logos et les icônes.

5.1. Planification de logo et prompt engineering

Appuyez-vous sur :

• references/logo-design.md – fondamentaux de la composition de logo.
• references/logo-color-psychology.md – choix de couleurs selon la personnalité et le secteur de la marque.
• references/logo-style-guide.md – comment choisir parmi les 55 styles de logo disponibles.
• references/logo-prompt-engineering.md – structures de prompts recommandées pour la génération de logos basée sur Gemini.

Utilisez ces références lorsque vous demandez à votre agent de :

• Définir un système de logo (version principale, empilée, icône seule, versions monochromes).
• Choisir des couleurs et une typographie en phase avec votre stratégie de marque.
• Rédiger des prompts IA suffisamment détaillés pour produire des candidats de logo exploitables.

Les capacités logo intégrées sont conçues pour fonctionner de concert avec les outils CIP et bannières, afin que votre marque reste cohérente sur tous les points de contact.

5.2. Design d’icônes avec sortie SVG

references/icon-design.md décrit comment générer des icônes SVG assistées par IA à l’aide de scripts/icon/generate.py et Gemini 3.1 Pro Preview.

Exemples de commandes :

# Icônes simples
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# Icône nommée dans une catégorie
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# Génération en lot
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# Tailles multiples
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# Découvrir les styles et catégories disponibles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

C’est particulièrement utile pour les équipes UI/UX qui ont besoin de sets d’icônes homogènes, alignés sur le même langage visuel que leurs logos et supports CIP.

6. Créer des slide decks HTML et visuels marketing

ckm:design inclut un ensemble complet de références pour le design de slides, idéal pour les démos produit, les decks commerciaux et les présentations internes :

• references/slides.md – aperçu du système de slides.
• references/slides-create.md – comment passer du plan au deck.
• references/slides-layout-patterns.md – layouts de page courants.
• references/slides-copywriting-formulas.md – frameworks de messaging pour plus de clarté et de persuasion.
• references/slides-strategies.md – stratégies de structuration narrative.
• references/slides-html-template.md – template HTML de base pour les slides (avec intégration Chart.js).

Avec ces ressources, vous pouvez :

• Demander à votre agent de créer un plan de slides et de mapper les sections sur des patterns de layout.
• Générer des slide decks HTML alignés sur vos tokens et couleurs de marque.
• Ajouter des visualisations Chart.js pour les métriques et dashboards.

Exemple de prompt :

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Photos sociales et campagnes multi-plateformes

references/social-photos-design.md fournit des recommandations pour concevoir des photos sociales et assets multi-plateformes.

La compétence design vous aide à :

• Coordonner photos de profil, images de couverture et templates de posts sur des plateformes comme Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads et Google Ads.
• Utiliser des workflows HTML-to-screenshot pour itérer rapidement des visuels sociaux avec une typographie et des layouts cohérents.
• Reconnecter chaque asset social à votre système de marque et de CIP central.

---

FAQ

Dans quels cas ckm:design est-il particulièrement adapté ?

ckm:design est particulièrement pertinent lorsque vous :

• Avez besoin d’une direction visuelle de bout en bout couvrant UI/UX, branding, CIP et marketing.
• Souhaitez que votre agent raisonne en termes de design tokens, direction artistique et systèmes de marque, et pas seulement de snippets CSS.
• Planifiez une refonte de marque, un lancement produit ou un déploiement de design system et cherchez une approche cohérente, appuyée sur des références.
• Voulez combiner génération d’images par IA (logos, icônes, maquettes CIP, photos sociales) et supervision humaine du design.

Quand ckm:design n’est-il pas l’outil approprié ?

Il sera sans doute moins indiqué si vous :

• Avez uniquement besoin d’aide backend ou algorithmique sans composante design.
• Cherchez un générateur de logo en un clic sans prise en compte du système de marque global.
• N’avez pas la possibilité ou l’envie d’exécuter les scripts Python optionnels (la compétence reste utile pour le conseil sans scripts, mais vous vous appuierez sur votre propre stack de génération d’images).

ckm:design nécessite-t-il Figma ou une application de design spécifique ?

Non. ckm:design est agnostique en matière d’outils. Il fournit une structure et des recommandations que vous pouvez appliquer dans :

• Figma ou des outils équivalents pour la mise en page et le prototypage UI/UX.
• Des codebases frontend utilisant shadcn/ui et Tailwind.
• Des outils de présentation ou du HTML brut pour les slides.
• Tout éditeur d’images ou pipeline de génération par IA capable d’exploiter les prompts et spécifications produits.

Vous pouvez conserver votre stack design actuelle ; la compétence agit comme une couche de décision et de spécification au-dessus.

Puis-je utiliser ckm:design sans exécuter les scripts Python ?

Oui. La valeur principale de ckm:design réside dans ses fichiers de références et de données structurées :

• Vous pouvez vous reposer entièrement sur references/*.md et data/*.csv via l’agent pour la planification et la définition des specs.
• Les scripts dans scripts/cip/ et scripts/icon/ sont des accélérateurs optionnels pour les équipes qui souhaitent automatiser la génération de maquettes et de SVG.

Si vous ne lancez pas les scripts, vous obtiendrez tout de même :

• Des tailles, styles et listes de livrables corrects.
• Des frameworks de prompts à utiliser dans vos propres outils d’images IA.
• Des recommandations cohérentes pour l’alignement entre marque, UI et marketing.

Comment ckm:design s’intègre-t-il avec les autres compétences design ?

Le dépôt est organisé en une suite de compétences design coopérantes. ckm:design :

• Sert de couche de routage et d’orchestration pour les tâches visuelles.
• Délègue le travail d’identité de marque approfondi à brand.
• Délègue l’architecture de tokens et les specs de composants à design-system.
• Délègue les détails d’implémentation (shadcn/ui, classes Tailwind) à ui-styling.

Concrètement, vous :

1. Commencez avec ckm:design pour cadrer le problème visuel et choisir la bonne sous-compétence.
2. Utilisez la compétence spécialisée correspondante pour l’exécution détaillée.
3. Revenez à ckm:design pour vérifier que tous les outputs restent alignés avec le plan de marque et de CIP global.

Que consulter en premier après avoir installé ckm:design ?

Pour une prise en main rapide mais complète :

1. Ouvrez SKILL.md pour comprendre le périmètre et les workflows principaux.
2. Consultez references/design-routing.md pour voir comment les tâches se répartissent entre les différentes compétences design.
3. Parcourez les références clés suivantes selon votre besoin immédiat :
   • references/banner-sizes-and-styles.md – pour les campagnes et bannières.
   • references/cip-deliverable-guide.md et references/cip-style-guide.md – pour les systèmes d’identité corporate.
   • references/logo-design.md et references/logo-color-psychology.md – pour les projets de logo.
   • references/slides.md et references/slides-html-template.md – pour les decks et présentations.
   • references/social-photos-design.md – pour les campagnes sociales.

Cela vous donnera assez de contexte pour décider comment intégrer ckm:design dans vos workflows UI/UX, branding ou marketing avant de plonger dans les scripts optionnels.