ACQUISIZIONE
Prenota
Strumenti · Risorsa gratuita

Le 8 skill per animare con Claude: quale ti serve e come si installa

Animate, GSAP, Claude Design Skills, Rive, Wiggle, Text-to-Lottie, Remotion e Three.js: cosa fa ognuna, il comando provato per installarla e cosa è gratis davvero

Di Nicola Lampitelli · 9 minuti di lettura · aggiornata il

Installala nella tua AILeggi la guida
CondividiWhatsAppLinkedIn
Una pellicola con tre fotogrammi da cui escono un pulsante, una forma che rimbalza su una molla e un cubo che ruota, con la tessera di Claude accanto
In questa guida
  1. 1Come lo uso io
  2. 2Cosa ti serve
  3. 3Come funziona
  4. 4Passo 1 · Scegli una skill sola
  5. 5Passo 2 · Guarda dentro prima di installare
  6. 6Passo 3 · Installa
  7. 7Passo 4 · Fai la prima prova
  8. 8Passo 5 · Scrivi le tue regole di movimento
  9. 9Cosa è gratis e cosa no
  10. 10Se ti esce così
  11. 11Prima di usarlo davvero
  12. 12Ora tocca a te
  13. 13Il prossimo passo
  14. 14Installala nella tua AI

1.Come lo uso io

Quando lascio fare a Claude una pagina o un video senza indicazioni, il punto debole è sempre il movimento. Tutto compare in dissolvenza, alla stessa velocità, e si capisce subito che l'ha fatto un'AI. Le skill di animazione rimediano a questo: mettono in mano a Claude le regole di chi anima per mestiere.

Nel carosello ne ho messe in fila otto, fra quelle che preferisco. Fanno lavori diversi: alcune animano un sito, una anima solo i loghi, una monta video, una lavora in 3D. Qui trovi cosa fa ognuna, come si installa e cosa è gratis davvero.

2.Cosa ti serve

Claude Code

Installato e collegato al tuo account (Pro o Max). Come si fa è in fondo alla guida.

Node.js e Git

Servono al comando che scarica le skill. Nel Terminale prova npx --version e git --version: se uno non risponde, Node si scarica da nodejs.org e Git da git-scm.com.

Una cosa sola da animare

Una pagina che hai già, il tuo logo in SVG o PNG, l'idea di un video di dieci secondi.

Una cartella di prova

Le skill si installano cartella per cartella. La prima prova falla in una cartella nuova e lascia stare il sito che hai online.

3.Come funziona

Una skill è una cartella di istruzioni che Claude Code legge quando serve. Queste otto gli insegnano a usare bene uno strumento di animazione. Tu descrivi cosa deve muoversi, lui scrive l'animazione nella tua cartella, tu guardi e correggi a parole.

Tre parole che incontrerai:

  • Repository: la cartella pubblica su GitHub dove vive una skill. Si indica con autore/nome.
  • Libreria: codice già scritto da altri che il tuo sito usa. GSAP, Motion e Three.js sono librerie di animazione.
  • Lottie: un formato di animazione leggero, un file .json che siti e app sanno riprodurre.
SENZA SKILL

«Anima questa pagina»: tutto entra in dissolvenza alla stessa velocità, anche quello che doveva stare fermo.

CON UNA SKILL COME ANIMATE

Claude si chiede prima se quell'elemento va animato. Poi sceglie curva e durata da regole scritte, e te lo dice in una riga.

Da qui in poi

Qui comincia la parte pratica.

Dimmi chi sei e la guida si apre tutta: i passi, gli errori tipici e il file per la tua AI. Le risorse nuove te le mando per email; il telefono serve per sentirci a voce, se ha senso.

Gratis. Lo compili una volta: le altre guide restano aperte su questo dispositivo.

Cosa trovi dopo

  1. 4Passo 1 · Scegli una skill sola
  2. 5Passo 2 · Guarda dentro prima di installare
  3. 6Passo 3 · Installa
  4. 7Passo 4 · Fai la prima prova
  5. 8Passo 5 · Scrivi le tue regole di movimento
  6. 9Cosa è gratis e cosa no
  7. 10Se ti esce così
  8. 11Prima di usarlo davvero
  9. 12Ora tocca a te
  10. 13Il prossimo passo
Per la tua AI

Non leggerla soltanto: falla applicare.

Questa guida esiste anche come file Markdown, il formato che le AI leggono meglio. In testa ha già le istruzioni: lo dai a Claude Code (o lo alleghi a Claude, a ChatGPT) e l'AI la applica al tuo caso, chiedendoti i dati che le servono. Niente da riscrivere, niente da spiegare.

Cosa ottieni: La skill di animazione giusta per il tuo caso installata nella cartella del progetto, la prima animazione di prova e il file regole-movimento.md con le scelte da riusare ogni volta.

Gratis. Ti chiedo chi sei e come trovarti: le risorse nuove arrivano per email. Come si installa.

Installala nella tua AI

Il file che scarichi non è un riassunto: è la guida intera più le istruzioni per l'AI, scritte in testa. Tu lo consegni, lei lo legge, ti fa le domande e produce il risultato. Qui: La skill di animazione giusta per il tuo caso installata nella cartella del progetto, la prima animazione di prova e il file regole-movimento.md con le scelte da riusare ogni volta.

Con Claude Code

Consigliato

Claude Code lavora dentro una cartella del tuo computer: legge il file, scrive i risultati lì e li ritrovi la prossima volta. Serve un account Claude con piano Pro o Max (non è nel piano gratuito).

  1. 1
    Installa Claude Code, una volta sola. Apri il Terminale (su Mac: cerca «Terminale» con Spotlight; su Windows: «PowerShell») e incolla il comando. Al primo avvio si apre il browser per entrare con il tuo account Claude.
    ComandoMac
    curl -fsSL https://claude.ai/install.sh | bash
    ComandoWindows (PowerShell)
    irm https://claude.ai/install.ps1 | iex
  2. 2
    Scarica il file dal riquadro «Per la tua AI» e mettilo in una cartella: quella del lavoro a cui vuoi applicarlo, o una nuova (per esempio guide-ai).
  3. 3
    Apri il Terminale in quella cartella. Il modo più semplice: scrivi cd, uno spazio, trascina la cartella dentro la finestra del Terminale e premi Invio.
  4. 4
    Avvia Claude Code scrivendo claude e premendo Invio. Poi incolla il comando della guida e rispondi alle domande, una alla volta.
    Terminalecosì, per esempio
    $ claude

> Leggi il file guida-skill-animazioni-claude.md e segui le istruzioni scritte all'inizio.

  Ho letto la guida. Prima domanda, una alla volta:
  qual è la richiesta che rifai più spesso?

Su claude.ai, senza installare niente

Apri una chat nuova su claude.ai, allega il file con la graffetta e scrivi la frase qui sotto. Se usi i Progetti, aggiungi il file ai contenuti del progetto: resta a disposizione in ogni chat.

Leggi le istruzioni all'inizio del file allegato e seguile.

Con ChatGPT o un'altra AI

Allega il file alla chat e scrivi la stessa frase. Le istruzioni sono pensate per Claude Code: dove parlano di cartelle e comandi, l'AI ti darà il testo da copiare al posto di scriverlo lei sul tuo computer.

Vale per qualunque assistente che legge i file allegati.

CondividiWhatsAppLinkedIn

Continua con

Vuoi che un sistema così lo costruiamo insieme nella tua azienda? Prenota la call conoscitiva: 30 minuti, senza impegno.