Inspecciona los tokens públicos reales de Seeds para color, espaciado, tipografía de producto y bordes mediante una cola editorial completa, con selección múltiple, estados vacíos con filtros y opción para deshacer.
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--100
2px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--200
4px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--300
8px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--350
12px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--400
16px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--450
24px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--500
32px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
--space-size--600
40px
Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px.
Tokens de producto y ámbito de ejecución del sistema de diseño de Sprout Social Seeds
Usa los fundamentos del producto
Seeds distingue la tipografía de producto de la tipografía de marca. La cola usa el token real de familia tipográfica del sistema del paquete público de tipografía, junto con los tokens publicados de color, espaciado y bordes. No carga una tipografía de marketing para luego afirmar que reproduce el sistema del producto. Las versiones de los paquetes están fijadas en la configuración, de modo que la referencia y el ejemplo sigan siendo comparables.
Separa los tokens de los componentes
Cargar los paquetes de tokens de Seeds expone variables; no crea un editor de publicaciones ni un árbol de componentes de React. Las tarjetas, la lógica de selección y la acción local de revisión de este estudio son código original en OpenDesign. La página lo describe deliberadamente como una implementación basada en tokens. Los componentes nativos de Seeds React tienen sus propios requisitos de integración, disponibles en los recursos oficiales de componentes.
Referencias de paleta, espaciado y tipografía del sistema de diseño de Sprout Social Seeds
Usa los nombres exactos de los tokens
La referencia incluye nombres de exportación reales, como --space-size--350 para 12 px y --border-radius-600 para 8 px. No es posible deducir estos nombres multiplicando una etiqueta de escala. El CSS importa directamente los archivos de tokens y usa sus variables, de modo que se puede rastrear un valor representado hasta la distribución fijada, en lugar de recurrir a una paleta inventada.
Ten en cuenta la referencia de rem
El paquete de espaciado ofrece valores tanto en píxeles como en rem. Por ejemplo, el incremento de 16 px también se representa como 0.8888888888888888rem, según una referencia de 18 px. El estudio usa los valores de los tokens en píxeles para explicitar el espaciado previsto. Sustituir esos valores rem sin más en una raíz de 16 px cambiaría la densidad en lugar de conservarla.
Tarjetas editoriales y contexto de revisión del sistema de diseño de Sprout Social Seeds
Haz que cada tarjeta sea útil antes de interactuar
Cada tarjeta incluye un canal, un estado, un título original y una publicación breve completa. Un desplegable secundario ofrece criterios de revisión. El contenido es material ficticio de práctica y el espacio de trabajo no está conectado a ninguna cuenta de redes sociales. Así, una tarjeta puede presentar una tarea verosímil sin sugerir que se accede a publicaciones o estadísticas reales.
Mantén los acentos de marca en segundo plano para facilitar la lectura
El azul identifica la acción de revisión de la cola original y el verde acompaña el texto «Listo para revisión». Estas asignaciones de función son decisiones de la aplicación que usan colores reales de la paleta. El estado siempre aparece escrito, por lo que su significado no depende de percibir el color. Los bordes y el espaciado separan las tres publicaciones sin sustituir contenido legible por elementos decorativos de relleno.
Selección visible y estado mixto del sistema de diseño de Sprout Social Seeds
Limita la selección múltiple a la vista actual
Seleccionar publicaciones visibles actúa sobre el conjunto filtrado. Si se selecciona solo una de varias tarjetas visibles, la casilla de selección múltiple adopta su estado nativo indeterminado. Al cambiar el filtro, se borra la selección para impedir que una acción posterior modifique un registro oculto. El recuento de elementos visibles indica cuántos se muestran y cuántos están seleccionados.
La selección múltiple solo se aplica a los registros visibles.
La selección mixta usa la propiedad nativa indeterminate.
Al cambiar el filtro, se borra la selección.
El estado de la acción se determina a partir de los borradores seleccionados.
Habilita solo las acciones pertinentes
Estados vacíos con filtros y deshacer del sistema de diseño de Sprout Social Seeds
Permite recuperar una cola vacía
Si se marcan como listos todos los borradores visibles mientras se muestra el filtro Borrador, es normal que el resultado quede vacío. El estado vacío explica que los registros siguen existiendo y ofrece la opción «Mostrar todas las publicaciones». No muestra un indicador de carga ni inventa un error de red para un resultado local conocido. Se mantiene visible la diferencia entre no encontrar coincidencias y no tener registros.
Deshaz el último cambio real
La aplicación solo guarda el estado anterior de los registros modificados por la última acción de revisión. Deshacer restaura esos valores, vuelve a representar la vista actual y devuelve el foco al filtro. No restablece registros ajenos a la acción ni simula deshacer una publicación en redes sociales. Una acción por lotes posterior sustituye la única operación de deshacer disponible, de acuerdo con la etiqueta «Deshacer último cambio».
Cola ejecutable completa y comprobaciones del sistema de diseño Sprout Social Seeds
Usa las cuatro distribuciones de tokens
El código fuente importa los tokens de color, espacio, tipografía y borde CSS antes de la hoja de estilos de composición original. Guarda juntos los archivos completos main.js, seeds.css y el contenedor HTML. La vista previa incluye esos mismos valores públicos y el código de la aplicación, sin fuentes remotas ni backend. Las versiones exactas de los paquetes aparecen en el comando de instalación.
Instala los cuatro paquetes de tokens Seeds con versiones fijadas.
Guarda el punto de entrada proporcionado, CSS y el elemento raíz HTML.
Prueba la selección mixta antes de cambiar el filtro.
Verifica la recuperación tras un filtro sin resultados y la opción de deshacer después de revisar un lote.
Prueba una combinación de estados
Selecciona una publicación y comprueba el estado mixto de las acciones en lote. Cambia a Borradores y verifica que se borre la selección. Selecciona los borradores visibles, márcalos como listos y comprueba que no haya resultados. Deshaz la acción y confirma que vuelvan los dos borradores; después, muestra todas las publicaciones. En una pantalla de teléfono, las tarjetas se disponen en una sola columna de lectura, mientras que las etiquetas y los controles de revisión siguen siendo accesibles.
Ejemplos de componentes del sistema de diseño Sprout Social Seeds
main.js — cola editorial completa
Datos originales, filtro, selección mixta, cambios por lote y opción de deshacer.
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();
Reemplaza el index.html raíz de Vite con este archivo.
04
Configuración del agente del sistema de diseño Sprout Social Seeds
Punto de partida para la implementación
Estos son paquetes de tokens públicos. La aplicación completa de revisión es código original proporcionado más arriba.
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
Una instrucción para tu proyecto
Instrucción para el agente
Crea la cola editorial proporcionada con los tokens públicos de Seeds CSS y sus versiones fijadas. Conserva los nombres reales de los tokens, la tipografía de producto del sistema, la selección limitada a elementos visibles, el estado mixto nativo, las actualizaciones por lote solo para borradores, la recuperación cuando no hay resultados y la opción de deshacer en un solo paso. Mantén el contenido de ejemplo original y no des a entender que hay una cuenta de redes sociales conectada ni que se realiza una publicación.
05
Fuentes y alcance del sistema de diseño Sprout Social Seeds
Aplicación OpenDesign original que utiliza paquetes públicos de tokens Seeds. Las tarjetas y el flujo de revisión son HTML/JavaScript originales, no componentes nativos de Seeds React. No hay ninguna cuenta de redes sociales conectada ni se publica contenido.
