Generare design system WordPress con AI e Divi 5 nel 2026

Un design system non è più un lusso da azienda con 50 designer. È una necessità operativa anche per una singola agenzia che gestisce 3-5 brand client sullo stesso WordPress multisite o su installazioni separate. Il problema è che costruirne uno da zero richiede settimane di lavoro tra token, color palette, scale tipografiche, spacing system, radii, ombre e preset riusabili.

Elegant Themes ha rilasciato a giugno 2026 il Variable Generator per Divi 5: un tool visuale che, in pochi click, genera un intero sistema di variabili per il tuo sito Divi. Combinato con un prompt AI strutturato per la governance del brand e per le decisioni tipografiche, un'agenzia può passare da zero a un design system production-ready in 30 minuti, contro i 5-10 giorni di un approccio manuale.

Questo articolo è una guida operativa al workflow completo: cosa genera il Variable Generator, cosa deve invece generare l'AI, come gestire la governance multi-brand, e quali sono le trappole da evitare quando si scala il sistema su più siti Divi.

Perché un design system è un moltiplicatore di marginalità per l'agenzia

Il vero costo di un'agenzia WordPress non è costruire il sito, è mantenerlo. Ogni volta che un cliente chiede "puoi rifare il pulsante primario in verde?", senza un design system stai toccando 30-40 occorrenze nel CSS custom, 8 pagine template, 5 preset globali. Con un design system, cambi una variabile e il pulsante è verde ovunque.

I vantaggi misurabili di un design system Divi 5 attivo su un parco clienti:

• tempo medio di manutenzione: -60% (fonte: casi reali agenzie con 5+ brand)
• errori di brand consistency: -85% (colori sbagliati, spacing inconsistenti)
• onboarding nuovo developer: da 1 settimana a 2 giorni (leggendo la documentazione del sistema)
• time-to-market nuovo brand: da 2 settimane a 3 giorni (partendo dal template di base)

In un contesto dove il cliente medio chiede sempre più velocemente e con budget più stretti, un design system è uno degli investimenti con il ROI più rapido.

Cosa genera il Variable Generator di Divi 5 (e cosa no)

Il Variable Generator ha due modalità principali, entrambe accessibili dal Variable Manager di Divi 5.

Color Palette Generator

Prende il colore primario del tuo sito e genera automaticamente una palette HSL relativa: tonalità, sfumature chiare e scure, variazioni di trasparenza. Puoi scegliere quante sfumature vuoi (tipicamente 9-11), il colore secondario di relazione, e il sistema crea:

• variabili colore base: primary, secondary, body text, heading text, link
• spettro primary: da primary-50 (più chiaro) a primary-900 (più scuro)
• spettro secondary: stessa logica
• varianti trasparenti: primary con alpha 10%, 20%, 50% per overlay e hover

Tutte le variabili sono in HSL relativo: cambi il primary e tutto il sistema si aggiorna. Niente più primary: #3B82F6 sparso in 200 file CSS.

Sizing Variable Generator

Crea un sistema fluido completo con clamp() per typography e spacing. Le variabili generate includono:

• Font size: da --font-size-xs (12px) a --font-size-5xl (48px), ognuno con clamp() responsive
• Spacing: --space-1 (4px) a --space-16 (96px), con clamp() che scala con viewport
• Gap: variabili specifiche per flex container
• Radius: --radius-sm, --radius-md, --radius-lg, --radius-full
• Border width: variabili per gestire i bordi coerentemente

Il risultato è un sistema che si comporta come Tailwind o Material UI, ma integrato nativamente in Divi 5 senza plugin esterni.

Cosa NON genera il Variable Generator

Qui entra in gioco l'AI. Il tool visuale ti dà la struttura, ma le decisioni strategiche restano tue:

• quali token sono semanticamente rilevanti per il brand (es. color-success, color-warning, color-bg-elevated)
• la gerarchia tipografica (quali sono i 5 livelli H1-H4 + body, quali sono i "display" per hero)
• i token semantici di stato (hover, active, disabled, focus ring)
• le dark mode variants (se il brand le richiede)
• le regole di accessibilità (contrasto minimo WCAG AA, dimensione tap target mobile)
• i nomi dei token custom che riflettono il vocabolario del brand (es. --color-accent-rosso-corsa vs --color-accent-primary)

