# Sprout Social Seeds 设计系统 ## Sprout Social Seeds 设计系统界面预览 选择可见帖子，检查混合选择状态，并在筛选后的批量更改后恢复或撤销操作。 ## Sprout Social Seeds 设计系统设计参考 实际安装的 Seeds 配色 2.5.0、间距 0.8.1、字体排版 3.8.0 和边框 1.7.1 CSS 导出项。 ### 产品研究配色参考 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --color-neutral-0 | #ffffff | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-neutral-100 | #f3f4f4 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-neutral-200 | #dee1e1 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-neutral-700 | #515e5f | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-neutral-900 | #273333 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-blue-0 | #e9f4ff | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-blue-300 | #a1c2f8 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-blue-700 | #205bc3 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-green-100 | #d7f4d7 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | | --color-green-900 | #006b40 | 实际发布的配色令牌。它们在此原创队列中的操作和状态映射由应用自行决定。 | ### 完整的固定间距比例 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --space-size--0 | 0px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--100 | 2px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--200 | 4px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--300 | 8px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--350 | 12px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--400 | 16px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--450 | 24px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--500 | 32px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | | --space-size--600 | 40px | 实际的 CSS 像素令牌。该软件包还提供以 18px 为基准的 rem 等值；请勿假设它们是按 16px 换算的。 | ### 产品字体与易读的内容密度 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--100 | 11px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--200 | 13px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--300 | 16px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--400 | 18px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--500 | 21px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--600 | 24px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-font-size--700 | 32px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-line-height--300 | 24px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | | --typography-line-height--500 | 29.333333333333332px | 已发布的字体排版软件包数值。产品示例使用系统字体系列，而非用于营销的 Proxima Nova 字体。 | ### 形状与边框比例 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --border-radius-400 | 4px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-radius-500 | 6px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-radius-600 | 8px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-radius-800 | 12px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-radius-900 | 24px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-radius-1000 | 999999px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-width-500 | 1px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-width-600 | 2px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | | --border-width-700 | 3px | 实际的边框软件包数值；原创卡片采用 8px 圆角和 1px 边框。 | ## Sprout Social Seeds 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Sprout Social Seeds 设计系统产品令牌与运行时范围 ### 使用产品基础样式 > 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 设计系统：筛选后的空状态与撤销 ### 让空队列仍可恢复 在“草稿”视图中将所有可见草稿标记为待审核后，结果自然会变为空。空状态会说明这些记录仍然存在，并提供“显示所有帖子”选项。对于已知的本地结果，不会显示加载动画，也不会虚构网络错误。没有匹配项与没有记录这两种情况会明确区分。 ### 撤销最近一次实际更改 应用只会为最近一次审核操作中被修改的记录保存先前状态。撤销会恢复这些状态、重新渲染当前视图，并将焦点移回筛选器。它不会重置无关记录，也不会假装撤回已发布的社交媒体帖子。后续批量操作会替换唯一可用的撤销操作，与“撤销上次更改”的标签一致。 ## Sprout Social Seeds 设计系统：完整可运行的队列与检查 ### 使用全部四类令牌分发包 源代码会在原有组合样式表之前导入颜色、间距、排版和边框 CSS。请将完整的 main.js、seeds.css 和 HTML 外壳一并保存。预览使用相同的公开令牌值和应用代码打包，不依赖远程字体或后端。安装命令中列出了确切的包版本。 1. 安装四个固定版本的 Seeds 令牌包。 2. 保存提供的入口文件、CSS 和根 HTML。 3. 更改筛选条件前，先测试混合选择。 4. 批量审核后，验证筛选结果为空时的恢复方式和撤销功能。 ### 测试多种状态组合 选择一篇帖子，确认批量复选框显示混合状态。切换到“草稿”，确认选择已清除。选中可见草稿，将其标记为待审核，然后检查空结果。撤销后确认两篇草稿恢复，再显示所有帖子。在手机屏幕宽度下，卡片会变为单列布局，同时标签和审核控件仍可访问。 ## 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=`

OpenDesign · Editorial practice

A small queue, ready for a closer look

Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.

3 sample posts

`; 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.lengthx.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=`
${x.status}

${x.title}

${x.copy}

Review checklist
`;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(); ``` 代码参考 - 这不代表存在社交媒体 API、发布操作或原生 React 组件。 ### seeds.css — 使用真实令牌构建布局 完整的响应式布局使用已安装的 CSS 变量。 ``` *{box-sizing:border-box}body{margin:0;font:var(--typography-font-size--300)/var(--typography-line-height--300) var(--typography-family);color:var(--color-neutral-900);background:var(--color-neutral-100)}main{max-width:1160px;padding:var(--space-size--500);margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}h1{font-size:var(--typography-font-size--700);line-height:var(--typography-line-height--700);margin:8px 0 16px;max-width:24ch}header p:last-child{max-width:64ch}.eyebrow,.badge{font-size:13px;font-weight:600}.badge{white-space:nowrap;background:var(--color-green-100);color:var(--color-green-900);padding:8px 12px;border-radius:var(--border-radius-400)}.filters{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px;background:white;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600)}label{display:flex;align-items:center;gap:8px}select,button{font:inherit;border:1px solid var(--color-neutral-600);border-radius:var(--border-radius-400);padding:8px 12px;min-height:40px}select{background:white;color:var(--color-neutral-900);max-width:100%}button{background:var(--color-blue-700);color:white;border-color:var(--color-blue-700);font-weight:600;cursor:pointer}button:disabled{opacity:.5;cursor:default}input{width:18px;height:18px;accent-color:var(--color-blue-700);flex-shrink:0}#count{font-size:13px;color:var(--color-neutral-700);margin:24px 0 16px}#posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}article{display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600);padding:24px;background:white;min-width:0}.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.channel,.status{font-size:13px}.status{padding:2px 8px;border-radius:4px}.draft{background:var(--color-neutral-100)}.ready{background:var(--color-green-100);color:var(--color-green-900)}h2{font-size:21px;line-height:29.333px;margin:24px 0 16px}.copy{min-height:144px}details{border-top:1px solid var(--color-neutral-200);padding-top:16px;margin-top:auto;font-size:13px;line-height:1.6}summary{cursor:pointer;font-weight:600}details ul{padding-left:20px}details li{margin:8px 0}#notice{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--color-blue-0);border:1px solid var(--color-blue-300);border-radius:8px;padding:16px 24px;margin-top:24px}#notice p{margin:0}#empty{background:white;padding:24px;border-radius:8px}#empty h2{margin-top:0}footer{font-size:13px;line-height:1.6;border-top:1px solid var(--color-neutral-200);margin-top:32px;padding-top:24px}:focus-visible{outline:3px solid var(--color-blue-700);outline-offset:3px}[hidden]{display:none!important}@media(max-width:850px){#posts{grid-template-columns:1fr}.copy{min-height:0}header{flex-wrap:wrap}#notice{flex-wrap:wrap}}@media(max-width:480px){main{padding:16px}.filters,article{padding:16px}.filters>label:first-child{flex-wrap:wrap}h1{font-size:24px;line-height:32px}.filters{gap:16px}.eyebrow{overflow-wrap:anywhere}} ``` 代码参考 - 调色板与用途之间的对应关系是本应用自行设定的。 ### index.html — 完整的应用外壳 本地应用的根元素和入口。 ``` Editorial review queue
``` 代码参考 - 用此文件替换根目录中的 Vite index.html。 ## Sprout Social Seeds 设计系统：AI Agent 配置指南 ### 实现起点 这些是公开的令牌包。上文提供的完整审核应用为原创代码。 ``` npm create vite@latest seeds-review -- --template vanilla cd seeds-review npm install npm install @sproutsocial/seeds-color@2.5.0 @sproutsocial/seeds-space@0.8.1 @sproutsocial/seeds-typography@3.8.0 @sproutsocial/seeds-border@1.7.1 # Save index.html at root; main.js and seeds.css in src. npm run dev ``` ### 适用于你项目的提示词 ``` 使用固定版本的公开 Seeds 令牌 CSS 构建上文提供的编辑队列。保留真实的令牌名称、系统产品字体排版、仅针对可见项的选择、原生混合状态、仅批量更新草稿、空状态恢复功能以及单步撤销。保留原始示例内容，不得暗示已连接社交账号或执行了发布操作。 ``` ## Sprout Social Seeds 设计系统：来源与范围 这是一个使用已发布 Seeds 令牌包构建的原创 OpenDesign 应用。卡片和审核工作流均为原创 HTML/JavaScript，并非 Seeds 原生 React 组件。应用未连接任何社交账号，也不会发布任何内容。 - 令牌包 公开的分发路径和带版本号的基础值。 - 颜色 调色板参考，以及产品与品牌语境。 - 间距 比例条目和间距用法。 - 产品字体排版 产品界面的系统字体使用指南。 - 原生组件配置 独立的 React 集成要求。 ## Sprout Social Seeds 设计系统：相关资源 ### SumUp Circuit 一份 Circuit 指南，包含精确的语义令牌、原生校验属性、完整的商家商品编辑器和图示化的客户侧预览。 ### TDesign 使用 TDesign React 构建紧凑的 API 政策编辑器：设置具体的主题角色、两像素尺寸比例、Form 字段注册，以及带类型的 Table 组合。 ### Thumbtack Thumbprint 使用 Thumbprint 文档中记录的 v2 基础组件，构建服务发现界面：紧凑的服务提供方卡片、清晰易读的对比详情、明确的选择状态，以及常驻的候选清单。 - [实现参考](https://seeds.sproutsocial.com/resources/tokens/) - [来源](https://seeds.sproutsocial.com/resources/tokens/) - [代码参考](https://seeds.sproutsocial.com/resources/tokens/) - [令牌包 公开的分发路径和带版本号的基础值。](https://seeds.sproutsocial.com/resources/tokens/) - [颜色 调色板参考，以及产品与品牌语境。](https://seeds.sproutsocial.com/visual/color/) - [间距 比例条目和间距用法。](https://seeds.sproutsocial.com/visual/space/) - [产品字体排版 产品界面的系统字体使用指南。](https://seeds.sproutsocial.com/visual/product-typography/) - [原生组件配置 独立的 React 集成要求。](https://seeds.sproutsocial.com/components/getting-started/)