광고 이 사이트에는 광고와 제휴 링크가 포함되어 있으며, 링크를 통한 가입이나 구매 시 운영자가 수수료를 받습니다.

스킬 · 디자인

애플 스타일 인터페이스 디자인

커뮤니티 apple-design 디자인

WWDC 디자인 발표에서 정리한 애플의 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겼습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그·스와이프·시트 인터랙션, 반투명 재질과 깊이감, 타이포그래피까지 다룹니다.

이럴 때 씁니다
버튼 하나도 애플 앱처럼 자연스럽게 움직이게 만들고 싶을 때

한 줄로 넣기

터미널에 아래 한 줄을 붙여 넣으십시오.

npx skills add emilkowalski/skills/apple-design

전체 설치 절차

Claude Code 가 아니거나 개별 스킬만 넣고 싶으실 때 보십시오. 눌러서 펼치면 전체가 나옵니다.

설치 절차 전문
# apple-design 설치

## 1. 넣기

npx skills add emilkowalski/skills/apple-design

  --list 를 붙이면 저장소 안의 스킬 목록이 먼저 뜹니다.
  여러 개가 들어 있는 저장소라면 골라서 넣을 수 있습니다.

  npx skills add emilkowalski/skills/apple-design --list

## 2. Claude 를 다시 시작합니다

창만 닫으면 반영되지 않습니다.
Windows 는 작업 표시줄 아이콘에서 종료, macOS 는 Cmd+Q 로 완전히 끄십시오.

## 3. 확인

npx skills list

  넣은 스킬 목록이 나옵니다.
  보이지 않으면 앱을 완전히 껐다 켰는지 먼저 확인하십시오.

## 4. 쓰기

"애플 스타일 인터페이스 디자인" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 emilkowalski/skills 열기

함께 보면 좋은 스킬