用途:在生成页面、组件或视觉打磨之前,先建立最小可用的设计系统基础,让智能体与人类不再逐个组件临时发明颜色、间距和字体样式。
主要能力:识别目标环境(代码库、Figma/设计文件或两者);判断是否已有设计系统,若存在则盘点现有令牌而非替换;定义最小语义颜色系统(background、foreground、muted、muted foreground、border、primary、primary foreground、destructive、success、warning、card、popover、sidebar、accent 等,按需使用);定义排版默认值(sans 与 mono 字体栈、流式文字比例、语义字重、行高令牌);定义基于 4px 的间距与尺寸比例,用于内边距、外边距、间隙、触控目标和布局节奏;定义圆角、边框、阴影与焦点环令牌;从一开始建立明暗模式,建议使用 OKLCH 值并保证两套主题令牌完整覆盖;明确令牌存放位置(globals.css、Tailwind @theme、tailwind.config.ts、Figma 变量或共享令牌源);输出可直接实现的令牌及未来 UI 消费规则。
使用方式:按固定输出格式给出目标环境、现有系统状态、令牌唯一来源,以及颜色、排版、间距、圆角/阴影/焦点、主题策略、实现片段、使用规则和待确认决策。示例实现片段为 @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); }。
适用场景:全新代码库或设计文件、尚无令牌系统的绿地项目、需要统一基础再构建组件与页面时。
限制:已有令牌系统时不应使用,应改用 $ui-system-governance 审计;涉及布局外壳时使用 $ui-layout-architect。避免在项目需要前创建大型企业级令牌系统,避免任意十六进制值、一次性像素值和组件专属颜色,避免只定义明色而缺少暗色覆盖,避免在组件代码中直接使用原始颜色名,避免未记录变更原因就覆盖现有令牌系统。最终需验证输出覆盖颜色、排版、间距、圆角、阴影与焦点,每个颜色令牌有明确语义用途和明暗覆盖,唯一来源足够明确,且系统能支撑基础、布局外壳与页面组合而无需新增任意值。