ckm:design-system

Vue d’ensemble

Qu’est-ce que ckm:design-system ?

ckm:design-system est une skill de design system qui combine architecture de design tokens, spécifications de composants et génération de slides de présentation dans un flux de travail unique et réutilisable.

Elle repose sur un modèle de tokens en trois couches (primitive → sémantique → composant), avec des références et scripts pour :

• Des systèmes de variables CSS
• Des échelles de spacing et de typographie
• Les états et variantes de composants
• La configuration de thèmes Tailwind
• Des mises en page systématiques pour slides et pitch decks

La skill est fournie avec des tableaux de données et des templates d’opinion pour les fonds de slides, la logique couleur, les formules de texte, les layouts et les stratégies narratives, ainsi que des scripts pour générer et valider tokens et structures de slides.

À qui s’adresse cette skill ?

ckm:design-system s’adresse :

• Aux design-system leads et designers UI/UX qui veulent une architecture de tokens claire et une référence de specs de composants.
• Aux développeurs frontend et React/Tailwind qui ont besoin d’un pipeline de tokens robuste (variables CSS, validateurs, pistes d’intégration Tailwind).
• Aux fondateurs, PMs et marketeurs qui créent régulièrement des pitch decks et préfèrent des frameworks de slides reproductibles, cohérents avec la marque, plutôt que de repartir de zéro à chaque fois.

Si vous cherchez à faire le lien entre une démarche de design type Figma et des tokens prêts pour l’implémentation plus un système de slides réutilisable, cette skill est un très bon choix.

Quels problèmes cela résout-il ?

ckm:design-system vous aide à :

• Standardiser vos design tokens avec une stratification documentée primitive → sémantique → composant.
• Générer des tokens CSS à partir de JSON et valider leur usage dans votre codebase.
• Planifier des thèmes Tailwind en utilisant la même architecture de tokens.
• Définir les specs de composants y compris états et variantes, pour garder une UI cohérente entre les écrans.
• Concevoir des présentations cohérentes avec la marque à partir de layouts de slides prédéfinis, recommandations de graphiques, logique couleurs/émotions et formules de texte.

Vous obtenez une manière structurée de penser à la fois votre UI et vos slides comme des systèmes, et non comme des artefacts ponctuels.

Quand ckm:design-system est-il pertinent ?

Utilisez cette skill lorsque :

• Vous introduisez ou refondez un design system et souhaitez des couches de tokens explicites.
• Vous avez besoin de recommandations sur les variables CSS et Tailwind reliées à l’architecture de tokens.
• Vous voulez générer et valider vos design tokens plutôt que les gérer manuellement.
• Vous produisez régulièrement des pitch decks, présentations commerciales ou démos produit et cherchez une structure de slides réutilisable.

Elle est moins adaptée si vous avez seulement besoin d’une maquette UI statique unique, ou si vous n’utilisez pas du tout de tokens ou de variables CSS.

Comment utiliser la skill

Installation et configuration de base

1. Installer la skill ckm:design-system

Installez la skill dans votre environnement Agent/skills :

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

Cette commande récupère la skill design-system depuis le dépôt nextlevelbuilder/ui-ux-pro-max-skill vers votre répertoire local de skills.

2. Explorer les fichiers principaux

Après installation, ouvrez le dossier de la skill et commencez par :

• SKILL.md – Vue d’ensemble, cas d’usage, architecture de tokens et commandes de démarrage rapide.
• references/ – Documentation conceptuelle pour tokens, composants, variantes et intégration Tailwind.
• data/ – Fichiers CSV qui décrivent fonds de slides, logique couleur, formules de texte, layouts, typographie et stratégies.
• scripts/ – Scripts utilitaires pour générer, intégrer et valider les tokens, plus des helpers de recherche de slides.
• templates/design-tokens-starter.json – Un template JSON de base pour définir votre propre jeu de tokens.

Cette structure vous permet de décider rapidement quelles parties adopter : uniquement les tokens, uniquement les slides, ou le système complet.

Concevoir votre architecture de tokens

