Guida al Prompt

Inizia nella chat del progetto. Apri la chat del progetto che vuoi modificare, poi scegli o menziona l'agente il cui ruolo corrisponde al lavoro da svolgere. Se non sei sicuro di quale agente sia adatto, chiedi al team di chiarire prima di iniziare a costruire.

Questa guida raccoglie le tecniche che portano costantemente a risultati migliori dal tuo team di agenti. Nessuna di queste richiede abilità speciali. Riguardano ciò che dici, non come lo formatti. Che tu stia scrivendo la tua primissima richiesta o perfezionando un progetto maturo, si applicano gli stessi principi: pensiero chiaro in entrata, risultati chiari in uscita.

Lascia che il team faccia domande prima di costruire

Uno dei modi più efficaci per ottenere un risultato migliore: quando una richiesta è ampia o vaga, invita a fare domande invece di sperare che il team indovini correttamente. Dichiara ciò che vuoi, poi aggiungi una riga alla fine:

Chiedimi tutto ciò di cui hai bisogno per capire completamente cosa voglio prima di iniziare.

Spesso riceverai domande a cui non avresti pensato di rispondere da solo, che si tratti di casi limite, pubblici o compromessi. Risolverle in anticipo richiede un minuto; scoprirle dopo una build richiede una rilavorazione. Il risultato sarà molto più vicino alla tua intenzione già al primo tentativo.

Passaggio 1: Decidi prima di digitare

Sappi cosa stai costruendo

Qualche minuto di riflessione iniziale può farti risparmiare molto re-prompting in seguito. Prima di iniziare, assicurati di saper rispondere a quattro semplici domande: cosa stai costruendo, per chi è, perché dovrebbero usarlo e qual è l'azione principale che vuoi che compiano.

Quell'azione principale è spesso chiamata CTA, abbreviazione di call to action. È il pulsante, il link o il passaggio successivo che più desideri che gli utenti scelgano, come Sign Up, Book a Demo, Start Free o Buy Now.

Non hai bisogno di scrivere una specifica completa. L'obiettivo è semplicemente dare al progetto una direzione chiara. Più specifico è il tuo punto di partenza, più sarà facile generare un risultato che corrisponda a ciò che hai in mente.

Crea un sito di una pagina per un'app di budgeting rivolta ai freelance. La CTA principale è “Start Saving Smarter.” Usa un aspetto audace ed espressivo con caratteri grandi e colori d'impatto.

Delinea il percorso, non solo le schermate

Un buon design vive tra le schermate tanto quanto su di esse. Segui il percorso dell'utente: cosa vede per prima cosa, cosa crea fiducia, cosa gli dà sicurezza per agire e dove porta quell'azione? Anche uno schema in tre tempi, hero, prova, call to action, rende le tue richieste molto più efficaci, perché ogni sezione ora ha un motivo per esistere e un motivo per condurre alla successiva.

Definisci presto la direzione visiva

Lo stile è molto più facile da stabilire che da adattare in seguito. Scegli una direzione: calma ed elegante, audace e dirompente, premium e raffinata, e dichiarala nella tua prima richiesta usando parole di tono su cui il team possa agire: minimal, playful, cinematic, developer focused. Queste parole sono più che decorazione: modellano tipografia, spaziatura, colore, ombra e raggio degli angoli fin dal primo componente. Riutilizza la stessa indicazione di stile nelle richieste successive per mantenere tutto coerente.

Usa un design calmo, ispirato al benessere: gradienti morbidi, toni della terra attenuati, angoli arrotondati, padding generoso. Tono generale delicato e rassicurante.

Passaggio 2: Scrivi richieste che funzionano

Descrivi i risultati, non le implementazioni

Descrivi il risultato che vuoi, non i passaggi per costruirlo. Per esempio, “Aggiungi una sezione prezzi con tre opzioni e fai risaltare quella centrale” è più utile che spiegare esattamente come dovrebbe essere costruita la pagina. Concentrati su ciò che dovrebbe apparire e perché è importante; il team può decidere come realizzarlo.

Lavora per parti, non per pagine

Richieste limitate a un solo componente — una hero, una griglia di funzionalità, una riga di testimonianze, una tabella prezzi — ti danno chiarezza e controllo. Se una parte non centra l'obiettivo, modifichi quella parte invece di rigenerare tutto ciò che la circonda. Costruisci un blocco, rivedilo, perfezionalo, poi passa al successivo. Una richiesta per una pagina intera produce rumore; una richiesta per un componente produce segnale.

Crea una sezione funzionalità: titolo centrato, poi tre schede affiancate, ciascuna con un'icona, un titolo e una riga di descrizione. Ombre morbide, leggero sollevamento al passaggio del mouse.

Usa parole reali

Il testo segnaposto nasconde i problemi; il testo reale li rivela. Un titolo reale potrebbe richiedere due righe; una CTA reale potrebbe funzionare meglio come verbo. Scrivi ciò che un utente leggerebbe davvero, anche se è una bozza: layout, spaziatura e decisioni di design migliorano tutti quando il contenuto è reale.

Titolo hero: “Design Calmly.” Sottotesto: “Turn stress into structure.” CTA: “Start Building Free.” Layout centrato sul testo con ampia spaziatura verticale.

Dai un nome agli elementi reali

Usa parole chiare e specifiche per descrivere ciò che vuoi nella pagina. Non hai bisogno di conoscere la terminologia del design: basta nominare le cose che gli utenti dovrebbero vedere o con cui dovrebbero interagire, come una scheda profilo, un pulsante o un modulo.

Le richieste specifiche sono più facili da realizzare di quelle generiche. Inizia con l'elemento di base di cui hai bisogno, poi aggiungi i dettagli uno alla volta.

Crea una scheda profilo con una foto, un nome e un pulsante Segui. Aggiungi una piccola etichetta “Verified” accanto al nome e mostra una breve spiegazione quando qualcuno ci passa sopra con il mouse.

Passaggio 3: Modifica con precisione

Delimita ogni modifica: cosa cambia, cosa resta

Quando modifichi un lavoro esistente, sii esplicito su entrambi i fronti: cosa deve cambiare e cosa non deve cambiare. Usa parole direzionali come “sostituisci”, “aggiorna” e “modifica” invece di “migliora questo”, e delimita le parti che ti piacciono. La precisione qui è ciò che impedisce che l'iterazione diventi regressione.

Modifica il testo della CTA in “Get Started” e aumenta il padding orizzontale. Mantieni invariati i colori attuali, il font e tutto il resto in questa sezione.

Una modifica significativa alla volta

Aggiorna il testo, poi il layout, poi le interazioni e controlla ogni risultato prima della richiesta successiva. Piccoli passaggi intenzionali si sommano fino a creare un prodotto rifinito; dieci modifiche in un solo messaggio si sommano invece in ambiguità, e quando qualcosa va storto non saprai quale modifica l'ha causato.

Le correzioni durante l'attività avvengono in chat. Quando Prompt Queue è disponibile nella tua chat e il lavoro dell'Agente è attivo, i messaggi successivi vengono messi in coda dietro al lavoro in esecuzione. Conferma che il tuo messaggio compaia nella coda prima di inviarne un'altra copia. Se i controlli della coda non sono visibili, non reinviare: attendi che il lavoro corrente finisca, oppure usa un controllo di interruzione se la tua chat ne fornisce uno, poi conferma lo stato dell'attività prima di inviare un messaggio successivo. Consulta chat del progetto per i dettagli.

Pensa un passo oltre l'interfaccia

Se il tuo progetto deve fare più che apparire rifinito, definisci il comportamento insieme all'aspetto. Specifica cosa vedono gli utenti quando hanno effettuato l'accesso o quando non l'hanno effettuato, da dove provengono i contenuti dinamici e come l'interfaccia gestisce stati vuoti, di caricamento e di errore. Non hai bisogno di un backend funzionante per progettare attorno a questi scenari: pianificarli presto aiuta a prevenire importanti rilavorazioni dell'interfaccia in seguito.

Se l'utente ha effettuato l'accesso, mostra il suo avatar e nome in alto a destra. In caso contrario, mostra un pulsante “Log In” che reindirizza alla schermata di autenticazione.

FAQ

Come scrivo un prompt efficace per l'agente IA?

Struttura il tuo prompt con questi elementi chiave:

1. Contesto — Imposta la scena. Spiega cosa stai costruendo e a che punto sono attualmente le cose.

