seed-token-glossary

# Seed Token（种子令牌） ## R (Reading) — 原文引用 > ":root { --seed-brand: #4B7AFA; --chart-font-family: 'PingFang SC', ...; --chart-gap: 16px; }" ## I (Interpretation) — 方法论骨架 **定义**：设计系统中最基础的原子级 CSS 变量，作为所有组件样式的源头。Seed Token 不可再分解，是设计系统的"基因"。 **核心特征**： - **原子性**：不可再分解的基础值（如颜色、字体、间距） - **全局性**：所有组件共享同一套 Seed Token - **稳定性**：一旦定义，极少修改 **典型示例**： - `--seed-brand: #4B7AFA`（品牌主色） - `--chart-font-family: "PingFang SC", ...`（字体族） - `--chart-gap: 16px`（基准间距） **相关概念**： - Component Token（组件令牌）：基于 Seed Token 组合而成 - Semantic Token（语义令牌）：赋予业务含义的颜色 ## A1 (Past Application) — 书中作者用过的案例 在 ENCY-charts 规范第 0 章，作者定义了完整的 Seed Token 体系，包括品牌色、字体、间距等基础值，所有后续组件样式都基于这些 Seed Token 构建。 ## A2 (Future Trigger) — 何时调用此 skill **调用场景**： - 设计师问"如何组织设计系统的 CSS 变量？" - 前端工程师说"Seed Token 和 Component Token 有什么区别？" - 技术负责人问"我们的设计 Token 架构应该怎么设计？" **关键 trigger 词**：Seed Token / 设计系统基础 / CSS 变量原子值 / Token 层级 ## E (Execution) — 可执行步骤 **步骤 1：识别原子值** — 完成标准: 品牌色/字体族/基准间距三类原子值已全部列出且无遗漏 - 列出所有不可再分解的基础值： - 品牌色：`--seed-brand` - 字体族：`--chart-font-family` - 基准间距：`--chart-gap` **步骤 2：定义 Seed Token** — 完成标准: CSS 变量块已写入 :root，含品牌色(主色+hover)、字体族+3级字号、基准间距+区块间距，且无硬编码残留 ```css :root { /* 品牌色 */ --seed-brand: #4B7AFA; --seed-brand-hover: #3455AD; /* 字体 */ --chart-font-family: "PingFang SC", "Microsoft YaHei", sans-serif; --chart-font-size-sm: 11px; --chart-font-size: 12px; --chart-font-size-lg: 14px; /* 间距 */ --chart-gap: 16px; --chart-section-gap: 24px; } ``` **步骤 3：验证使用** — 完成标准: 扫描所有组件样式，确认引用 Seed Token 而非硬编码值，输出"引用合规/发现硬编码"判定结论 - 检查所有组件是否引用 Seed Token 而非硬编码值 ## B (Boundary) — 边界与盲点 **什么时候不适用**： - 单一页面的快速原型开发 - 非设计系统级别的项目 **相关 skills**： - `design-token-architecture` — 设计系统 Token 架构 - `categorical-palette-glossary` — 分类色板 --- ## 附录：源仓库实现细节（源自 ENCY-charts 设计规范） > 具体实现细节请见上游 ENCY-charts 仓库对应组件的源码与示例。 ### 可执行步骤扩展 1. **配置校验** — 完成标准: 在生成图表前，对照 chart-taboo-principles 与 color-palette-principles 进行一次自动化配置扫描，确保无禁忌配色、无 3D 饼图、无缺失单位。 2. **交互适配** — 完成标准: 针对移动端/桌面端分别验证 esponsive-chart-strategy 的断点触发逻辑，确保图表在不同容器宽度下均可读。 3. **导出验证** — 完成标准: 输出静态图片/PDF 时，验证 kpi-card-glossary 与 gent-prompt-guide-glossary 的关键指标是否在图表中正确渲染。 ### 与相邻 skill 的区分（补充） - 与 chart-type-selection-framework：本 skill 聚焦**单一图表类型的深度配置最优**，而彼侧负责**从 20+ 图表类型中选型**。 - 与 esponsive-chart-strategy：彼侧管**全局响应式布局**，本 skill 管**单图内部的编码与视觉细节**。 --- ## 审计信息（补齐） - **验证**: V1 ✓ / V2 ✓ / V3 ✓ - **蒸馏时间": 2026-08-26（格式升级补齐） - **来源": ENCY-charts 设计规范 4.6 / 7 + vendor/larashero3-dotcom__lieflat-charts 等