How We Design Websites Is Changing AGAIN!!!!!

Carlos Junior 

I completely understand where you're coming from. The transition to Divi 5 has been a big adjustment, and there are definitely areas where the builder could be made simpler and more intuitive.

That said, I also think the underlying architecture is a huge step forward. Variables, presets, and the design system capabilities are incredibly powerful but with that power comes more complexity.

For me, that's where the opportunity lies. Rather than expecting everyone to master every setting, I think we should be building workflows that hide much of that complexity. If users can work from a well-structured design system or even let AI handle much of the configuration they don't need to spend their time digging through every tab and option.

I hope Elegant Themes continues to refine the user experience over time. The foundation is strong; now it's about making that power more accessible.

That's one of the reasons I'm so focused on KrafterPRO. My goal is to help people spend less time navigating the builder and more time creating great websites.

WPTierz Laurent I think you're onto something. 😊

That's very close to the direction I'm heading.

The missing piece isn't another AI model it's giving the AI the right context. If it understands Divi 5, understands the KrafterPRO design system, and has access to the project through MCP, it can produce much better, more consistent results.

The dedicated KrafterPRO Skill is exactly what I've been thinking about. Instead of users having to explain the design system every time, the AI would already understand the variables, presets, components, naming conventions, and best practices before it starts building.

I'd love to hear more about the tests you've done with Claude. If you've found prompts or techniques that work particularly well, please share them. It would be great to compare notes and see how we can make the workflow even better for everyone.

I have a feeling we're only scratching the surface of what's possible. The next 12 months are going to be very exciting.

@funnelstoincome 

When you give your 2 urls Claude can better understand what to do or not to do with KrafterPRO.

He can already start creating a Skill_KrafterPro. But he doesn't fully master the design.

He also needs the Skill_Divi5 because he doesn't know Divi 5 in his model either.

https://diviuniversity.com/KrafterPRO-Design-System-Guide.html

https://diviuniversity.com/krafterpro-userguide/

