Système de Design
Architecture de jetons de design, spécifications de composants, design systématique, génération de diapositives.
Quand l'utiliser
- Création de jetons de design
- Définitions d'états de composants
- Systèmes de variables CSS
- Échelles d'espacement / typographie
- Passage du design au code
- Configuration de thème Tailwind
- Génération de diapositives / présentations
Architecture des jetons
Chargez : references/token-architecture.md
Structure à trois couches
Primitif (valeurs brutes)
↓
Sémantique (alias de fonction)
↓
Composant (spécifique au composant)
Exemple :
/* Primitif */
--color-blue-600: #2563EB;
/* Sémantique */
--color-primary: var(--color-blue-600);
/* Composant */
--button-bg: var(--color-primary);
Démarrage rapide
Générer des jetons :
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
Valider l'utilisation :
node scripts/validate-tokens.cjs --dir src/
Références
| Sujet | Fichier |
|---|---|
| Architecture des jetons | references/token-architecture.md |
| Jetons primitifs | references/primitive-tokens.md |
| Jetons sémantiques | references/semantic-tokens.md |
| Jetons de composant | references/component-tokens.md |
| Spécifications de composant | references/component-specs.md |
| États et variantes | references/states-and-variants.md |
| Intégration Tailwind | references/tailwind-integration.md |
Modèle de spécification de composant
| Propriété | Défaut | Hover | Actif | Désactivé |
|---|---|---|---|---|
| Fond | primary | primary-dark | primary-darker | muted |
| Texte | white | white | white | muted-fg |
| Bordure | none | none | none | muted-border |
| Ombre | sm | md | none | none |
Scripts
| Script | Objectif |
|---|---|
generate-tokens.cjs | Générer du CSS à partir d'une configuration JSON de jetons |
validate-tokens.cjs | Vérifier la présence de valeurs codées en dur dans le code |
search-slides.py | Recherche BM25 + recommandations contextuelles |
slide-token-validator.py | Valider le HTML des diapositives pour la conformité des jetons |
fetch-background.py | Récupérer des images depuis Pexels/Unsplash |
Modèles
| Modèle | Objectif |
|---|---|
design-tokens-starter.json | JSON de démarrage avec structure à trois couches |
Intégration
Avec la marque : Extraire les primitives des couleurs et de la typographie de la marque. Avec ui-styling : Jetons de composant → configuration Tailwind.
Dépendances de compétence : brand, ui-styling Agents principaux : ui-ux-designer, frontend-developer
Système de diapositives
Présentations conformes à la marque utilisant des jetons de design + Chart.js + un système de décision contextuelle.
Source de vérité
| Fichier | Objectif |
|---|---|
docs/brand-guidelines.md | Identité de marque, ton, couleurs |
assets/design-tokens.json | Définitions de jetons (primitif → sémantique → composant) |
assets/design-tokens.css | Variables CSS (à importer dans les diapositives) |
assets/css/slide-animations.css | Bibliothèque d'animations CSS |
Recherche de diapositives (BM25)
# Recherche de base (détection automatique du domaine)
python scripts/search-slides.py "pitch investisseur"
# Recherche spécifique à un domaine
python scripts/search-slides.py "agitation problème" -d copy
python scripts/search-slides.py "croissance revenus" -d chart
# Recherche contextuelle (Système Premium)
python scripts/search-slides.py "diapositive problème" --context --position 2 --total 9
python scripts/search-slides.py "appel à l'action" --context --position 9 --prev-emotion frustration
Fichiers CSV du système de décision
| Fichier | Objectif |
|---|---|
data/slide-strategies.csv | 15 structures de deck + arcs émotionnels + rythmes sparkline |
data/slide-layouts.csv | 25 mises en page + variantes de composants + animations |
data/slide-layout-logic.csv | Objectif → Mise en page + indicateur break_pattern |
data/slide-typography.csv | Type de contenu → Échelle typographique |
data/slide-color-logic.csv | Émotion → Traitement des couleurs |
data/slide-backgrounds.csv | Type de diapositive → Catégorie d'image (Pexels/Unsplash) |
data/slide-copy.csv | 25 formules de rédaction (PAS, AIDA, FAB) |
data/slide-charts.csv | 25 types de graphiques avec configuration Chart.js |
Flux de décision contextuel
1. Analyser l'objectif / le contexte
↓
2. Rechercher dans slide-strategies.csv → Obtenir la stratégie + les battements émotionnels
↓
3. Pour chaque diapositive :
a. Interroger slide-layout-logic.csv → mise en page + break_pattern
b. Interroger slide-typography.csv → échelle typographique
c. Interroger slide-color-logic.csv → traitement des couleurs
d. Interroger slide-backgrounds.csv → image si nécessaire
e. Appliquer la classe d'animation depuis slide-animations.css
↓
4. Générer le HTML avec les jetons de design
↓
5. Valider avec slide-token-validator.py
Rupture de motif (Duarte Sparkline)
Les decks premium alternent entre les émotions pour l'engagement :
"Ce qui est" (frustration) ↔ "Ce qui pourrait être" (espoir)
Le système calcule les ruptures de motif aux positions 1/3 et 2/3.
Exigences des diapositives
TOUTES les diapositives DOIVENT :
- Importer
assets/design-tokens.css- source de vérité unique - Utiliser les variables CSS :
var(--color-primary),var(--slide-bg), etc. - Utiliser Chart.js pour les graphiques (PAS de barres CSS uniquement)
- Inclure la navigation (flèches du clavier, clic, barre de progression)
- Centrer le contenu
- Se concentrer sur la persuasion / la conversion
Intégration Chart.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
type: 'line',
data: {
labels: ['Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
data: [5, 12, 28, 45],
borderColor: '#FF6B6B', // Utiliser le corail de la marque
backgroundColor: 'rgba(255, 107, 107, 0.1)',
fill: true,
tension: 0.4
}]
}
});
</script>
Conformité des jetons
/* CORRECT - utilise un jeton */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);
/* ERRONÉ - valeur codée en dur */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';
Implémentation de référence
Exemple fonctionnel avec toutes les fonctionnalités :
assets/designs/slides/claudekit-pitch-251223.html
Commande
/slides:create "pitch investisseur de 10 diapositives pour ClaudeKit Marketing"
Bonnes pratiques
- Ne jamais utiliser de valeurs hexadécimales brutes dans les composants - référencer toujours les jetons
- La couche sémantique permet le changement de thème (clair/sombre)
- Les jetons de composant permettent la personnalisation par composant
- Utiliser le format HSL pour le contrôle de l'opacité
- Documenter l'objectif de chaque jeton
- Les diapositives doivent importer design-tokens.css et utiliser exclusivement var()