Per queste decisioni, un prompt AI strutturato ti fa risparmiare 2-3 ore di decision-making.

Workflow 5 step per costruire il design system in 30 minuti

Step 1: brief di brand con AI (5 minuti)

Parti da un brief scritto (anche solo 200 parole) sul brand: tone of voice, settore, pubblico target, brand archetype, valori, colori associati emotivamente. Passalo all'AI con questo prompt template:

Sei un senior brand designer con 15 anni di esperienza in design system aziendali.

BRIEF BRAND:
[inserisci brief 200 parole]

Genera in output JSON valido:
1. "color_primary_hsl": { "h": [0-360], "s": [0-100], "l": [0-100] } - colore primario brand
2. "color_secondary_hsl": { ... } - colore secondario complementare o analogo
3. "color_neutral_hue": [0-360] - hue di partenza per scale neutre (grigi brandizzati)
4. "typography_scale": ["font-size-xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl"] con valore clamp() per ciascuno
5. "spacing_scale": ["space-1" a "space-16"] con valore clamp() per ciascuno
6. "radius_scale": ["radius-sm", "md", "lg", "xl", "full"] con px
7. "semantic_tokens": { "color-success": "hsl(...)", "color-warning": "...", "color-error": "...", "color-info": "..." }
8. "font_family_suggestions": ["Google Fonts pair primario + secondario"]
9. "rationale": spiegazione 100 parole delle scelte

Vincoli:
- contrasto WCAG AA minimo 4.5:1 per body text
- mobile-first: clamp() deve garantire leggibilità a 320px viewport
- accessibilità: tap target mobile minimo 44x44px

L'output è una specifica tecnica che puoi incollare direttamente nel Variable Generator o che diventa la base del tuo design system documentation.

Step 2: configurazione Variable Generator (10 minuti)

Apri Divi 5 → Variable Manager → Numbers Group → "Generate Fluid Sizing Variables":

1. scegli Font Size, configura la scala ricevuta dall'AI
2. ripeti per Spacing, Gap, Radius, Border Width
3. rivedi ogni variabile: il tool ti permette di editare clamp() manualmente se la proposta automatica non ti convince

Poi Color Group → "Generate Color Palette Variables":

1. inserisci il primary HSL dall'AI
2. scegli 9 sfumature (default consigliato)
3. inserisci il secondary HSL
4. genera lo spettro secondario
5. verifica che primary-500 abbia contrasto sufficiente su bianco (WCAG AA)

Step 3: preset variables con logica di componente (5 minuti)

I preset in Divi 5 sono componenti riusabili. Crea preset per i pattern ricorrenti:

• Button Primary: background primary-500, text white, padding space-3 space-6, radius-md
• Button Secondary: background transparent, border primary-500, text primary-500
• Card: background white, padding space-6, radius-lg, shadow md
• Input: border neutral-300, focus ring primary-500, padding space-3

Ogni preset è una composizione di variabili. Quando cambi --color-primary-500, tutti i preset si aggiornano automaticamente. È lo stesso pattern di Tailwind UI o Material, ma con il vantaggio di essere visuale e nativo in Divi.

Step 4: documentazione interna in formato Markdown (5 minuti)

Una design system senza documentazione è una design system che morirà. Esporta la specifica in un file design-system.md nel repo del progetto (o in Notion/Confluence per team non tecnici):

# Design System [Nome Brand]

## Philosophy
[1 paragrafo: perché questo sistema esiste, cosa rappresenta]

## Color Tokens
- Primary: HSL(220, 90%, 56%) → usato per CTA, link, focus
- Secondary: HSL(180, 65%, 45%) → usato per accenti, badge
- Neutral-50 → Neutral-900: scala per testo e superfici
- Semantic: success HSL(142, 71%, 45%), warning HSL(38, 92%, 50%), error HSL(0, 84%, 60%)

