Il modo più efficace per migliorare le interfacce prodotte da un agente non è scrivere prompt più lunghi: è dargli accesso a componenti già fatti e a regole di stile concrete. Ecco otto risorse con i comandi per installarle. Dove si usa claude mcp add, con Codex si usa la sua configurazione MCP: gli endpoint e i comandi npx restano gli stessi.
1. OriginKit
Server MCP, richiede una API key:
claude mcp add originkit https://mcp.originkit.dev/mcp \
--transport http \
--header "Authorization: Bearer TUA_API_KEY" \
--scope userSito: originkit.dev
2. 21st.dev
Installazione guidata dalla CLI del progetto, API key gratuita da richiedere sul sito:
npx @21st-dev/cli@latest install claudeSito: 21st.dev/mcp
3. Beautiful UI
Registry compatibile con la CLI di shadcn: i componenti vengono copiati nel progetto, non aggiunti come dipendenza.
npx shadcn add https://www.beautifului.dev/r/registry.jsonSito: beautifului.dev
4. Thinking Orbs
Libreria npm di indicatori animati per gli stati di elaborazione — gli "orb" che segnalano che qualcosa sta lavorando:
npm install thinking-orbs5. Aceternity UI
Nessun comando da eseguire: i componenti si copiano e incollano. Il modo pratico di usarla con un agente è passargli l'URL del componente e chiedergli di adattarlo al progetto.
Sito: ui.aceternity.com
6. transitions.dev
Skill portabile sulle transizioni e le animazioni di interfaccia. Funziona anche con Codex, Cursor e Copilot:
npx skills add Jakubantalik/transitions.dev7. Component Gallery
Non si installa: si consulta. È una raccolta di come componenti ricorrenti (tabelle, date picker, filtri, form complessi) sono risolti in prodotti reali. Utile da guardare prima di chiedere all'agente di scriverne uno.
Sito: component.gallery
8. Agentation
Pacchetto npm più server MCP:
npm install agentation
claude mcp add agentation -- npx agentation-mcp serverSito: agentation.com
Come sceglierle senza accumulare
| Tipo di risorsa | Cosa cambia per l'agente | Costo |
|---|---|---|
| Server MCP (OriginKit, 21st.dev, Agentation) | L'agente interroga un catalogo vivo di componenti mentre lavora | Occupa contesto a ogni sessione, spesso richiede API key |
| Registry (Beautiful UI, Aceternity) | Il codice entra nel progetto e resta versionato | Nessuno a runtime; va mantenuto come codice proprio |
| Skill (transitions.dev) | Regole di stile e movimento applicate al codice che l'agente scrive | Minimo |
| Riferimenti (Component Gallery) | Serve a chi scrive il prompt, non all'agente | Nessuno |
Un avvertimento pratico: ogni server MCP attivo occupa contesto in tutte le sessioni, anche quando non serve. Tenerne installati otto contemporaneamente peggiora le prestazioni invece di migliorarle. Meglio attivarne uno o due, quelli che si usano davvero, e disinstallare il resto.
Il pezzo che manca sempre
Nessuna di queste risorse sa che aspetto deve avere il tuo prodotto. Per quello serve un file di regole di progetto — colori, tipografia, spaziature e la lista di quello che l'agente non deve fare: l'approccio design.md di cui parliamo in un articolo dedicato. Le due cose stanno su piani diversi e si usano insieme: i cataloghi forniscono i mattoni, il file di design decide come vanno messi.