AI 디자인 스킬 비교, 깃허브 디자인⁠·모션 도구 13개 고르는 법

AI 디자인 스킬 비교는 웹사이트 UI, 인터랙션, 모션그래픽, 3D 애니메이션을 만들 때 깃허브에서 인기 있는 도구 13개를 하고 싶은 일에 맞춰 고르는 기준입니다. 디자인 스킬, 작업공간, 웹 인터랙션, 영상으로 뽑는 모션그래픽의 네 묶음으로 나누고 묶음마다 설치 명령과 라이선스에서 주의할 점을 적었습니다. 전부 설치할 필요는 없고, 웹사이트를 새로 만들지 디자인을 고칠지 영상을 만들지에 따라 필요한 것만 고르면 됩니다.

네 묶음으로 나눈 13개

• 디자인 스킬 5개: 프론트엔드 디자인, UI UX Pro Max, 테이스트 스킬, 홀마크, 임페커블
• 작업공간 2개: 구글 스티치, 오픈디자인
• 웹 인터랙션 2개: 에밀 코왈스키 애니메이션 스킬 모음, 리액트 비츠
• 모션그래픽 4개: 리모션, 하이퍼프레임즈, 클로드 모션, awesome-opus5-5-videos

스킬(AI 코딩 도구가 작업 전에 읽는 지침 묶음)은 SKILL.md 파일이 들어 있는 폴더 형식이라 클로드 코드 말고 코덱스, 커서 같은 다른 AI 코딩 도구에서도 쓸 수 있는 것이 많습니다. 아래 설치 명령은 2026년 10월에 각 저장소 안내로 확인한 것이고, 저장소는 자주 바뀌니 설치 전 README의 최신 명령을 다시 봅니다.

1묶음, AI 디자인 스킬 5개

프론트엔드 디자인

Anthropic이 만든 공식 디자인 스킬입니다. AI가 만든 웹사이트에 흔한 뻔한 폰트와 똑같은 카드 배치를 피하도록 안내합니다. 미니멀, 레트로 미래지향 같은 콘셉트를 먼저 정하면 폰트, 색상, 배치, 애니메이션을 그 콘셉트에 맞춥니다. 스킬 파일 하나로 되어 있어 클로드 말고 다른 도구에도 넣을 수 있습니다. 디자인 스킬을 처음 써 본다면 여기서 시작하는 것이 무난합니다.

클로드 코드에서는 플러그인으로 설치합니다.

/plugin install frontend-design@claude-plugins-official

UI UX Pro Max

업종에 맞는 디자인을 골라 주는 스킬입니다. 색상, 글꼴 조합, 차트 유형을 데이터로 갖고 있어서 "금융 대시보드"라고 하면 금융에 어울리는 색과 폰트, 차트를 골라 사이트 전체 규칙으로 묶습니다. 스타일, 색 조합, 글꼴 조합의 개수는 버전마다 달라지고, React와 Vue 같은 웹 스택은 물론 플러터와 스위프트UI 같은 앱 개발 스택도 지원합니다. 클로드 코드, 코덱스, 커서 등 20개가 넘는 AI 코딩 도구용 설치를 지원합니다.

클로드 코드에서는 플러그인 저장소를 먼저 추가한 뒤 설치합니다.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

다른 도구용은 npm install -g ui-ux-pro-max-cli로 명령줄 도구를 받고 uipro init --ai claude처럼 대상 도구를 지정합니다.

테이스트 스킬

디자인의 취향을 숫자로 조절하는 스킬입니다. 레이아웃을 얼마나 과감하게 할지, 애니메이션을 얼마나 많이 넣을지, 정보를 얼마나 빽빽하게 채울지를 1부터 10까지 정하는 다이얼 방식으로 소개돼 왔습니다. 같은 포트폴리오도 숫자를 바꾸면 여백 넓은 차분한 디자인이 되기도 하고, 비대칭에 움직임 많은 과감한 디자인이 되기도 합니다. 다만 버전이 올라가며 구성이 바뀌고 있으니 실제 조절 항목은 저장소 설명에서 확인합니다.

