Il risultato, misurato dagli autori del progetto su un tipico progetto TypeScript/Rust di medie dimensioni, è un taglio tra il 60% e il 92% dei token consumati per i comandi più frequenti. In una sessione di sviluppo reale parliamo di decine di migliaia di token risparmiati al giorno, e di context window che resta utilizzabile molto più a lungo.

Che cosa fa RTK, in pratica

RTK non è un wrapper generico: è una collezione di filtri specifici per ognuno dei comandi più usati in un workflow di sviluppo. Per ogni comando applica una o più di queste strategie:

• Smart filtering — rimuove commenti, whitespace, boilerplate, header ripetitivi (per esempio le righe Enumerating objects di Git).
• Grouping — aggrega elementi simili (file per directory, errori per tipo, log duplicati con contatore).
• Truncation — mantiene il contesto rilevante e taglia la ridondanza, conservando però l'output completo su file.
• Deduplication — comprime le righe di log ripetute con un contatore (×142).

Tecnicamente RTK è un singolo binario Rust statico, zero dipendenze di runtime, overhead inferiore ai 10 millisecondi per chiamata. Supporta oltre 100 comandi divisi per categoria:

• File system: rtk ls, rtk read, rtk grep, rtk find, rtk smart.
• Git: rtk git status, rtk git diff, rtk git log, rtk git commit, rtk git push.
• GitHub CLI: rtk gh pr list, rtk gh pr view, rtk gh issue list.
• Test runner: rtk jest, rtk vitest, rtk pytest, rtk cargo test, rtk go test, rtk rspec.
• Linter e build: rtk lint, rtk tsc, rtk next build, rtk cargo build, rtk ruff check.
• Container e cloud: rtk docker ps, rtk kubectl logs, rtk aws ec2 describe-instances.
• Utility: rtk gain (statistiche risparmio), rtk discover, rtk proxy, rtk err.

Quanto si risparmia davvero

I numeri riportati nel README ufficiale derivano da un progetto reale di medie dimensioni (TypeScript + Rust). Ecco i comandi più usati con il relativo taglio di token:

Il risparmio aggregato è circa l'80% del context speso in interazioni con la shell. Su un mese di lavoro intensivo parliamo di milioni di token, e — con i prezzi correnti delle API — di dollari risparmiati in modo trasparente, senza cambiare una riga di codice.

Installazione: 30 secondi

RTK si installa come un singolo binario in ~/.local/bin. Tre opzioni equivalenti, scegli quella più adatta al tuo sistema.

La via più rapida su macOS è Homebrew:

# installa RTK via Homebrew
brew install rtk

Su Linux o WSL funziona meglio lo script ufficiale, che scarica direttamente dal ramo master:

# installa RTK da release ufficiale
curl -fsSL https://raw.githubusercontent.com/rtk-ai/rtk/refs/heads/master/install.sh | sh

Se preferisci compilare dai sorgenti, basta Cargo:

# build locale dal repository
cargo install --git https://github.com/rtk-ai/rtk

Al termine verifica che il binario sia raggiungibile e funzioni:

# verifica installazione
rtk --version
rtk gain

Se rtk non è in PATH, aggiungi questa riga al tuo ~/.bashrc o ~/.zshrc:

# rendi rtk disponibile in ogni shell
export PATH="$HOME/.local/bin:$PATH"

Un avvertimento importante: esiste un altro crate pubblicato su crates.io con lo stesso nome (Rust Type Kit). Se rtk gain non produce statistiche di risparmio token, hai preso il pacchetto sbagliato. In quel caso disinstallalo e usa cargo install --git come mostrato sopra.

Integrazione con Claude Code e gli altri agent

Qui sta la parte più elegante: RTK non richiede di riscrivere le istruzioni di sistema o di cambiare il prompt del tuo agent. Espone un comando init che installa un hook trasparente sulle chiamate Bash. Quando Claude Code esegue git status, l'hook lo riscrive in rtk git status prima di passarlo alla shell.

Per Claude Code, Copilot, Gemini CLI, Codex e gli altri agent principali basta un comando:

# inizializza hook globale per i principali agent
rtk init -g
rtk init -g --gemini
rtk init -g --codex
rtk init -g --agent cursor
rtk init -g --agent windsurf

Per agent con plugin dedicato come Cline, Kilo Code, Antigravity e Hermes ci sono flag specifici:

# init per agent con regole project-scoped
rtk init --agent cline
rtk init --agent kilocode
rtk init --agent antigravity
rtk init --agent hermes

Supporta complessivamente 14 tra AI agent e IDE — la matrice completa è nel README del progetto. Per OpenClaw esiste un plugin dedicato installabile con openclaw plugins install ./openclaw dalla root del repository.