3. Comprendre le modèle de tokens en trois couches

SKILL.md et references/token-architecture.md décrivent une structure en trois étapes :

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Servez-vous des fichiers de référence pour concevoir chaque couche :

• references/primitive-tokens.md – Couleurs de base, spacing, rayons, primitives typographiques.
• references/semantic-tokens.md – Tokens orientés usage comme --color-primary, --surface-elevated, --text-muted.
• references/component-tokens.md – Variables au niveau composant comme --button-bg, --card-border, --badge-pill-radius.

Cette séparation facilite :

• Le changement de thème sans réécrire les composants.
• L’alignement des détails d’implémentation (variables CSS, config Tailwind) avec le langage de design.

4. Créer ou adapter votre JSON de tokens

Utilisez templates/design-tokens-starter.json comme base pour votre fichier de tokens.

Workflow type :

1. Copiez templates/design-tokens-starter.json dans votre projet en tant que tokens.json.
2. Commencez par renseigner les valeurs primitives (couleurs, spacing, tailles de police).
3. Mappez les primitives vers des rôles sémantiques (primary, secondary, surface, border, etc.).
4. Mappez les tokens sémantiques vers des tokens de composants pour chaque élément clé de l’UI.

Référez-vous à :

• references/component-specs.md – Pour réfléchir à la manière dont les composants consomment les tokens.
• references/states-and-variants.md – Pour les états hover, focus, disabled, error et les variantes.

Génération et validation des tokens

5. Générer des variables CSS à partir des tokens

Utilisez le script de génération de tokens décrit dans SKILL.md :

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

• --config pointe vers votre JSON de tokens (par ex. tokens.json).
• -o définit le fichier CSS de sortie (par ex. tokens.css).

Le résultat est un fichier CSS qui expose votre set de tokens en tant que --custom-properties, prêt à être importé dans votre frontend.

6. Valider l’usage des tokens dans votre codebase

Pour vous assurer que votre code n’utilise que des tokens approuvés, lancez le validateur de tokens :

node scripts/validate-tokens.cjs --dir src/

Ce script analyse le répertoire fourni (par exemple src/) pour détecter les patterns d’utilisation de tokens et vous aide à :

• Repérer les valeurs en dur qui devraient être des tokens.
• Identifier les tokens dépréciés ou non définis.

D’autres validateurs dans scripts/ incluent :

• html-token-validator.py – Pour scanner du HTML à la recherche de patterns d’utilisation de tokens.
• slide-token-validator.py – Pour valider l’usage des tokens dans les contextes liés aux slides.

Utilisez-les pour garder votre UI et vos slides alignés sur votre design system.

7. Intégrer les tokens là où nécessaire

Si votre environnement impose d’embarquer les tokens dans la documentation ou le HTML, vous pouvez utiliser :

• scripts/embed-tokens.cjs – Intègre les tokens dans les fichiers cibles.

Consultez les commentaires inline dans le script et SKILL.md pour des instructions adaptées à votre configuration.

Tailwind et considérations d’implémentation

8. Préparer l’intégration Tailwind

La skill inclut une référence dédiée à Tailwind :

• references/tailwind-integration.md – Conseils pour mapper noms et échelles de tokens dans une configuration de thème Tailwind.

Utilisez-la pour :

• Mapper les tokens primitifs/sémantiques vers les échelles colors, spacing et fontSize de Tailwind.
• Garder les classes utilitaires Tailwind alignées avec votre design de tokens (par ex. une palette primary dérivée des primitives).

Même si vous n’utilisez pas Tailwind immédiatement, cette référence est utile pour réfléchir à la façon dont votre système de tokens s’étendra vers du CSS utility-first.

Construire des pitch decks systématisés

Même si la catégorie principale est le design system, ckm:design-system prend aussi en charge la conception structurée de présentations.

9. Utiliser les tables de données de slides pour layout et visuels

Le répertoire data/ contient des fichiers CSV qui encapsulent des patterns de slides éprouvés :

