SuperAPI AI 工具集

brandkit

设计与创作

查看项目

更新于 10-16 03:43

技能介绍

用途:brandkit 用于在搭建任何页面之前,先建立一套统一的品牌设计基础(单一令牌系统),使所有页面保持一致且可换主题。它根据简要需求生成完整、可访问的品牌设计系统。

主要能力:

  • 强制进行 Brief Inference:推断行业、受众、一个情绪形容词与动效深度,并从审美系统中选定锚定原型。
  • 生成基础令牌:以 OKLCH 生成品牌色阶(11 个色阶,色度一致)与中性色阶;校验 500 色阶在白底上的文字对比度 ≥ 4.5:1,600 色阶用于 UI 时 ≥ 3:1。
  • 语义层:把角色映射到基础令牌,如 action.primary/-hover/destructive、text.{primary,secondary,on-action,link}、surface.{page,card,raised}、border.{default,strong}、feedback.{success,warning,error,info},并提供深色覆盖(设计而非反转)。
  • 尺度:大三度字阶与复合文本样式、4px 间距尺度、圆角层级、阴影,以及动效时长与缓动。
  • 输出 DTCG 三层 JSON 令牌与单一 theme.css(含 [data-theme="dark"] 覆盖);可选接入令牌构建流水线以支持其他平台。

使用方式与限制: 先检查套件是否就绪:ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING。若为 KIT_MISSING,仅安装了技能文件夹(即 npx skills add 的结果),应如实告知并指向 npx ux-ui-agent-skills init 或插件安装,然后停止,切勿臆测无法打开文件的内容。完成后运行验证:python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py(JSON 有效、别名可解析)、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py(明暗主题下文字/操作/边框配对通过 WCAG AA,border.strong ≥ 3:1)、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py(每个组件 var(--…) 均可解析到主题)。原则:单一主题、无逐页配色;destructive 使用 danger 令牌而非 primary;零硬编码值。可测量部分可证明(npm run verify),品牌“感觉”仍需人工按审美文档复核。官方说明与收费标准暂未提供。