23/06/2026# COMPÉTENCE : KrafterPRO V3 — Système de conception pour Divi 5
Version : 2.0 — Basé sur le Guide Officiel V3 (https://diviuniversity.com/KrafterPRO-Design-System-Guide.html)
Langue : Français (noms de tokens conservés en anglais — ce sont les noms réels dans Divi 5)

---

## Vue d'ensemble

133 tokens de conception au total :
- 76 tokens de couleur
- 2 polices de caractères
- 8 niveaux d'espacements
- 8 niveaux de gouttières (gaps)
- Valeurs CSS Clamp fluides natives Divi 5

---

## ⚠️ Distinction importante : SiteKrafter PRO ≠ KrafterPRO

| | SiteKrafter PRO | KrafterPRO V3 |
|---|---|---|
| Approche | CSS personnalisé (ancienne méthode) | Variables globales Divi 5 + CSS Clamp |
| Statut | Obsolète — ne plus utiliser | Méthode actuelle |
| Compatibilité | Divi 4 / début Divi 5 | Divi 5 natif |

Ne pas appliquer les solutions SiteKrafter PRO à un projet KrafterPRO V3.

---

## ⚠️ Import de fichiers JSON — Règle absolue

Toujours importer SANS presets si KrafterPRO est actif sur le site.

- Import avec presets → risque d'écraser les variables et presets KrafterPRO
- Import sans presets → respecte le système en place, importe uniquement la structure

Exception : fichier JSON provenant explicitement de KrafterPRO → suivre les instructions fournies avec ce fichier.

---

## Philosophie de conception (les 4 principes)

### 1. Variables plutôt que valeurs
Utiliser les tokens du système au lieu de valeurs hex, px ou rem isolées.
→ Site plus facile à mettre à jour, rebrandé, et protégé contre les modifications accidentelles.

### 2. Fluide par défaut
Typographie, espacements et gouttières utilisent `clamp()`.
→ Mise en page responsive sans media queries supplémentaires.

### 3. Nommage sémantique = décisions intentionnelles
Utiliser `color-bg-subtle` plutôt que `color-neutral-50`, même si les deux pointent vers la même couleur aujourd'hui.
→ Les noms sémantiques décrivent le rôle, pas la valeur — les changements futurs sont donc plus sûrs.

### 4. Discipline d'échelle
Utiliser uniquement les échelles définies pour espacements, gouttières, tailles de texte et rayons.
→ Les valeurs aléatoires créent du bruit visuel. La discipline d'échelle donne l'apparence d'un design professionnel.

Principe fondateur : Source unique de vérité
La palette part d'une seule valeur : `--primary: #0179cb`.
Modifier la couleur primaire → toutes les teintes, nuances, couleur secondaire et tokens sémantiques suivent automatiquement.
Ne jamais coder de valeurs en dur dans un projet réel — utiliser le système.

---

## 1. Couleurs de marque

### Couleurs principales
| Token | Valeur | Rôle |
|-------|--------|------|
| `--primary` | `#0179cb` | Couleur principale de marque — boutons, liens, accents |
| `Secondary` | Rotation 180° | Accent complémentaire pour contraste |
| `Heading` | Primary −60L | Couleur profonde pour les titres |

### Teintes primaires (éclaircissement)
| Token | Δ Luminosité | Utilisation |
|-------|-------------|-------------|
| `primary-color-tint-1` | +7L | États de survol des boutons et liens |
| `primary-color-tint-2` | +20L | Anneaux de focus, états actifs, éléments sélectionnés |
| `primary-color-tint-3` | +34L | Accents doux, illustrations, fonds d'icônes |
| `primary-color-tint-4` | +47L | Fonds clairs, états désactivés, panneaux subtils |

### Nuances primaires (assombrissement)
| Token | Δ Luminosité | Utilisation |
|-------|-------------|-------------|
| `primary-color-shade-1` | −10L | États pressés et contrôles actifs |
| `primary-color-shade-2` | −27L | Accents sections sombres, surlignages pied de page |
| `primary-color-shade-3` | −43L | Sections de fond profondes et superpositions |
| `primary-color-shade-4` | −60L | Couleur de titre — même rôle que `Heading` |

### Variantes alpha
| Token | Valeur | Utilisation |
|-------|--------|-------------|
| `primary-alpha-glow` | Primary à 50% | Lueur douce pour cartes, surlignages, effets de fond |
| `primary-alpha-shadow` | Ombre à 50% | Ombre de marque profonde pour profondeur et superpositions |
| `secondary-alpha-glow` | Secondary à 50% | Lueur secondaire douce pour accents de contraste |

---

## 2. Échelle de neutres

| Token | Hex | Utilisation principale |
|-------|-----|----------------------|
| `color-neutral-50` | `#fafafa` | Fond de page, fonds de cartes sur blanc |
| `color-neutral-100` | `#f4f5f5` | Lignes alternées, remplissage des champs |
| `color-neutral-200` | `#e5e6e7` | Bordure par défaut, séparateurs, lignes |
| `color-neutral-300` | `#d5d6d7` | Bordure forte, bordures de champs actifs |
| `color-neutral-400` | `#a3a5a8` | Texte subtil, icônes, texte de substitution |
| `color-neutral-500` | `#737679` | Texte de corps discret, légendes |
| `color-neutral-600` | `#54575a` | Texte de corps secondaire |
| `color-neutral-700` | `#404245` | Titres de support sur fonds clairs |
| `color-neutral-800` | `#282929` | Fonds de sections sombres (inverse-subtle) |
| `color-neutral-900` | `#181a1b` | Sections sombres, pieds de page |
| `color-neutral-950` | `#0e0f10` | Quasi-noir, sections très sombres |

---

---

## 3. Tokens de couleurs sémantiques

⚠️ **Concevoir par intention, pas par numéro**
Utiliser `color-bg-default` pour un fond de page plutôt que `color-neutral-50` directement.
Le résultat visuel est identique aujourd'hui, mais le token sémantique protège le design lors d'un changement de thème.

### Tokens de texte
| Token | Résolu depuis | Cas d'usage |
|-------|--------------|-------------|
| `color-text-primary` | Couleur primaire | CTAs, liens, texte mis en valeur |
| `Heading Text Color` | Primary −60L | Tous les titres H1–H6 |
| `Body Text Color` | = Heading color | Tous les paragraphes de corps |
| `color-text-muted` | Neutral 500 | Légendes, labels secondaires, méta-texte |
| `color-text-subtle` | Neutral 400 | Texte de substitution, labels désactivés |
| `color-text-inverse` | Neutral 50 | Texte sur fonds sombres ou colorés |

### Règles couleurs
- ✅ Toujours utiliser le token sémantique plutôt que le token numérique
- ✅ Réserver la couleur d'action principale aux boutons de conversion (règle 10%)
- ✅ Utiliser les glissements de gris pour marquer les transitions entre sections
- ❌ Couleur d'accent < 10% de l'interface totale
- ❌ Ne pas utiliser les couleurs sémantiques (rouge/vert) comme décoration

---

## 4. Typographie

*(Données complètes à enrichir depuis les transcriptions du cours)*

**Polices : 2 maximum** — 1 police de titre + 1 police de corps

### Hiérarchie des presets de titres
| Preset | Rôle | Utilisation |
|--------|------|-------------|
| `k-heading-display-lg` | Impact maximal | Accroche hero principale |
| `k-heading-display-md` | Impact secondaire | Sous-heroes, promotions |
| `k-heading-display-sm` | Impact modéré | Variante réduite du display |
| `k-heading-h1` | Promesse principale | **Une seule fois par page** |
| `k-heading-h2` | Titre de section | Grandes sections de contenu |
| `k-heading-h3` | Sous-titre de support | Titres de grille, bénéfices |

### Presets de texte
| Preset | Rôle | Utilisation |
|--------|------|-------------|
| `k-text-eyebrow` | Étiquette petite caps grasse | Au-dessus d'un H1 ou H2 |
| `k-text-badge` | Pastille haute visibilité | "NOUVEAU", "PROMO", "EN DIRECT" |
| `k-text-label` | Micro-texte fonctionnel | Au-dessus des champs, filtres, dates |
| `k-text-body-l` | Paragraphe d'accroche | Premier paragraphe d'une section |
| `k-text-body` | Texte standard | Tout contenu long format |

### Règles typographie
- ✅ Respecter la hiérarchie : Display → H1 → H2 → H3
- ✅ Body-L pour le premier paragraphe, Body pour la suite
- ✅ Un seul H1 par page
- ❌ Ne jamais sauter de niveaux (ex : H1 → H3)
- ❌ Ne jamais redimensionner les polices manuellement dans les modules

---

---

## 5. Espacements (8 niveaux)

Tous les espacements utilisent `clamp()` — fluides de mobile à desktop.
**Ne jamais saisir de valeurs en pixels.**

| Niveau | Objectif | Cas d'usage |
|--------|----------|-------------|
| **XS** | Micro-unités liées | Icônes, badges, micro-textes |
| **S** | Petit espacement | Labels, sous-titres avec leur titre |
| **M** | **Gouttière universelle** | Tous les espaces horizontaux entre colonnes |
| **L** | Espacement structurel | Entre groupes de contenu |
| **XL** | Espacement large | Entre sections de fonctionnalités |
| **2XL** | Rembourrage de section | Entre les "chapitres" de la page |
| **3XL** | Luxe et autorité | Heroes, CTAs majeurs, offres premium |
| *(8e niveau)* | *(à documenter)* | *(à enrichir depuis le guide)* |

### Règles espacements
- ✅ **M = gouttière universelle** pour colonnes et mise en page interne
- ✅ XS pour le rembourrage interne des pastilles
- ✅ 2XL ou 3XL lors d'un changement de couleur de fond
- ❌ Jamais de valeurs pixels manuelles
- ❌ Pas de XL entre un titre et son sous-titre → utiliser S
- ❌ Ne pas comprimer le contenu : si c'est serré → ajouter du 2XL ou 3XL

---

## 6. Gouttières / Gaps (8 niveaux)

Échelle séparée des espacements — spécifiquement pour les gaps entre éléments de grille.
*(Valeurs exactes à enrichir depuis le guide complet)*

---

## 7. Forme & Mouvement

*(Données à enrichir depuis le guide — sections : Border Radius, Border Width, Animation Timing)*

---

---

## 8. Boutons

| Preset | Rôle | Exemples |
|--------|------|---------|
| `k-button-primary` | Action principale | "Rejoindre", "Acheter", "Démarrer" |
| `k-button-secondary` | Action secondaire | "En savoir plus", "Voir la galerie" |

### Règles boutons
- ✅ **Un seul bouton primary par vue**
- ✅ Toujours hiérarchiser : primary + secondary (jamais primary + primary)
- ✅ Assurer états survol, actif et focus visible
- ❌ Ne jamais surcharger manuellement couleurs ou styles hors du système
- **Sur fond clair** : neutres foncés autour du bouton pour le faire ressortir
- **Sur fond sombre** : ombres douces, valeurs de gris pour la profondeur
- **Sur fond gris moyen** : éviter — affaiblit l'urgence visuelle

---

## 9. Largeurs de lignes (Row Sizes)

| Largeur | Utilisation |
|---------|-------------|
| 800px | Lettres de vente, VSL, contenu narratif long |
| 1000px | Documentation, explications détaillées |
| 1280px | Mise en page par défaut — heroes, 2-3 colonnes |
| 1440px+ | Produits, grandes images, storytelling visuel |
| Pleine largeur | Défilés de logos, sliders, sections fond débordant |

---

## 10. Grille auto-responsive

| Largeur min. colonnes | Colonnes | Utilisation |
|----------------------|----------|-------------|
| 350px | 2 colonnes | Hero texte/image, mises en page équilibrées |
| 280px | 3 colonnes | Bénéfices, tarifs, "Comment ça marche" |
| 220px | 4 colonnes | Fonctionnalités, services, grilles équipe/produits |
| 110–150px | 6-8 colonnes | Logos partenaires uniquement |

---

## 11. Presets de sections : rythme vertical

| Taille | Utilisation |
|--------|-------------|
| **Très petit** | Barres de notification, en-têtes slim, pieds de page |
| **Petit** | FAQ, formulaires, contenu dense |
| **Moyen** | Majorité des sections — rythme équilibré |
| **Grand** | Heroes, bénéfices clés, CTAs, révélations d'offre |
| **Plein** | Ruptures visuelles entre chapitres |

---

## Ressources de référence

- **Guide Système de Conception V3 (accès libre)** : https://diviuniversity.com/KrafterPRO-Design-System-Guide.html
- Guide utilisateur : https://diviuniversity.com/krafterpro-userguide/
- Page produit : https://diviuniversity.com/product/krafterpro/
- Chaîne YouTube : https://www.youtube.com/<a data-user_name="sitekrafter" class="fcom_mention fcom_route" href="https://diviuniversity.com/portal/u/sitekrafter/">Steve</a>

---

## À enrichir (TODO)

- [ ] Tokens de fond sémantiques (Background Tokens — coupé lors du fetch)
- [ ] Tokens de couleurs de statut (Status Colors)
- [ ] Règles d'utilisation des couleurs (Usage Rules)
- [ ] Échelle de typographie complète avec valeurs clamp exactes
- [ ] Hauteur de ligne et espacement des lettres
- [ ] Valeurs exactes des 8 niveaux de Gap
- [ ] Border Radius, Border Width, Animation Timing
- [ ] Combinaisons approuvées (Approved Combos)
- [ ] Anti-patterns officiels (section dédiée du guide)
- [ ] Checklist de livraison designer
- [ ] Procédure d'installation de KrafterPRO V3 dans Divi 5
- [ ] Workflow Krafter complet (depuis transcriptions cours)
- [ ] Patterns spécifiques site multilingue (fr/en/gr)

---

## Notes complémentaires issues du cours "Flux de travail Divi 5" (leçons 06-10)

### Le Guide du Système de Conception — référence permanente (leçon 09)

**URL publique :** https://diviuniversity.com/KrafterPRO-Design-System-Guide.html
**Accès alternatif :** Communauté diviuniversity.com > Documentation > KrafterPRO Design System Guide

C'est LE document de référence à consulter en permanence pendant la conception.
Il répond à : "quelle couleur utiliser ici ?", "quelle taille de texte pour ça ?", "quel espacement ?"

**Ce qu'il contient :**
- Quand utiliser chaque teinte et nuance de couleur primaire
- Quand utiliser chaque niveau de gris (neutral-50 → neutral-950)
- Les valeurs clamp exactes pour H1 → H6
- Les usages des niveaux d'espacement (ex: `space-2xl` = padding hero + séparateurs de sections majeures)
- Les tokens sémantiques et leurs rôles
- Les règles d'accessibilité et de contraste

⚠️ **Document vivant** : Mak le met à jour régulièrement avec les nouvelles versions de KrafterPRO.

---

### Génération du système de gris (leçon 06)

**Outil recommandé : `uicolors.app`**
→ Échelle de gris très graduée, transitions subtiles entre niveaux.
→ Cliquer sur chaque nuance → copie automatique dans le presse-papiers.
→ Coller dans le Variables Manager > Colors, nommer `gray-50`, `gray-100`, etc.

**⚠️ Les gris ne sont PAS générés automatiquement par Elegant Themes.**
Doivent être ajoutés manuellement un par un dans le Variables Manager.

**Règle d'or texte sur fond sombre :**
Ne jamais utiliser le blanc pur → utiliser `gray-50` ou `gray-100` pour plus de subtilité.


---

## KrafterPRO = le système pré-construit (leçon 21)

KrafterPRO est la version professionnelle et pré-construite du système de conception Divi 5.
Acheter KrafterPRO = importer directement l'ensemble variables + presets sans créer manuellement.

**Ce que ça signifie concrètement :**
Au lieu de créer manuellement tous les presets (body-text, H1-H6, padding-all-M, gap-M, etc.),
KrafterPRO les fournit déjà configurés, testés, et nommés selon la nomenclature du guide.

**Règle d'import rappel :**
⚠️ Toujours importer les fichiers JSON KrafterPRO SANS presets si des presets personnalisés existent déjà.

---

## Règle des niveaux — taille du padding selon l'élément

La taille du padding doit correspondre à la taille de l'élément.

| Niveau | Tailles KrafterPRO recommandées |
|--------|--------------------------------|
| Section | 2XL, 3XL |
| Row | M, L, XL |
| Colonne | M, L |
| Module | XS, S, M |

Source : leçon 23 du cours "Flux de travail Divi 5" + User Guide KrafterPRO.

That was before the V3 release, and I haven’t updated it since, nor have I carried out any further tests. I’ve been working on other projects and attending training courses.

darryl aubrey 😂 I love that analogy.

I think you've summed up Divi 5 really well. The initial learning curve can be frustrating, especially if you're coming from Divi 4 where many things felt more "automatic." But once you understand variables, presets, and the new workflow, everything starts to click.

I also agree about AI. Whether we call it AI or computer-generated, it's really just another tool. You still need to know what you're trying to achieve and how to guide it. A bad process with AI is still a bad process just faster.

That's why I'm putting so much emphasis on teaching the workflow rather than individual features. Once you understand the process, it doesn't really matter whether you're building by hand, using AI, or combining the two. The principles stay the same.

I think that's where the industry is heading: less about how the website is built, and more about having a repeatable process that produces great results consistently.

And yes... once you learn how to "shift gears," Divi 5 becomes a lot more fun to drive. 😄

Pedro Alvarez I think that's a fair assessment, and I agree with a lot of what you've said.

I do think the market for "just building websites" is going to shrink. AI is getting incredibly good, and for many small businesses, "good enough" will be enough.

Where I see the opportunity is for people who move up the value chain.

Clients don't just need a website they need someone who can help them generate leads, improve conversions, build automations, optimise SEO and AEO, integrate their tools, and help their business grow. AI can build pages, but it still needs direction, strategy, and someone who understands the bigger picture.

I also think you're right about maintenance and ongoing services. As more people build sites themselves, there'll be an increasing need for people to troubleshoot, optimise, secure, update, and improve those sites over time. That creates recurring revenue instead of relying on one-off projects.

My goal with KrafterPRO is to help people adapt to that future rather than compete against AI. If we can use AI to build faster while delivering more value, we'll still have a very strong place in the market.

It's certainly going to be an interesting few years!

Rocky Swartz Hi,

This is brilliant—thanks for taking the time to share your workflow. It's fascinating to see the direction you've taken.

What you've described is actually very close to where I think things are heading. Rather than AI trying to "guess" how to build a site, you're giving it structured context: the design, the design system, the available modules, and the rules it should follow. That dramatically improves the quality of the output.

I also like that you're thinking beyond just page generation. Having AI create menus, taxonomies, metadata, alt text, and other WordPress structures is exactly the kind of work it should be doing. It frees us up to focus on strategy, UX, and the finer design details.

I'd love to see some of the sites you've built with this workflow. If you're happy to share, could you send me a few links? I'd be really interested to see the results and how close the generated sites are to the original designs.

The technology is evolving incredibly quickly, but I think people who combine AI with a solid design system and proven workflows will be in the strongest position. That's the direction I'm trying to take KrafterPRO as well not replacing expertise, but giving AI the context it needs to produce professional-quality work.

Thanks again for sharing this. Conversations like these really help shape where KrafterPRO is heading.

Paul Hooper Thank you that really means a lot.

I know exactly what you mean. The pace of change is overwhelming, and it's easy to end up chasing every new AI tool instead of actually getting work done.

That's one of the main reasons I'm building the new course. Rather than teaching "the AI tool of the week", I want to give everyone a workflow that stays relevant even as the tools change. The tools will come and go, but a solid design system and a repeatable process will always be valuable.

My goal is to do the experimenting so you don't have to, then distil it into practical, real-world workflows that help you build better websites faster.

I'm excited to share it with you I think it's going to change the way people build with Divi.

John Sharkey I think you're spot on.

I'm becoming more convinced that our value isn't in selling templates anymore it's in providing the system that generates great websites consistently.

Anyone can ask an AI to build a website. The difference is whether it builds something that's maintainable, scalable, accessible, on-brand, and actually converts. That's where a proper design system and a professional tech stack make all the difference.

That's also why KrafterPRO is evolving beyond just a design system. I want it to become the foundation that AI builds on giving it the context, rules, and best practices so the output is something you'd actually be happy to deliver to a client.

And you're absolutely right about Divi 5. Its variables, presets, module system, and performance improvements give us the tools to create websites that feel genuinely custom rather than "AI generated." That's where agencies and freelancers can still differentiate themselves.

I think the future belongs to people who know how to combine AI with professional workflows not those who rely on AI alone.