Creator View
Layout Overview
La Vista creatore e un ambiente di modifica a tre pannelli che apri facendo doppio clic su qualsiasi gruppo nell'Area componenti. Fornisce un elenco blocchi a sinistra, un editor di codice al centro e un'anteprima dal vivo a destra, con una Casella prompt IA lungo la parte inferiore.
Block List Panel
Il pannello sinistro mostra tutti i blocchi del gruppo corrente. Ogni blocco mostra un'anteprima a scheda con il nome del blocco e un elenco di file numerato sotto. Usa la barra degli strumenti in alto per navigare indietro, alternare tra vista elenco e vista divisa, o clicca sul pulsante + per aggiungere un nuovo blocco.
Code Editor
Il pannello centrale e un editor di codice a schede dove scrivi e modifichi il contenuto dei blocchi. Le schede sono organizzate per tipo di file:
Testo
Scrivi documentazione, markdown o contenuto di testo semplice per il blocco.
HTML
Modifica la struttura HTML del tuo componente.
CSS
Aggiungi stili per il tuo componente.
JavaScript
Aggiungi interattivita e logica al tuo componente.
Live Preview
Il pannello destro renderizza un'anteprima dal vivo del tuo componente. Man mano che aggiungi HTML, CSS e JavaScript nell'editor, l'anteprima si aggiorna per mostrare il risultato compilato. Puoi anche trascinare e rilasciare file o incollare contenuto (Ctrl+V) direttamente nell'area di anteprima per aggiungerli al blocco. Usa l'icona dell'occhio per attivare/disattivare l'anteprima e il toggle BG per cambiare lo sfondo dell'anteprima.
AI Prompt Box
La barra inferiore è il Campo Prompt IA. Usalo per descrivere le modifiche e lasciare che l'IA generi o modifichi il contenuto del tuo blocco. Include un selettore di modello, un campo di input testuale, input vocale e emoji, e un pulsante Genera. Due toggle di modalità — A e V — alternano tra la Modalità IA Diretta e la Modalità Variazioni.
AI Gen Categories
Il selettore del modello IA rivela le categorie di generazione che determinano quale tipo di contenuto l'IA produce:
Generazione testo
Genera o modifica contenuto testuale come codice, documentazione e markup.
Generazione immagini
Crea immagini da prompt testuali o modifica immagini esistenti con l'IA (da testo a immagine e da immagine a immagine).
Generazione video
Genera video da descrizioni testuali o anima immagini statiche in video (da testo a video e da immagine a video).
Direct AI Mode (A)
Quando il toggle A è attivo, l'IA apporta modifiche dirette al tuo componente sul posto. Il testo del campo mostra “Descrivi le modifiche da applicare al tuo componente” e un badge indica quale file sarà modificato (ad esempio, “Modificherà: testo”). Questa modalità è ideale per modifiche rapide e specifiche al file attualmente selezionato.
Variation Mode (V)
Quando il toggle V è attivo, l'IA genera più variazioni del tuo componente invece di modificarlo sul posto. Il testo del campo cambia in “Descrivi le variazioni che vuoi generare” e appare un contatore con controlli − / + per scegliere quante variazioni creare. Le variazioni generate appaiono in un pannello dedicato dove puoi esaminarle e aggiungere le versioni preferite al gruppo.