Limite importante: l'hook intercetta solo le chiamate al tool Bash. I tool nativi di Claude Code come Read, Grep e Glob non passano dall'hook, quindi non vengono riscritti automaticamente. Per ottenere l'output compatto in quei casi devi invocare direttamente rtk read, rtk grep o rtk find.

Il flusso, visto da vicino

Quando l'hook è attivo, ogni comando shell segue questo percorso:

1. L'agent genera una chiamata Bash (es. git status).
2. L'hook PreToolUse riscrive il comando in rtk git status.
3. La shell esegue il comando, che produce output raw (~2.000 token).
4. RTK filtra l'output in tempo reale, mantenendo solo l'essenziale (~200 token).
5. L'agent riceve l'output compatto e prosegue.

L'overhead per il filtro è inferiore ai 10 ms — impercettibile per l'utente, trasparente per l'agent. In caso di errore, RTK salva automaticamente l'output completo non filtrato in ~/.local/share/rtk/tee/<timestamp>_<cmd>.log, così l'LLM può leggere i dettagli senza rieseguire il comando.

Esempi pratici, prima e dopo

Una ls -la tipica produce 45 righe e circa 800 token. Con rtk ls la stessa directory diventa 12 righe compatte:

# output RTK di una directory di progetto
+-- src/ (8 files)
|   +-- main.rs
|   +-- lib.rs
+-- Cargo.toml
+-- README.md

Un git push standard restituisce 15 righe e ~200 token (Enumerating, Counting, Delta compression…). Con rtk git push:

# output compresso di un push Git
ok main

Una suite di test cargo test in fallimento può produrre 200+ righe. Con rtk test cargo test ottieni solo i test rossi:

# riepilogo failure-only
FAILED: 2/15 tests
test utils::test_parse ... ok
test_edge_case: assertion failed
test utils::test_format ... ok
test_overflow: panic at utils.rs:18

Per il wrapping generico su qualsiasi comando, ci sono rtk err <cmd> (filtra solo gli errori) e rtk test <cmd> (filtra solo i fallimenti). Se invece vuoi mantenere l'output raw ma tracciare il risparmio, usa rtk proxy.

Misurare il risparmio con rtk gain

Una volta che l'hook è attivo, ogni chiamata viene conteggiata. Il comando rtk gain mostra le statistiche aggregate:

# statistiche aggregate di risparmio
rtk gain

# grafico ASCII degli ultimi 30 giorni
rtk gain --graph

# cronologia dei comandi recenti
rtk gain --history

# breakdown giornaliero
rtk gain --daily

# export JSON per dashboard
rtk gain --all --format json

rtk discover fa il passo opposto: trova opportunità di risparmio che stai perdendo, ad esempio comandi per cui non esiste ancora un filtro e che vengono passati raw all'agent.

# scopri risparmi mancanti in tutti i progetti
rtk discover --all --since 7

Configurazione mirata

Il file di configurazione globale vive in ~/.config/rtk/config.toml (su macOS: ~/Library/Application Support/rtk/config.toml). Le opzioni più utili riguardano l'esclusione di comandi specifici dal rewriting e la gestione del salvataggio dell'output completo:

# config.toml di esempio
[hooks]
exclude_commands = ["curl", "playwright"]

[tee]
enabled = true
mode = "failures"

La sezione [tee] controlla se e quando salvare l'output non filtrato. Con mode = "failures" (default), il file viene scritto solo quando il comando fallisce — l'LLM può quindi leggere il contesto completo senza rieseguire nulla. Con "always" il file viene sempre salvato; con "never" mai.

Telemetria e privacy

RTK può raccogliere metriche aggregate anonime (una volta al giorno) per aiutare il team a identificare quali filtri servono e quali vanno migliorati. La telemetria è disabilitata di default e richiede consenso esplicito durante rtk init o via rtk telemetry enable. Cosa viene raccolto, in sintesi:

• Identità: hash SHA-256 salato del device (non reversibile).
• Ambiente: versione RTK, OS, architettura, metodo di installazione.
• Volume d'uso: numero di comandi nelle ultime 24h, token risparmiati.
• Qualità: top 5 comandi passthrough, parse failure, comandi con savings < 30%.
• Ecosistema: distribuzione per categoria (git 45%, cargo 20%, js 15%).

Cosa non viene raccolto: codice sorgente, path assoluti, argomenti dei comandi, segreti, environment variable, contenuti del repository. I comandi riportati sono solo nomi di tool (es. "git", "cargo"), mai righe intere. Puoi disattivare la telemetria in qualsiasi momento o richiedere la cancellazione totale:

# gestione completa della telemetria
rtk telemetry status
rtk telemetry disable
rtk telemetry forget

