SuperAPI AI 工具集

create-theme

设计与创作

查看项目

更新于 10-16 05:00

技能介绍

用途:该技能用于在用户提出“创建主题”“设置主题令牌”“配置设计令牌”“添加颜色/间距/字体”等需求时,指导为 Seams 生成结构规范、类型完整的主题配置。

主要能力:主题由按尺度组织的设计令牌构成,通过 @artmsilva/seams-react 的 createStitches 定义,包含 colors、space、fontSizes、fonts、fontWeights、lineHeights、letterSpacings、sizes、borderWidths、borderStyles、radii、shadows、zIndices、transitions 等尺度。可分步定义调色板(品牌色、语义色、中性色、文本色、交互状态色)、间距尺度(推荐 4px 基准,含语义别名)、排版(字体族、字号、字重、行高、字距)、视觉属性(圆角、阴影、边框宽度、z-index、过渡)。

使用方式:在样式中以 $scale$token 语法引用令牌,例如 backgroundColor: "$colors$primary"、padding: "$space$2 $space$4";借助 themeMap 可对同名尺度使用简写,如 color: "$primary"、padding: "$2"。使用 createTheme('dark', {...}) 创建变体主题,并通过 className 应用。完整配置可包含 prefix、media 断点与 utils 工具函数。

适用场景:为 Seams 项目建立统一设计系统、配置明暗主题、集中管理颜色与排版等令牌。

限制:资料未提供安装命令、版本要求、收费信息及具体平台支持范围;示例中的令牌值仅为示范,实际取值需按项目需求确定。