## Typography Scale
- Display: clamp(2.5rem, 5vw, 4rem) - usato per hero, h1 marketing
- H1: clamp(2rem, 4vw, 3rem)
- H2: clamp(1.5rem, 3vw, 2.25rem)
- H3: clamp(1.25rem, 2.5vw, 1.75rem)
- Body: clamp(1rem, 1.5vw, 1.125rem)
- Small: clamp(0.875rem, 1.2vw, 1rem)

## Spacing Scale
- space-1 (4px) → space-16 (96px), scala logaritmica base 1.5

## Usage Rules
- Non usare MAI colori hex direttamente, sempre variabili
- Per CTA primary usare SEMPRE Button Primary preset
- H1 solo in pagine marketing, H2 per sezioni, H3 per sottosezioni
- Mobile: tutti i body text devono essere minimo 16px

Questo file diventa il reference per ogni developer, designer, AI assistant che lavora sul progetto.

Step 5: governance e manutenzione (5 minuti setup, poi ongoing)

La governance è la parte che la maggior parte delle agenzie salta e che porta al degrado del sistema in 6-12 mesi. Serve una procedura operativa:

• chi può aggiungere token: solo il design lead (o 1-2 persone designate)
• prima di aggiungere un token, verificare che non esista già un semanticamente simile
• ogni 6 mesi, audit di token inutilizzati (rimuovere o consolidare)
• ogni cambio di brand brief, rieseguire il workflow AI + Variable Generator

Le 5 trappole del design system Divi 5

Trappola 1: troppe variabili subito

La tentazione è generare 50 sfumature colore, 20 spacing, 10 radius. Risultato: il sistema diventa ingestibile. Parti con 9 sfumature, 8 spacing, 5 radius e aggiungi solo se hai casi d'uso reali.

Trappola 2: token semantici sbagliati

Creare --color-blue-500 è una scelta tecnica. Creare --color-action-primary è una scelta semantica. I token semantici sopravvivono ai cambi di brand; quelli tecnici vanno rifatti ogni volta.

Trappola 3: ignorare l'accessibilità

Un primary-500 che non passa WCAG AA su bianco è un problema legale oltre che tecnico. Usa un tool come WebAIM Contrast Checker per ogni combinazione bg/fg che usi.

Trappola 4: preset senza documentazione

Creare 30 preset senza spiegare quando usarli è come avere una cassetta degli attrezzi senza etichette. Ogni preset deve avere 1-2 esempi d'uso reali.

Trappola 5: design system scollegato dal codice custom

Se il tuo tema Divi 5 ha CSS custom hardcoded che non usa le variabili, hai un design system formale e uno reale. Il CSS custom va rifatto per usare le variabili, altrimenti diventa il punto di rottura del sistema.

Caso studio: agenzia 4 brand, design system unificato

Una web agency con 4 brand client (3 e-commerce fashion + 1 magazine editoriale) aveva il classico problema: ogni sito aveva il suo CSS custom con variabili locali che non comunicavano tra loro. Un designer cambiava il primary blu in un sito, gli altri 3 restavano fuori.

Dopo aver applicato questo workflow:

• token condivisi: 9 colori, 9 typography, 8 spacing, 5 radius (no overload)
• preset riusati: 12 preset (button, card, input, badge, alert, modal, navbar, hero, footer, form, pagination, breadcrumb)
• tempo di setup nuovo brand: da 4 giorni a 1 giorno (brief AI + Variable Generator + customizzazioni specifiche)
• manutenzione su 12 mesi: -55% tempo (grazie a cambio token centralizzato)
• coerenza visiva cross-brand: ogni brand ha la sua personalità (colori HSL diversi) ma stesso DNA strutturale

Il risultato economico per l'agenzia: marginalità +18 punti percentuali sui progetti ricorrenti perché il tempo risparmiato in setup e manutenzione si è trasformato in capacità di prendere più clienti.

Integrazione con AI per design system evolutivi

Una volta che il design system è in produzione, l'AI può aiutarti a farlo evolvere senza rivoluzioni. Tre use case reali:

Use case 1: audit di token inutilizzati

Prompt: "Analizza questo file CSS custom del progetto [nome brand].
Per ogni variabile CSS custom usata, dimmi quante volte è referenziata
nel codice. Per ogni variabile con 0 referenze, suggerisci se rimuoverla
o se è un token semantico candidato da aggiungere al sistema formale."

