Fai Progettare l'AI con GustoFai Progettare l'AI con GustoFai Progettare l'AI con Gusto

Chiedi a un'AI di costruire una landing page e puoi indovinare cosa torna indietro: un titolo centrato, un sottotitolo, tre card identiche con icone arrotondate e un pulsante con il gradiente. È competente e completamente dimenticabile. La gente incolpa il modello di non avere gusto. È la diagnosi sbagliata. Il modello ha visto ogni bella interfaccia mai rilasciata; ciò che gli manca è un sistema dentro cui costruire. Lasciato con div grezzi e nessun vincolo, regredisce verso la media dei suoi dati di addestramento, e la media di internet è un template.

Il rimedio non è un prompt migliore. Sono strumenti migliori. Dai all'agente una vera base di componenti, un vocabolario di movimento e un modo per vedere ciò che sta facendo, e l'output cambia carattere del tutto. Cinque progetti open source coprono l'intera catena: la base, gli effetti pronti all'uso, una libreria di movimento, un editor visuale e il prompt-to-app. Ecco ognuno e dove si colloca.

Perché l'UI generata dall'AI sembra generica

Un modello che genera UI dal nulla deve inventare ogni decisione tutta insieme: spaziatura, scala tipografica, colore, elevazione, movimento. Senza un sistema a cui rifarsi, ogni decisione cade sull'opzione più sicura e più comune, e sicuro-per-cinque è il template che hai visto mille volte. Il designer umano esperto non prende più decisioni del modello; ne prende meno, perché un design system ne ha già prese la maggior parte. È questo il pezzo mancante. Consegna all'agente il sistema e rimuovi le decisioni che producono sciatteria.

1. La base dei componenti: shadcn/ui

shadcn/ui (github.com/shadcn-ui/ui) ha cambiato come funziona tutto questo rifiutando di essere una libreria. Non lo installi per importare componenti scatola-nera. Esegui una CLI e il codice sorgente di ogni componente atterra nel tuo repository, costruito sulle primitive Radix per l'accessibilità e stilizzato con Tailwind. È tuo. Quella proprietà è esattamente ciò di cui un agente AI ha bisogno: può leggere il pulsante, modificarlo ed estenderlo, perché il pulsante è un file nel progetto, non una dipendenza da decodificare.

# shadcn/ui is not a dependency you install and import. You run a CLI and
# the component SOURCE lands in your repo, yours to read and edit.
npx shadcn@latest init
npx shadcn@latest add button card dialog input

# components/ui/button.tsx now lives in YOUR project.
# The agent edits this file directly. Nothing is hidden in node_modules,
# nothing is a black box it has to fight.

2. Effetti animati pronti all uso: Magic UI

Magic UI (github.com/magicuidesign/magicui) è il compagno che la maggior parte delle persone abbina a shadcn/ui. Sono oltre 150 componenti animati (pulsanti shimmer, marquee, fasci animati, contatori numerici, griglie bento) costruiti con React, TypeScript, Tailwind e Motion. Si installano allo stesso modo: sorgente nel tuo repo. Per un agente, questo trasforma il movimento da qualcosa che deve scrivere keyframe per keyframe a qualcosa che seleziona. L'animazione è già corretta; l'agente la posiziona soltanto.

// Magic UI and React Bits install the same way: source into your repo.
npx shadcn@latest add "https://magicui.design/r/shimmer-button"

// Then it is just a component. Compose, do not hand-roll the animation:
import { ShimmerButton } from "@/components/ui/shimmer-button";

export function CTA() {
  return (
    <ShimmerButton className="px-6 py-3 text-base font-medium">
      Start a project
    </ShimmerButton>
  );
}

3. La libreria di movimento: React Bits

React Bits (github.com/DavidHDev/react-bits) è la più ampia delle tre: una collezione sterminata di testo animato, sfondi animati e componenti interattivi, ognuno uno snippet autonomo che copi dentro. Dove shadcn/ui è la base strutturale e Magic UI è l'insieme rifinito di effetti, React Bits è la panchina profonda che saccheggi quando una sezione ha bisogno di una mossa specifica: rivelazioni di testo spezzato, mesh di gradienti, pulsanti magnetici, contatori guidati dallo scroll. L'ampiezza è il punto; l'agente ha delle opzioni invece di inventarne una.

4. L'editor visuale AI: Onlook

Onlook (github.com/onlook-dev/onlook) chiude il cerchio che gli altri quattro non possono chiudere: la vista. È un editor visuale open source per React, spesso descritto come uno strumento di design per il codice. Vedi la tua app in esecuzione, selezioni un elemento, lo trascini, lo ristilizzi, e Onlook riscrive la modifica nel tuo sorgente. Per il lavoro con l'AI questo conta perché l'agente è altrimenti cieco; modifica il codice e spera. Onlook dà a un umano un livello di manipolazione diretta sopra lo stesso codice che l'agente scrive, così l'intento di design e il sorgente restano in un solo posto invece di allontanarsi.

5. Dal prompt all app: bolt.new

bolt.new (github.com/stackblitz/bolt.new) è la porta d'ingresso: descrivi un'app in linguaggio semplice e lui costruisce ed esegue un progetto full-stack nel browser, alimentato dai WebContainer di StackBlitz, quindi senza alcun setup locale. È il percorso più veloce dall'idea a una cosa funzionante su cui puoi cliccare. La fregatura è quella di cui parla tutto questo articolo: il prompt-to-app senza un design system sotto genera semplicemente il generico più in fretta. L'uso giusto è fare lo scaffold con bolt.new, poi portare il risultato su una base vera.

Il gusto è nel sistema

Messi insieme, questi cinque smettono di essere una lista di strumenti e diventano una pipeline per il gusto. Il trucco è rendere l'agente consapevole di essi. Lo faccio nello stesso modo in cui fisso lo stack per qualsiasi progetto: lo scrivo in AGENTS.md, il file che l'agente legge prima di toccare una riga di codice. Nominare il design system come regola ferma è ciò che mantiene l'agente a comporre invece di regredire.

## Design system (do NOT hand-roll UI)

- Primitives: shadcn/ui in components/ui/. Compose these. Never raw div soup.
- Motion and effects: Magic UI and React Bits. Reach for an existing
  animated component before writing a new keyframe.
- Tokens: color, spacing, radius and shadow come from tailwind.config only.
  No magic numbers, no one-off hex values.
- Type scale is 1.25. Max one accent color per view.
- Never ship the default browser focus ring; style focus-visible explicitly.
- When unsure how something should look, generate a reference image first,
  then build to it. Do not improvise layout.

1. 01Fai lo scaffold veloce con bolt.new quando ti serve una forma funzionante a cui reagire.
2. 02Poggia la base su shadcn/ui, posseduta come sorgente in components/ui/.
3. 03Prendi il movimento da Magic UI e React Bits invece di scrivere keyframe.
4. 04Dirigilo a occhio in Onlook, così le modifiche di design tornano nello stesso codice.
5. 05Codifica tutto in AGENTS.md, così ogni sessione parte dentro il sistema.

Al modello non è mai mancato il gusto. Gli mancava un sistema dentro cui averne. Consegnagliene uno e la sciatteria sparisce.

L'UI generica dell'AI è un problema di strumenti travestito da problema di talento. Dai all'agente una base che possiede, un vocabolario di movimento da cui scegliere e un modo per vedere ciò che costruisce, e il riflesso hero-centrato-tre-card se ne va da solo. Questa è la differenza tra un'interfaccia che sembra fatta dall'AI e una che sembra fatta. Se vuoi quella differenza costruita nel tuo prodotto, è ciò che faccio.