Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Porsche.
Esplora Porsche Design System v4 con spaziature fluide, schemi cromatici CSS, tipografia Porsche Next e un configuratore a due opzioni. Il riferimento include espressioni reali dei token e un entry point Vite completo che usa gli eventi attuali di segmented-control.
Interpretazione originale e offline di HTML/CSS dei ruoli dei token della v4 e del comportamento delle scelte segmentate. Nessun runtime PDS nativo, font remoti, immagini ufficiali di modelli o dati reali sui veicoli. · Riferimento per l’implementazione
02
Riferimento di design sistema di design Porsche
Documentazione Porsche Design System v4, con pagine dei token che riportano la versione v4.8.0. È un riferimento circoscritto a una versione, non un’indicazione dell’ultima release. I campioni di finitura originali sono dati dell’applicazione, non codici ufficiali delle vernici Porsche.
Sistema di design Porsche Usa le basi della v4 come insieme completo
Le variabili globali ora sono obbligatorie
La versione 4 basa gli stili dei componenti sulle variabili globali CSS. Importare il foglio di stile globale è quindi un requisito architetturale, non un semplice reset decorativo. La stessa importazione include la normalizzazione e le definizioni @font-face di Porsche Next.
Questo riferimento riunisce i contratti dei componenti e dei token della v4. Gli esempi precedenti che usano wrapper text-field o proprietà del tema per singolo componente non vanno riutilizzati senza consultare la guida alla migrazione. Anche la documentazione è versionata: la pagina specifica quindi il proprio ambito, senza presentare API come valido per sempre.
Sistema di design Porsche Lo schema dei colori seleziona coppie complete di ruoli
Distingui i ruoli dell’interfaccia dai campioni di finitura
I token per canvas, superficie e primo piano principale contengono coppie light-dark(). La proprietà CSS color-scheme sceglie quale ramo applicare. Imposta light, dark o light dark, a seconda che l’applicazione fissi una modalità o segua le preferenze dell’utente.
I colori delle finiture in questo esempio sono campioni originali indipendenti. Passando alla modalità scura, cambiano le superfici circostanti e il testo, non la finitura selezionata. I ruoli di colore a contrasto ridotto sono decorativi: usarli per l’etichetta di un’opzione essenziale violerebbe i limiti previsti per i token.
Sistema di design Porsche Ritmo fluido e spazi fissi tra i controlli convivono
Usa espressioni clamp quando lo spazio deve aumentare
Porsche fornisce scale sia statiche sia fluide. L’implementazione nativa usa l’espressione fluida media per il padding della pagina, mentre gli spazi di 16px e 32px mantengono relazioni stabili all’interno dell’area delle opzioni. Un limite massimo fluido evita che gli spazi vuoti continuino ad aumentare senza fine sugli schermi ampi.
Sotto i 760px, il layout dell’esempio passa da una disposizione affiancata di elementi visivi e controlli a sezioni impilate: 760px è uno dei valori di breakpoint documentati. La scelta di impilare le sezioni è una decisione compositiva dell’applicazione; il valore del breakpoint è invece un riferimento del sistema.
Sistema di design Porsche La tipografia dipende dal font fornito
L’espressione dell’altezza della riga non è un rapporto generico
Porsche Next ha una pila di fallback documentata e una scala tipografica con dimensioni ridotte fisse e dimensioni maggiori fluide. leadingNormal usa unità ex, che rispondono all’altezza della x del font, più un’aggiunta fissa in pixel. Sostituirla con un rapporto arbitrario di 1.5 cambia il ritmo previsto.
L’interpretazione offline usa un fallback locale e un’altezza della riga comodamente leggibile, senza fingere che il font con licenza sia incluso. Nell’implementazione nativa, il foglio di stile globale definisce il font effettivo. Nel linguaggio di design della v4, le intestazioni usano il peso regular: un corpo più grande non richiede un peso più marcato per stabilire la gerarchia.
Sistema di design Porsche Controlli e contenitori usano raggi diversi
Dodici e ventiquattro pixel definiscono la gerarchia principale
Il raggio standard per gli elementi interattivi è 12px; la famiglia di schede e finestre di dialogo usa 24px. I controlli compatti passano a 8px, mentre le notifiche usano 16px. Applicare ovunque l’arrotondamento più ampio cancellerebbe queste relazioni.
L’anteprima originale colloca lo studio del veicolo su un’ampia superficie con raggio di 24px e usa controlli con raggio di 12px. La sagoma del veicolo è un’opera originale CSS, non un rendering di un modello Porsche né una fotografia di prodotto. La stessa composizione può essere usata per un selettore di materiali senza suggerire che la configurazione sia realmente disponibile.
Sistema di design Porsche Un controllo segmentato è un’opzione, non una barra di schede
Usa valori stabili e un unico proprietario dello stato
Ogni p-segmented-control-item fornisce un valore. L’evento change restituisce quel valore in event.detail, che l’esempio memorizza prima di ridisegnare il riepilogo. Il gruppo espone un’etichetta visibile, così le opzioni di finitura e quelle delle ruote restano distinguibili.
Il v4 API supporta un numero di colonne adattabile e uno scorrimento facoltativo senza ritorno a capo. Le opzioni brevi possono restare tutte visibili; le etichette localizzate più lunghe dovrebbero andare a capo o usare uno scorrimento intenzionale, anziché essere troncate. I controlli disabilitati sono esclusi dai dati del modulo, un aspetto importante se questo esempio viene esteso a un modulo reale.
Inizializza una sola volta nello stato dell’applicazione i valori di finitura e ruote.
Leggi detail.value dall’evento change del gruppo.
Aggiorna insieme lo studio visibile e la selezione testuale.
Dopo una modifica, cancella ogni riepilogo salvato in precedenza.
Sistema di design Porsche Una selezione locale non è una transazione completata
Usa tipi di pulsante espliciti
p-button ha submit come valore predefinito. L’esempio imposta type="button" perché salvare una combinazione e cambiare la combinazione di colori sono interazioni locali. Per la navigazione si usa il componente Link, anziché un pulsante con una destinazione inventata.
L’azione principale descrive con precisione ciò che è accaduto: la combinazione è stata salvata per la sessione corrente della pagina. Non dichiara che verrà conservata dopo un ricaricamento, archiviata nell’account o usata per effettuare un ordine. Questo comportamento circoscritto è intenzionale e completo per un esempio d’interfaccia.
L’azione principale salva la combinazione locale corrente.
L’azione secondaria cambia la combinazione di colori dell’interfaccia.
Le etichette visibili sono presenti per entrambe le azioni.
Non viene mostrato alcuno spinner di caricamento quando non è in corso un’operazione.
Sistema di design Porsche Carica i componenti e proteggi il primo rendering
Loader, foglio di stile e compilatore collaborano
La configurazione di Vite inserisce nel corpo del documento il partial ufficiale del loader. Il punto d’ingresso principale importa il foglio di stile globale e renderizza veri elementi personalizzati. Le regole scoped :not(:defined) impediscono ai tag dei componenti selezionati di lampeggiare prima della registrazione.
La configurazione di Vite documentata esclude la trasformazione LightDark di Lightning CSS, poiché il relativo polyfill è indicato come non funzionante. È importante mantenere questa esclusione: compilare in modo errato la funzione token può compromettere il tema anche quando il markup dei componenti è corretto. In seguito si possono aggiungere i preload consigliati tramite i partial documentati per font, icone e componenti.
Sistema di design Porsche Esempi di componenti del sistema di progettazione
Esempio interattivo completo e autonomo
Salva l’intero documento come index.html e aprilo in un browser. Interpretazione offline originale HTML/CSS dei ruoli dei token v4 e del comportamento di selezione segmentata. Nessun runtime PDS nativo, font remoti, immagini ufficiali di modelli o dati reali di veicoli.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Original finish study</title><style>:root{color-scheme:light;--canvas:#fff;--surface:hsl(240 10% 95%);--ink:hsl(225 66.7% 1.2%);--line:#c8c8cd;--paint:#b9b6ae}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 'Arial Narrow',Arial,sans-serif}body.dark{color-scheme:dark;--canvas:hsl(225 66.7% 1.2%);--surface:hsl(240 2% 10%);--ink:#fcfcff;--line:#515156}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible+span{outline:3px solid #1a44ea;outline-offset:4px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line)}header b{letter-spacing:3px;font-weight:400}header button{border:1px solid var(--line);color:var(--ink);background:var(--canvas);border-radius:12px;padding:8px 16px}main{max-width:1200px;padding:clamp(16px,1.25vw + 12px,36px);margin:auto}h1{font-size:clamp(1.6rem,1.56vw + 1.29rem,3.16rem);font-weight:400;line-height:1.2;margin:16px 0}.intro{color:var(--ink);opacity:.8;max-width:650px}.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:32px}.stage{background:var(--surface);border-radius:24px;display:flex;flex-direction:column;justify-content:center;min-height:360px;overflow:hidden;padding:32px;position:relative}.scene{height:210px;position:relative;width:100%;max-width:520px;margin:auto}.car{height:80px;width:94%;position:absolute;bottom:28px;left:3%;background:var(--paint);border-radius:60% 35% 18% 22% / 75% 65% 25% 35%;box-shadow:inset 0 5px 10px #ffffff70,inset 0 -10px 12px #0003}.roof{position:absolute;bottom:80px;left:25%;width:46%;height:70px;background:var(--paint);border-radius:65% 55% 0 0;transform:skewX(-9deg)}.window{position:absolute;inset:9px 13px 4px;background:linear-gradient(135deg,#202d37,#67737b);border-radius:70% 52% 0 0;border-right:7px solid var(--paint)}.window:after{content:'';position:absolute;left:46%;top:0;height:100%;width:6px;background:var(--paint)}.wheel{position:absolute;bottom:12px;width:69px;height:69px;background:repeating-conic-gradient(#d2d5d8 0deg 13deg,#42464b 13deg 60deg);border:11px solid #191a1d;border-radius:50%;box-shadow:0 0 0 4px #08090a}.wheel.a{left:16%}.wheel.b{right:12%}.aero .wheel{background:radial-gradient(circle,#505860 0 18%,#c6c9cc 20% 65%,#464a4d 68%)}.headlight{position:absolute;right:0;top:18px;width:34px;height:12px;background:#fff9d8;border:2px solid #ffffff80;border-radius:80%;transform:rotate(15deg)}.shadow{height:10px;background:#0002;position:absolute;bottom:7px;width:90%;left:5%;border-radius:50%;filter:blur(5px)}.stage small{font-size:12px;opacity:.7}.panel{padding:8px 0}fieldset{border:0;padding:0;margin:0 0 32px;min-width:0}legend{font-size:18px;margin-bottom:16px}.segments{display:flex;background:var(--surface);padding:4px;border-radius:16px;gap:4px}.segments label{flex:1;min-width:0;position:relative;text-align:center;cursor:pointer}.segments input{position:absolute;opacity:0;width:1px;height:1px}.segments span{display:block;padding:12px 8px;border:1px solid transparent;border-radius:12px}.segments input:checked+span{background:var(--canvas);border-color:var(--ink);box-shadow:0 1px 4px #0002}.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;border:1px solid #777}.summary{border-top:1px solid var(--line);padding-top:24px;margin:0 0 24px}.summary small{display:block;opacity:.65;margin-bottom:4px}.summary strong{font-weight:400;font-size:20px}.primary{border:0;border-radius:12px;min-height:52px;background:var(--ink);color:var(--canvas);padding:12px 24px;width:100%}.saved{border-left:3px solid var(--ink);padding-left:16px;margin-top:24px}.saved:empty{display:none}footer{font-size:12px;opacity:.7;padding-top:32px}@media(max-width:759px){header{padding:16px}header b{font-size:13px;letter-spacing:1px}.layout{grid-template-columns:1fr;gap:24px}.stage{min-height:270px;padding:16px}.scene{height:210px}.wheel{width:53px;height:53px;border-width:8px;bottom:21px}.car{bottom:38px}.roof{bottom:91px;height:60px}.segments span{padding:12px 5px;font-size:14px}fieldset{margin-bottom:24px}}
</style><header><b>DESIGN STUDY / 01</b><button id="theme" type="button">Dark interface</button></header><main><h1>A different point of view.</h1><p class="intro">Explore two small choices in an original vehicle study. See how a restrained interface keeps the object at the center.</p><div class="layout"><div class="stage"><div class="scene" id="scene" role="img" aria-label="Original vehicle illustration in Chalk with Classic wheels"><div class="shadow"></div><div class="roof"><div class="window"></div></div><div class="car"><div class="headlight"></div></div><div class="wheel a"></div><div class="wheel b"></div></div><small>Original illustration · Not a Porsche model render</small></div><section class="panel" aria-label="Study options"><fieldset><legend>Finish</legend><div class="segments"><label><input type="radio" name="paint" value="chalk" checked><span><i class="swatch" style="background:#b9b6ae"></i>Chalk</span></label><label><input type="radio" name="paint" value="blue"><span><i class="swatch" style="background:#456171"></i>Coastal blue</span></label><label><input type="radio" name="paint" value="red"><span><i class="swatch" style="background:#9f2937"></i>Garnet</span></label></div></fieldset><fieldset><legend>Wheel study</legend><div class="segments"><label><input type="radio" name="wheel" value="Classic" checked><span>Classic</span></label><label><input type="radio" name="wheel" value="Aero"><span>Aero</span></label></div></fieldset><p class="summary" aria-live="polite"><small>YOUR COMBINATION</small><strong id="summary">Chalk · Classic</strong></p><button class="primary" id="save" type="button">Keep this combination</button><p class="saved" id="saved" role="status"></p></section></div><footer>Independent PDS v4 interpretation. Original finish names and illustration; no pricing, vehicle specification, live configuration or order. Choices last only for this page session.</footer></main><script>const colors={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'},names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};function values(){return[document.querySelector('[name=paint]:checked').value,document.querySelector('[name=wheel]:checked').value]}function update(){const[p,w]=values();document.documentElement.style.setProperty('--paint',colors[p]);document.querySelector('#scene').classList.toggle('aero',w==='Aero');document.querySelector('#scene').setAttribute('aria-label',`Original vehicle illustration in ${names[p]} with ${w} wheels`);document.querySelector('#summary').textContent=`${names[p]} · ${w}`;document.querySelector('#saved').textContent=''}document.querySelectorAll('input').forEach(x=>x.addEventListener('change',update));document.querySelector('#save').onclick=()=>{const[p,w]=values();document.querySelector('#saved').textContent=`Kept for this page session: ${names[p]}, ${w}. No order submitted.`};document.querySelector('#theme').onclick=e=>{const dark=document.body.classList.toggle('dark');e.currentTarget.textContent=dark?'Light interface':'Dark interface'};</script></html>
Le opzioni di finitura e ruote aggiornano un’illustrazione originale per un configuratore. Non rappresentano specifiche di prodotto Porsche; gli eventi nativi del controllo segmentato sono mostrati nell’esempio v4 separato.
Due opzioni controllate con un riepilogo valido solo per la sessione
Gli elementi nativi p-segmented-control emettono eventi change con detail.value; p-button usa click e un type esplicito.
typescript
import './style.css';
const paints={chalk:'#b9b6ae',blue:'#456171',red:'#9f2937'};
const names={chalk:'Chalk',blue:'Coastal blue',red:'Garnet'};
type Paint=keyof typeof paints;
let paint:Paint='chalk',wheel='Classic';
document.querySelector<HTMLDivElement>('#app')!.innerHTML=`
<main><h1>Explore an original color study</h1>
<p>This specimen is not a real vehicle configurator or order.</p>
<div class="options">
<p-segmented-control id="paint" label="Finish" value="chalk">
<p-segmented-control-item value="chalk">Chalk</p-segmented-control-item>
<p-segmented-control-item value="blue">Coastal blue</p-segmented-control-item>
<p-segmented-control-item value="red">Garnet</p-segmented-control-item>
</p-segmented-control>
<p-segmented-control id="wheel" label="Wheel study" value="Classic">
<p-segmented-control-item value="Classic">Classic</p-segmented-control-item>
<p-segmented-control-item value="Aero">Aero</p-segmented-control-item>
</p-segmented-control>
</div><div class="preview"><div id="swatch" style="height:120px;border-radius:12px"></div>
<p id="summary" aria-live="polite"></p></div>
<div class="actions"><p-button id="save" type="button">Keep this combination</p-button>
<p-button id="scheme" type="button" variant="secondary">Switch color scheme</p-button></div>
<p id="saved" role="status"></p></main>`;
function render(){document.querySelector<HTMLElement>('#swatch')!.style.background=paints[paint];document.querySelector('#summary')!.textContent=`${names[paint]} · ${wheel} wheel study`;document.querySelector('#saved')!.textContent='';}
document.querySelector('#paint')!.addEventListener('change',e=>{const v=(e as CustomEvent<{value:string}>).detail.value;if(v in paints){paint=v as Paint;render();}});
document.querySelector('#wheel')!.addEventListener('change',e=>{wheel=String((e as CustomEvent<{value:string}>).detail.value);render();});
document.querySelector('#save')!.addEventListener('click',()=>{document.querySelector('#saved')!.textContent=`Kept for this page session: ${names[paint]}, ${wheel}. No order submitted.`;});
document.querySelector('#scheme')!.addEventListener('click',()=>{const root=document.documentElement;root.style.colorScheme=root.style.colorScheme==='dark'?'light':'dark';});
render();
Modificare una delle due opzioni cancella la combinazione salvata in precedenza.
La proprietà color-scheme controlla il tema del sistema; i campioni di finitura restano dati originali dell’applicazione.
L’esempio non raccoglie recapiti, non prenota un veicolo e non invia ordini.
04
Sistema di design Porsche Configurazione dell’agente
Punto di partenza per l’implementazione
Configurazione dei Web Component nativi versione 4 con il foglio di stile globale documentato e il partial del loader. L’anteprima offline non include font remoti né runtime del pacchetto; qui non è stata verificata la compilazione del pacchetto nativo.
testo
# In a new Vite vanilla-ts project:
npm create vite@latest pds-specimen -- --template vanilla-ts
cd pds-specimen
npm install
npm install @porsche-design-system/components-js@4
npm install --save-dev lightningcss
// vite.config.ts
import {defineConfig} from 'vite';
import {Features} from 'lightningcss';
import {getLoaderScript} from '@porsche-design-system/components-js/partials';
export default defineConfig({
plugins:[{name:'pds-loader',transformIndexHtml(html){
return html.replace('</body>',getLoaderScript()+'</body>');
}}],
css:{transformer:'lightningcss',lightningcss:{exclude:Features.LightDark}}
});
/* src/style.css */
@import '@porsche-design-system/components-js';
html { color-scheme: light; }
:is(p-button,p-segmented-control,p-segmented-control-item):not(:defined){visibility:hidden}
main{max-width:60rem;margin:auto;padding:clamp(16px,1.25vw + 12px,36px)}
.options{display:grid;gap:32px}
.preview{padding:32px;border-radius:24px;margin-block:32px;border:1px solid currentColor}
.actions{display:flex;gap:16px;flex-wrap:wrap}
# Replace src/main.ts with the example below, then:
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea una composizione PDS versione 4 con stili globali obbligatori, partial del loader, color-scheme, spaziatura fluida effettiva e raggi di 12px per i controlli e di 24px per i contenitori. Usa change detail.value del segmented-control per due opzioni di esempio originali e type=button esplicito per le azioni locali. Non mescolare le API dei wrapper legacy e non presentare l’esempio come una configurazione reale di un veicolo.
05
Sistema di design Porsche Fonti e ambito
Riferimento indipendente OpenDesign limitato a PDS v4. Le illustrazioni e i nomi delle finiture originali non sono specifiche di veicoli Porsche, codici di verniciatura o opzioni disponibili. Non viene eseguita alcuna transazione.
