Inspecione as cores públicas, o espaçamento, a tipografia de produto e os tokens de borda reais do Seeds em uma fila completa de revisão editorial, com seleção múltipla, estados vazios após filtragem e opção de desfazer.
Tokens de produto e escopo de runtime do sistema de design Sprout Social Seeds
Use os fundamentos do produto
Seeds distingue a tipografia do produto da tipografia da marca. A fila usa o token real de família tipográfica do sistema, disponível no pacote público de tipografia, junto com os tokens publicados de cor, espaçamento e borda. Ela não carrega uma fonte de marketing para depois afirmar que reproduz o sistema do produto. As versões dos pacotes são fixadas na configuração para manter a referência e o exemplo comparáveis.
Separe tokens de componentes
Carregar os pacotes de tokens do Seeds disponibiliza variáveis; isso não cria um editor de publicações nem uma árvore de componentes React. Os cartões, a lógica de seleção e a ação local de revisão deste estudo são código original em OpenDesign. A página se descreve deliberadamente como uma implementação baseada em tokens. Os componentes nativos do Seeds React têm requisitos próprios de integração, disponíveis nos recursos oficiais de componentes.
Referências de paleta, espaçamento e tipografia do sistema de design Sprout Social Seeds
Use os nomes exatos dos tokens
A referência inclui nomes exportados reais, como --space-size--350 para 12px e --border-radius-600 para 8px. Não é possível deduzir esses nomes multiplicando um valor da escala. O CSS importa os arquivos de tokens diretamente e usa suas variáveis, permitindo rastrear um valor renderizado até a distribuição fixada, em vez de recorrer a uma paleta estimada.
Observe a referência de rem
O pacote de espaçamento fornece valores em pixels e em rem. Por exemplo, a etapa de 16px também é representada como 0.8888888888888888rem, refletindo uma referência de 18px. O estudo usa os valores dos tokens em pixels para explicitar o espaçamento pretendido. Substituir esses valores em rem às cegas em uma raiz de 16px alteraria a densidade, em vez de preservá-la.
Cartões editoriais e contexto de revisão do sistema de design Sprout Social Seeds
Faça cada cartão ser útil antes mesmo da interação
Cada cartão tem um canal, um estado, um título original e uma publicação curta completa. Uma seção expansível secundária apresenta os critérios de revisão. O conteúdo é fictício e serve apenas para prática; o espaço de trabalho não está conectado a nenhuma conta de rede social. Assim, um cartão pode representar uma tarefa plausível sem sugerir acesso a publicações ou métricas reais.
Mantenha os destaques da marca em segundo plano durante a leitura
O azul identifica a ação de revisão original da fila, e o verde acompanha o texto “Pronto para revisão”. Essas atribuições de função são decisões da aplicação que usam cores reais da paleta. O estado é sempre descrito por escrito, portanto seu significado não depende da percepção da cor. Bordas e espaçamento separam as três publicações sem substituir conteúdo legível por elementos decorativos de preenchimento.
Seleção visível e estado misto no sistema de design Sprout Social Seeds
Limite a seleção em lote à visualização atual
Selecionar publicações visíveis atua sobre o conjunto filtrado. Se apenas um de vários cartões visíveis for selecionado, a caixa de seleção em lote assume seu estado indeterminado nativo. Ao alterar o filtro, a seleção é limpa, evitando que uma publicação oculta seja alterada por uma ação posterior. A contagem visível informa tanto o número de itens exibidos quanto o de itens selecionados.
A seleção em lote se aplica apenas aos registros visíveis.
A seleção mista usa a propriedade indeterminate nativa.
Alterar o filtro limpa a seleção.
O estado da ação é determinado pelos rascunhos selecionados.
Ative apenas ações que façam sentido
Estados vazios filtrados e desfazer no sistema de design Sprout Social Seeds
Permita recuperar uma fila vazia
Ao marcar como prontos todos os rascunhos visíveis na visualização Rascunhos, é natural que nenhum resultado permaneça. O estado vazio explica que os registros continuam existindo e oferece a opção “Mostrar todas as publicações”. Ele não exibe um indicador de carregamento nem inventa um erro de rede para um resultado local conhecido. A diferença entre não encontrar correspondências e não haver registros continua evidente.
Desfaça a última alteração real
A aplicação guarda o estado anterior apenas dos registros alterados pela ação de revisão mais recente. A opção Desfazer restaura esses valores, renderiza novamente a visualização atual e devolve o foco ao filtro. Ela não redefine registros sem relação com a ação nem finge desfazer uma publicação em rede social. Uma nova ação em lote substitui a única operação de desfazer disponível, de acordo com o rótulo “Desfazer última alteração”.
Fila executável completa e verificações do sistema de design Sprout Social Seeds
Use as quatro distribuições de tokens
O código-fonte importa os tokens de cor, espaçamento, tipografia e borda CSS antes da folha de estilos original de composição. Salve juntos o main.js, o seeds.css e o shell HTML completos. A prévia reúne esses mesmos valores públicos e o código da aplicação, sem fontes remotas nem backend. Os comandos de instalação mostram as versões exatas dos pacotes.
Instale os quatro pacotes de tokens Seeds com versões fixadas.
Salve o ponto de entrada fornecido, o CSS e a raiz HTML.
Teste a seleção mista antes de alterar o filtro.
Verifique a recuperação do estado vazio filtrado e a opção de desfazer após uma revisão em lote.
Teste uma combinação de estados
Selecione uma publicação e verifique o estado misto da seleção em lote. Mude para Rascunhos e confira se a seleção é limpa. Selecione os rascunhos visíveis, marque-os como prontos e examine o resultado vazio. Desfaça a alteração e confirme que os dois rascunhos voltaram; em seguida, mostre todas as publicações. Em telas de celular, os cartões formam uma única coluna de leitura, mantendo acessíveis os rótulos e os controles de revisão.
Exemplos de componentes do sistema de design Sprout Social Seeds
main.js — fila editorial completa
Dados originais, filtro, seleção mista, alteração em lote e opção de desfazer.
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();
Substitua o index.html raiz do Vite por este arquivo.
04
Configuração de agente do sistema de design Sprout Social Seeds
Ponto de partida para implementação
Estes são pacotes públicos de tokens. A aplicação completa de revisão é código original fornecido acima.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie a fila editorial fornecida usando o pacote público de tokens Seeds CSS com versões fixadas. Preserve os nomes reais dos tokens, a tipografia de produto baseada na fonte do sistema, a seleção apenas de itens visíveis, o estado misto nativo, as atualizações em lote limitadas a rascunhos, a recuperação do estado vazio e a opção de desfazer em uma etapa. Mantenha o conteúdo de exemplo original e nunca sugira uma conta de rede social conectada ou uma ação de publicação.
05
Fontes e escopo do sistema de design Sprout Social Seeds
Uma aplicação original em OpenDesign que usa pacotes de tokens publicados do Seeds. Os cartões e o fluxo de revisão são criações originais em HTML/JavaScript, não componentes nativos do Seeds React. Nenhuma conta de rede social está conectada e nada é publicado.
