Esamina i token effettivi di Seeds per colori, spaziatura, tipografia di prodotto e bordi attraverso una coda editoriale completa, con selezione multipla, stati vuoti dopo il filtraggio e annullamento.
Token del prodotto e ambito del runtime del sistema di progettazione sistema di design Sprout Social Seeds
Usa le fondamenta del prodotto
Seeds distingue la tipografia del prodotto da quella del brand. La coda usa il token effettivo della famiglia di caratteri di sistema del pacchetto tipografico pubblico, insieme ai token pubblicati per colori, spaziatura e bordi. Non carica un carattere tipografico per il marketing per poi sostenere di riprodurre il sistema del prodotto. Le versioni dei pacchetti sono bloccate nella configurazione, così il riferimento e l’esempio restano confrontabili.
Separa i token dai componenti
Caricare i pacchetti di token Seeds rende disponibili le variabili; non crea un editor di post né un albero di componenti React. Le schede, la logica di selezione e l’azione di revisione locale di questo studio sono codice originale in OpenDesign. La pagina definisce esplicitamente questa implementazione basata sui token. I componenti Seeds React nativi hanno requisiti di integrazione propri, illustrati nelle risorse ufficiali sui componenti.
Riferimenti per palette, spaziatura e tipografia del sistema di progettazione sistema di design Sprout Social Seeds
Usa i nomi esatti dei token
Il riferimento include nomi esportati effettivi, come --space-size--350 per 12 px e --border-radius-600 per 8 px. Non è possibile dedurre questi nomi moltiplicando un’etichetta della scala. CSS importa direttamente i file dei token e usa le relative variabili, così è possibile risalire da un valore renderizzato alla distribuzione bloccata, anziché a una palette ipotizzata.
Fai attenzione alla base di rem
Il pacchetto della spaziatura fornisce sia valori in pixel sia in rem. Per esempio, il valore di 16 px è rappresentato anche come 0.8888888888888888rem, in base a una base di 18 px. Lo studio usa i token in pixel per esplicitare la spaziatura prevista. Sostituire alla cieca quei valori in rem in una radice da 16 px cambierebbe la densità, anziché mantenerla.
Schede editoriali e contesto di revisione del sistema di progettazione sistema di design Sprout Social Seeds
Rendi ogni scheda utile prima dell’interazione
Ogni scheda include un canale, uno stato, un titolo originale e un breve post completo. Un dettaglio espandibile offre criteri di revisione. I contenuti sono materiale fittizio di esercitazione e lo spazio di lavoro non è collegato ad alcun account social. Una scheda può quindi descrivere un’attività credibile senza suggerire l’accesso a post o dati analitici reali.
Mantieni gli accenti del brand secondari rispetto alla lettura
Il blu identifica l’azione di revisione della coda originale e il verde accompagna il testo Pronto per la revisione. Queste associazioni di ruolo sono scelte applicative che usano voci effettive della palette. Lo stato è sempre espresso anche a parole, quindi il significato non dipende dalla percezione del colore. Bordi e spaziatura separano i tre post senza sostituire i contenuti leggibili con segnaposto decorativi.
Selezione visibile e stato misto nel sistema di progettazione sistema di design Sprout Social Seeds
Limita la selezione in blocco alla vista corrente
Seleziona i post visibili agisce sull’insieme filtrato. Se si seleziona una sola delle diverse schede visibili, la casella di selezione in blocco assume il suo stato indeterminato nativo. Cambiando il filtro, la selezione viene cancellata, così un record nascosto non può essere modificato da un’azione successiva. Il conteggio visibile indica sia il numero di elementi mostrati sia quello selezionato.
La selezione in blocco si applica solo ai record visibili.
La selezione mista usa la proprietà nativa indeterminate.
Cambiando il filtro, la selezione viene cancellata.
Lo stato dell’azione deriva dai record selezionati in bozza.
Abilita solo le azioni pertinenti
Stati vuoti filtrati e annullamento nel sistema di progettazione sistema di design Sprout Social Seeds
Consenti di recuperare una coda vuota
Contrassegnare come pronte per la revisione tutte le bozze visibili mentre si visualizza il filtro Bozze lascia naturalmente un risultato vuoto. Lo stato vuoto spiega che i record esistono ancora e offre l’opzione Mostra tutti i post. Non visualizza uno spinner di caricamento né inventa un errore di rete per un risultato locale noto. La distinzione tra nessuna corrispondenza e nessun record resta visibile.
Annulla l’ultima modifica effettiva
L’applicazione memorizza lo stato precedente solo per i record modificati dall’ultima azione di revisione. Annulla ripristina quei valori, ridisegna la vista corrente e riporta il focus sul filtro. Non ripristina record non correlati né finge di annullare un post social pubblicato. Un’azione in blocco successiva sostituisce l’unica operazione di annullamento disponibile, in linea con l’etichetta Annulla l’ultima modifica.
Coda eseguibile completa e verifiche del sistema di progettazione sistema di design Sprout Social Seeds
Usa tutte e quattro le distribuzioni dei token
Il sorgente importa color, space, typography e border CSS prima del foglio di stile originale della composizione. Salva insieme il file completo main.js, seeds.css e la shell HTML. L’anteprima include gli stessi valori pubblici e il codice dell’applicazione, senza font remoti né backend. Le versioni esatte dei pacchetti sono indicate nel comando di installazione.
Installa i quattro pacchetti Seeds di token con versioni bloccate.
Salva la voce fornita, CSS e l’elemento root HTML.
Verifica la selezione mista prima di modificare il filtro.
Verifica il ripristino dopo un filtro senza risultati e l’annullamento dopo una revisione in blocco.
Verifica una combinazione di stati
Seleziona un post e verifica lo stato misto del controllo in blocco. Cambia lo stato in Bozza e controlla che la selezione venga azzerata. Seleziona le bozze visibili, contrassegnale come pronte e verifica il risultato vuoto. Annulla e conferma che le due bozze siano ripristinate, quindi mostra tutti i post. Alla larghezza di un telefono, le schede diventano un’unica colonna di lettura, mentre le etichette e i controlli di revisione restano accessibili.
Esempi di componenti del sistema di design Sprout Social Seeds
main.js — coda editoriale completa
Dati originali, filtro, selezione mista, modifica in blocco e annullamento.
javascript
import '@sproutsocial/seeds-color/dist/seeds-color.css';
import '@sproutsocial/seeds-space/dist/seeds-space.css';
import '@sproutsocial/seeds-typography/dist/seeds-typography.css';
import '@sproutsocial/seeds-border/dist/seeds-border.css';
import './seeds.css';
let items=[{id:'p1',title:'A clearer first step',channel:'Team updates',copy:'A useful guide starts with the task someone needs to complete. This week, we are revisiting the first step in our workshop toolkit.',status:'Draft'},{id:'p2',title:'Room for different perspectives',channel:'Community notes',copy:'Good workshop preparation creates more than an agenda. It gives people time to think and more than one way to contribute.',status:'Draft'},{id:'p3',title:'From notes to next actions',channel:'Team updates',copy:'Close a conversation with a decision, an owner and a date to look again. Keep open questions visible alongside the agreed next step.',status:'Ready for review'}];let chosen=new Set(),previous=null;
document.querySelector('#root').innerHTML=`<main><header><div><p class="eyebrow">OpenDesign · Editorial practice</p><h1>A small queue, ready for a closer look</h1><p>Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.</p></div><span class="badge">3 sample posts</span></header><section class="filters" aria-label="Queue controls"><label>Status <select id="filter"><option>All posts</option><option>Draft</option><option>Ready for review</option></select></label><label class="select-all"><input type="checkbox" id="all">Select visible posts</label><button id="review" disabled>Mark ready for review</button></section><p id="count" role="status"></p><div id="posts"></div><section id="empty" hidden><h2>No posts in this view</h2><p>Your sample posts remain available in the full queue.</p><button id="clear">Show all posts</button></section><div id="notice" hidden><p id="message" role="status"></p><button id="undo">Undo last change</button></div><footer>Uses the published Seeds color, space, typography and border token packages. The post cards, selection model and local review action are original OpenDesign code, not Sprout Social’s application or native React components.</footer></main>`;
function visible(){let value=document.querySelector('#filter').value;return items.filter(x=>value==='All posts'||x.status===value)}
function updateSelection(){let rows=visible(),selected=rows.filter(x=>chosen.has(x.id));const all=document.querySelector('#all');all.checked=rows.length>0&&selected.length===rows.length;all.indeterminate=selected.length>0&&selected.length<rows.length;all.disabled=!rows.length;document.querySelector('#review').disabled=!selected.some(x=>x.status==='Draft');document.querySelector('#count').textContent=`${rows.length} posts shown · ${selected.length} selected`;}
function render(){let rows=visible();chosen=new Set([...chosen].filter(id=>rows.some(x=>x.id===id)));const root=document.querySelector('#posts');root.replaceChildren(...rows.map(x=>{let a=document.createElement('article');a.innerHTML=`<div class="post-head"><label><input type="checkbox" data-id="${x.id}" aria-label="Select ${x.title}" ${chosen.has(x.id)?'checked':''}><span class="channel">${x.channel}</span></label><span class="status ${x.status==='Draft'?'draft':'ready'}">${x.status}</span></div><h2>${x.title}</h2><p class="copy">${x.copy}</p><details><summary>Review checklist</summary><ul><li>The first sentence makes the subject clear.</li><li>The wording describes a real next step.</li><li>The post does not promise an unavailable feature.</li></ul></details>`;a.querySelector('input').onchange=e=>{e.target.checked?chosen.add(x.id):chosen.delete(x.id);updateSelection()};return a}));document.querySelector('#empty').hidden=rows.length>0;updateSelection();}
document.querySelector('#filter').onchange=()=>{chosen.clear();render()};document.querySelector('#all').onchange=e=>{chosen=new Set(e.target.checked?visible().map(x=>x.id):[]);render()};document.querySelector('#review').onclick=()=>{let changed=items.filter(x=>chosen.has(x.id)&&x.status==='Draft');if(!changed.length)return;previous=changed.map(x=>({id:x.id,status:x.status}));changed.forEach(x=>x.status='Ready for review');chosen.clear();render();document.querySelector('#notice').hidden=false;document.querySelector('#message').textContent=`${changed.length} ${changed.length===1?'post marked':'posts marked'} ready for review locally. Nothing was published.`;};document.querySelector('#undo').onclick=()=>{previous?.forEach(p=>{items.find(x=>x.id===p.id).status=p.status});previous=null;render();document.querySelector('#notice').hidden=true;document.querySelector('#filter').focus()};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All posts';render();document.querySelector('#filter').focus()};render();
Sostituisci il file index.html radice di Vite con questo file.
04
Configurazione dell’agente del sistema di design Sprout Social Seeds
Punto di partenza per l’implementazione
Questi sono pacchetti pubblici di token. L’applicazione completa per la revisione è codice originale fornito sopra.
sh
npm create vite@latest seeds-review -- --template vanilla
cd seeds-review
npm install
npm install @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected]
# Save index.html at root; main.js and seeds.css in src.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Realizza la coda editoriale fornita usando il pacchetto pubblico Seeds di token CSS con versione bloccata. Mantieni i nomi reali dei token, la tipografia di sistema per i prodotti, la selezione degli elementi visibili, lo stato misto nativo, gli aggiornamenti in blocco solo per le bozze, il ripristino da stato vuoto e l’annullamento in un passaggio. Mantieni i contenuti di esempio originali e non suggerire mai che sia collegato un account social o che venga eseguita una pubblicazione.
05
Fonti e ambito del sistema di design Sprout Social Seeds
Un’applicazione originale OpenDesign che usa pacchetti pubblici di token Seeds. Le schede e il flusso di revisione sono originali HTML/JavaScript, non componenti nativi Seeds React. Non è collegato alcun account social e non viene pubblicato nulla.