Use case 2: generazione di componenti da descrizione

Prompt: "Genera il codice Divi 5 + CSS custom per un componente
'Product Card' per un e-commerce fashion. Deve usare ESCLUSIVAMENTE
i token del design system [lista token]. Output: codice pronto
per essere incollato in Divi 5."

Use case 3: dark mode automatica

Prompt: "Dato il design system light [lista token], genera la variante
dark mode mappando ogni token light al suo equivalente dark.
Mantieni contrasto WCAG AA. Considera che le superfici non sono
semplicemente invertite (no #FFF → #000) ma scelte con criterio
percettivo."

Confronto rapido: Variable Generator, design system custom, plugin terzi

Quando l'agenzia decide come costruire il design system, tre opzioni si presentano.

Opzione 1: Divi 5 Variable Generator + workflow AI

Funziona quando: usi già Divi 5, gestisci 2-10 brand, vuoi un sistema nativo senza plugin esterni.

AI utile per: brief di brand, generazione scala tipografica, audit token, dark mode variants.

Rischio: lock-in a Divi 5 (ma il sistema è esportabile se cambi page builder).

Opzione 2: design system custom in CSS variables (no Divi)

Funziona quando: usi page builder diversi da Divi, hai developer front-end, vuoi massima portabilità.

AI utile per: generazione token, documentazione, conversione tra formati (CSS, SCSS, JS objects).

Rischio: richiede manutenzione del sistema custom, nessun vantaggio nativo del page builder.

Opzione 3: plugin terzi (Stylemix, Yabe, Customify)

Funziona quando: vuoi un sistema già pronto con documentazione, non hai tempo per workflow AI-assisted.

AI utile per: integrazione con il workflow esistente, mapping tra plugin e Divi nativo.

Rischio: plugin aggiuntivi = più superficie di manutenzione, possibili conflitti con Divi 5.

Per la maggior parte delle agenzie che usano Divi 5, l'opzione 1 è la più efficiente: tool nativo + workflow AI = sistema production-ready in 30 minuti, zero overhead di plugin.

Come il Variable Generator si integra con il preset system Divi 5

Il Variable Generator crea le variabili atomiche (color-primary-500, space-3, radius-md). Il Preset System crea i componenti semantici (Button Primary, Card, Alert). I due sistemi lavorano in sinergia:

1. una variabile è un singolo valore (es. HSL primary)
2. un preset è una composizione di variabili con uno scopo (es. Button Primary usa primary-500 + white + space-3 + radius-md)
3. un componente riusabile (Block Library) è un preset + contenuto

Quando aggiorni una variabile (es. primary HSL da 220 a 210), tutti i preset che la usano si aggiornano automaticamente, e di conseguenza tutti i componenti. È una propagazione a cascata che rende il design system veramente "vivo".

Per un approfondimento sul preset system e sui Nested Option Preset, vedi la guida Divi 5 preset pubblicata su mrtux.it, che copre la parte architetturale del sistema. Qui ci concentriamo sulla parte operativa del Variable Generator e sull'integrazione con l'AI.

Workflow AI per multi-brand governance

Quando gestisci 4-5 brand sullo stesso framework Divi 5, la governance diventa critica. La struttura consigliata è:

• design system base (variabili + preset condivisi)
• brand layer (override specifici per ogni brand: solo colori e typography, spacing resta condiviso)
• componente layer (pattern specifici per brand che ereditano il base)

In Divi 5 questo si realizza con:

• Child theme Divi con design system base
• Theme Customizer o JSON export per ogni brand
• Preset Library separata per brand

Un prompt AI per generare il "brand layer" da un brief è:

Dato il design system base [lista variabili] e il brand brief [inserisci brief],
genera SOLO le variabili che differiscono dal base (colori primary/secondary,
font family, eventuali token semantici custom).
Output: JSON Divi 5 ready (formato Variable Manager export).

FAQ

Il Variable Generator funziona anche con temi child Divi?

Sì. Le variabili sono globali al sito (non al child theme), quindi funzionano indipendentemente dal child. Il child theme può fare override custom delle variabili se necessario.

Posso usare il Variable Generator senza Divi 5?

No. Il tool è una funzionalità nativa di Divi 5. Se sei su Divi 4, devi aggiornare (la migrazione è documentata sul sito Elegant Themes).

Quante variabili dovrei generare inizialmente?

Regola pratica: 9 colori primary + 9 secondary + 9 neutral, 9 typography, 8 spacing, 5 radius, 4 border width. Circa 45-50 variabili. Aggiungi solo se hai casi d'uso reali.

L'AI può sostituire un designer per il design system?

No. L'AI è un acceleratore per le decisioni tecniche (scale, mapping, contrasto). Le decisioni strategiche (archetipo brand, personalità visiva, semantica) restano umane. Il workflow migliore è AI + designer, non AI al posto del designer.

Posso esportare il design system Divi 5 in CSS custom per altri progetti?

Sì, le variabili Divi 5 sono CSS variables native (--variable-name). Puoi esportarle e usarle in qualsiasi altro contesto CSS.

Quanto tempo reale richiede il workflow 5 step?

Setup iniziale: 30-45 minuti per un designer esperto. Manutenzione: 10-15 minuti/settimana se il sistema è attivo.

Il design system rallenta il sito Divi 5?

No. Le CSS variables sono native del browser, il lookup è O(1). Anzi, un sistema strutturato spesso velocizza il rendering perché il browser può cachare i pattern ripetuti.

Funziona con page builder diversi da Divi?

No, Variable Generator è specifico di Divi 5. Ma il workflow AI + documentazione è esportabile. Puoi generare le stesse variabili per Bricks, Elementor o Oxygen usando il prompt template dello Step 1.

Roadmap 30 giorni per agenzie che partono da zero

Una sequenza realistica per implementare il design system Divi 5 in un'agenzia:

• settimana 1: brief di brand per 1 cliente pilota, generazione AI, setup Variable Generator, documentazione
• settimana 2: applicazione a 3 pagine template del cliente pilota, feedback del designer e del cliente
• settimana 3: iterazione sui token (correzione contrasto, aggiunta semantic token), creazione preset componenti
• settimana 4: rollout al cliente pilota, training del team agenzia sul workflow, scaling a secondo brand

Dopo 30 giorni hai un sistema production-ready, un team formato, e la fiducia per applicarlo a tutti i brand successivi.

Conclusione: design system non è big design, è operational design

Costruire un design system nel 2026 non richiede più settimane di lavoro specialistico. Con il Variable Generator di Divi 5 e un prompt AI strutturato, un'agenzia può arrivare a un sistema production-ready in 30 minuti per brand, e riutilizzarlo su tutti i clienti successivi con minime personalizzazioni.

Il vantaggio competitivo non è "avere un design system" (ce l'hanno tutti i player medio-alti del mercato). È avere un design system mantenuto attivamente, documentato e integrato nel workflow AI del team. Quello fa la differenza tra un'agenzia che sopravvive e una che scala.

Riferimenti utili per approfondire

• Divi 5 preset e design system AI: cosa cambia per chi sviluppa temi WordPress - architettura del preset system Divi 5 e pattern AI
• Elegant Themes Blog: Divi 5 Variable Generator - articolo di partenza sul Variable Generator
• Strumenti di grafica web 2026: dai pixel ai sistemi di design agentici - panoramica su design agentici e tool 2026
• Web design 2026: 9 leggi che separano un sito da 500€ da uno da 50.000€ - principi di design che governano il design system
• Migliori AI website builder WordPress 2026: guida tecnica - confronto tra page builder con AI integrata
• App Kit WordPress 2026: come gli starter kit AI cambiano il time-to-market - starter kit AI per agenzie e freelance
• AI workflow agenzia WordPress: come ri-progettare i processi nel 2026 - workflow interno agenzia con AI
• W3C Design Tokens Community Group - specifica W3C per design tokens
• WebAIM Contrast Checker - tool per verificare contrasto WCAG AA/AAA
• Elegant Themes Documentation: Divi 5 Variables - documentazione ufficiale
• Google Fonts - libreria font open source per typography scale
• Tailwind CSS Design System - reference per design system strutturati