• data/slide-backgrounds.csv – Types d’images de fond recommandés, overlays et placements par type de slide (hero, vision, team, testimonial, CTA, problem, solution, etc.).
• data/slide-color-logic.csv – Comment les émotions (frustration, espoir, peur, soulagement, confiance, urgence, curiosité, etc.) se traduisent en styles de fond, couleurs de texte et usage des accents.
• data/slide-typography.csv – Recommandations typographiques par type de slide (hiérarchie, emphase, etc.).
• data/slide-layout-logic.csv – Patterns de layout guidés par les objectifs narratifs et les émotions (hook, problem, solution, proof, traction, CTA, timeline, features, etc.).
• data/slide-layouts.csv – Patterns de layout concrets avec indications de structure CSS (grilles, split layouts, structures hero, suggestions d’animation, etc.).

Vous pouvez charger ces tables dans votre propre pipeline (scripts, tableurs ou générateur de deck) pour créer des slides cohérents, pilotés par la narration et l’émotion plutôt que par des choix de design arbitraires.

10. Structurer le texte des slides avec des formules éprouvées

data/slide-copy.csv fournit des formules de copywriting adaptées à différents types de slides, notamment :

• AIDA (Attention → Interest → Desire → Action)
• PAS (Problem → Agitate → Solution)
• 4Ps (Promise → Picture → Proof → Push)
• Before-After-Bridge
• QUEST
• Star-Story-Solution

Chaque ligne inclut :

• formula_name et keywords
• Des components structurés
• use_case et example_template
• emotion_trigger et slide_type

Utilisez ces formules pour :

• Demander à un agent de rédiger le texte d’un slide en suivant une formule précise.
• Standardiser le copy à travers pitch decks et présentations commerciales.

11. Choisir des stratégies de slides pour des decks complets

data/slide-strategies.csv définit des patterns de decks complets, par exemple :

• YC Seed Deck
• Guy Kawasaki 10/20/30
• Series A Deck

Chaque stratégie comprend :

• Un nombre de slides recommandé
• Une séquence (title, problem, solution, traction, market, etc.)
• Un objectif, une audience et un ton
• Des arcs narratifs et émotionnels

Cela vous permet de :

• Générer un plan de slides complet selon la stratégie choisie.
• Garder le design system et la structure narrative en phase.

12. Travailler avec les scripts de slides

Le répertoire scripts/ inclut des utilitaires liés aux workflows de slides :

• scripts/generate-slide.py – Logique cœur de génération de slide (vous pouvez l’adapter dans votre propre générateur de deck ou pipeline).
• scripts/search-slides.py et scripts/slide_search_core.py – Outils de recherche pour trouver les patterns ou stratégies de slides pertinents selon des mots-clés et du contexte.
• scripts/fetch-background.py – Aide à récupérer des images de fond (par ex. depuis Pexels/Unsplash) en suivant les recommandations de data/slide-backgrounds.csv.

Ces scripts sont des briques de base. Vous pouvez les exécuter ou les adapter selon votre environnement et vos besoins d’automatisation.

Exploiter les références et la documentation

13. Utiliser les références comme checklists d’implémentation

Le dossier references/ n’est pas qu’une documentation ; il sert aussi de checklist pendant la construction de votre design system :

• references/token-architecture.md – Vérifiez que votre stratification primitive/sémantique/composant est solide.
• references/primitive-tokens.md – Assurez-vous d’avoir un set complet de tokens de base.
• references/semantic-tokens.md – Contrôlez que chaque token sémantique a un rôle clair.
• references/component-tokens.md – Mappez les tokens vers des composants concrets.
• references/component-specs.md – Documentez états, variantes, interactions et aspects accessibilité.
• references/states-and-variants.md – Évitez d’oublier les états hover, focus, active, disabled, error et success.

Utilisez ces fichiers lors des design reviews et du handoff pour garder designers et développeurs alignés.

Adapter la skill à votre stack

14. Intégrer progressivement

Vous n’êtes pas obligé d’adopter l’ensemble de la skill d’un coup. Approches progressives fréquentes :