Node.js 22 이상과 크롬, 엣지, 크로미움 중 하나가 필요합니다. 클로드 코드에서는 플러그인으로 설치합니다.

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

홀마크

테마를 골라 시작하는 스킬입니다. 질감 중심부터 타이포그래피 중심까지 48가지 테마가 있고, 새로 만들기 말고도 기존 화면의 감사(audit, 고칠 목록만 보고)와 리디자인 모드가 있습니다. 제목 위 작은 문구나 똑같은 카드 배치처럼 "AI 티 나는" 패턴을 찾아내고, 여러 화면 폭에서 레이아웃이 깨지는지도 검사합니다. 클로드 코드, 코덱스, 커서, 오픈코드에서 쓰고 설치는 한 줄입니다.

npx skills add nutlope/hallmark -g

임페커블

명령어로 디자인을 고치는 스킬입니다. 2026년 10월 기준 저장소에는 명령이 24개 있고, 이 가운데 bolder는 더 과감하게, quieter는 더 차분하게, colorize는 색을 더하고, polish는 디테일을 다듬습니다. "좀 더 세련되게" 같은 막연한 요청 대신 "첫 화면은 bolder, 정보가 많은 구간은 quieter"처럼 부분마다 정확히 지시할 수 있습니다. 테이스트가 사이트 전체 분위기를 돌린다면 임페커블은 원하는 부분만 집어서 고칩니다. 클로드 코드, 코덱스, 커서, 제미나이 CLI 등 18개 안팎의 도구를 지원하고 라이선스는 Apache 2.0입니다.

npx impeccable install

클로드 코드 플러그인으로 설치하려면 /plugin marketplace add pbakaus/impeccable을 입력합니다. 이미 설치했다면 npx impeccable update로 갱신합니다.

2묶음, 작업공간 2개

여기서부터는 화면을 보면서 직접 디자인하는 도구입니다.

구글 스티치

말로 설명하면 앱 화면 시안을 여러 장 만들어 주는 구글의 AI 디자인 도구입니다. "일정 관리 앱"이라고 하면 캘린더, 할 일 목록, 상세 화면을 한 판에 펼쳐 놓고 대화로 고칠 수 있습니다. 정한 디자인은 DESIGN.md 파일(색, 글꼴, 여백, 버튼 규칙을 적은 마크다운 문서)로 내보내거나, MCP로 클로드 코드나 코덱스에 넘겨 바로 개발로 이어 갈 수 있습니다. 연결 명령과 로그인 방식은 구글 안내와 연결 서버 저장소를 먼저 확인합니다.

오픈디자인

웹사이트, 앱, 발표 자료, 이미지, 모션 그래픽을 한곳에서 만드는 오픈소스 작업공간입니다. 로컬에서 돌아가고 자체 AI를 갖지 않는 대신 내 컴퓨터에 이미 깔린 클로드 코드, 코덱스, 커서 같은 코딩 도구를 디자인 엔진으로 씁니다. HTML, PDF, PPTX로 내보내고, 하이퍼프레임즈를 통해 MP4까지 나옵니다. 맥OS와 윈도우용 데스크톱 앱이 있고 라이선스는 Apache 2.0입니다.

스티치는 앱 화면 시안에 집중하고, 오픈디자인은 디자인 작업 전체를 한곳에 모았다는 점이 다릅니다.

3묶음, 웹 인터랙션 2개

에밀 코왈스키 애니메이션 스킬 모음

버셀과 리니어에서 디자인 엔지니어로 일한 에밀 코왈스키의 애니메이션 노하우를 담은 스킬 모음입니다. 팝업이나 메뉴가 얼마나 빠르게 나오고 어떻게 멈추는지 같은 작은 차이를 다룹니다. 애니메이션을 만드는 스킬은 속도, 감속, 곡선까지 따져 움직임을 정하고, 리뷰 스킬은 기존 애니메이션의 어색한 부분을 찾습니다. 움직임을 넣을 곳뿐 아니라 오히려 빼야 할 곳도 짚어 줍니다. 저장소는 MIT 라이선스이고 설치 명령은 한 줄입니다.

npx skills add emilkowalski/skills

리액트 비츠

이미 만들어진 효과를 골라 가져다 쓰는 리액트 컴포넌트 모음입니다. 한 글자씩 등장하는 텍스트, 마우스를 따라오는 배경, 3D 카드, 파티클까지 215개가 넘고, 사이트(reactbits.dev)에서 움직임을 미리 보고 고를 수 있습니다. 컴포넌트마다 자바스크립트와 타입스크립트, CSS와 테일윈드 조합이 있어 내 프로젝트에 맞게 받습니다. 포트폴리오나 랜딩 페이지를 꾸밀 때 알맞습니다.

npx shadcn@latest add @react-bits/SplitText-TS-TW

라이선스는 MIT에 Commons Clause를 더한 형태이고, 저장소 설명은 개인과 상업적 사용이 모두 무료라고 안내합니다. 컴포넌트를 재판매하는 용도가 아닌지 라이선스 파일을 확인합니다.

4묶음, 영상으로 뽑는 모션그래픽 4개

리모션

리액트 코드로 영상을 만드는 도구입니다. 순위 애니메이션이나 올라가는 통계 그래프를 한 번 짜 두면 다음부터는 숫자와 문구만 바꿔 같은 형식의 영상을 계속 뽑을 수 있습니다. 매주 같은 포맷으로 올리는 영상에 강하고 AI 코딩 도구용 스킬도 공식 문서에서 안내합니다. 시작은 이 명령입니다.

npx create-video@latest

라이선스에 주의합니다. 개인, 직원 3명 이하의 영리 조직, 비영리 단체는 무료이고 그보다 큰 회사는 회사용 라이선스를 구입해야 합니다. 쓰기 전에 remotion.dev의 라이선스 안내를 확인합니다.

하이퍼프레임즈

같은 일을 HTML과 CSS로 합니다. "10초 제품 소개, 제품명이 나온 뒤 기능 세 개가 차례로"처럼 설명하면 AI가 움직임을 만들고 MP4로 출력합니다. 헤드리스 크롬으로 프레임을 하나씩 그려 FFmpeg로 인코딩하는 방식이라 같은 소스에서 같은 결과가 나옵니다. HeyGen이 공개한 오픈소스(Apache 2.0)이고 Node.js 22 이상과 FFmpeg가 필요합니다.

클로드 코드에서는 이렇게 설치합니다.

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

리모션과 하이퍼프레임즈 사이의 기준은 간단합니다. 리액트로 만들고 싶으면 리모션, HTML로 만들고 싶으면 하이퍼프레임즈를 고릅니다.

클로드 모션

2026년 10월 8일 베타로 나온 클로드의 기능입니다. 보고서 숫자는 움직이는 그래프로, 제품 사용법은 짧은 애니메이션으로 만들고, 대화로 문구와 타이밍을 고친 뒤 MP4로 내보냅니다. 영상 생성 모델이 아니라 클로드가 글자, 차트, 도형, 이미지를 움직이는 코드를 짜는 방식이라 실사 영상이나 AI 인물은 만들지 못합니다. 코드를 직접 다루지 않고 클로드 안에서 끝난다는 점이 앞의 두 도구와 다릅니다.

2026년 10월 기준 팀과 엔터프라이즈 요금제의 베타입니다. 팀 워크스페이스에서는 기본으로 켜져 있고 엔터프라이즈는 조직 소유자가 설정에서 켜야 하며, 개인 프로나 맥스에서는 쓸 수 없는 상태입니다. 사용량은 요금제 사용 한도에서 차감되고, 길거나 복잡한 애니메이션은 일반 메시지보다 한도를 더 씁니다. 제한은 바뀔 수 있어 클로드 도움말에서 확인합니다.

awesome-opus5-5-videos

