К основному содержанию
скилл CX Codex

brand-strategist · dylantarre — скилл для Claude Code: анимация как язык бренда

Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда.

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

Что делает brand-strategist

Скилл разбирает 12 принципов анимации Диснея и переводит каждый в вопрос бренда. Squash and stretch задаёт упругость: игривые марки тянутся сильнее, премиальные держат жёсткость. Anticipation показывает энергию — долгий замах читается как уверенность, короткий как собранность. Timing отвечает за темп, exaggeration — за смелость.

На выходе скилл помогает собрать motion-манифест, спецификацию таймингов и кривых, примеры «делать/не делать» с объяснением, адаптации под разные платформы и вариант для режима reduced motion. Внутри — только текст с принципами и вопросами для аудита, никаких скриптов и генераторов. Поэтому он работает как чек-лист в разговоре с агентом, а не как автоматический линтер анимации.

Есть и обратная сторона: скилл ничего не знает о вашем бренде, пока вы не опишете его сами. Если в промпте нет характера марки, ответы выйдут общими. Ставьте его, когда уже есть брендбук или хотя бы три прилагательных про характер, иначе аудит движения превратится в пересказ принципов.

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

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

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

  • Помоги описать motion identity бренда: у нас спокойный премиальный характер, нужны тайминги и кривые
  • Составь motion-манифест и список «делать/не делать» для нашей дизайн-системы
  • Проведи аудит: узнаёт ли пользователь наш бренд по анимации на разных платформах?

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

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill brand-strategist -a claude-code

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

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

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о brand-strategist

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

Выполните npx skills add dylantarre/animation-principles --skill brand-strategist -a claude-code. Скилл появится в ~/.claude/skills/brand-strategist/SKILL.md.

Что делает brand-strategist?

Переводит 12 принципов анимации в язык бренда: какой тайминг, какая упругость и какая амплитуда подходят вашему характеру. Помогает собрать motion-манифест и правила для дизайн-системы.

На каких платформах работает скилл?

Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot команда другая: gh skill install dylantarre/animation-principles brand-strategist.

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

SKILL.md · MIT
---
name: brand-strategist
description: Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
---

# Brand Strategist: Motion as Brand Expression

You are a brand strategist defining how motion expresses brand identity. Apply Disney's 12 principles to create distinctive, consistent brand animation.

## The 12 Principles for Brand Identity

### 1. Squash and Stretch
**Brand Expression**: Elasticity defines personality. Playful brands stretch more. Premium brands stay rigid. Tech brands use precise, minimal deformation.
**Brand Examples**: Nickelodeon (hyper-elastic), Apple (minimal stretch), Slack (friendly bounce).

### 2. Anticipation
**Brand Expression**: Wind-up style signals brand energy. Long anticipation = dramatic, confident. Quick anticipation = efficient, modern. No anticipation = urgent, direct.
**Brand Examples**: Luxury brands savor anticipation. Startups skip straight to action.

### 3. Staging
**Brand Expression**: How the brand presents information reflects values. Clean staging = minimal brand. Layered staging = rich, complex brand. Bold staging = confident brand.
**Brand Examples**: Muji stages minimally. Disney stages theatrically.

### 4. Straight Ahead vs Pose to Pose
**Brand Expression**: Creative process as brand value. Straight ahead signals spontaneity, authenticity. Pose to pose signals precision, reliability.
**Brand Examples**: Art brands embrace organic flow. Financial brands use precise keyframes.

### 5. Follow Through and Overlapping Action
**Brand Expression**: Attention to detail. Brands that invest in follow-through signal quality. Minimal follow-through = efficient, no-nonsense. Rich follow-through = luxurious, crafted.
**Brand Examples**: Luxury fashion shows fabric physics. SaaS tools keep it simple.

### 6. Slow In and Slow Out
**Brand Expression**: Easing curves are brand signatures. Sharp easing = energetic, young. Gentle easing = sophisticated, mature. Linear = industrial, functional.
**Brand Examples**: Gaming brands use aggressive curves. Wellness brands ease gently.

### 7. Arc
**Brand Expression**: Movement paths reflect brand character. Organic arcs = natural, human. Geometric paths = precise, engineered. Irregular paths = creative, unpredictable.
**Brand Examples**: Outdoor brands use natural arcs. Automotive brands use engineered precision.

### 8. Secondary Action
**Brand Expression**: Layer of delight investment. Brands with rich secondary action signal they care about details. Creates emotional connection.
**Brand Examples**: Mailchimp's high-five hand. Slack's celebratory confetti. Small touches, big brand love.

