SuperAPI AI 工具集

brand-compile

设计与创作

查看项目

更新于 10-16 03:41

技能介绍

用途:将项目根目录的 brand.yaml 品牌令牌编译为可直接消费的格式,包括 tokens.css(:root 与 .dark 的 CSS 自定义属性)、theme.css(Tailwind 4 @theme inline,使用 OKLCH 值)和 tokens.ts(供 Satori 模板与 Remotion 使用的 TypeScript 常量导出)。

主要能力:定位并读取 brand.yaml;若不存在则检查 brand-profile.yaml 与 design-tokens.json 并提示迁移;校验 schema;编译令牌;检查项目 CSS 入口是否已引入 Tailwind @theme;在 TypeScript 项目中运行类型检查。

使用方式:迁移命令为 node ~/Development/brand-kit/dist/src/cli.js migrate --profile brand-profile.yaml --tokens design-tokens.json --out brand.yaml;校验为 node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml;编译为 node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles。默认输出目录为 ./brand-output/,可用 --out 覆盖。格式选项:--format css、--format tailwind、--format ts、--format all(默认全部)。编译后在项目中引入:Tailwind 4 用 @import "tailwindcss"; @import "./theme.css";,纯 CSS 用 @import "./tokens.css";,TypeScript 用 import { brand } from "./tokens.js";。

适用场景:修改 brand.yaml 后、搭建新项目时,需要统一品牌颜色与设计令牌并接入 Tailwind 4、纯 CSS 或 Satori/Remotion 渲染流程。

限制:依赖本地 brand-kit CLI 路径;具体安装方式、收费与平台支持暂未提供。相关技能包括 /brand-init、/brand-assets、/og-card。