Creazione pagine con GreenShift e l’IA





Creazione pagine con GreenShift e l’IA



Tutorial · WordPress + Claude + GreenShift

Creare pagine web
con GreenShift e l’IA

Come ho connesso Claude AI a WordPress per costruire layout professionali in linguaggio naturale, senza scrivere una riga di codice — usando il plugin GreenShift e il protocollo MCP.

Scopri il metodo →
Parliamone
Scorri per scoprire

Gli strumenti

Tre tecnologie, un solo flusso

Ogni pezzo ha un ruolo preciso. Insieme, creano un sistema dove puoi descrivere a parole una pagina web e vederla apparire su WordPress in pochi minuti.

🤖

Claude AI

Il modello di Anthropic che capisce le tue istruzioni in italiano, progetta la struttura della pagina e genera i blocchi Gutenberg nel formato corretto per GreenShift.

🟢

GreenShift / GreenLight

Il plugin WordPress più avanzato per il page building con Gutenberg. Offre elementi CSS completi, animazioni, layout responsive e un sistema di classi locali che l’IA può scrivere direttamente.

🔌

Protocollo MCP

Model Context Protocol è il “ponte” che permette a Claude di comunicare direttamente con la REST API di WordPress. L’IA legge, scrive e pubblica pagine come se fosse un editor umano.

Il processo passo per passo

Dal prompt alla pagina pubblicata

Non è magia — è un flusso tecnico preciso. Ecco esattamente cosa succede quando chiedo a Claude di creare una pagina.

01

Configuro il server MCP su Claude Desktop

Nel file di configurazione di Claude Desktop aggiungo le credenziali del sito WordPress: URL, username e una Application Password generata dal pannello admin. Claude diventa così un editor autorizzato del sito.

claude_desktop_config.json

02

Descrivo la pagina in linguaggio naturale

Scrivo a Claude quello che voglio: “Crea una pagina hero con sfondo scuro, titolo grande, sottotitolo e bottone CTA. Usa la palette del sito”. Non scrivo HTML, non tocco il codice.

Chat in italiano

03

Claude progetta l’HTML semantico

L’IA costruisce un file HTML completo con CSS avanzato: animazioni, variabili, hover states, responsive breakpoints. Ogni classe ha un prefisso unico per evitare conflitti con il tema WordPress.

HTML + CSS vanilla

04

Lo script convert.js trasforma tutto in blocchi GreenShift

Un convertitore Node.js (parte della skill GreenLight) analizza l’HTML e genera il formato corretto dei blocchi Gutenberg: un Style Manager con tutte le classi CSS e i blocchi element annidati.

greenlight-vibe/scripts/convert.js

05

Claude pubblica via MCP sulla REST API di WordPress

Usando il server MCP attivo, Claude chiama direttamente l’endpoint wp/v2/pages e pubblica la pagina — con tutti i blocchi GreenShift già formattati. La pagina appare in WordPress in meno di un secondo.

WordPress REST API

La configurazione

Il file config che connette tutto

Bastano poche righe nel file claude_desktop_config.json per dare a Claude l’accesso al tuo sito WordPress. L’autenticazione avviene tramite le Application Passwords native di WordPress — nessun plugin extra necessario.

  • ✓
    Supporta più siti contemporaneamente (un server MCP per sito)
  • ✓
    Usa le Application Passwords native di WordPress — sicuro e reversibile
  • ✓
    Claude può leggere, creare, aggiornare e cancellare pagine, post, media
  • ✓
    Nessun plugin aggiuntivo su WordPress — solo REST API standard



claude_desktop_config.json

{
“mcpServers”: {
“wordpress-miosito”: {
“command”: “npx”,
“args”: [
“-y”,
“@automattic/mcp-wordpress-remote”
],
“env”: {
“WP_API_URL”: “https://tuosito.com”,
“WP_USERNAME”: “admin”,
“WP_APP_PASSWORD”: “xxxx xxxx xxxx xxxx”
}
}
}
}

Il flusso visuale

Da un’idea a una pagina live

Il processo completo dura dai 3 ai 10 minuti. Dall’idea alla pagina pubblicata su WordPress.

💬

Prompt in italiano

→
🤖

Claude AI progetta

→
📝

HTML + CSS generato

→
⚙️

convert.js in blocchi

→
🚀

Pubblicato via MCP

I risultati

Cosa si ottiene con questo metodo

~5 min

Tempo medio per creare una pagina completa con layout, stile e animazioni

0 righe

Di codice scritto manualmente — tutto generato e pubblicato dall’IA

100%

Modificabile in Gutenberg dopo la pubblicazione, blocco per blocco

🚀

Vuoi applicarlo al tuo sito?

Posso configurare questo flusso su WordPress, adattarlo alla tua palette e struttura, e mostrarti come usarlo in autonomia.

Contattami →
Torna alla home