• Adoption centrée tokens – Commencez avec templates/design-tokens-starter.json, generate-tokens.cjs et validate-tokens.cjs pour mettre en place un pipeline de tokens.
• Adoption centrée slides – Utilisez les CSV de data/ et scripts/generate-slide.py pour standardiser vos présentations tout en conservant votre design system existant.
• Adoption complète – Combinez tokens, composants et structures de slides pour bâtir un système de marque unifié couvrant UI produit et pitch decks.

Concentrez-vous d’abord sur la partie qui répond à votre problème le plus urgent, puis élargissez.

FAQ

ckm:design-system est-il un UI kit ou un moteur de design tokens ?

C’est avant tout une skill de design system et d’architecture de tokens qui inclut également un système de slides structuré. Elle n’est pas fournie sous forme d’UI kit Figma, mais elle vous apporte :

• Une architecture de tokens en trois couches
• Des scripts pour générer et valider les tokens
• Des références pour les specs et états de composants

Vous pouvez facilement dupliquer les mêmes tokens et composants dans Figma ou tout autre outil de design.

Puis-je utiliser ckm:design-system sans Tailwind ni React ?

Oui. L’intégration Tailwind est documentée dans references/tailwind-integration.md, mais elle est optionnelle. Les tokens sont générés en variables CSS standard, vous pouvez donc les utiliser dans n’importe quelle stack :

• CSS vanilla ou CSS Modules
• styled-components ou autres solutions CSS-in-JS
• Design tokens pour Web Components ou autres frameworks

En quoi ckm:design-system aide-t-il pour les présentations ?

La skill traite les slide decks comme un problème de design system :

• data/slide-layouts.csv et data/slide-layout-logic.csv définissent des patterns de layout et des structures CSS.
• data/slide-backgrounds.csv et data/slide-color-logic.csv font le lien entre types de slides, émotions et visuels.
• data/slide-copy.csv et data/slide-strategies.csv fournissent des formules de texte et des structures de deck.
• Des scripts comme generate-slide.py et search-slides.py aident à automatiser génération et recherche.

Vous pouvez ainsi construire des decks répétables et cohérents avec la marque, plutôt que des slides isolés.

Dois-je utiliser les données CSV fournies telles quelles ?

Non. Les CSV sont des défauts d’opinion. Vous pouvez :

• Les utiliser tels quels pour générer rapidement un pitch deck.
• Les forker et les adapter à votre ton de marque et votre style visuel.
• Les remplacer entièrement par vos propres données tout en gardant les mêmes patterns de scripts.

Par où commencer si seuls les design tokens m’intéressent ?

Si vous vous concentrez exclusivement sur les tokens et l’implémentation UI :

1. Lisez SKILL.md, en particulier les sections "When to Use" et "Token Architecture".

2. Ouvrez references/token-architecture.md ainsi que les références de tokens primitive/sémantique/composant.

3. Copiez templates/design-tokens-starter.json et créez votre tokens.json.

4. Exécutez :

   node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
   node scripts/validate-tokens.cjs --dir src/
   

Vous obtenez ainsi un pipeline de tokens opérationnel sans avoir besoin de toucher au système de slides.

ckm:design-system convient-il aux petits projets ?

Il peut, mais sa vraie valeur se voit sur des projets où :

• Plusieurs personnes contribuent à l’UI ou aux decks
• La cohérence et la scalabilité sont importantes
• Vous prévoyez de faire évoluer votre marque ou votre produit dans le temps

Pour une landing page unique ou une présentation interne ponctuelle, le système complet peut être plus structuré que nécessaire. Vous pouvez néanmoins reprendre l’architecture de tokens ou les formules de slides comme repères légers.

Comment voir tout ce qui est inclus dans la skill ?

Dans votre navigateur de skills ou explorateur de fichiers, regardez l’arborescence complète de la skill design-system, en particulier :

• SKILL.md
• data/
• references/
• scripts/
• templates/design-tokens-starter.json

Vous verrez ainsi toutes les références et scripts d’aide inclus, et pourrez décider quelles briques intégrer à votre propre workflow.