Come ho progettato l’interfaccia di Sarion senza designer, usando AI e strumenti moderni

Nel mondo frenetico della creazione di MVP, l’interfaccia utente viene spesso vista come una fase successiva. Ma cosa succede quando sei solo tu, un’idea e un po’ di tempo? In questo articolo ti racconto come ho progettato da zero la UI di Sarion, un assistente AI-first per gestire TODO list e note, senza l’aiuto di un designer e con una forte integrazione AI sin dalle prime fasi.

Un processo guidato dall’intelligenza artificiale e da strumenti moderni, per dimostrare che è possibile arrivare a un’interfaccia solida, coerente e moderna, partendo da un’idea grezza, anche senza skill grafiche.

1. Il prototipo con Mastra AI e ai-sdk

La prima fase è partita direttamente dal prompt.

Grazie a Mastra AI, un framework open source full JavaScript/Node.js pensato per orchestrare agenti AI reali, ho costruito un agente AI in grado di gestire interazioni reali: lettura e scrittura di note, creazione task, scomposizione di attività complesse, e molto altro. Il tutto sfruttando una pipeline di tool e workflow descrivibili come codice.

Parallelamente, ho usato ai-sdk di Vercel per integrare facilmente l’AI nell’interfaccia frontend. Il pacchetto è pensato per semplificare la gestione di conversazioni AI-driven in React/Next.js, con supporto a streaming, custom tool e interfacce UI reattive. Questo mi ha permesso di prototipare velocemente una chat AI funzionante con pochissime righe di codice.

2. La prima UI: un wireframe in bianco su nero

Con le prime funzionalità AI attive, mi serviva una UI minimale per testare il flusso.

Senza preoccuparmi troppo di colori, icone o font, ho scelto un approccio in stile wireframe: sfondo nero, testo bianco, layout a griglia. Questo approccio ha ridotto la complessità decisionale, permettendomi di concentrarmi sulla UX e sul comportamento dell’agente AI.

Il risultato era una UI scheletrica ma già usabile, perfetta per validare l’interazione utente–AI e il funzionamento dei task.

3. Home page con Lovable: un template bello e subito pronto

Una volta validato il prototipo, era tempo di costruire una landing page che spiegasse cos’è Sarion e attirasse i primi utenti.

Per farlo ho usato Lovable, un generatore di UI moderno per startup che produce codice React + TailwindCSS pronto da usare, mobile-first e accessibile.

In pochi click, Lovable mi ha fornito:

• Un layout coerente
• Una tipografia leggibile
• Componenti puliti e riutilizzabili

Da lì, è bastato un clone in locale per iniziare a personalizzare colori e testi direttamente nel mio ambiente di sviluppo.

4. Passaggio a Next.js

Con le basi pronte, ho migrato tutto su Next.js 15 App Router, per poter sfruttare:

• Routing flessibile basato su file system
• Server Actions e streaming di AI response
• Edge runtime per performance e interattività in tempo reale

Questa scelta ha reso il progetto pronto per la scalabilità e perfettamente compatibile con l’integrazione AI in tempo reale.

5. Uniformare lo stile sulla Chat UI e le pagine TODO/Note

Una volta consolidato lo stile dalla homepage, l’ho riportato anche sulle sezioni funzionali:

• Chat UI: l’interfaccia principale per comunicare con l’agente AI, progettata per essere pulita, leggibile e non invadente
• Task & Notes Management: una vista tabellare semplice e ordinata, con colori minimi e focus sull’usabilità da mobile

Anche senza il supporto di un designer, l’interfaccia mantiene oggi una coerenza visiva, grazie a TailwindCSS, layout grid-based e componenti riusabili ispirati alle best practice UI/UX moderne.

Conclusione

Realizzare un MVP AI-driven senza designer è possibile. Il trucco è partire da ciò che sai fare (scrivere codice, integrare AI) e usare gli strumenti giusti per colmare i gap: wireframe minimal per testare, Lovable per partire bene, Tailwind per rifinire.

Con Sarion, tutto è nato in 4 settimane, da solo, con l’aiuto Windsurf.

Stack usato

• Framework AI: Mastra AI
• Frontend: Next.js 15 + Tailwind CSS
• Backend: Node.js
• Interfaccia AI: ai-sdk.dev
• UI generator: Lovable.dev
• Hosting: Vercel
• Database: MongoDB Atlas (dati app) + Upstash Redis (memoria agenti AI)

Vuoi costruire anche tu un MVP AI-first?

Continua a seguire il blog, presto condividerò dettagli su tutti gli aspetti della realizzazione di una moderna app AI-first.