Canvas: un pannello di anteprima live per tutto ciò che un modello scrive
Quando un modello scrive HTML, SVG, un diagramma Mermaid o Markdown, non dovresti doverlo copiare altrove per vederlo. Canvas lo renderizza accanto alla chat e si aggiorna mentre iteri.
- funzionalità
- canvas
La maggior parte degli strumenti di chat ti consegna un blocco di codice e ti augura buona fortuna. Lo copi in un editor, salvi un file, apri un browser, vedi che è leggermente sbagliato, torni alla chat, incolli la correzione, e ripeti. Canvas rimuove ogni passaggio di quel loop tranne i due che contano: chiedere, e guardare.
Cos’è Canvas
Quando la risposta di un modello contiene qualcosa di renderizzabile, un pannello di anteprima si apre accanto alla conversazione e lo mostra live. L’HTML si renderizza come pagina. L’SVG si renderizza come immagine. Un blocco Mermaid diventa il diagramma. Il Markdown diventa testo formattato. Vedi il risultato, non il sorgente, nel momento in cui il modello finisce di scriverlo.
La chat resta a sinistra, l’artefatto renderizzato a destra. Continui a parlare — «rendi l’header più piccolo», «usa uno sfondo più scuro», «aggiungi un nodo per il percorso di retry» — e l’anteprima si aggiorna mentre il modello revisiona. Niente copia, niente incolla, nessuna seconda app.
Dove si guadagna il pane
Alcune cose che trasforma da rogna in conversazione:
- Sezioni di landing ed email HTML. Descrivi una sezione hero, guardala renderizzare, aggiusta spaziatura e colore in linguaggio semplice finché non ha l’aspetto giusto. Stai iterando sulla cosa stessa, non su una descrizione della cosa.
- Diagrammi. Chiedi un flowchart di un handshake di autenticazione o un diagramma di sequenza di una richiesta. Mermaid lo renderizza all’istante, e «scambia questi due passaggi» è una frase invece di un ridisegno manuale.
- Grafici e SVG. Veloci schizzi di dati, icone, illustrazioni semplici. Li vedi a piena dimensione e li rifinisci parlando.
- Scrittura long-form. Il Markdown si renderizza con titoli e struttura reali, così leggi il documento come lo leggerà un lettore, non strizzando gli occhi su asterischi grezzi.
Funziona con il selettore di modelli
Canvas non è legato a un solo provider. Abbozza un layout con un modello veloce, poi ramifica la parte difficile verso uno più forte — l’anteprima segue il ramo vincente. Poiché l’artefatto vive accanto al thread anziché dentro la sandbox di un modello, cambiare modello non ti costa il lavoro in corso. Il render si riesegue semplicemente sulla nuova risposta.
È lo stesso principio su cui è costruito tutto lo studio: la cosa utile (qui, un artefatto live) appartiene alla tua conversazione, non al set di funzionalità murato di un singolo modello.
Itera in linguaggio, spedisci il sorgente
Quando l’anteprima ha l’aspetto giusto, il sorgente è lì pronto da portare con te — copia l’HTML, esporta l’SVG, prendi la definizione Mermaid. Canvas non è una scatola nera che solo lui sa leggere; è un modo più rapido per arrivare a un sorgente che possiedi pienamente. Hai fatto l’iterazione in linguaggio semplice e alla fine hai ottenuto un output pronto per la produzione.
Una piccola funzionalità con un effetto sproporzionato
Canvas non aggiunge una capacità che i modelli non avevano — hanno sempre saputo scrivere HTML. Ciò che rimuove è il divario tra scritto e visto. Chiudere quel divario cambia come lavori: smetti di trattare l’output del modello come una bozza da valutare più tardi e cominci a trattarlo come una cosa che stai plasmando proprio ora, in tempo reale, nella stessa finestra. Si scopre essere gran parte di ciò che fa sembrare veloce uno strumento.
Hai trovato un refuso o vuoi dissentire? Scrivici .