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

motion-brief-writer — скилл для Claude Code: бриф на анимацию

Превращает сырую идею анимированной графики в точный build-промпт для Claude. Спрашивает недостающее, не выдумывает числа.

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

Что делает motion-brief-writer

Скилл пишет бриф, а не саму анимацию. Вы описываете идею обычными словами, прикладываете логотип, скриншот бренда или hex-коды, точные формулировки и цифры. Если чего-то не хватает, скилл задаёт до пяти вопросов одним блоком и ждёт ответа. Дальше он отдаёт две части: сводку не длиннее трёх предложений и один build-промпт в блоке кода.

В промпте уже прописаны размер в пикселях и длительность в секундах, четыре состояния с таймингами (старт, изменение, удержание, возврат — последний кадр совпадает с первым), зафиксированные текст и числа, цвета, шрифт и имена файлов-ассетов без путей. Сборка — один HTML-файл с функцией window.seek(seconds) и режимом reduced-motion, который показывает удержанный кадр. После сборки скилл снимает именованные кадры и проверяет их на наложение, обрезанный текст и подменённые числа.

Перед началом он читает brand.md и MOTION.md, если те лежат в проекте. Нет их — придётся сначала прогнать brand-intake или дать hex-коды, шрифт и файл логотипа: без этого результат не получит статус «в бренде». Измеренные результаты, цели и демо-данные скилл держит раздельно, а если у заявленного показателя нет подтверждающих цифр, он спросит, результат это, цель или пример. Ничего не устанавливает, не тратит деньги и не публикует без вашего согласия.

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

  • превратить идею анимированного графика в готовый build-промпт
  • собрать бриф в фирменных цветах без выдуманных цифр
  • отделить реальные показатели от демонстрационных данных
  • получить HTML-анимацию с функцией перемотки по секундам
  • проверить кадры на обрезанный текст и подменённые числа

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

  • Напиши motion-бриф для анимированного графика: столбцы растут, Q3, 1080 x 1350, 8 секунд. Цифры прикладываю.
  • Сделай build-промпт для лупящейся анимации в моём бренде, hex-коды и логотип во вложении.
  • У меня есть референс с чужим логотипом — возьми только движение, логотип и цвета исключи.

Как установить motion-brief-writer

1Через Skills CLI (Vercel)

npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a claude-code

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

~/.claude/skills/motion-brief-writer/SKILL.md

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

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

Вопросы о motion-brief-writer

Как установить motion-brief-writer в Claude?

Выполните npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/motion-brief-writer/SKILL.md.

Что делает motion-brief-writer?

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

Что нужно подготовить до запуска скилла?

Файлы brand.md и MOTION.md в проекте либо hex-коды, шрифт и файл логотипа. Без них скилл сначала предложит прогнать brand-intake.

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

SKILL.md · MIT
---
name: motion-brief-writer
description: Turns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results apart from sample data, and never invents a figure. Use when someone says "brief this animation", "write me a motion brief", "I want an animated chart/graphic for my post", "make this move in my brand", or has an idea but no build prompt yet.
---

# Motion brief writer

You write the brief. Claude Code builds from it. Use this before any of the other skills in this pack when the idea is still rough.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## How to use it

1. Say what you want to make, in plain words. Add your logo, a screenshot of your brand or your hex codes, and your exact words and numbers.
2. It asks for whatever is missing, in one batch of five questions or fewer.
3. It hands back two parts: a three-sentence summary, and one build prompt in a code block.
4. Paste the build prompt into Claude Code in the folder with your files.

## The instructions

You are a motion-design brief writer. You write build prompts. You never build the animation yourself.

<context>
I want a short looping animated graphic for a post, in my own brand. I will paste your prompt into Claude Code with my files attached. Precision matters because a vague brief gives a generic animation, and an invented number could end up in public under my name.
</context>

<task>
1. Read what I give you: an idea, a logo, brand guide, screenshot or colours, exact words and numbers, the platform or size, and maybe a motion reference.
2. If something essential is missing, ask for it in one batch of five questions or fewer. Essential means: the exact words and numbers, the size, the length, and the brand. Skip anything I have already answered. Then wait.
3. If I have no brand assets, offer neutral defaults and label them "Neutral default, replace with your brand". For my actual brand, only use hex codes I typed or that are clearly readable. Otherwise ask for the exact colour. You may propose a neutral palette if you label it as a suggestion, not my brand.
4. My brand rules outrank any reference. Take the motion idea from a reference. Leave out its logo, copy and colours.
5. Keep measured results, targets and sample data separate. If a requested performance claim has no supporting figures or its status is unclear, ask. With no data, offer a demo marked "Illustrative data". Never present a target as a result.
</task>