# blocco totale via environment
export RTK_TELEMETRY_DISABLED=1

Windows: cosa cambia

Su Windows nativo (cmd.exe o PowerShell) l'hook automatico di rewriting non funziona, perché richiede una shell Unix. RTK cade quindi in CLAUDE.md injection mode: l'agent riceve le istruzioni RTK ma i comandi non vengono riscritti automaticamente — devi invocare rtk cargo test, rtk git status eccetera in modo esplicito.

La soluzione consigliata dagli stessi autori è WSL: dentro WSL RTK lavora esattamente come su Linux, hook incluso. Per partire:

# installazione RTK dentro WSL
curl -fsSL https://raw.githubusercontent.com/rtk-ai/rtk/refs/heads/master/install.sh | sh
rtk init -g

Ricorda di non fare doppio click su rtk.exe: è un tool CLI che stampa l'usage ed esce immediatamente. Sempre da terminale, mai da Esplora Risorse.

Disinstallazione

Se RTK non fa per te, la rimozione è pulita quanto l'installazione. Tre comandi a seconda del metodo usato:

# rimozione hook, regole e settings.json
rtk init -g --uninstall

# rimozione binario
cargo uninstall rtk
brew uninstall rtk

Verdetto: quando ha senso adottarlo

RTK non è un giocattolo: è uno strumento di produttività pensato per chi usa AI agent in modo intensivo e vuole massimizzare il budget di context. I casi d'uso in cui dà il massimo:

• Sessioni lunghe di pair programming con Claude Code, Codex o Cursor, dove il context si satura in fretta.
• Progetti multi-linguaggio (Rust + TypeScript + Python + Go) con molti test runner diversi.
• Workflow DevOps pesanti su Kubernetes, Docker, AWS CLI, Pulumi — RTK copre tutti i comandi più comuni.
• Team che vogliono abbassare il costo per sessione senza toccare i prompt o i modelli usati.

Se invece usi l'agent solo per task brevi e non tiri su Docker né fai test suite grosse, il guadagno sarà marginale. Ma il costo di adozione è praticamente zero: un comando per installarlo, uno per attivarlo, e da quel momento non devi più pensarci.

Approccio pragmatico consigliato: installa RTK, lancia rtk gain dopo una giornata di lavoro reale, e guarda i numeri. Se i token risparmiati superano il costo del setup (qualche minuto), hai la risposta. Il progetto è open source Apache 2.0, sviluppato da Patrick Szymkowiak, Florian Bruniaux e Adrien Eppling, con una community attiva su Discord.

Link utili

• Repository ufficiale su GitHub
• Sito ufficiale e guida completa
• Documento di architettura interna
• Guida di installazione dettagliata
• Policy di sicurezza del progetto
• Community Discord ufficiale

La maggior parte dei temi WordPress in produzione nel 2026 ha ancora lo stesso problema del 2014: cambiare il colore primario significa cercare e sostituire in 40 file CSS, 12 file PHP e 6 shortcode. È un debito tecnico che nessuno misura ma che costa migliaia di euro l'anno a chi gestisce parchi installati sopra le 50 installazioni. Lo sappiamo bene su mrtux.it, dove la rifattorizzazione di un design system custom è una delle richieste più frequenti da parte di agenzie che ereditano siti legacy.

Quando Elegant Themes ha rilasciato Divi 5 in versione stabile il 10 giugno 2026, la notizia è stata presentata come l'ennesimo restyling di page builder. In realtà, la vera innovazione era nascosta sotto il cofano: il nuovo Preset System con Stacked Preset e Nested Preset risolve, di fatto, il problema dei design token che il mondo WordPress si porta dietro da un decennio. Combinato con l'ecosistema AI (Divi AI nativo + plugin Claude Code di terze parti come cjsimon2/Divi5-ToolKit), il risultato è il primo sistema di design veramente programmabile dentro un page builder commerciale.

In questa guida analizziamo l'architettura del Preset System, come si combina con AI assistant in locale e in cloud, e perché uno sviluppatore WordPress senior dovrebbe riconsiderare Divi 5 non come "un page builder tra i tanti" ma come un design system engine con AI integrato. Approfondiremo anche come questo si rapporta al discorso più ampio del workflow perfetto tool sviluppo web che abbiamo trattato nelle scorse settimane, perché il preset system è una tessera fondamentale del mosaico.

Cosa sono i Preset in Divi 5 e perché non sono "un'altra opzione di stile"

Definizione operativa

Un Preset in Divi 5 è un set di proprietà di stile (color, font, spacing, border, shadow, gradient, sizing) che può essere applicato a qualsiasi elemento compatibile dell'editor. La differenza rispetto ai classici stili di Divi 4 (che pure esistevano) è che i Preset 2026 supportano tre proprietà fondamentali assenti prima:

1. Persistenza globale: una modifica al Preset si propaga a tutti gli elementi che lo ereditano, ovunque siano nel sito.
2. Composabilità: più Preset possono essere impilati (Stacked) o annidati (Nested) sullo stesso elemento, con regole di precedenza esplicite.
3. Discriminazione per breakpoint: lo stesso Preset può assumere valori diversi su desktop, tablet e mobile senza duplicare il blocco.

Confronto rapido: Preset vs Design Token nativi

• Funziona quando: vuoi una libreria di stili riutilizzabile governata da regole, non da copia-incolla di CSS. AI utile per: generare preset partendo da una moodboard o da un sito esistente, audit di consistenza, refactor di stili duplicati. Rischio: proliferazione di preset simili se non si impone una governance.
• Non funziona quando: stai facendo un sito vetrina da 5 pagine con budget limitato. Il setup iniziale dei Preset ha un costo di onboarding che si ammortizza solo sopra le 10-15 pagine con componenti ripetuti.

Anatomia tecnica di un Preset

Ogni Preset è un oggetto JSON-like memorizzato come post meta con chiave _divi_preset_options. La struttura interna segue lo schema del Divi 5 Shortcode Module, con sezioni advanced, design, responsive e state. Per uno sviluppatore che vuole leggerli da codice:

// Recupera tutti i Preset registrati
$presets = get_posts([
  'post_type'      => 'et_pb_layout',  // o un CPT dedicato nei rilasci più recenti
  'posts_per_page' => -1,
  'meta_key'       => '_divi_preset_type',
  'meta_value'     => 'global',        // 'global' | 'category' | 'module'
]);

La vera novità del 2026 è che i Preset non sono solo "stili applicati a posteriori" ma derivano da un Design Variable System centralizzato. Cambiando una variabile (--et-bg-color-primary), tutti i Preset che la referenziano si aggiornano automaticamente.

Stacked Preset: la composizione che mancava a WordPress

Il problema del "preset monolitico"

In Divi 4 e in tutti i page builder tradizionali, applicare più stili allo stesso elemento significava scegliere un preset o un altro in modo esclusivo. Nella pratica, però, un pulsante CTA può essere definito da: tipografia del preset "Brand Button", colori del preset "Primary Action", border-radius del preset "Rounded UI", ombra del preset "Elevation 2". Quattro preset, un solo pulsante.

Come funzionano gli Stacked Preset

Lo Stacked Preset di Divi 5 permette di impilare più preset sullo stesso modulo con un sistema di layering esplicito: ogni preset ha un ordine (z-index semantico), e l'ultimo in cima sovrascrive solo le proprietà che definisce, non l'intero stile. Tecnicamente è un CSS cascade controllato:

