taste-design-system 是一个面向智能体工作流的设计系统技能,用于指导 AI 代理对设计系统进行结构化构建与审计。资料将其定位为“决策清单”的管理方法:代理需按既定规则整理、组织并维护设计令牌与组件规范。
用途
该技能的核心用途是建立和维护一套可被代理理解和执行的设计系统规则,确保设计决策以令牌形式被记录和复用,避免系统分叉。它同时提供审计能力,在构建前先盘点现有代码中的颜色、间距、字体、圆角、阴影、边框和组件,输出令牌映射与违规清单。
主要能力
- 三级令牌架构:原始令牌(如 --color-ink-900、--space-4)只存原始值;语义令牌(如 --color-surface、--space-inset-lg)表达含义;组件令牌(如 --button-bg-primary)按组件别名。规则为组件→语义→原始→值,禁止跳层。
- 令牌格式:要求使用扁平键映射或 W3C DTCG JSON,命名采用 kebab-case、名词优先、比例在后,禁止在名称中编码意图或颜色字面值,组件样式禁止直接使用十六进制颜色。
- 审计清单:列出代码中所有十六进制颜色,标记不在令牌集中的值;标记不在 4px/8px 比例上的间距;统计字号字重数量,单页超过 5 种字号视为缺少层次;收集圆角、阴影、边框值并聚类为 2–4 个令牌;列出所有组件,标记多于 3 个变体做同一件事的组件,以及从裸值自设样式的组件。输出为令牌映射、违规清单及计数、修复顺序(先原始、再语义映射、最后组件清理),并要求审计与重构不在同一轮进行。
- 固定比例:间距为 4/8/12/16/24/32/48/64/96,低于 4px 仅用于发丝边框,禁止 5、7、10、14px 除非有记录的光学覆盖;字号比例为 12/14/16/18/24/32/48/64,响应式使用 clamp();颜色梯度在 OKLCH 中从 50 到 950 取 9–11 级,包含中性色和至少一个强调色族,深色模式通过语义映射变化而非新增颜色;阴影最多 3 级:flat(无阴影)、raised(模糊≥16px、不透明度≤0.15)、floating(模糊≥40px、不透明度≤0.2)。
- 组件解剖:一个组件只做一件事、一个名称;需具备完整状态矩阵(默认、悬停、按下、焦点可见、禁用、加载、错误),无法实现的状态需记录原因;仅在真实需要时提供尺寸变体;说明响应式行为及断点;组件样式中零裸值。
- 文档与治理:每个组件一页文档,包含用途、解剖图(以代码注释形式)、状态矩阵、使用规则、正反例、无障碍说明;令牌变更采用增量方式(新增→弃用旧令牌→一个发布周期后移除),禁止静默修改令牌值;令牌文件由一人或一个技能持有,组件决策经由该文件;季度度量指标包括使用语义令牌的屏幕百分比、裸色违规数、非比例间距数、有文档状态的组件百分比,关键指标是违规数下降趋势。
- 失败检查清单:组件直接引用原始令牌、UI 使用令牌集中不存在的十六进制颜色、非比例间距无记录覆盖、组件缺少禁用或焦点可见状态、使用超过 3 级阴影、令牌名称同时编码含义和值、两个组件以不同 API 做同一件事,任意一项出现即判定系统失败。
使用方式
资料未提供具体的安装命令、调用接口或平台集成方式,仅描述了技能应遵循的规则和工作流。使用方式暂未提供。
适用场景
适用于需要为智能体工作流建立或审计设计系统的团队,尤其是希望统一令牌层级、消除裸值、控制间距与字号比例、规范组件状态与文档的界面开发场景。
限制
资料未说明该技能支持的平台、依赖、收费模式或性能表现;其规则以设计系统一致性为目标,不涉及具体框架实现。