SuperAPI AI 工具集

theming-components

设计与创作

查看项目

更新于 10-15 19:56

技能介绍

用途:为所有组件技能提供统一的视觉样式基础,作为视觉设计决策的唯一来源,支持品牌定制、主题切换、RTL 与一致视觉设计。

主要能力:完整令牌分类,含颜色、排版、间距、边框、阴影、动效、z-index 七类;主题切换支持浅色/深色、高对比度与自定义品牌主题;通过 CSS 逻辑属性自动支持 RTL/i18n;多平台导出(CSS 变量、SCSS、iOS Swift、Android XML、JavaScript);组件集成采用技能链架构,组件仅用令牌做全部视觉样式。颜色采用三层级:原始→语义→组件。

使用方式:组件中引用令牌,如 background-color: var(--button-bg-primary);主题通过 data-theme 属性自动应用,无需改代码。切换示例:document.documentElement.setAttribute('data-theme', themeName)。命名约定为 --{component}-{property}-{variant?}-{state?}。脚本包括 python scripts/generate_color_scale.py --base "#3B82F6"、python scripts/validate_tokens.py、python scripts/validate_contrast.py、npm run build-tokens。

适用场景:需要统一设计系统、多主题、RTL 语言支持与多平台令牌导出的 UI 项目。

限制:资料未提供具体收费、价格、平台支持范围与效果数据;部分细节需查阅 references 目录文档。