/* Risultato finale del pulsante CTA dopo 4 preset stacked */
.cta-button {
  /* Da 'Brand Button' */
  font-family: var(--et-font-heading);
  font-weight: 600;
  /* Da 'Primary Action' */
  background: var(--et-color-primary);
  color: var(--et-color-on-primary);
  /* Da 'Rounded UI' */
  border-radius: 8px;
  /* Da 'Elevation 2' */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Questo significa che un'agenzia può mantenere preset atomici (uno per proprietà) e combinarli per produrre varianti. Il refactor di un design system passa da "refactor di 40 file CSS" a "rinominare una variabile in un preset".

Esempio reale: refactor di un sito corporate

Su un sito corporate di 80 pagine di un cliente finance, abbiamo migrato da Divi 4 a Divi 5 in 3 giornate uomo. Il vantaggio degli Stacked Preset si è visto quando il cliente ha chiesto di cambiare la tonalità del primary color in 4 sfumature più chiare. In Divi 4 sarebbe stata una giornata di find-and-replace. Con Divi 5: 1 click sulla Design Variable, rigenerazione del CSS, test. Tempo reale: 18 minuti. ROI del preset system dimostrato.

Nested Preset: i preset dentro i preset

Definizione del pattern

Il Nested Preset permette di creare preset che ereditano da altri preset. È il pattern object-oriented dei design token: hai un preset Card.Base che definisce padding, border-radius e ombra di base. Poi crei Card.Elevated che eredita tutto da Card.Base e aggiunge box-shadow: 0 8px 24px rgba(0,0,0,0.15). Infine Card.CTA che eredita da Card.Elevated e aggiunge sfondo colorato.

Quando usare Nested vs Stacked

• Nested per relazioni "is-a": una Card.CTA è una Card.Elevated. Catena di ereditarietà, modifiche che si propagano.
• Stacked per composizione ortogonale: tipografia, colori, spacing, ombra sono dimensioni indipendenti che si combinano.

Confondere le due semantiche è l'errore più comune dei team che adottano Divi 5. La regola pratica è: se un preset non ha senso da solo, è Nested. Se ha senso da solo e può essere combinato con altri indipendentemente, è Stacked.

Combinare Preset System con AI: tre workflow concreti

1. Generazione di preset da moodboard con Divi AI

Divi AI (la suite integrata nel Visual Builder dal 2024, evoluta in Divi 5) può generare preset partendo da descrizioni testuali o immagini. Il workflow operativo è:

1. Carichi una moodboard con 3-5 colori e 2 font.
2. Prompt: "Genera un preset globale Primary Button con questi colori, font Inter, padding 14px 28px, border-radius 8px, hover con luminosità -10%".
3. Divi AI crea il preset nel Visual Builder, applicabile con un click.

Limite: Divi AI è un generatore, non un auditor. Genera preset belli ma non necessariamente coerenti con il resto del design system. Per questo serve il workflow 2.

2. Audit di consistenza con Claude Code e Divi5-ToolKit

Il plugin open source cjsimon2/Divi5-ToolKit è il primo plugin Claude Code dedicato a Divi 5. Esporta la conoscenza dei selettori, dei breakpoint, del Design Variable System e del modulo library in un formato che Claude può leggere da terminale, editor o CI/CD. Il workflow:

# Audit di consistenza dei preset di un sito
claude code "Analizza i preset di questo sito Divi 5, identifica preset duplicati o con colori fuori dalla palette tokens.json, suggerisci merge"

# Refactor assistito: rinominare una variabile in tutti i preset che la usano
claude code "Rinomina --et-color-primary in --et-color-brand-500 ovunque, aggiorna preset che la referenziano"

Questo è il vero salto di qualità: AI che conosce la semantica del preset system, non solo che genera CSS casuale. Per un'agenzia che gestisce 20+ siti Divi 5, il risparmio è di ore a settimana.

3. Generazione di codice con AI e integrazione nei preset

Per i team che scrivono CSS custom, AI può generare preset-ready CSS. Esempio di prompt che funziona:

# esempio codice
Scrivi CSS per un preset Divi 5 'Card.HoverLift' che eredita da Card.Base e aggiunge transition transform 200ms ease e translateY(-4px) su hover. Usa solo variabili del Design Variable System.

Il risultato è codice che si integra senza hack nel preset system, perché AI ha rispettato la convenzione delle variabili. Su questo terreno si gioca la partita della produttività reale, non dell'effetto wow.

Limiti reali del preset system + AI: cosa non funziona

Limite 1: AI non conosce la gerarchia semantica

Se chiedi a Divi AI "creami 10 preset per un e-commerce", genererà 10 preset arbitrari, non una gerarchia coerente. La semantica Card > Card.Elevated > Card.CTA va progettata da un designer/sviluppatore, non generata.

Limite 2: Preset monolitici su siti legacy

Se un sito ha 5 anni di CSS custom accumulato, il preset system non fa magie. Serve un audit preliminare e una migrazione guidata. Su mrtux.it abbiamo documentato il workflow di migrazione Divi 4 → 5, ma il preset system richiede un passaggio ulteriore di consolidazione che è un progetto a sé.

Limite 3: Performance del JSON meta

Con 100+ preset registrati come post meta, le query get_posts rallentano. La soluzione è spostare i preset in una custom table (feature in roadmap Divi 5.x 2026). Per ora: caching transiente aggressivo.

// Cache transient per i preset
$presets = get_transient('divi5_presets_all');
if (false === $presets) {
  $presets = get_posts([...]);
  set_transient('divi5_presets_all', $presets, HOUR_IN_SECONDS);
}

Roadmap adozione per studi e agenzie

Fase 1 (settimana 1-2): audit e setup base

1. Esporta tutti i colori, font, spacing, border-radius, ombre usati nel sito corrente in un file tokens.json.
2. Crea in Divi 5 i Design Variable corrispondenti.
3. Converti i 5-10 shortcode/custom CSS più usati in preset globali.

Fase 2 (settimana 3-4): preset stacked

1. Identifica 3 dimensioni ortogonali del design (tipografia, colore, spacing).
2. Crea preset atomici per ogni dimensione.
3. Testa su 5 pagine template prima di applicare globalmente.

Fase 3 (settimana 5-6): preset nested

1. Definisci la gerarchia semantica (es. Button > Button.Primary > Button.Primary.Large).
2. Crea preset figli che ereditano dai padri.
3. Documenta la gerarchia in un README di progetto.

Fase 4 (settimana 7+): integrazione AI

1. Sperimenta Divi AI per generazione di nuovi preset.
2. Installa cjsimon2/Divi5-ToolKit per audit via Claude Code.
3. Automatizza i controlli CI: "se un preset usa un colore non in tokens.json, fallisci la build".

Confronto con alternative non-Divi

• Bricks Builder: ha un design system simile (custom CSS variables + classes), ma preset riutilizzabili con un click non sono first-class. AI utile per: generare classi CSS, audit token.
• Oxygen Builder: design system più developer-friendly (CSS puro, no shortcode), ma curva di apprendimento ripida per team non tecnici.
• GenerateBlocks + GeneratePress: lightweight, ottimo per chi vuole controllo totale, ma preset system va costruito da zero. È l'approccio che preferiamo su mrtux.it per siti custom headless.
• WordPress nativo + FSE + theme.json: dal 2024 WordPress 6.6+ ha un sistema di token globali (theme.json + wp_global_styles), ma preset riutilizzabili cross-template sono ancora work in progress. WP 7.0 migliora ma non raggiunge la maturità di Divi 5.

FAQ

Divi 5 è compatibile con i miei layout Divi 4?

Sì, la retrocompatibilità è garantita a livello di shortcode. I layout Divi 4 vengono importati e renderizzati correttamente. Il preset system è nuovo e non si applica retroattivamente, ma puoi iniziare a usarlo sui nuovi layout senza toccare i vecchi.

Quanto costa Divi 5?

Divi 5 è incluso in tutti i piani Elegant Themes (Divi, Extra, Bloom, Monarch). Licenza annuale o lifetime. Divi AI è un add-on con costo aggiuntivo o bundle con la licenza.

Posso usare preset Divi 5 in un tema child?

Sì, i preset sono template-agnostici. Puoi definire preset in un tema child e usarli in qualsiasi layout del sito. È il pattern raccomandato per agenzie che gestiscono più brand.

Claude Code è l'unica opzione per AI locale su Divi 5?

No. Funzionano anche Cursor, Windsurf e qualsiasi tool compatibile con il Model Context Protocol. La scelta dipende dal workflow del team più che dalle capacità del singolo tool.

I preset influenzano la performance del frontend?

No, i preset sono espansi in CSS statico al salvataggio del layout. Il frontend riceve un CSS finale identico a quello di un sito Divi 4. Il preset system è un'astrazione di authoring, non un runtime cost.

Posso esportare preset tra siti diversi?

Sì, esiste un import/export JSON di preset. È il metodo raccomandato per clonare un design system su un nuovo cliente senza dover rifare il setup.

Conclusione: design system engine, non page builder

Il Preset System di Divi 5, combinato con l'ecosistema AI (Divi AI nativo + Claude Code plugin), ridefinisce cosa significa "sviluppare temi WordPress" nel 2026. Non è più questione di scegliere tra page builder e block theme: è una questione di avere o non avere un design system engine che governa consistenza, scalabilità e manutenibilità. Le agenzie che adottano preset + AI in modo disciplinato risparmiano ore a settimana, i freelance che lo ignorano vengono progressivamente tagliati fuori da progetti sopra una certa complessità.

La mappa pratica è chiara: audit dei token esistenti, creazione di Design Variable, preset atomici stacked, gerarchia semantica nested, AI assistant per audit e generazione assistita. Una roadmap in 4 fasi, dalla settimana 1 al mese 2. Su mrtux.it continueremo a monitorare l'evoluzione del preset system e i tool AI che lo rendono operativo, con casi studio reali da agenzie italiane.

Riferimenti utili per approfondire

• The Ultimate Guide To Presets In Divi 5 (Including New Features) - Elegant Themes - guida completa ufficiale al preset system con esempi di Stacked e Nested.
• Introducing Divi AI For Divi 5 - Elegant Themes - presentazione della suite AI integrata nel Visual Builder.
• Everything You Need To Know About Divi AI For Divi 5 - panoramica estesa su limiti generazioni e pricing.
• cjsimon2/Divi5-ToolKit su GitHub - plugin Claude Code open source per Divi 5, primo del suo genere.
• Divi 5.7 Release Notes - Elegant Themes - note di rilascio della stable del 10 giugno 2026 con preset system GA.
• Divi AI - Technical Documentation - documentazione tecnica non ufficiale sull'architettura interna di Divi AI.
• WP Tavern - WordPress News - fonte di riferimento per notizie WordPress con copertura costante di Divi.
• WPBeginner - WordPress tutorials - tutorial pratici su page builder e design system.
• Kinsta Blog - WordPress Hosting - analisi di performance e design system engineering su WP.
• WordPress Plugin Directory - Design Tokens - sezione plugin per design token e theme.json utilities.
• Torque Magazine - WordPress News - magazine con articoli su workflow agenzia e tool AI.
• Mrtux.it - Sviluppo Web WordPress - archivio articoli tecnici su workflow, design system e AI per WP.

Ma quale scegliere per il tuo workflow? In questo confronto definitivo analizziamo costi, funzionalità, integrazioni e casi d'uso ideali per ogni strumento.

Tabella Comparativa Rapida

OpenCode: L'AI Autonoma che Lavora in Background

Cos'è e Come Funziona

OpenCode rappresenta un cambio di paradigma nel mondo degli AI coding assistant. A differenza di Copilot che reagisce ai tuoi input, OpenCode è proattivo: un server in background che si sveglia autonomamente ogni 30 minuti per analizzare la tua codebase.

Architettura Innovativa

• Background Server (sveglia ogni 30 min)
• Plan Mode (read-only): Esplora codebase
• Build Mode (read/write): Implementa modifiche
• LSP Integration: Refactoring semantico

Funzionalità Chiave

Plan Mode: Modalità read-only che esplora la codebase, mappa la struttura e produce una strategia di implementazione senza modificare nulla.

Build Mode: Accesso in lettura/scrittura per eseguire il piano, modificare file, eseguire test.

Multi-Provider: Switch dinamico tra OpenAI, Anthropic, Google e modelli locali (Ollama) nella stessa sessione.

LSP Integration: Con OPENCODE_EXPERIMENTAL_LSP_TOOL=true, abilita refactoring semantico con goToDefinition, findReferences e call hierarchy.

Pro e Contro

Vantaggi:

• Completamente autonomo
• Multi-provider
• Privacy totale (self-hosted)
• Gratuito
• LSP per refactoring avanzato

Svantaggi:

• Setup iniziale complesso
• Richiede risorse locali
• Meno indicazioni in tempo reale
• Documentazione ancora limitata
• Beta, potenziali bug

Caso d'Uso Ideale

OpenCode è perfetto per progetti a lungo termine dove vuoi un assistente che pensa mentre tu fai altro. Ideale per refactoring di grandi codebase, audit di sicurezza e ottimizzazione architetturale.

Claude Code: La Potenza di Claude 3.5 nel Terminale

Cos'è e Come Funziona

Claude Code è il tool CLI di Anthropic che porta la potenza di Claude 3.5 Sonnet direttamente nel tuo terminale. A differenza di Copilot che suggerisce snippet mentre scrivi, Claude Code comprende il contesto dell'intero progetto, può eseguire comandi shell, leggere e modificare file, e persino fare debugging.

Installazione e Setup

# Installazione via npm
npm install -g @anthropic-ai/claude-code

# Configurazione API key
export ANTHROPIC_API_KEY="your-api-key"

# Avvio in un progetto
cd your-project
claude

Comandi Essenziali

# Analizza il progetto
claude "Analizza la struttura di questo progetto WordPress"

# Genera codice
claude "Crea un plugin WooCommerce per gestire abbonamenti"

# Debugging
claude "Trova il bug in functions.php riga 145"

# Refactoring
claude "Ottimizza le query del database in questo plugin"

Pro e Contro

Vantaggi:

• Claude 3.5 Sonnet (top quality)
• Context window 200K token
• CLI agnostica (qualsiasi editor)
• Comprensione profonda del progetto
• Esegue comandi shell

Svantaggi:

• Costo pay-per-use API
• Rate limits su API
• Necessita terminale
• Meno indicazioni inline
• Setup API key richiesto

Caso d'Uso Ideale

Claude Code eccelle per sviluppo complesso dove serve comprensione profonda del contesto. Perfetto per WordPress development, debugging intricato e generazione di codice complesso con logica business.

GitHub Copilot: Il Pair Programmer Classico

Cos'è e Come Funziona

GitHub Copilot è il pioniere degli AI coding assistant. Lanciato nel 2021, rimane lo strumento più diffuso grazie alla sua integrazione nativa con VS Code e la familiarità degli sviluppatori. Funziona come un pair programmer in tempo reale, suggerendo codice mentre scrivi.

Funzionalità Chiave

Inline Suggestions: Suggerimenti mentre scrivi, accettabili con Tab.

Copilot Chat: Chat integrata per domande sul codice.

Copilot Workspace: Generazione di progetti completi da descrizione.

Multi-IDE: VS Code, JetBrains, Neovim, Visual Studio.

Pro e Contro

Vantaggi:

• Integrazione perfetta VS Code
• Suggerimenti in tempo reale
• Facile da usare
• Copilot Chat per domande
• Aggiornamenti frequenti

Svantaggi:

• Abbonamento richiesto
• Privacy: codice inviato a GitHub
• Context window limitata
• Meno autonomia
• Meno comprensione del progetto globale

Caso d'Uso Ideale

Copilot è ideale per coding quotidiano dove vuoi suggerimenti istantanei mentre scrivi. Perfetto per boilerplate, snippet comuni e pair programming in tempo reale.

Confronto per Casi d'Uso Specifici

Per Sviluppatori WordPress

Per Progetti Enterprise

Per Startup e Indie Hackers

Per Progetti Open Source

Analisi Costi-Benefici

OpenCode

• Costo: Gratuito (self-hosted)
• Requisiti: Server locale con risorse per LLM
• ROI: Altissimo per progetti a lungo termine
• Hidden costs: Hardware per modelli locali

Claude Code

• Costo: Pay-per-use API (~$3-15/mese per uso moderato)
• Modello: Claude Sonnet ($3/1M input, $15/1M output)
• ROI: Alto per progetti complessi
• Hidden costs: Rate limits possono rallentare

GitHub Copilot

• Costo: $10/mese (Individual), $19/mese (Business), $39/mese (Enterprise)
• ROI: Alto per coding quotidiano
• Hidden costs: Privacy del codice

Privacy e Sicurezza

OpenCode

Massima privacy: Tutto gira localmente, nessun dato inviato esternamente.

Self-hosted: Controllo completo su dove e come gira.

Multi-provider: Puoi usare modelli locali (Ollama) per privacy totale.

Claude Code

Privacy locale: Il codice viene processato localmente, solo le query API vanno ad Anthropic.

API calls: Le richieste viaggiano su server Anthropic.

No training on code: Anthropic non usa il tuo codice per training.

GitHub Copilot

Codice inviato a GitHub: Per funzionare, il codice viene inviato ai server Microsoft.

Training on public code: Addestrato su codice pubblico, potenziali problemi di licenza.

Enterprise: Versione Business/Enterprise offre più privacy.

Workflow Consigliati

Workflow Ibrido: OpenCode + Copilot

1. Mattina: OpenCode analizza il progetto in background
2. Sviluppo: Copilot suggerisce snippet in tempo reale
3. Sera: OpenCode propone refactoring e ottimizzazioni

Workflow Claude Code + VS Code

1. Terminale: Claude Code per architettura e logica complessa
2. Editor: VS Code per editing e debugging
3. Iterazione: Claude Code per refactoring e ottimizzazione

Workflow Solo OpenCode

1. Setup: Configura OpenCode con multi-provider
2. Plan Mode: Lascia analizzare il progetto
3. Review: Esamina le proposte
4. Build Mode: Approva le modifiche

Verdetto Finale

Il Vincitore Dipende dal Tuo Stile

La Nostra Raccomandazione

Per sviluppatori WordPress che lavorano su progetti complessi: Claude Code per la comprensione profonda di hooks, filters e conventions WP.

Per team enterprise con requisiti di privacy: OpenCode per il controllo totale e l'assenza di dati inviati esternamente.

Per indie hackers e startup: GitHub Copilot per la produttività immediata e il costo prevedibile.

Il Futuro degli AI Coding Assistant

Il 2026 sta vedendo una convergenza: OpenCode sta aggiungendo feature inline, Claude Code sta migliorando l'autonomia, e Copilot sta integrando agenti più intelligenti.

La vera rivoluzione arriverà quando questi strumenti combineranno:

• Autonomia di OpenCode
• Qualità di Claude Code
• Integrazione di Copilot

Fino ad allora, la scelta dipende dal tuo workflow e dalle tue priorità.

Domande Frequenti

Posso usare più di uno strumento insieme?

Assolutamente sì! Molti sviluppatori usano Copilot per suggerimenti inline e Claude Code per architettura. OpenCode può girare in background mentre usi entrambi.

Quale ha il modello AI più potente?

Claude Code usa Claude Sonnet, attualmente considerato il top per coding. OpenCode può usare qualsiasi modello, inclusi Claude e GPT-5o.

OpenCode è davvero gratuito?

Sì, ma richiede hardware per girare localmente o API key per i provider cloud. Il software è open source e gratuito.

GitHub Copilot vale i $10/mese?

Per la maggior parte degli sviluppatori, sì. La produttività guadagnata supera ampiamente il costo. Per progetti occasionali, Claude Code pay-per-use potrebbe essere più economico.

Quale è meglio per principianti?

GitHub Copilot per la facilità d'uso e i suggerimenti in tempo reale. Claude Code richiede più conoscenza del terminale.

Aggiornato ad Aprile 2026. I prezzi e le funzionalità potrebbero cambiare con gli aggiornamenti dei prodotti.