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

motion-prompt-writer — скилл для Claude Code: обзор и установка

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

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

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

Скилл не создаёт видео сам, а генерирует текст промпта для Claude Motion из 8 секций: планка качества, формат, главное правило, стиль, анимация, запреты, финальная проверка и сама сцена. Первые 7 частей формируют постоянный бриф бренда, а восьмая содержит конкретный кадр.

Для работы скиллу нужны визуальные вводные (скриншот сайта, логотип или hex-коды) и описание одного изменения на экране. Если данных о стиле нет, агент предложит параметры по умолчанию в эстетике Apple. Hex-коды берутся только из явных указаний или файлов: угадывать цвета скилл прямо запрещает.

Если в запросе не хватает точных надписей или чисел, скилл остановится и задаст до 4 вопросов перед генерацией.

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

  • сформулировать структурированный промпт для моушн-графики из 8 частей
  • выделить hex-коды и стилевые правила из материалов бренда без домыслов
  • подготовить многоразовый бриф для повторяющихся видеороликов
  • описать анимацию как одно изолированное изменение с возвратом в исходное состояние

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

  • write me a Motion prompt: кнопка превращается в галочку
  • Сделай motion brief для графика регистраций по скриншоту сайта
  • Заполни 8 частей промпта для зацикленной анимации логотипа

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

1Через Skills CLI (Vercel)

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

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

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

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

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

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

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

Выполните команду npx skills add charlie947/motion-graphics-skills --skill motion-prompt-writer -a claude-code. Также файл скилла можно сохранить вручную по пути ~/.claude/skills/motion-prompt-writer/SKILL.md.

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

Скилл переводит пользовательскую идею в готовый промпт из 8 пунктов для Claude Motion. Он не рендерит анимацию, а создаёт структурированное задание с правилами визуала, физики движения и описанием сцены.

Что произойдёт, если не передать параметры бренда?

Скилл применит оформление по умолчанию в стиле Apple: светлый фон #F5F5F7, матовое стекло, мягкие тени и системные шрифты.

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

SKILL.md · MIT
---
name: motion-prompt-writer
description: Write a complete 8-part Claude Motion prompt (The bar, Format, The one rule, Look, Motion, Never, Before you finish, The scene) for one short looping motion graphic, in your own brand. Takes your brand (a website screenshot, a logo, hex codes, or nothing for the Apple-style default) and one moment you want to show, in plain words. Use when someone says "write me a Motion prompt", "turn this idea into a motion graphic", "fill in the 8 parts" or "make my motion brief". Outputs parts 1 to 7 as a reusable brief and part 8 as the scene, in one paste-ready code block.
---

You write Claude Motion prompts in 8 parts. You never build the video yourself.

Parts 1 to 7 are the brief. They stay the same for every video in one brand.
Part 8 is the scene. It is the only part that changes.

<task>
1. Read what I give you: my brand (a website screenshot, a logo, hex codes or a brand guide), the moment I want to show, and maybe a size and length.
2. If something essential is missing, ask in one batch of four questions or fewer, then wait:
   - The moment: what changes on screen? (one thing, before and after)
   - The exact words and numbers on screen (they must be real, never invented).
   - The size: 1080x960 (newsletter or tile), 1080x1350 (LinkedIn 4:5), 1080x1920 (9:16 reel) or 1920x1080 (16:9).
   - The brand, only if I gave none. If I have none, use the Apple-style default below and say so.
   Skip anything I already answered.
3. Brand: take hex codes only from what I typed or what is clearly readable in my files. Never guess a hex code. If a colour is unclear, ask for it.
4. Write the scene as ONE moment in two or three sentences: the hero object, the one change, then the reset. If my idea has several moments, pick the strongest one and list the others as extra scenes I can swap in later.
5. Then write the prompt.
</task>

<the_8_parts>
1. The bar: the quality level in one line, plus "if it would not survive in [the bar], it is not done".
2. Format: width x height in pixels, exact seconds (6 by default), seamless loop (last frame matches the first), music on or off.
3. The one rule: one hero object fills 60 to 70% of the frame and shows ONE satisfying change, then resets.
4. Look: background, depth (shadows, glass, highlights), real components, 1 or 2 accent colours as hex codes, font, the hero word or number at 120px or more, labels never under 34px, at most 5 words on screen.
5. Motion: spring physics with a small settle, nothing linear, hold the after state at least 1.2 seconds, one thing always alive but only one focus.
6. Never: grey placeholder bars, stock icons, emoji, clip art, dark or noisy backgrounds if the brand is light, small objects floating in empty space, real logos of other brands.
7. Before you finish: render a still every 1 second, judge each one as a design director, then again at 200px wide, and fix anything generic, cheap, too small or empty.
8. The scene: one moment in two or three sentences.
Also add a short Originality line: every element is original, never a copy of a real product's UI, icons or logos, and build straight away without asking to confirm.
</the_8_parts>

<apple_style_default>
Use this when I have no brand. Label it "Apple-style default, replace with your brand".
- The bar: Apple keynote quality. Tactile, physical, precise, expensive.
- Look: light background #F5F5F7, layered soft shadows, frosted glass panels with a bright 1px edge, macOS and iOS-grade squircles and widgets. System colours used sparingly: blue #0A84FF, green #30D158, orange #FF9F0A, red #FF453A, purple #BF5AF2 (one or two per piece). Font: Inter or system-ui, tight tracking, heavy weights.
</apple_style_default>

<output_format>
Three parts only.
Part 1: one line saying which brand you used (mine, or the Apple-style default).
Part 2: the full prompt in ONE code block. It starts with "Make me a motion graphic. Follow this motion brief exactly:", then a "# Motion brief: <name>" heading, then the 8 parts as "## " headings in the order above, then "## Originality".
Part 3: two or three extra scenes I could swap into part 8, one line each, in the same brand.
Tell me to save parts 1 to 7 as motion-brief.md, attach it to any Motion chat, and change only The scene next time.
</output_format>

<examples>
<example>"Make a motion graphic of my sign-ups going up", no number -> ask for the real number. Do not write the prompt yet.</example>
<example>A screenshot of my website with a clear navy and orange -> use those hex codes in Look. Leave out any logos that are not mine.</example>
<example>"A button that becomes a tick", no brand -> write the full prompt with the Apple-style default, labelled.</example>
</examples>

If the moment or the real words and numbers are missing, ask only for those and wait. If I supplied everything, write the prompt straight away.

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

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

Всё по теме «Дизайн» →
brand-strategist dylantarre Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда. CX Codex +1 503установок motion-design LottieFiles Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. Пригодится для микровзаимодействий, загрузки и переходов между страницами. CX Codex +1 19 900установок motion-art-direction iart-ai Скилл задаёт правила движения до первой отрисованной сцены: одна кривая, один тайминг, один набор переходов на весь ролик. CX Codex +1 3 300установок motion-designer dylantarre Скилл для ИИ-агента, который помогает проектировать движение в интерфейсе: тайминги, кривые easing, спецификации для разработчика. CX Codex +1 1 600установок motion-principles AThevon Скилл задаёт правила интерфейсной анимации: безопасные свойства, тайминги, кривые разгона и режим reduced-motion для веба, SwiftUI и Jetpack Compose. CX Codex +1 1 100установок design-motion-principles kylezantos Создаёт и проверяет анимации интерфейса с учётом контекста продукта и частоты действий. Нужен для переходов, состояний наведения и микровзаимодействий. CX Codex +1 12 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установок motion-brief-writer Превращает сырую идею анимированной графики в точный build-промпт для Claude. Спрашивает недостающее, не выдумывает числа. 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установок

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

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