Creazione di una Competenza per la Generazione di Mockup

Dopo aver raccolto i lead, il passo successivo consiste nel creare un mockup personalizzato del sito web per ciascun potenziale cliente. Questo rende l’attività di outreach molto più efficace perché, invece di inviare un messaggio generico, puoi mostrare a un’azienda come potrebbe apparire il suo sito web ridisegnato.

In questo esempio viene creata una seconda skill di Claude Code chiamata generate-mockup. Questa skill prende un lead dal database, solitamente tramite il nome dello studio o il dominio, e segue un processo ripetibile.

La skill:

• Legge i dettagli del lead dal database;
• Visita il sito web attuale del potenziale cliente;
• Estrae informazioni reali come il nome dello studio, i servizi, la posizione e i dettagli di contatto;
• Utilizza questi contenuti per generare un redesign moderno di una pagina;
• Segue le linee guida di design già definite nel progetto;
• Salva il mockup come file HTML autonomo;
• Aggiorna il database con il percorso del mockup e cambia lo stato del lead in mockup-ready.

Per mantenere l’output semplice e portabile, il mockup viene creato con HTML semplice e Tailwind CSS tramite CDN. Questo significa che ogni pagina può essere ospitata facilmente senza la necessità di configurare un’app completa.

Poiché la skill è memorizzata nella cartella .claude/skills del progetto, può essere riutilizzata ogni volta che serve. Claude potrebbe non rilevare sempre automaticamente la skill in Claude Desktop, quindi può essere utile indicare esplicitamente a Claude quale skill usare e dove si trova.

Quando la skill viene eseguita con successo, crea un mockup basato su informazioni reali dal sito del potenziale cliente. Questo aiuta a evitare affermazioni inventate e rende il risultato più credibile. Ad esempio, il mockup generato può includere servizi reali, orari di apertura e informazioni sul team, mentre segnala chiaramente le sezioni segnaposto come recensioni o moduli di contatto inattivi.

Questo processo è potente perché trasforma i dati dei lead in una risorsa di vendita personalizzata. Invece di progettare manualmente un’anteprima per ogni potenziale cliente, Claude può gestire gran parte del lavoro e creare un flusso di lavoro ripetibile che può essere successivamente migliorato, ampliato e ulteriormente automatizzato.