클로드 오퍼스 5.5가 HTML, 캔버스, SVG, 쓰리제이에스(three.js) 코드로 짠 모션 그래픽, 3D 애니메이션, 직접 조작하는 게임 같은 결과물을 프롬프트와 함께 모아 둔 깃허브 저장소(yihui-dev/awesome-opus5-5-videos)입니다. 2026년 10월 확인 기준 프롬프트가 703개 올라 있고, 그중 400개 이상은 결과를 직접 볼 수 있습니다. 라이선스는 MIT이고 영상과 프롬프트의 권리는 각 제작자에게 있으니 원 게시물 링크를 따라가 이용 조건을 확인합니다. 마음에 드는 작품의 프롬프트를 가져와 내 아이디어로 바꿔 쓰는 활용법이 기본입니다.

하고 싶은 일별로 고르기

콜론 앞이 하고 싶은 일, 뒤가 알맞은 도구입니다.

• 디자인 스킬을 처음 써 본다: 프론트엔드 디자인
• 업종에 맞는 색, 폰트, 차트를 고른다: UI UX Pro Max
• 레이아웃, 애니메이션, 정보 밀도를 숫자로 조절한다: 테이스트 스킬
• 테마를 골라 시작하고 AI 티 나는 패턴을 검사한다: 홀마크
• 원하는 부분만 집어서 고친다: 임페커블
• 앱 화면 시안과 프로토타입을 만든다: 구글 스티치
• 웹, 앱, 발표 자료, 영상을 한곳에서 만든다: 오픈디자인
• 웹사이트에 움직임을 넣는다: 에밀 코왈스키 스킬 모음, 리액트 비츠
• 리액트로 영상을 만든다: 리모션
• HTML로 영상을 만든다: 하이퍼프레임즈
• 대화만으로 모션 영상을 만든다: 클로드 모션(팀⁠·엔터프라이즈)
• 3D, 모션 프롬프트를 참고한다: awesome-opus5-5-videos

설치 전후 확인

설치 전 확인

• 쓰는 곳: 클로드 코드(터미널⁠·데스크톱 앱), 코덱스, 커서 중 어디인지 정합니다. 위 명령은 클로드 코드 기준이고, 다른 도구는 각 저장소 README의 도구별 안내를 따릅니다.
• 필요한 것: npx 명령은 Node.js가 있어야 합니다. 하이퍼프레임즈와 테이스트 스킬은 Node.js 22 이상이 필요합니다.
• 출처: 위 저장소는 모두 공개 저장소지만 커뮤니티가 만든 것이 많습니다. 플러그인과 스킬은 훅이나 명령을 실행할 수 있으니 설치 전에 상세 화면과 README를 읽습니다.

설치 확인

플러그인으로 설치했다면 클로드 코드에서 /plugin을 열어 Installed 탭에 보이는지, /를 입력했을 때 /플러그인이름:스킬이름이 나오는지 확인합니다. 폴더로 직접 넣은 스킬은 /skills를 입력해 목록에 있는지 봅니다. 설치 직후 보이지 않으면 /reload-plugins를 입력합니다.

지우기

플러그인은 /plugin의 Installed 탭에서 끄거나 지울 수 있고, 명령은 claude plugin uninstall <플러그인>@<마켓플레이스>입니다. 폴더로 넣은 스킬은 ~/.claude/skills/ 또는 프로젝트의 .claude/skills/ 아래 해당 폴더를 지웁니다.

막힐 때

• 설치했는데 스킬이 인식되지 않는다: SKILL.md가 스킬 폴더 바로 안에 있는지 확인합니다. 한 단계 더 들어가 있으면 인식되지 않습니다.
• 명령이 실패한다: Node.js 버전을 확인합니다. 테이스트 스킬과 하이퍼프레임즈는 22 이상입니다.
• 스킬이 여러 개 겹쳐 결과가 흔들린다: 디자인 스킬은 한두 개로 시작합니다. 비슷한 역할의 스킬을 한꺼번에 켜면 서로 다른 지침이 충돌할 수 있습니다.