design-motion-principles작성자 Kyle Zantos

Design Motion Principles 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬입니다. Kowalski, Krehel, Tompkins의 원칙에 따른 목적 지향적 인터랙션 모션 또는 기존 애니메이션의 리뷰를 제공합니다.

Motion & Video

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 6,794자

01 기능

Claude Code와 Codex에서 design-motion-principles 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

코딩 에이전트를 위한 인터랙션 및 모션 디자인 스킬로, 두 가지 모드로 작동합니다. Create는 목적성 있는 모션을 갖춘 인터랙티브 컴포넌트를 만들고, Audit는 기존 모션을 검토하여 AI-slop 패턴을 포함한 디자이너별 결과를 반복 재생되는 데모가 담긴 브랜드화된 HTML 리포트로 보고합니다.

이 스킬은 세 가지 관점 — 절제와 속도를 강조하는 Emil Kowalski, 프로덕션 완성도를 강조하는 Jakub Krehel, 유쾌한 실험을 강조하는 Jhey Tompkins — 을 중심으로 조언을 구성하며, 모든 경우에 일괄 적용하는 대신 프로젝트 유형에 따라 비중을 다르게 둡니다. 다루는 범위는 웹 및 앱 UI 모션으로, HTML/CSS, React, Framer Motion, iOS/Android 전환, 디자인 시스템 애니메이션을 포함합니다. 빈도 제한, 맥락에 따른 지속 시간, 필수적인 prefers-reduced-motion 처리는 두 모드 모두에서 적용됩니다.

산출물

Create 모드에서 목적성 있는 모션으로 제작된 인터랙티브 컴포넌트입니다.
Audit 모드에서 작성되는 디자이너별 검토 리포트입니다.
검토 결과의 반복 재생 데모를 포함한 브랜드화된 HTML 리포트입니다.
기본적으로 HTML로 렌더링되는 감사 리포트 템플릿이며, 플래그를 통해 터미널 모드도 사용할 수 있습니다.

예시 프롬프트 보기 ↗

작동 방식

01
요청에서 모드 감지하기
빌드 관련 표현은 Create를 선택하고, 감사(audit), 리뷰(review), 평가(evaluate), 피드백(feedback) 또는 '이 모션이 괜찮은가' 같은 표현은 Audit를 선택합니다.
02
해당 워크플로 파일 읽기
모드 감지는 0단계이며 이후의 모든 과정을 좌우합니다 — 해당 모드의 워크플로 파일은 작성된 대로 따릅니다.
03
맥락에 따라 세 디자이너의 비중을 조정하기
Emil, Jakub, Jhey는 맥락에 따른 관점으로 취급되며, 절대 보편적인 규칙으로 간주되지 않습니다.
04
빈도와 지속 시간 가이드라인 적용
상호작용이 얼마나 자주 발생하는지가 먼저 고려되며, 그다음 관련 렌즈에서 도출된 지속 시간 목표가 적용됩니다.
05
모드에 맞는 산출물 생성
Create는 컴포넌트를 반환하고, Audit은 디자이너별 리포트를 반환하며, 각 발견 사항에는 시각적 컨테이너 템플릿으로 만든 데모 카드가 함께 제공됩니다.

02 적합성 확인

design-motion-principles Skill 사용 시기

이러한 종류의 모션 및 비디오 작업을 수행할 때 Claude Code 또는 Codex에서 design-motion-principles skill을 사용합니다. 적합성과 제한 사항은 skill 자체 파일에서 가져왔습니다.

적합한 경우

Linear나 Raycast 같은 생산성 도구에서는 Emil의 절제와 속도 규칙이 주도하며, Jhey는 온보딩에만 사용됩니다.
키즈 앱과 교육 제품에서는 완성도와 즐거움이 생산성 속도 규칙보다 우선하며, Emil은 고빈도 게임 상호작용에만 한정됩니다.
크리에이티브 포트폴리오에서는 정교함을 위한 Jakub과 창의성을 위한 Jhey가 주도하며, Emil은 고빈도 상호작용에 한정됩니다.
모바일 앱에서는 Jakub이 주도하고, Emil이 보조하며, Jhey가 딜라이터를 제공합니다.

한계 인지하기

게임 엔진, Lottie, Rive, 영상 등 웹 및 앱 UI 외의 모션 작업에서는 빈도 프레임워크는 여전히 적용되지만 디자이너별 기법은 그대로 적용되지 않을 수 있습니다.
단일 보편적 수치로 지속 시간을 판단하는 것, 맥락 가중치를 확인하지 않고 지속 시간에 플래그를 걸거나 상한을 두는 것은 명시적으로 금지됩니다.
프로젝트 유형과 관계없이 키보드로 시작되는 상호작용은 애니메이션에서 완전히 제외됩니다.

제공할 사항

프로젝트 유형이는 1차, 2차, 선택적 가중치를 결정하므로, SaaS 대시보드는 Jakub보다 Emil을 우선 지향합니다.
상호작용이 얼마나 자주 트리거되는지빈도 게이트는 무언가가 추가되거나 승인되기 전에 먼저 적용되므로, 이 답변이 애니메이션 대상이 될 자격 자체를 결정합니다.
모션 자체와 그 기술 스택React, Framer Motion, CSS 또는 HTML에서의 전환, 호버 상태, 마이크로 인터랙션, 진입/이탈 애니메이션.

03 스킬 내부

design-motion-principles 스킬이 Claude Code와 Codex에 부여하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