### 9. Timing
**Brand Expression**: Tempo defines brand energy. Fast = energetic, young, urgent. Medium = balanced, reliable. Slow = premium, thoughtful, luxurious.
**Brand Examples**: Energy drinks animate fast. Swiss watches animate slowly.

### 10. Exaggeration
**Brand Expression**: Boldness scale. Conservative brands use subtle exaggeration. Bold brands push extremes. Match exaggeration to brand confidence.
**Brand Examples**: Financial institutions: minimal. Entertainment brands: maximum.

### 11. Solid Drawing
**Brand Expression**: Spatial consistency builds trust. Predictable motion behavior signals reliable brand. Consistent = trustworthy. Inconsistent = unstable.
**Brand Examples**: Enterprise software maintains rigid spatial rules. Artistic brands can break them intentionally.

### 12. Appeal
**Brand Expression**: Overall motion aesthetic. Is the brand's movement charming, impressive, calming, exciting? Appeal is the emotional residue of all principles combined.
**Brand Examples**: Pixar animates with warmth. Nike animates with power.

## Brand Motion Guidelines Deliverables

- Motion manifesto (brand personality in motion)
- Timing and easing specifications
- Do/don't examples with rationale
- Platform-specific adaptations
- Reduced motion brand expression

## Audit Questions

- Does motion feel like our brand sounds?
- Would customers recognize our animation style?
- Is motion consistent across touchpoints?

© dylantarre · MIT · dylantarre/animation-principles

Похожие скиллы

Всё по теме «Дизайн» →

Сначала — brand-strategist от других авторов.

brand-strategist borghei Формирует позиционирование бренда, матрицу сообщений и модель архитектуры. Пригодится при запуске нового продукта или ребрендинге. CX Codex +1 774установок motion-prompt-writer charlie947 Составляет готовый бриф из 8 частей для генерации зацикленной моушн-графики под ваш бренд. Пригодится, когда нужно превратить идею анимации в чёткий промпт без ручного подбора параметров. CX Codex +1 851установок brand-identity arnabbagxd Скилл превращает стратегию компании в чёткий бриф для дизайнера. Помогает задать палитру с hex-кодами, шрифтовые пары и правила оформления. CX Codex +1 2 100установок brand-analyzer ailabs-393 Скилл проводит экспресс-аудит бренда, выявляет архетипы по Юнгу и формирует готовые брендбуки или отчёты с рекомендациями. Пригодится при запуске нового продукта или ревизии текущего стиля. CX Codex +1 1 100установок brand-designer daffy0208 Помогает собрать айдентику бренда: логотип, палитру, типографику и гайдлайны. Пригодится, когда нужен фирменный стиль прямо в коде проекта. CX Codex +1 1 300установок brand-visual-language dembrandt Скилл помогает выбрать радиусы, шрифты и стиль иконок так, чтобы интерфейс читался как одна марка. Пригодится, когда начинаете дизайн-систему или ловите разнобой в визуале. CX Codex +1 907установок generate-ui-from-brand dembrandt Превращает URL сайта или файл DESIGN.md в дизайн-токены, решения по UX и готовую спецификацию интерфейса. CX Codex +1 870установок

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

forms-inputs Скилл учит агента анимировать поля ввода, текстовые области и селекты: подсказки по таймингам, состояниям и CSS-переходам для понятной обратной связи. CX Codex +1 507установок orchestrated-sequences Скилл для сборки многочастных анимаций: подсказывает, как расставить задержки, кривые и роли элементов, чтобы появление выглядело одним движением. CX Codex +1 505установок social-media Скилл для анимаций в соцсетях, мессенджерах и фичах сообществ: подсказывает тайминги и поведение интерфейса. CX Codex +1 504установок exaggeration-mastery Скилл помогает решить, насколько вывести движение за пределы реализма, чтобы ключевые моменты читались на экране. CX Codex +1 502установок exit-animations Скилл подсказывает агенту, как анимировать исчезновение элементов: закрытие модалок, скрытие уведомлений, удаление строк списка. CX Codex +1 500установок Animation Principles - Expert Скилл для тех, кто уже освоил базовые принципы анимации и хочет нарушать их намеренно: анти-сквош, пропущенное anticipation, сломанные дуги. CX Codex +1 499установок timing-calibration Скилл разбирает жалобы «слишком быстро» и «слишком медленно» и подбирает длительности и easing по типу действия. CX Codex +1 497установок Animation Principles - Teaching Others Помогает объяснить 12 принципов анимации ученикам, менти и коллегам разного уровня: что показать первым и на чём обычно спотыкаются. CX Codex +1 495установок

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

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