Seeds는 제품 타이포그래피와 브랜드 타이포그래피를 구분합니다. 이 대기열은 공개 타이포그래피 패키지의 실제 시스템 글꼴 계열 토큰과 공개된 색상, 간격, 테두리 토큰을 사용합니다. 마케팅용 서체를 불러온 뒤 제품 시스템을 재현했다고 주장하지 않습니다. 참조 자료와 예제를 계속 비교할 수 있도록 설정에서 패키지 버전을 고정합니다.
토큰과 컴포넌트 구분하기
Seeds 토큰 패키지를 불러오면 변수가 제공될 뿐, 게시물 편집기나 React 컴포넌트 트리가 생성되는 것은 아닙니다. 이 예제에 포함된 카드, 선택 로직, 로컬 검토 기능은 독자적으로 작성한 OpenDesign 코드입니다. 이 페이지는 토큰 기반 구현임을 명시합니다. 네이티브 Seeds React 컴포넌트를 사용하려면 공식 컴포넌트 리소스를 통해 별도로 통합해야 합니다.
Sprout Social Seeds 디자인 시스템 팔레트, 간격 및 타이포그래피 참고 자료
정확한 토큰 이름 사용하기
참고 자료에는 12px에 해당하는 --space-size--350, 8px에 해당하는 --border-radius-600 등 실제로 내보내는 이름이 포함되어 있습니다. 이러한 이름은 배율 레이블에 숫자를 곱해 알아낼 수 없습니다. CSS은 토큰 파일을 직접 가져와 변수를 사용하므로, 추측한 팔레트가 아닌 버전이 고정된 배포판에서 렌더링된 값을 확인할 수 있습니다.
rem 기준값 확인하기
간격 패키지는 픽셀 값과 rem 값을 모두 제공합니다. 예를 들어 16px 단계는 0.8888888888888888rem로도 표현되며, 이는 기준값이 18px임을 반영합니다. 이 예제에서는 의도한 간격을 명확하게 유지하기 위해 픽셀 단위 토큰을 사용합니다. rem 값을 16px 루트에 그대로 적용하면 간격을 유지하는 것이 아니라 밀도가 달라집니다.
Sprout Social Seeds 디자인 시스템 편집 카드 및 검토 맥락
각 카드가 상호작용 없이도 유용하도록 구성하기
모든 카드에는 채널, 상태, 직접 작성한 제목, 완결된 짧은 게시물이 있습니다. 보조 공개 영역에서 검토 기준을 확인할 수 있습니다. 콘텐츠는 연습용으로 만든 가상의 자료이며, 이 작업 공간은 소셜 계정에 연결되어 있지 않습니다. 따라서 실제 게시물이나 분석 데이터에 접근할 수 있다고 오해시키지 않으면서도 카드에 그럴듯한 작업 맥락을 담을 수 있습니다.
브랜드 강조색보다 읽기 쉬운 콘텐츠를 우선하기
파란색은 이 대기열에서 직접 정한 검토 작업을 나타내며, 초록색은 ‘검토 준비 완료’ 문구와 함께 사용됩니다. 이러한 역할 배정은 실제 팔레트 항목을 활용한 애플리케이션 차원의 결정입니다. 상태는 항상 텍스트로도 표시되므로 색상을 보지 못해도 의미를 알 수 있습니다. 테두리와 간격으로 게시물 세 개를 구분하며, 읽을 수 있는 콘텐츠를 장식용 자리 표시자로 대체하지 않습니다.
Sprout Social Seeds 디자인 시스템 선택 표시 및 혼합 상태
일괄 선택을 현재 보기에 한정하기
‘표시된 게시물 선택’은 필터링된 항목에 적용됩니다. 표시된 카드 여러 개 중 하나만 선택하면 일괄 선택 체크박스에 기본 제공 혼합 상태가 표시됩니다. 필터를 변경하면 선택이 해제되어, 숨겨진 항목이 이후 작업에서 변경되는 일을 방지합니다. 표시 개수에는 현재 화면에 표시된 항목 수와 선택된 항목 수가 모두 나타납니다.
일괄 선택은 현재 표시된 항목에만 적용됩니다.
혼합 선택에는 기본 제공 indeterminate 속성을 사용합니다.
필터를 변경하면 선택이 해제됩니다.
작업 상태는 선택된 초안 항목을 기준으로 결정됩니다.
의미 있는 작업만 활성화하기
Sprout Social Seeds 디자인 시스템 필터 결과 없음 상태 및 실행 취소
항목이 없는 대기열에서 다시 진행할 수 있도록 하기
Draft 보기를 확인하는 중 표시된 초안을 모두 준비 완료로 표시하면 결과가 비게 됩니다. 이때 빈 상태 메시지로 항목이 여전히 존재함을 알리고 ‘모든 게시물 표시’를 제공합니다. 이미 알고 있는 로컬 결과에 로딩 스피너를 표시하거나 네트워크 오류를 꾸며내지 않습니다. 일치하는 항목이 없는 경우와 항목 자체가 없는 경우를 구분해 보여 줍니다.
실제로 마지막으로 변경한 내용 실행 취소하기
애플리케이션은 가장 최근 검토 작업에서 변경된 항목의 이전 상태만 저장합니다. 실행 취소하면 해당 값을 복원하고 현재 보기를 다시 렌더링한 뒤 필터로 포커스를 돌려줍니다. 관련 없는 항목을 초기화하거나 소셜 게시물을 게시 취소하는 것처럼 동작하지 않습니다. 다음 일괄 작업이 수행되면 실행 취소 가능 작업이 교체되어 ‘마지막 변경 실행 취소’라는 레이블과 일치하게 동작합니다.
Sprout Social Seeds 디자인 시스템 실행 가능한 완전한 대기열 및 확인 절차
네 가지 토큰 배포판 모두 사용하기
소스에서는 원래의 스타일시트보다 먼저 색상, 간격, 타이포그래피, 테두리 CSS을 가져옵니다. 전체 main.js, seeds.css, HTML 셸을 함께 저장하세요. 미리보기는 원격 글꼴이나 백엔드 없이 동일한 공개 값과 애플리케이션 코드를 번들링합니다. 정확한 패키지 버전은 설치 명령에 표시되어 있습니다.
버전이 고정된 Seeds 토큰 패키지 네 개를 설치합니다.
제공된 진입점, CSS 및 루트 HTML을 저장합니다.
필터를 변경하기 전에 혼합 선택 상태를 테스트합니다.
일괄 검토 후 필터 결과가 비었을 때 복구되는지, 실행 취소가 가능한지 확인합니다.
여러 상태를 조합해 테스트하기
게시물 하나를 선택하고 일괄 선택이 혼합 상태로 표시되는지 확인합니다. Draft로 변경하면 선택이 해제되는지 확인합니다. 표시된 초안을 선택해 준비 완료로 표시한 다음 결과가 비는지 살펴봅니다. 실행 취소로 초안 두 개가 복원되는지 확인하고 모든 게시물을 표시합니다. 휴대전화 화면 너비에서는 카드가 한 열로 배치되며, 레이블과 검토 컨트롤도 계속 사용할 수 있습니다.
Sprout Social Seeds 디자인 시스템 컴포넌트 예제
main.js — 완성된 편집 대기열
독자적으로 작성한 데이터, 필터, 혼합 선택, 일괄 변경 및 실행 취소 기능입니다.
자바스크립트
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();
이 패키지는 공개 토큰 패키지입니다. 완성된 검토 애플리케이션은 위에 제공된 독자적인 코드입니다.
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
프로젝트를 위한 프롬프트
에이전트 프롬프트
고정된 공개 Seeds 토큰 CSS을 사용해 제공된 편집 대기열을 구현하세요. 실제 토큰 이름, 시스템의 제품 타이포그래피, 화면에 보이는 항목만 선택되는 동작, 네이티브 혼합 상태, 초안에만 적용되는 일괄 업데이트, 빈 결과에서 복구하는 기능, 한 단계 실행 취소를 유지하세요. 원본 예시 콘텐츠를 그대로 사용하고, 소셜 계정이 연결되어 있거나 게시 작업이 이루어졌다고 암시하지 마세요.
05
Sprout Social Seeds 디자인 시스템의 출처와 범위
공개된 Seeds 토큰 패키지를 사용하는 독자적인 OpenDesign 애플리케이션입니다. 카드와 검토 워크플로는 독자적으로 만든 HTML/JavaScript 요소이며, 네이티브 Seeds React 구성 요소가 아닙니다. 소셜 계정은 연결되어 있지 않으며 게시된 콘텐츠도 없습니다.