트리거 빈도로 애니메이션 여부 결정하기
하루에 수백 번씩 발생하는 빈번한 상호작용에는 애니메이션을 넣지 않거나 즉시 전환을 적용하고, 드문 상호작용은 표현적일 수 있습니다.
prefers-reduced-motion을 항상 처리하기
이 요구 사항은 Create 모드에서 생성되거나 Audit 모드에서 검토되는 모든 것에 예외 없이 적용된다고 명시되어 있습니다.
요청이 모호할 때 질문하기
'이 모달 애니메이션을 봐줘'와 같은 모호한 요청은 임의로 추측하지 않으며, 사용자에게 Create인지 Audit인지 선택하도록 요청합니다.
프로젝트 유형별로 디자이너 가중치 재조정하기
매핑 테이블은 1차, 2차, 선택적 렌즈를 변경합니다. 랜딩 페이지의 경우 Jakub이 1차, Jhey가 2차이며, Emil은 폼과 내비게이션에만 적용됩니다.
가시성을 품질 테스트 기준으로 사용하기
모든 상호작용에서 칭찬을 받을 정도의 모션은 프로덕션에 쓰기에는 지나치게 눈에 띄는 것으로 간주됩니다.
모드가 지정하는 참조 자료 불러오기
Create 모드는 항상 Motion Cookbook(진입/종료, 이징, 스프링, clip-path, @property, FLIP, 스크롤 기반 동작에 대한 레시피)을 불러오며, Audit 모드는 자체적인 상시 로드 파일을 불러옵니다.

04 활용하기

Claude Code 또는 Codex에 design-motion-principles 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 Agent에 design-motion-principles 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

skills/design-motion-principles/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

모션의 비중이 보기에 얼마나 좋은지가 아니라 해당 상호작용이 실제로 얼마나 자주 발생하는지에 맞는지 확인합니다.
프로덕션 완성도 작업을 단일한 전역 지속 시간이 아니라 200-500ms의 Jakub 범위에 맞춰 측정합니다.
Audit 모드에서는 애니메이션을 눈으로 대충 훑기보다 체계적인 감사 체크리스트를 따라 작업합니다.
AI 특유의 조잡한 모션 범주와 안티패턴을 명시하는 안티체크리스트 품질 게이트를 통해 결과를 검토합니다.
복잡한 애니메이션의 경우, GPU 최적화, will-change 사용, 레이아웃 스래싱을 확인합니다.

OpenDesign에서 SKILL.md 링크로 design-motion-principles를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles 브랜치 main
스킬 파일: skills/design-motion-principles/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 4a9ca87
License: MIT LICENSE에서 가져옴.
리포지토리 스타: 1,048 전체 kylezantos/design-motion-principles 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. design-motion-principles에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

STEP 0: 모드 감지 (가장 먼저 수행)요청 문구를 Create 또는 Audit에 매핑하고, 모호할 경우 질문합니다.
세 명의 디자이너Emil, Jakub, Jhey가 누구인지, 각자가 답하는 질문, 그리고 헌사 관련 고지 사항입니다.
맥락-관점 매핑일곱 가지 프로젝트 유형을 1차, 2차, 선택적 디자이너 가중치에 매핑합니다.
핵심 원칙 (두 모드 공통)빈도 게이트, 지속 시간 가이드라인, 황금 규칙, 그리고 선택 사항이 아닌 접근성입니다.
참조 색인각 참조 파일과 이를 불러와야 하는 조건입니다.
워크플로 색인두 개의 워크플로 파일: 컴포넌트 빌드, 또는 모션 검토 및 보고입니다.

스킬 자체 설명

"Emil Kowalski, Jakub Krehel, Jhey Tompkins의 기법을 기반으로 한 모션 및 인터랙션 디자인 전문가입니다. 두 가지 모드 — 의도적인 모션으로 인터랙티브 컴포넌트를 구축하거나 기존 애니메이션을 감사하여 AI-slop 모션 패턴을 포착합니다(감사는 반복 데모가 포함된 브랜드 HTML 리포트를 생성합니다). UI 모션을 생성, 추가, 애니메이션 적용 또는 검토할 때 사용합니다: 트랜지션, 호버 상태, 마이크로 인터랙션, 진입/종료 애니메이션, 또는 React, Framer Motion, CSS, HTML에서의 모든 모션 디자인 작업. 컨텍스트 인식 가중치와 함께 디자이너별 관점을 제공합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 6,794자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

design-motion-principles 스킬에 관한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

React가 필요합니까, 아니면 일반 CSS와 HTML로도 작동합니까?

둘 다 범위에 포함됩니다. 이 스킬은 HTML/CSS, React, Framer Motion 또는 Motion, iOS/Android 전환, 디자인 시스템 애니메이션에 걸친 웹 및 앱 UI 모션을 다룹니다.

무언가를 만들지 검토할지는 어떻게 판단합니까?

요청에서 Create 또는 Audit 신호를 읽어 판단하며, 모호할 경우 질문합니다. AskUserQuestion을 사용할 수 없는 경우 두 모드를 제시하는 일반 텍스트 질문으로 대체됩니다.

어린이용 앱도 대시보드와 동일한 빠르고 절제된 모션을 적용받습니까?

아닙니다. 가중치는 맥락에 따라 달라지므로, 어린이용 앱은 Emil의 생산성 중심 속도 규칙보다 완성도와 즐거움을 위해 Jakub과 Jhey를 우선시합니다. 이 맥락에서는 즐거움이 목표로 간주됩니다.

이 스킬은 세 명의 디자이너가 직접 만든 것인가요?

아닙니다. 각 렌즈는 이들이 공개적으로 발표한 강연, 아티클, 발표, 오픈소스 프로젝트를 정제한 것이며, 가중치 프레임워크는 스킬이 이들에 대한 헌사로 이름을 붙여 자체적으로 해석한 것입니다.

Design Motion Principles

실제 모션 및 비디오 작업에 design-motion-principles 실행.

OpenDesign을 다운로드하고 SKILL.md 링크에서 design-motion-principles를 가져온 다음 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles