用途:把一次性的设计 DNA(DESIGN.md)升级为可生成一致 UI 的设计系统。前提是项目根目录已有锁定令牌的 DESIGN.md;若没有,需先用核心设计模式建立视觉 DNA,并通过 palette.mjs 生成基础令牌。本技能只在其上扩展,不重新推导或替换。
主要能力:
- 令牌层级。基于 palette.mjs 的全局令牌构建三层结构:全局令牌(原始值)、别名/语义令牌(表达意图,如 color-text-primary)、组件令牌(限定作用域,如 button-background);采用 W3C DTCG 令牌格式。多品牌主题化时保持别名与组件层不变,仅替换全局层。
- 原子化设计。按 Frost 原子设计(原子→分子→组织→模板→页面)分解 UI,使组件可复用、可组合;原子设计是组合模型而非交付模型,不应强行套用文件结构。结合 Kholmatova 的功能性模式(共享 UI 行为)与感知性模式(颜色、间距、字体层级)审视一致性。
- 治理与设计到代码。确定所有权模型(集中、联邦或混合)、贡献模型(RFC、PR、设计评审)、语义化版本与弃用流程;规划令牌交付、代码生成、组件版本化与多品牌主题化。
使用方式:先加载 references/design-systems-foundations.md 判断任务(建令牌层、分解组件、审查系统、设立治理、设计到代码、多品牌),治理与交付相关加载 references/design-systems-governance.md。每条建议需注明来源(如 Frost 2013、Kholmatova 2017、W3C DTCG、Mall 2023)。
适用场景:将一次性设计提升为令牌系统、构建或审查组件库、多团队/多品牌共享视觉语言、定义语义令牌层、选择设计到代码管线、建立治理、多品牌主题化。
限制:不用于从零创作项目视觉 DNA 或生成调色板(应使用核心设计与 palette.mjs),也不用于原始调色板十六进制生成(应使用核心颜色)。全局令牌变更需重跑 palette.mjs,不应手改十六进制值。工具(Storybook、Style Dictionary、Theo、Cobalt)仅作当前示例,不锁定版本。缺少 DESIGN.md 时无法进行。价格与平台支持暂未提供。