brand-strategist · dylantarre — скилл для Claude Code: анимация как язык бренда
Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда.
npx skills add dylantarre/animation-principles --skill brand-strategist -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/brand-strategist/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/brand-strategist/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-strategist -a codex2Вручную: положить файлы
.agents/skills/brand-strategist/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-strategist -a cursor2Вручную: положить файлы
.cursor/skills/brand-strategist/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles brand-strategist2Вручную: положить файлы
.github/skills/brand-strategist/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-strategist -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/brand-strategistВручную: положить файлы
.devin/skills/brand-strategist/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill brand-strategist -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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 от других авторов.