К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

brand — скилл для Claude Code: что делает и как установить

Скилл держит голос бренда, визуальные правила и дизайн-токены в одном файле, а потом раздаёт их промптам агента и вашему CSS.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code
Открыть на GitHub

Что делает brand

Скилл подсовывает агенту брендовый контекст: голос, визуальные правила, фреймворк сообщений и проверку ассетов. Точка правды — docs/brand-guidelines.md в корне проекта. Из неё скрипт sync-brand-to-tokens.cjs собирает assets/design-tokens.json и assets/design-tokens.css, а inject-brand-context.cjs отдаёт выжимку для промпта, в том числе с флагом --json.

Внутри две части. Первая: папка references/ с голосом, визуальной идентичностью, мессенджингом, чек-листом консистентности, правилами логотипа, типографикой, управлением палитрой и порядком согласования. Вторая: четыре скрипта на Node.js. Они проверяют ассет по имени, размеру и формату, вытаскивают цвета и сравнивают их с палитрой, синхронизируют токены. Запускать из корня проекта, потому что пути в SKILL.md считаются от папки скилла, а не от репозитория.

Синхронизация не бьёт по чужому. Если рядом уже есть файлы токенов, :root-переменные или Tailwind v4 @theme, скрипт останавливается и показывает источник. Посмотрите отчёт, потом повторяйте с --force. Ставить стоит, если один брендбук обслуживает несколько проектов и платформ. Когда бренд живёт только в макетах, хватит references/ без скриптов.

Какие задачи решает

  • свести голос бренда в один файл, из которого пишет агент
  • пересобрать CSS-переменные после правки брендбука
  • проверить имя, размер и формат ассета перед сдачей
  • сравнить цвета из макета с утверждённой палитрой
  • пройти чек-лист согласования перед публикацией

Примеры запросов агенту

  • Обнови `docs/brand-guidelines.md` под новое позиционирование и прогони синхронизацию токенов
  • Проверь файлы в `assets/` по правилам бренда: имя, размер, формат
  • Вытащи цвета из этого макета и скажи, где они расходятся с палитрой

Как установить brand

1Через Skills CLI (Vercel)

npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code

2Вручную: положить файлы

~/.claude/skills/brand/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/brand/

Из того же набора7

Весь набор →
ui-ux-pro-max nextlevelbuilder Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность. Claude Code CX Codex Cursor +1 413 800установок design-system claudekit Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. Подойдёт, когда интерфейс и слайды должны следовать одной системе. Claude Code CX Codex Cursor +1 42 200установок design claudekit Скилл для генерации логотипов, бренд-айдентики, дизайн-токенов, слайдов на Chart.js и баннеров через ИИ и Python-скрипты. Claude Code CX Codex Cursor +1 40 800установок ui-styling claudekit Скилл для сборки доступных интерфейсов на shadcn/ui и Tailwind CSS: компоненты, темы, тёмная тема, адаптивные сетки и canvas-дизайн. Claude Code CX Codex Cursor +1 40 200установок banner-design claudekit Создаёт баннеры для соцсетей, рекламы и сайтов в HTML/CSS с готовыми размерами и стилями. Пригодится при сборке креативов без графических редакторов. Claude Code CX Codex Cursor +1 39 000установок slides claudekit Создаёт адаптивные HTML-презентации с графиками Chart.js и дизайн-токенами. Помогает собирать питч-деки и маркетинговые слайды прямо из терминала. Claude Code CX Codex Cursor +1 38 400установок

Похожие

animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. Claude Code CX Codex Cursor +1 135 900установок frontend-ui-engineering addyosmani Задаёт ИИ-агенту правила верстки интерфейсов без типичных нейросетевых клише: фиолетовых кнопок, случайных градиентов и скруглений rounded-2xl. Помогает собирать компоненты по WCAG 2.1 AA. Claude Code CX Codex Cursor +1 66 600установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. Claude Code 850 344установок

Вопросы о brand

Как установить brand в Claude Code?

Командой npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code. Скилл встанет в ~/.claude/skills/brand/SKILL.md; для Codex, Cursor, Copilot и Gemini CLI та же команда идёт с другим значением -a.

Что делает скилл brand?

Хранит брендбук в docs/brand-guidelines.md и превращает его в дизайн-токены и контекст для промптов. Ещё проверяет ассеты и сверяет цвета с палитрой.

Почему синхронизация токенов остановилась?

Скрипт нашёл готовые файлы токенов, :root-переменные или Tailwind v4 @theme и не стал их перезаписывать. Посмотрите отчёт, и если это прошлые выходы синхронизации, повторяйте с --force.

Исходный текст

SKILL.md · MIT
---
name: brand
description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
argument-hint: "[update|review|create] [args]"
metadata:
  author: claudekit
  version: "1.0.0"
---

# Brand

Brand identity, voice, messaging, asset management, and consistency frameworks.

## When to Use

- Brand voice definition and content tone guidance
- Visual identity standards and style guide development
- Messaging framework creation
- Brand consistency review and audit
- Asset organization, naming, and approval
- Color palette management and typography specs

## Script Paths

Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.

## Quick Start

**Inject brand context into prompts:**
```bash
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
```

**Validate an asset:**
```bash
node scripts/validate-asset.cjs <asset-path>
```

**Extract/compare colors:**
```bash
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
```

## Brand Sync Workflow

```bash
# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20
```

The sync stops when it detects existing token files, `:root` custom properties
or Tailwind v4 `@theme` variables in common CSS entry points and their local
CSS imports, or Tailwind theme colors and presets. Review the reported source
before proceeding. If the detected files are the managed
`assets/design-tokens.*` outputs from an earlier sync and replacing them is
intentional, re-run with `--force`.

**Files synced:**
- `docs/brand-guidelines.md` → Source of truth
- `assets/design-tokens.json` → Token definitions
- `assets/design-tokens.css` → CSS variables

## Subcommands

| Subcommand | Description | Reference |
|------------|-------------|-----------|
| `update` | Update brand identity and sync to all design systems | `references/update.md` |

## References

| Topic | File |
|-------|------|
| Voice Framework | `references/voice-framework.md` |
| Visual Identity | `references/visual-identity.md` |
| Messaging | `references/messaging-framework.md` |
| Consistency | `references/consistency-checklist.md` |
| Guidelines Template | `references/brand-guideline-template.md` |
| Asset Organization | `references/asset-organization.md` |
| Color Management | `references/color-palette-management.md` |
| Typography | `references/typography-specifications.md` |
| Logo Usage | `references/logo-usage-rules.md` |
| Approval Checklist | `references/approval-checklist.md` |

## Scripts

| Script | Purpose |
|--------|---------|
| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection |
| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
| `scripts/validate-asset.cjs` | Validate asset naming, size, format |
| `scripts/extract-colors.cjs` | Extract and compare colors against palette |

## Templates

| Template | Purpose |
|----------|---------|
| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |

## Routing

1. Parse subcommand from `$ARGUMENTS` (first word)
2. Load corresponding `references/{subcommand}.md`
3. Execute with remaining arguments

© claudekit · MIT · nextlevelbuilder/ui-ux-pro-max-skill

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой