AI slop nelle interfacce: 8 librerie UI da collegare a Claude Code e Codex per avere componenti veri

Le interfacce generate dall’AI si riconoscono a colpo d’occhio: stessa hero, stesso gradiente viola, stesse tre card con l’icona sopra. È l’AI slop delle UI. La causa sta in quello che diamo al modello: senza componenti veri a disposizione, Claude Code e Codex ripiegano sui pattern più comuni. Otto librerie risolvono il problema, a patto di collegarle all’agente invece di copiarle a mano.

Perché le interfacce fatte con l’AI sembrano tutte uguali?

Claude Code costruisce un’interfaccia partendo da quello che ha nel contesto. Se nel contesto non c’è nessun componente di riferimento, l’agente sceglie la soluzione più frequente: la landing page con hero centrata, gradiente e tre card.

La soluzione è dare a Claude Code dei componenti veri. Il punto che conta: queste librerie si collegano a Claude Code o a Codex tramite MCP, skill o pacchetti npm. L’agente le consulta da solo quando gli servono.

Un MCP (Model Context Protocol) è un connettore standard che permette a un agente AI di interrogare un servizio esterno. Una skill è un pacchetto di istruzioni che l’agente carica quando il compito lo richiede.

Quali sono le 8 librerie per eliminare l’AI slop?

1. OriginKit: componenti animati via MCP

OriginKit è una libreria gratuita di componenti animati, con codice open source sotto licenza MIT. Si collega a Claude Code come MCP e Claude Code la sfoglia da solo: se chiedo una hero animata, l’agente va a cercarla nel catalogo di OriginKit. Per scaricare il sorgente dei componenti serve una API key gratuita.

2. 21st.dev: la libreria della community

21st.dev segue la stessa idea di OriginKit, su scala molto più grande: il catalogo dichiara oltre 12.000 componenti React pubblicati dalla community. Un comando per installarla, una API key presa su 21st.dev/mcp e Claude Code può usarla subito. La ricerca nel catalogo è gratuita; il recupero e la generazione dei componenti sono a pagamento.

3. Beautiful UI: componenti per le interfacce AI

Beautiful UI è pensata per le interfacce delle applicazioni AI: testo in streaming, stati di caricamento, la traccia del ragionamento (il "thinking"). È la scelta giusta se sviluppi applicazioni agentiche. Si installa come registry di shadcn.

4. Thinking Orbs: l’indicatore mentre l’agente ragiona

Thinking Orbs fa una sola cosa e la fa bene: l’orb che pulsa mentre l’agente ragiona, al posto del solito spinner. La versione React ha 9 stati animati e 0 dipendenze a runtime.

5. Aceternity UI: effetti visivi in copia e incolla

Aceternity UI è probabilmente la più famosa delle otto, quella con gli effetti particolari: card 3D, sfondi animati, effetti sul testo. Funziona in copia e incolla: prendo l’URL del componente, lo passo a Claude Code e l’agente fa il resto. Più di 117 componenti sono gratuiti; blocchi e template completi sono a pagamento.

6. transitions.dev: una skill per le animazioni

transitions.dev si installa come skill. La installo una volta e Claude Code o Codex la usano ogni volta che c’è da sviluppare un’animazione. Il progetto dichiara oltre 43 transizioni pronte.

7. Component Gallery: 95 design system da consultare

Component Gallery non fornisce codice. Raccoglie 95 design system reali, con varianti e stati dei componenti: proprio quello che di solito ci si dimentica. La consulto prima di scrivere un componente o di farlo scrivere a Claude Code.

8. Agentation: annotare l’interfaccia invece di descriverla

Agentation è uno strumento di feedback visuale per agenti AI. Si installa come pacchetto npm nell’app React e si collega a Claude Code con un server MCP. Secondo me è la migliore delle otto, e la sezione successiva spiega perché.

Perché Agentation cambia il modo di lavorare con gli agenti AI?

Con Agentation apro la mia app nel browser, clicco sul bottone che non mi convince e scrivo, per esempio, "troppo grande". Claude Code riceve direttamente il selettore CSS, il file sorgente e il componente React di quell’elemento.

A quel punto basta dire a Claude Code "sistema l’annotazione 3". Non serve più spiegare a parole dove si trova il problema, che è la parte più lenta del lavoro sull’interfaccia con un agente AI.

Tramite il server MCP, Claude Code legge le annotazioni di Agentation senza copia e incolla e può segnarle come risolte.

Come si installano le 8 librerie?

Otto librerie, sei comandi: Aceternity UI e Component Gallery non si installano. Questi sono i comandi per Claude Code:

# 1. OriginKit (sostituisci TUA_API_KEY)
claude mcp add --transport http --scope user --header "Authorization: Bearer TUA_API_KEY" originkit https://mcp.originkit.dev/mcp

# 2. 21st.dev (poi incolla la API key presa su 21st.dev/mcp)
npx @21st-dev/cli@latest install claude

# 3. Beautiful UI
npx shadcn add https://beautifului.dev/r/registry.json

# 4. Thinking Orbs
npm install thinking-orbs

# 6. transitions.dev
npx skills add Jakubantalik/transitions.dev

# 8. Agentation
npm install agentation -D
claude mcp add agentation -- npx -y agentation-mcp server

Per Aceternity UI basta passare a Claude Code l’URL del componente da ui.aceternity.com. Component Gallery si consulta nel browser.

Con Codex, al posto di claude mcp add si usa la sua configurazione MCP: stessi endpoint e stessi comandi npx.

Da quale libreria conviene partire?

Dipende da cosa genera l’AI slop nel tuo progetto. Se le pagine sono tutte uguali, OriginKit, 21st.dev e Aceternity UI danno all’agente componenti con un’identità visiva. Se costruisci un’app con un agente dentro, Beautiful UI e Thinking Orbs coprono streaming, caricamenti e ragionamento. Se il problema sono le revisioni, Agentation accorcia il giro tra quello che vedi e quello che Claude Code corregge.

Scegli la libreria che copre il tuo punto debole, collegala al tuo agente e confronta la prossima interfaccia con l’ultima che hai generato.