2. Obiettivo — Sii specifico sul risultato esatto o sulla funzionalità che desideri.

3. Requisiti & vincoli — Elenca chiaramente cosa dovrebbe cambiare e cosa deve rimanere intatto.

4. Risultato atteso — Definisci come si presenta il successo (ad esempio, comportamento dell'interfaccia, gestione degli errori, persistenza dello stato).

5. Riferimenti — Allega screenshot, link, passaggi del flusso di lavoro o esempi di codice quando possibile. Rimuovi password, codici di verifica, chiavi API, cookie, dati personali e dettagli di pagamento prima della condivisione.

Esempio: "Sto creando una dashboard con una barra laterale. Aggiungi un pulsante di logout in fondo alla barra laterale. Deve cancellare la sessione e reindirizzare a /login. Non modificare il layout della barra laterale né i link di navigazione. Dopo il clic, l'utente dovrebbe vedere la pagina di login entro 1 secondo."

Come dovrei gestire richieste complesse che coinvolgono più funzionalità?

Per richieste complesse, suddividile in attività più piccole:

1. Indica il problema attuale e l'obiettivo finale.

2. Elenca ogni sottoattività separatamente (attività 1, attività 2, attività 3).

3. Verifica ogni attività prima di passare alla successiva.

4. Testa il flusso completo alla fine.

Questo approccio riduce le modifiche impreviste dovute al chiedere all'Agente di fare troppo tutto insieme. Ogni prompt dovrebbe concentrarsi su un singolo risultato verificabile.

Come scrivo un prompt per correggere un bug?

Un prompt utile per la correzione di bug dovrebbe includere:

• La pagina, la funzionalità, l'ambiente e gli utenti interessati
• I passaggi esatti per riprodurre il problema
• Il comportamento effettivo e quello previsto
• Il testo completo dell'errore e quando si è verificato
• Screenshot o log pertinenti, con password, token, cookie, dati personali e dettagli di pagamento rimossi
• Cosa deve rimanere invariato
• Come verificare la correzione e quali controlli di regressione eseguire

Esempio: “Nella pagina di checkout in Preview, selezionando Submit viene restituito un errore 500. Previsto: l'ordine viene confermato e l'utente raggiunge la pagina di ringraziamento. Riproduzione: [passaggi]. Correggi la causa senza modificare i totali del carrello o il flusso di pagamento, poi verifica un caso di pagamento riuscito e uno di pagamento rifiutato. Ho rimosso tutti i valori segreti dal log allegato.”

Come scrivo un prompt per modificare il layout o lo stile di una pagina?

Quando richiedi modifiche a una pagina, includi:

1. La pagina, il modulo e l'elemento specifici da modificare.

2. Stato attuale e risultato desiderato.

3. Link di riferimento o screenshot.

4. Funzionalità che devono rimanere invariate.

5. Criteri di accettazione (ad esempio, deve funzionare sia su desktop sia su mobile).

Esempio: "Nella pagina /pricing, cambia la griglia delle schede dei piani da 2 colonne a 3 colonne su desktop. Mantieni il layout mobile come colonna singola. Fai riferimento a questo screenshot [allega]. Non modificare il contenuto delle schede né gli stili dei pulsanti."

Cosa dovrei fare quando l'agente continua ad apportare le modifiche sbagliate nonostante le correzioni?

Quando l'Agente continua ripetutamente a non centrare l'obiettivo, aggiungere più istruzioni a volte può creare ancora più confusione. Invece:

1. Preserva lo stato attuale — Smetti di inviare correzioni sovrapposte. Se la tua chat mostra un controllo Revert, leggi il testo di conferma prima di usarlo, annota eventuali modifiche successive che devi mantenere e verifica il progetto dopo. Se l'ambito non è chiaro, non continuare; usa la guida Project chat o contatta il Supporto con un Chat Link e uno screenshot con dati oscurati.

2. Elimina il rumore — Invece di aggiungere istruzioni extra sopra quelle esistenti, riformula chiaramente il problema principale da zero.

3. Un'attività alla volta — Concentrati sulla risoluzione di un solo problema prima di passare oltre.

Fare un passo indietro e affrontare le modifiche in modo incrementale di solito risolve i problemi molto più rapidamente che cercare di correggere più problemi sovrapposti in un solo prompt.