Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Visa Product.
Usa Nova CSS di Visa per creare una preferenza chiara nel formato dell’estratto conto, con controlli radio nativi, intestazione di colore alternativo e riepilogo di revisione. Esamina i valori esatti del tema 1.6.5, la spaziatura scalabile e l’integrazione completa del foglio di stile.
CSS nativo di @visa/nova-styles 1.6.5 e tema Visa incorporati localmente; regole font-face remote rimosse e font di sistema utilizzati. Layout originale dell'applicazione e script locale. · Riferimento per l’implementazione
02
Riferimento di design sistema di design Visa Product
Stili pubblicati di @visa/nova-styles 1.6.5, tema Visa e metadati dell'esempio. I valori predefiniti/light sono distinti dalle varianti alternative e scure. L'anteprima incorpora localmente CSS ufficiale e rimuove le regole font-face remote, usando un font di sistema come fallback.
Sistema di design Visa Product Un'attività di scelta con uno stato di revisione chiaro
Mantieni separate le domande
L'esempio chiede il formato dell'estratto conto e la frequenza del riepilogo. Sono due gruppi radio separati: modificare la frequenza non deseleziona il formato. Il riepilogo ripete entrambe le scelte prima dell'azione principale, così l'utente può verificarne il risultato senza dover interpretare un'icona o un valore predefinito nascosto.
La revisione della preferenza registra solo una conferma locale. La pagina non richiede un numero di carta, non accede a un account, non genera un estratto conto e non modifica impostazioni di servizi finanziari. In questo modo, l'esempio si concentra sui comportamenti di selezione e feedback del design system.
Sistema di design Visa Product Gli stili Nova e il tema Visa sono importazioni separate
La struttura non costituisce l'intero tema
L'installazione ufficiale mostra prima styles.css e poi themes/visa/index.css. Il primo fornisce le regole per i componenti e le utility; il secondo fornisce il tema Visa. Caricarne solo uno comporta un'integrazione incompleta. Sia l'esempio autonomo sia lo snippet di importazione mantengono quest'ordine.
Il pacchetto verificato è alla versione 1.6.5. L'esempio incorpora localmente il proprio CSS, così al momento della visualizzazione non dipende da una richiesta di foglio di stile a terze parti. Le dichiarazioni font-face remote sono rimosse e l'applicazione usa esplicitamente un font di sistema come fallback: è Nova CSS nativo con una sostituzione del font dichiarata, non una garanzia di corrispondenza esatta con il font proprietario.
Sistema di design Visa Product Le palette predefinita e alternativa includono colori di primo piano abbinati
Non trasferire un colore di riempimento senza il relativo ruolo del testo
Il colore attivo predefinito/light è #1434cb, diventa #173be8 al passaggio del puntatore e #0f2595 quando viene premuto. Il ruolo del testo sul colore attivo è bianco. Il contesto del tema alternativo modifica la mappatura dei ruoli: per questo l'esempio applica v-alternate alla superficie dell'intestazione, invece di sovrascriverne solo lo sfondo.
L’accento #fcc015 non è un riempimento universale per i pulsanti. È il contesto del tema a determinare l’uso dei ruoli di accento e di stato attivo. La tabella di riferimento descrive la palette predefinita; le definizioni successive per i temi scuri e alternativi nello stesso foglio di stile non vengono unite in un unico insieme di valori fuorviante.
Sistema di design Visa Product Leggi la scala rem in base alla radice del tema
Una radice del tema di 14 pixel modifica i valori rem a cui sei abituato
Il tema Visa definisce una radice tipografica di 14 pixel. Il valore headline-1, pari a circa 2.285714rem, corrisponde quindi a 32 pixel con questa radice, non al valore che si ottiene ipotizzando una radice di 16 pixel. body-1 è circa 1.142857rem, mentre body-2 è 1rem.
I token di dimensione scalabili esprimono una quantità in pixel moltiplicata per il fattore di scala del tema. Nei contesti responsive può intervenire un secondo fattore. Quando adatti la spaziatura a un’applicazione, mantieni l’espressione: copiare solo il numero calcolato predefinito fa perdere questa relazione. L’esempio usa le utility ufficiali per gli spazi nei controlli di frequenza e le dimensioni originali dell’applicazione per il layout complessivo a due colonne.
Sistema di design Visa Product Semantica nativa dei pulsanti di opzione sotto la presentazione Nova
Un cerchio stilizzato non è un gruppo di pulsanti di opzione
I metadati pubblici associano v-radio a un vero input type="radio" e a una label. L’anteprima mantiene questa struttura nativa e racchiude nella label la descrizione visibile di ciascuna opzione. Le frecce della tastiera consentono di spostarsi all’interno del gruppo e lo stato selezionato resta disponibile al browser e alle tecnologie assistive.
Un fieldset e un legend identificano ciascuna domanda. Le opzioni di formato ne spiegano le conseguenze: un PDF è un estratto di esempio scaricabile, mentre HTML viene descritto come adattabile al flusso del testo. Il contenuto specifico del prodotto è originale; struttura e classi dei controlli provengono dalla libreria nativa.
Usa un name per le due opzioni di formato e un altro per la frequenza.
Mantieni distinto il valore del pulsante di opzione dal testo visibile, così il riepilogo può usare un’etichetta stabile.
Per indicare lo stato usa gli attributi checked e disabled, non solo una classe decorativa.
Sistema di design Visa Product Nova CSS applica lo stile ai controlli; gli elementi nativi HTML gestiscono la scelta
Mantieni la logica di raggruppamento e revisione fuori dal foglio di stile
L’esempio applica la classe v-radio di Nova a veri input radio. Gli attributi name condivisi rendono esclusive le opzioni di formato, mentre un name diverso separa il gruppo della frequenza. Fieldset e legend forniscono il contesto del gruppo; una label associata rende l’intero testo dell’opzione parte del nome accessibile del controllo.
Il pacchetto CSS non seleziona un’opzione, non gestisce la persistenza dell’applicazione e non crea un record di revisione. Lo script fornito legge i due gruppi nativi e crea un riepilogo locale. Una modifica cancella il riepilogo, perché i valori precedenti non descrivono più la preferenza corrente.
Nell’implementazione mantieni sia il foglio di stile strutturale sia il tema Visa. L’intestazione alternativa usa v-alternate, mentre il modulo resta nel contesto cromatico predefinito; non imitare l’intestazione cambiandone solo lo sfondo e lasciando irrisolti i ruoli del primo piano.
Sistema di design Visa Product Un unico ordine di lettura a ogni larghezza
Sposta il riepilogo senza modificare la sequenza delle attività
Negli schermi ampi, i gruppi di opzioni e il riepilogo della selezione corrente appaiono affiancati. Negli schermi piccoli, il riepilogo segue il modulo. L’illustrazione originale del documento scompare perché non aggiunge informazioni utili all’attività, mentre restano tutte le etichette, le spiegazioni e le azioni.
La libreria CSS supporta i browser evergreen moderni. Le linee guida ufficiali di sviluppo non garantiscono la compatibilità con i browser meno recenti; perciò un team di produzione dovrebbe testare le versioni effettivamente supportate, invece di considerare universale il supporto solo perché l’anteprima moderna funziona.
Carica CSS strutturale e tema Visa bloccati a una versione specifica, poi aggiungi gli stili di layout dell’applicazione.
Seleziona Accessible HTML e Trimestrale, rivedi la preferenza e verifica che entrambe le scelte compaiano nel riepilogo.
Modifica una delle due scelte, verifica che le indicazioni di revisione si azzerino, quindi prova Reimposta e il layout stretto.
CSS fornisce la presentazione dei componenti; un piccolo script aggiunge il comportamento dell’applicazione.
La modifica di una preferenza cancella il precedente stato di revisione.
L’intestazione alternativa usa un vero contesto del tema, non un’imitazione della palette disegnata a mano.
Salva il file HTML completo come index.html e aprilo in un browser con accesso agli URL pubblici CSS bloccati a una versione specifica. L’anteprima incorporata in questa guida mantiene gli stili in locale.
Carica insieme struttura e tema
In un’applicazione con bundle, importa entrambi i livelli una sola volta prima del foglio di stile dell’applicazione.
Se manca il file del tema, le classi strutturali possono essere presenti senza i token Visa previsti.
04
Configurazione dell’agente AI sistema di design Visa Product
Punto di partenza per l’implementazione
HTML completo usa i percorsi verificati styles.css e themes/visa/index.css. Sono necessari entrambi. Nell’iframe questi stili sono incorporati localmente; le dichiarazioni ufficiali font-face sono omesse.
shell / html
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/[email protected]
# Replace index.html with the complete example below.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea l’esempio di preferenza dell’estratto conto Visa Nova usando CSS strutturale e tema bloccati a una versione specifica. Mantieni i gruppi nativi di pulsanti di opzione, i legend chiari e le label associate. Separa i ruoli del tema predefinito da quelli alternativi e tieni conto della radice di 14px quando interpreti i valori rem. Mantieni locale la revisione, cancella le conferme obsolete dopo le modifiche e disponi il riepilogo in verticale sugli schermi piccoli.
05
Sistema di design Visa Product Fonti e ambito
Guida indipendente a OpenDesign con CSS nativo Nova. Questa attività immaginaria sulla preferenza non usa dati del conto né modifica alcun servizio finanziario. L’anteprima segnala la sostituzione del font con quello di sistema.
