Come scrivere un prompt per la UI per un agente AI di coding
Trasforma un'idea di prodotto grezza in un prompt per la UI costruibile, con obiettivo dell'utente, comportamento, stati, vincoli e controlli di superato o non superato.
Un buon prompt per la UI dice all'agente chi ha bisogno di quale risultato, come deve comportarsi l'interfaccia, quali stati deve gestire, quali vincoli di progetto valgono e come verificare il risultato. Nomina un componente solo quando il suo comportamento è adatto a quel lavoro.
1. Parti dall'obiettivo dell'utente, non dal nome di un componente
Dì chi sta cercando di completare quale attività e perché conta. Aggiungi un termine UI solo dopo che il suo comportamento corrisponde a quel lavoro. Il nome di un componente è una possibile soluzione, non l'obiettivo del prodotto.
- Debole: Aggiungi una bellissima dashboard in glassmorphism.
- Meglio: Aiuta un responsabile dell'assistenza a trovare i ticket non risolti, capire l'urgenza e aprire il ticket successivo senza perdere i filtri attuali.
2. Descrivi il comportamento, gli stati e i limiti
Spiega cosa apre l'interfaccia, cosa cambia dopo ogni azione, come si chiude e cosa deve restare salvato. Includi gli stati di caricamento, vuoto, errore, successo, riprova, annullamento e permessi quando possono verificarsi.
3. Scegli un pattern in base al comportamento, poi aggiungi stile e animazioni
Usa l'atlante quando riesci a immaginare l'interfaccia ma non ne conosci il nome. Confronta pattern simili prima di scegliere. Tieni comportamento, stile visivo e animazioni come decisioni separate, così una richiesta estetica non cambia di nascosto come funziona il prodotto.
4. Aggiungi criteri di accettazione che l'agente possa verificare
Trasforma le regole importanti in controlli osservabili di superato o non superato. Copri l'uso della tastiera, il focus visibile, gli annunci di stato, gli schermi piccoli, lo zoom, il movimento ridotto, il caricamento, gli errori, i tentativi di nuovo e la persistenza dei dati dove si applicano.
5. Dai il contesto del progetto prima di chiedere codice
Indica lo stack esistente, il design system, i componenti riutilizzabili, la fonte dei dati, la route e i file che rientrano nello scope. Dì all'agente cosa non deve cambiare. Deve comunque esaminare il progetto reale e i suoi test prima di modificare.
6. Usa una struttura del prompt che renda visibili le decisioni
Un ordine utile è: risultato, utenti e situazione, comportamento, stati, contenuti e dati, direzione visiva, accessibilità, vincoli di progetto, criteri di accettazione e lavoro fuori dallo scope. Segna le ipotesi e le domande aperte invece di nasconderle.
- Risultato: chi deve poter fare cosa quando questo lavoro sarà completo?
- Comportamento e stati: come inizia il flusso, come cambia, come finisce, come fallisce e come si riprende?
- Controlli: quali prove esatte mostreranno che il risultato funziona?