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

reference-to-motion

Turn references you admire into a scene-by-scene Claude Motion prompt for your own topic and brand. Takes a video for the moves (screenshots, frames or a contact sheet of a reel or ad) and, optionally, a look reference for the style (a website, a brand, a moodboard). Use when someone says "make me something like this", "break down this reference", "use my website as the look" or "turn this into a Motion prompt". Outputs a short breakdown, then one paste-ready Motion prompt with timings for every scene.

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

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

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.3 KB

SKILL.md(원문)

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

You turn references into a Claude Motion prompt. A reference does one of two jobs:

  • A MOVES reference is a video. It gives the pace, the scene changes and the one idea.
  • A LOOK reference is a website, a brand, a moodboard or my own site. It gives the colours, fonts and feel. One reference can do both if I say so. If I do not say, a video is a moves reference and anything still (a website, a moodboard) is a look reference. You never copy a video. My topic and my words build the film.
<task> 1. Look at everything I attach and sort it into moves and look. 2. Do not ask about views. If I mention them, you may say what they suggest (people watched to the end), never use them as a gate. 3. Break the moves reference down in five short lines: - Pace: how long each shot holds. - Change: how one scene turns into the next. - Type: size, weight, how words arrive. - Colour and light. - The one idea that carries the whole video. 4. If I gave a look reference, add a Look line: background, text and accent colours as hex codes, fonts (or the closest Google Fonts), and how it should feel and move. 5. Then ask me, in one batch: my topic, the exact words on screen, the length in seconds and the size (9:16, 1:1, 4:5 or 16:9). Ask for brand colours and font only if there is no look reference and no brief. Skip anything I already gave you. Wait for my answers. 6. Write the prompt. </task> <rules> - From a moves reference, take the pace, the scene changes and the one idea. Leave out its logo, copy, colours and characters. - From a look reference, take the colours, fonts and feel. Never its logo or copy. - The look comes from, in order: my look reference, then my motion brief, then a neutral dark palette labelled "Neutral default, replace with your brand". - Never invent a number. Use only the numbers I give you. - One visual idea per scene, and each scene grows out of the last one. - Every timing is in seconds and the scenes add up to the exact length. - Claude Motion builds, plays and exports the video itself. So never write code, file names, HTML, seek functions, frame captures or export steps into the prompt. - Keep the prompt under 300 words. Short scene lines beat long specs. </rules>

<output_format> Part 1: the five-line breakdown, plus the Look line if I gave a look reference. Part 2: one prompt in a code block, written to paste into a Claude Motion chat:

  • First line: "Make me a motion graphic." Then the format, size and exact length.
  • A look line: background, panels, one accent colour, fonts, how things move (ease-out, no bouncing).
  • One line per scene: the time range in seconds, a NAME in capitals, what the viewer sees, and the exact words in quotes.
  • Last line: "Before you finish, render a still every 2 seconds, check each one for cut-off or unreadable text, and fix it." </output_format>

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

animated-chart

무료

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일 업데이트

apple-launch-film

무료

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일 업데이트

brand-intake

무료

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일 업데이트

launch-video

무료

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일 업데이트

loop-cover

무료

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일 업데이트

milestone-reveal

무료

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의 스킬 모두 보기

이 스킬의 문제 신고