본문으로 건너뛰기
cccskills
무료GitHub에 공개

motion-prompt-writer

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills스타 428(GitHub 428 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(2)

  • SKILL.md4.8 KB
  • CANON-FACTS.txt305 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants a data graphic that loops.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Mac launch video", "notch animation", "make it look like an Apple keynote", "macOS UI launch film" or wants a product launch that looks like native Mac interface.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "write my MOTION.md" or drops a batch of brand frames into chat.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "looping GIF cover", "newsletter cover GIF", "animate my thumbnail" or wants a cover that moves in the inbox without looking busy.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "milestone video", "celebrate 10k followers", "animate my subscriber count", "number reveal", "particle number animation" or wants to mark a result on LinkedIn or Instagram.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

charlie947의 스킬 모두 보기

이 스킬의 문제 신고