<output_format>
Two parts only.
Part 1: a plain-English summary of no more than three sentences.
Part 2: one build prompt in a code block, with:
- width x height in pixels, and total seconds
- four states with timings: start, change, hold, return (last frame matches the first)
- the exact text and numbers, marked as fixed
- colours, font and assets. Asset files are attached by me, so name them without a path
- one self-contained HTML file with a window.seek(seconds) function and a reduced-motion setting that shows the held frame
- after the build: capture named frames, check them for overlap, cut-off text and changed numbers, fix what is real, keep the earlier version
- no installs, spending, sending or publishing without asking me
- optional export: check which tools exist, then state the real file formats and sizes. Do not assume HTML alone becomes MP4
</output_format>

<examples>
<example>"Bars grow for my Q3 results", no numbers -> ask for the numbers. Do not write a prompt yet.</example>
<example>A reference with another firm's logo -> copy its motion only. State that its logo and colours are excluded.</example>
<example>Brand screenshot too blurry to read -> "exact colour needed", never a guessed hex.</example>
</examples>

If my idea or essential details are missing, ask only for those and wait. If I already supplied everything, produce the two-part output immediately.

## Tested

- A made-up brand (Fern & Co, navy, terracotta and cream) with six sample numbers: it wrote the brief, and Claude Code built an 8-second 1080 x 1350 chart from it. It caught two layout problems on its own and fixed both. Every number matched the brief.
- A vague bakery idea: it asked five questions instead of inventing a brand.
- A "20% revenue growth" headline with no figures: it asked whether 20% was a result, a target or an example.

© charlie947 · MIT · charlie947/motion-graphics-skills

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

Всё по теме «Дизайн» →
remotion-motion-graphics haidrrrry Скилл для ИИ-кодинга, который заставляет агента писать код Remotion по правилам моушн-дизайна, а не выдавать линейные фейды и плоские фоны. CX Codex +1 1 100установок motion-graphics Liamrjohnston Проверяет подлинность ассетов и блокирует генерацию моушн-графики до прохождения проверок через promptible-gate.mjs. Помогает собирать ролики для соцсетей. CX Codex +1 1 000установок video-motion-graphics dylantarre Скилл внедряет 12 классических принципов анимации Диснея в проекты After Effects и Premiere Pro. Помогает настраивать тайминг, графики скорости и овершуты при создании моушн-дизайна. CX Codex +1 2 400установок orbital-hud-motion RobLe3 Скилл для ИИ-агента, который строит круговые HUD-эффекты и аура-кольца вокруг объекта в Blender по референсу, а не наугад. CX Codex +1 714установок hyperframes-registry heygen-com Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля. CX Codex +1 1 000 000установок motion-broll Barty-Bart Создаёт моушн-графику и перебивки для разговорных видео по таймкодам субтитров. Генерирует анимации с морфингом одного элемента в такт речи спикера. CX Codex +1 1 700установок

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

loop-cover Превращает обложку рассылки или блога в аккуратный зацикленный GIF размером 896x640 на 180 кадров. Оживляет ровно одну деталь, сохраняя первый кадр законченным. CX Codex +1 1 400установок apple-launch-film Собирает лонч-фильм в стиле Apple для Mac целиком в коде: меню-бар, чёлку, виджеты и градиентные обои. Пригодится, когда нужен ролик без записи экрана и After Effects. CX Codex +1 1 500установок title-sequence-3d Скилл собирает кинематографичный 3D-опенер на Three.js в одном HTML-файле. Пригодится, когда для видеоролика или рассылки нужна яркая заставка с неоновыми вывесками и логотипами. CX Codex +1 1 500установок brand-intake Скилл проводит короткое интервью и разбирает 3–5 референсов, чтобы собрать brand.md и MOTION.md — файлы, из которых остальные скиллы пака берут цвета, шрифты и тайминги. CX Codex +1 1 500установок launch-video Собирает промо-ролики для запуска продуктов на 30–45 секунд в виде автономного HTML-файла с покадровой анимацией и экспортом в MP4. Пригодится при релизе SaaS или курса. CX Codex +1 1 500установок reel-export Превращает горизонтальное или квадратное видео в вертикальный файл 1080 x 1920 для Reels и TikTok, который загружается без искажения цвета. CX Codex +1 1 500установок reference-to-motion Разбирает видео и референсы стиля, чтобы собрать готовый промпт для Claude Motion с таймингами сцен под ваш бренд. Пригодится для создания моушн-роликов по образцу. CX Codex +1 917установок motion-prompt-writer Составляет готовый бриф из 8 частей для генерации зацикленной моушн-графики под ваш бренд. Пригодится, когда нужно превратить идею анимации в чёткий промпт без ручного подбора параметров. CX Codex +1 851установок

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

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