Apportare modifiche visive con l’agente di modernizzazione esperienza visual-changes
Questa guida è destinata ai progettisti e ad altri utenti che modificano l’aspetto di un sito: colori, tipi di carattere, spaziatura e layout dei blocchi. Descrivi una modifica all’agente di modernizzazione esperienza nella console di modernizzazione esperienza, la descrivi nell’anteprima e la invii a uno sviluppatore per una revisione. L’agente scrive il codice, quindi non è necessario scrivere file CSS o JavaScript. Tuttavia, le modifiche raggiungono il sito tramite il relativo archivio Git, quindi hai bisogno delle nozioni di base: invii il lavoro a un ramo e trasmettilo in una richiesta pull. Se questi termini sono nuovi, vedere Parole utilizzate in questa Guida.
Prima di iniziare before-you-start
Chiedi alla persona che conduce il progetto quanto segue:
- Accesso alla console. Accedi con il tuo Adobe ID. Consulta Aprire la console di modernizzazione delle esperienze.
- Sito su cui lavorare. Per connettere l’archivio Git del sito all’area di lavoro della console è necessario disporre dell’accesso in scrittura all’archivio. Vedi Connetti Il Tuo Sito.
- Parte del lavoro. Accettare i blocchi, le pagine o gli stili personali, in modo che nessun altro possa modificare gli stessi file contemporaneamente. Vedere Inizia con una persona, quindi dividi il lavoro.
- Come consegnare. La maggior parte dei team protegge il ramo principale in modo che uno sviluppatore riveda ogni modifica. Chiedi se esegui il push con Crea nuova PR. Vedi Passare la mano per la revisione.
- Per le progettazioni Figma, una postazione Figma in grado di leggere i file. Vedi Lavoro da un design Figma.
Il lavoro rimane nell’area di lavoro della console fino a quando non lo invii tramite push. Nessun elemento provato nell’anteprima raggiunge il sito live da solo.
Cosa è possibile modificare what-you-can-change
Su un sito Edge Delivery Services, gli autori scrivono il contenuto e il codice decide come apparirà. Pertanto, una modifica visiva modifica il codice del sito, principalmente il CSS, e lascia invariato il contenuto immesso dagli autori. Non è necessario importare o caricare di nuovo le pagine.
Ogni parte del codice raggiunge una parte diversa del sito. Prima di chiedere una modifica, decidi quanto deve raggiungere:
--link-color negli stili globali.Le varianti, gli stili di sezione e i modelli hanno effetto solo se applicati dagli autori. Chiedere all’agente di applicarne una alla pagina su cui si sta lavorando in modo da poterla visualizzare e indicare agli autori quando utilizzarla.
Alcune richieste vanno oltre l’aspetto del sito. L’aggiunta di un campo che gli autori compilano, la modifica della struttura del contenuto di un blocco o l’aggiunta di comportamenti come un carosello modificano il modello di contenuto del blocco o la relativa logica. Descrivi cosa ti serve e lascia queste decisioni allo sviluppatore. Consulta Creare, aggiornare e rieseguire il factoring dei blocchi.
Limita una modifica ad alcune pagine impact
Una modifica a un blocco o agli stili globali cambia ogni pagina che li utilizza. Prima di richiederne una, chiedi all’agente dove viene utilizzato il blocco o lo stile, ad esempio “Quali pagine nella mia area di lavoro utilizzano il blocco delle schede?”
Quando una modifica deve essere applicata solo ad alcune pagine, chiedi una di queste:
- Una variante di blocco, quando solo alcune istanze di un blocco devono avere un aspetto diverso.
- Stile di sezione, quando una parte di una pagina, ad esempio un’area evidenziata, richiede un proprio aspetto.
- Un modello di pagina, quando un tipo di pagina, come tutte le pagine di prodotto, ha bisogno del proprio aspetto.
Mostra cosa intendi references
Un’immagine è spesso più precisa di una descrizione. Utilizza Allega file (icona a forma di graffetta) nel prompt per allegare:
- Schermata del risultato desiderato, o del problema, con una frase su cosa vedere.
- Pagine della guida allo stile del brand, come immagini o come file Word o PowerPoint.
È inoltre possibile puntare a una pagina del sito che ha già l’aspetto corretto: “Impostare le schede di /adventures come quelle di /magazine”. Utilizza solo progetti e siti di riferimento che il tuo team può utilizzare.
L’agente non ricorda le regole del marchio tra le conversazioni. Una volta impostata una regola, ad esempio gli stili di pulsante o le dimensioni dell’intestazione, chiedi all’agente di scriverla nei file di istruzioni del progetto, in modo che segua la regola in ogni conversazione. Consulta Istruzioni progetto e memoria.
Lavoro da un design Figma figma
L’agente può leggere un design da Figma attraverso il componente aggiuntivo Figma import. Converte i colori, la tipografia, la spaziatura e le variabili del progetto nei token di progettazione del sito e i suoi componenti in blocchi o varianti di blocchi.
- In Figma, crea un token di accesso personale con gli ambiti di sola lettura elencati nelle impostazioni delle credenziali della console.
- Nella console aprire Impostazioni, immettere il token in Credenziali e selezionare Salva. L’attivazione di un nuovo token può richiedere alcuni minuti.
- In Figma, selezionate un componente o un fotogramma e copiate il relativo collegamento. Il collegamento include
node-idche identifica la selezione. - Nella console, invia una richiesta con il collegamento, ad esempio “Aggiorna il blocco del teaser in modo che corrisponda a questo componente Figma:
{Figma link}. Riutilizzare i token di progettazione esistenti.”
Aspetti da considerare:
- Un componente o un frame alla volta. L’agente crea un blocco da un componente o una pagina da un frame. Controlla ogni risultato prima di inviare il collegamento successivo. Vedi Creare un blocco da Figma e Creare una nuova pagina da Figma.
- Token, file. Il token di accesso personale legge ogni file Figma che puoi aprire e nient’altro. La Figma la emette e ne fissa i limiti. Ogni persona memorizza il proprio token. Non ha nulla a che fare con i token di progettazione, i colori e la spaziatura che l’agente legge dal design.
- Il tuo seggio a Figma. È necessario un sedile Dev o Full Figma; vedere Figma and Design Systems. Se la console segnala un errore API di Figma con stato 429, il token ha raggiunto il limite di frequenza di Figma.
- Componente aggiuntivo. L’importazione Figma è una funzionalità facoltativa. Se non è attivato per il progetto, l’agente offre di attivarlo.
- Token di progettazione. Confronta i nuovi token con quelli esistenti. Se un valore Figma differisce solo leggermente da un token esistente, decidi quale mantenere invece di mantenere entrambi.
Per ciò che la tua organizzazione approva prima che le persone utilizzino Figma con l’agente, consulta Figma and Design Systems.
Effettua la prima modifica first-change
- Apri una pagina nel pannello di anteprima della console.
- Nel menu Viewport, scegliere la larghezza da controllare: Desktop, Tablet o Mobile.
- Attiva la modalità Ispeziona con l’icona di selezione nel pannello di anteprima.
- Seleziona l’elemento da modificare, ad esempio un’intestazione, un’immagine o un pulsante. L’elemento viene aggiunto al prompt: l’agente riceve il HTML e la sua posizione nella pagina, e limita le modifiche a tale elemento.
- Descrivi la modifica e il livello di portata, quindi invia il messaggio di richiesta. Ad esempio: “Crea questo pulsante con il nostro stile principale, qui e su ogni pagina.”
- Al termine dell’operazione, selezionare Aggiorna anteprima se l’anteprima non è stata aggiornata. Verifica il risultato a ogni dimensione Viewport.
- Se qualcosa non va, dite quello che vedete, ad esempio “Su dispositivi mobili, il testo tocca l’immagine.” Richiedi una modifica alla volta e controllane prima di richiedere la modifica successiva.
Per annullare una modifica, chiedere all’agente di ripristinarla. Per eliminare tutte le modifiche non inviate in un file, apri la visualizzazione Modifiche e seleziona Elimina accanto al file. Vedi Azioni modifiche.
Se dopo alcuni tentativi l’agente non riceve ancora una modifica, chiedere allo sviluppatore o selezionare Richiedi supporto nella barra dei menu e descrivere cosa è stato richiesto e cosa è visualizzato. La richiesta raggiunge il team che crea l’agente. Quando una conversazione non va bene, la console potrebbe anche offrire aiuto in Serve una mano? Vedi Richiedi supporto.
Esempio di prompt example-prompts
- “Fare in modo che tutti i titoli utilizzino il tipo di carattere del titolo della guida di stile allegata.”
- “Assegna alle schede nel blocco schede la stessa altezza, con i pulsanti allineati in basso.”
- “Aggiungi una variante
darkdel blocco teaser con testo bianco sul colore del marchio scuro e applicala al secondo teaser su/adventures.” - “Aggiungere uno stile di sezione
highlightcon uno sfondo chiaro e più spazio sopra e sotto e utilizzarlo per la sezione newsletter nella home page.” - “Su dispositivi mobili, impilare le colonne e posizionare l’immagine sopra il testo.”
- “Quali pagine nella mia area di lavoro utilizzano il blocco hero? Mostratemi come ognuno di voi si occupa di questo cambiamento.”
- “Scrivere gli stili dei pulsanti concordati nei file di istruzioni del progetto.”
Controllare Prima Di Passare La Consegna check
- Controlla ogni dimensione del riquadro di visualizzazione, in particolare Dispositivi mobili.
- Controlla le altre pagine che utilizzano lo stesso blocco, stile o modello, non solo la pagina su cui hai lavorato.
- Verifica in che modo la progettazione gestisce il contenuto reale: intestazioni lunghe, intestazioni brevi, immagini mancanti ed elenchi con molti elementi.
- Verificare che il testo rimanga leggibile sullo sfondo. È possibile chiedere all’agente: “Verifica il contrasto del colore del testo nel blocco teaser rispetto a WCAG AA.”
- Dopo aver eseguito il push, apri gli URL di anteprima elencati nella richiesta di pull e controlla le pagine. Vedere Anteprima console diversa dal sito.
Consegna per la revisione hand-over
- Effettua il push del codice con Crea nuovo PR, come descritto in Modifiche al codice push. Posiziona nell’area intermedia solo i file che appartengono alla modifica e descrivilo in una frase semplice, ad esempio “Angoli arrotondati e ombreggiatura per le schede”.
- Seleziona Visualizza PR nella notifica e invia il collegamento della richiesta di pull allo sviluppatore che la rivede.
Per apportare le modifiche richieste dal revisore, continuare a lavorare sullo stesso ramo e inviare con Push al ramo corrente; la richiesta di pull viene aggiornata.
La modifica raggiunge il sito live quando lo sviluppatore lo unisce. Se in una pagina hai anche modificato testo o immagini, si tratta di una modifica del contenuto: raggiunge il sito solo quando la pagina viene caricata e pubblicata. D’accordo con gli autori che lo fanno. Consulta Coordinate Content Changes (Coordina modifiche contenuto).
Parole utilizzate in questa guida glossary
--link-color.main.Sezioni, blocchi e contenuto predefinito sono illustrati più dettagliatamente in Forma la struttura del contenuto.