SuperAPI AI 工具集

brandkit

设计与创作

查看项目

更新于 10-16 08:06

技能介绍

用途:在任何页面开发之前,先建立一套统一、可主题化、可访问的品牌设计基础,让所有页面从同一套令牌渲染,保持一致性。

主要能力:先做设计简述推断,确定行业、受众、一个情绪形容词与动效深度,并从美学体系中选取锚定原型;随后在 OKLCH 中生成品牌色阶(11 级、色度一致)与中性色阶;映射语义层角色,如 action.primary/-hover/destructive、text.{primary,secondary,on-action,link}、surface.{page,card,raised}、border.{default,strong}、feedback.{success,warning,error,info},并提供专门设计的暗色覆盖;生成 Major Third 字号阶与复合文本样式、4px 间距、圆角层级、高度与动效时长/缓动。

使用方式:令牌的唯一事实来源为 .claude/skills/_ux-ui-shared/tokens/*.json,主要构建目标为 app/globals.css(Tailwind v4 @theme inline)。输出三层 DTCG 令牌与单一 theme.css(含 [data-theme="dark"] 覆盖),可选接入 token-build 流程供其他平台使用。完成标准需运行:python3 .claude/skills/_ux-ui-shared/scripts/validate_tokens.py、validate_contrast.py、validate_theme_refs.py。

限制与约束:保持一致蓝色主主题;UI 构建交由 shadcn-ui-design;一个主题、不做逐页配色;destructive 使用 danger 令牌而非 primary;零硬编码值。校验要求文本/操作/边框配对在明暗两种模式下均通过 WCAG AA,border.strong ≥ 3:1,500 色阶在白底上文本对比度 ≥ 4.5:1、600 ≥ 3:1。可测量部分可运行 npm run verify 验证,但品牌“感觉”仍需人工对照设计品味文档评审。具体收费、价格与平台支持情况暂未提供。