brandkit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Brand Kit

Skill：品牌套件

Stand up the foundation (one token system everything renders from) before any screen. Get this right and every page stays consistent and themeable from one place.

在设计任何界面之前，先搭建好基础层（所有内容渲染都基于的统一token系统）。把这一步做好，所有页面都能保持一致性，且可通过单一入口进行主题定制。

Steps

步骤

Brief Inference (mandatory) — name the industry, audience, the one mood adjective, and motion depth (
```
taste/design-taste.md
```
→ Brief Inference). Pick an anchoring archetype from
```
taste/aesthetic-systems.md
```
.
Primitives — generate the brand color ramp in OKLCH (11 shades, consistent chroma) + a neutral ramp; verify the 500 shade ≥ 4.5:1 on white (text) and 600 ≥ 3:1 (UI) per
```
.claude/rules/tokens-and-color.md
```
→ Color Generation.

Semantic layer — map roles to primitives:

action.primary

-hover

destructive

text.{primary,secondary,on-action,link}

surface.{page,card,raised}

border.{default,strong}

feedback.{success,warning,error,info}

— and the dark overrides (designed, not inverted).

Scales — Major Third type scale + composite text styles, 4px spacing scale, radius tiers, elevation, and
```
tokens/motion.json
```
-style durations/easings.
Emit the DTCG
```
tokens/*.json
```
(3-tier) + a single
```
theme.css
```
(the one shared source,
```
[data-theme="dark"]
```
overrides). Optionally feed the token-build pipeline (
```
token-build
```
skill) for other platforms.

需求简报推导（必填） —— 明确行业、受众、核心情绪形容词，以及动效深度（参考
```
taste/design-taste.md
```
→ 需求简报推导）。从
```
taste/aesthetic-systems.md
```
中选择一个锚定的美学原型。
基础层 —— 生成OKLCH色彩空间下的品牌色阶（11个色阶，色度一致）+ 中性色阶；根据
```
.claude/rules/tokens-and-color.md
```
的要求验证：500色阶在白色背景上的对比度≥4.5:1（文本用），600色阶≥3:1（UI元素用）→ 颜色生成。

语义层 —— 将角色映射到基础层token：

action.primary

-hover

destructive

、

text.{primary,secondary,on-action,link}

、

surface.{page,card,raised}

、

border.{default,strong}

、

feedback.{success,warning,error,info}

——以及暗色模式的覆盖规则（专门设计，而非简单反色）。

刻度体系 —— 大三度字体刻度+复合文本样式、4px间距刻度、圆角层级、高程，以及符合
```
tokens/motion.json
```
格式的时长/缓动函数。
输出三层结构的DTCG
```
tokens/*.json
```
+ 单文件
```
theme.css
```
（唯一共享源，通过
```
[data-theme="dark"]
```
实现暗色覆盖）。可选择将其输入token构建流水线（
```
token-build
```
skill）以适配其他平台。

Verification (definition of done)

验证（完成标准）

```
python3 scripts/validate_tokens.py
```
— valid JSON, all aliases resolve.
```
python3 scripts/validate_contrast.py
```
— required text/action/border pairs pass WCAG AA in light AND dark;
```
border.strong
```
≥ 3:1.

python3 scripts/validate_theme_refs.py

— every component

var(--…)

resolves to the theme.

One theme, no per-page palettes; destructive = danger token (not primary); zero hardcoded values.

Output is a verified token foundation — the measurable part is provable (run
npm run verify
). Brand "feel" still benefits from a human review against
taste/design-taste.md
.

```
python3 scripts/validate_tokens.py
```
—— JSON格式有效，所有别名均可解析。
```
python3 scripts/validate_contrast.py
```
—— 要求的文本/操作/边框对在亮、暗模式下均通过WCAG AA标准；
```
border.strong
```
对比度≥3:1。
```
python3 scripts/validate_theme_refs.py
```
—— 每个组件的
```
var(--…)
```
都能在主题中解析到对应值。
单一主题，无页面级独立配色；destructive对应danger token（而非primary）；零硬编码值。

输出是经过验证的token基础层——可衡量的部分是可验证的（运行
npm run verify
即可）。品牌「感觉」部分仍需人工对照
taste/design-taste.md
进行审核。