Ogni team che costruisce un prodotto AI deve progettare la stessa dashboard operativa: monitorare gli agenti, leggere le trace, gestire le conversazioni, tenere sotto controllo i costi e valutare la qualità. OhShot Agents le mette tutte in un pacchetto - un UI kit completo per le AI agent operations, progettato in Figma e realizzato in codice pronto al deploy, poi venduto come prodotto vero.
Questo l'ho portato dall'inizio alla fine da solo: come designer, sviluppatore e maker. Dalla ricerca di mercato al design system, all'implementazione in codice, fino allo store, ai prezzi e alla versione gratuita che alimenta le vendite.
Il mondo degli agenti AI sta esplodendo, ma costruire gli strumenti attorno è ripetitivo. Il mercato aveva un buco preciso:
La sfida era progettare un sistema completo e coerente - ogni schermata, in ogni stato - e consegnarlo come qualcosa che la gente può comprare, mettere online in cinque minuti ed estendere con i propri strumenti di AI coding.
Token: un sistema di variabili a due livelli (da primitive a semantiche) con modalità chiara e scura complete, così tutto il kit cambia tema scambiando i token - mai colori scritti a mano.
Fondamenta: una griglia responsive a 12 colonne e una scala tipografica accessibile (corpo minimo 16px, touch target 44px, contrasto AA) - basata su regole vere di web design, non solo su estetica.
Componenti: oltre 90 componenti e 72 icone costruiti in auto layout, inclusi i pezzi AI-native che nessun altro kit copre - tool call, nodi di trace, chat bubble con citazioni, contatori di token, punteggi di eval, stato degli agenti e handoff umano.
Ho progettato l'intero sistema in Figma, poi l'ho ricostruito 1:1 in una codebase Next.js (App Router, TypeScript, Tailwind) - i design token mappano direttamente sulle variabili CSS, così design e codice restano allineati.
Ogni schermata è consegnata in quattro stati: default, vuoto, caricamento ed errore. Il kit è responsive - sidebar su desktop, barra in basso su mobile - e gira senza backend, su dati finti tipizzati.
Il livello AI-Ready è il differenziatore: il kit include documentazione leggibile dalle macchine e prompt pronti, così strumenti come Cursor e Claude Code leggono il sistema e costruiscono pagine nuove coerenti con esso - senza che tu debba scrivere il codice.
OhShot Agents è online e in vendita: oltre 50 schermate in ogni stato, oltre 90 componenti, chiaro e scuro, Figma più codice deployabile. Arriva con una demo live pubblica e un sample Figma gratuito che funziona da funnel.
Oltre al design, questo progetto è stato portare un prodotto sul mercato da solo - ricerca, design, codice, packaging, prezzi e distribuzione - trasformando una competenza di design in qualcosa che sta in piedi da solo. Progetta in Figma, spedisci con l'AI.
La sala di regia: KPI in tempo reale, attività dei run, agenti principali e run recenti a colpo d'occhio. Tutta la dashboard è guidata dai design token, quindi passa al tema scuro senza toccare un solo componente.
La schermata più differenziante: un albero interattivo di ogni passo che un agente compie - chiamate LLM, tool call, retrieval - con un pannello laterale che mostra input, output, token e costo del nodo selezionato.
Un'inbox dove AI e persone condividono lo stesso thread: tool call e citazioni in linea, un pannello col contesto del cliente, e un passaggio pulito quando l'agente scala a una persona.
Il lato "ops": dashboard di costi, token, latenza e qualità con budget, breakdown per modello e per agente, e punteggi di eval - i numeri che a un team servono davvero per far girare gli agenti in produzione.
Una superficie di configurazione profonda: editor del system prompt, tool con toggle, guardrail, impostazioni del modello e knowledge base collegate - la densità che dimostra che il kit è pensato per prodotti veri.
Un solo sistema, due temi - guidati interamente dai token. E ogni schermata è consegnata nei suoi stati default, vuoto, caricamento ed errore, così il kit regge appena incontra dati reali.
Oltre 50 schermate tra monitoraggio, agenti, run, conversazioni, analisi, evals e impostazioni - un sistema completo e coerente, pronto per progettare e spedire.
Ti piace questo progetto? Lavoriamo insieme.
Scrivimi →