밋밋한 화면 살려 주는 디자인 엔지니어의 스킬
- 명령 한 줄이면 전부 설치돼요.
- 이런 작은 실수가 쌓여 화면이 어색해져요.
- 겉모습보다 손맛을 다듬는 데 써요.
- 감속 곡선도 스킬이 권한 값 그대로였어요.
- 단축키로 여는 메뉴는 바로 떠야 빠르게 느껴져요.
- 설치 전에 저장소를 한 번 열어 보세요.
차례
01스킬 17개 설치해서 쓰기
원본 보기 · 만든 사람의 스킬 문서 사이트
디자인 엔지니어 에밀 코왈스키가 화면의 움직임과 손맛을 다듬는 자기 기준을 AI 코딩 에이전트가 읽는 스킬로 적어 공개했어요. 11월 9일에는 스킬마다 전후 비교와 예시 문장을 담은 문서 사이트를 냈어요.
- 무엇을 했나
- 저장소를 내려받아 스킬 파일을 읽고, 주 스킬을 Codex CLI에 읽혀 화면을 만들어 봤어요.
- 무엇이 나왔나
- 스킬 없이 만든 화면과 겉모습은 거의 같았어요. 스킬을 읽힌 쪽만 단추를 누르면 97% 크기로 살짝 줄었고, 창이 뜨는 곡선이 스킬이 권한 값이었고, 터치 화면에서 마우스 올림 효과를 끄는 처리가 들어 있었어요. 메뉴가 뜨는 시간은 둘 다 0.16초로 같았어요.
- 알아 둘 조건
- 스킬 자체는 무료이고 MIT 조건으로 공개돼 있어요. 다만 스킬을 읽을 코딩 에이전트(Claude Code, Codex, Cursor 같은 것)는 따로 있어야 해요. 사이트는 17개라고 적지만 저장소에는 Swift 코드용 스킬이 하나 더 있어 18개예요.
- 누가·어디서
- 코딩 에이전트로 웹 화면을 만드는 사람에게 맞아요. 대부분 움직임과 누르는 느낌을 다루는 스킬이라 색이나 배치를 새로 잡아 주지는 않아요.
한국: 가능 · 직접 확인 · 11월 11일 확인원문 보기
시험 방법
깃허브 저장소를 내려받아 스킬 파일을 읽고, Codex CLI에 같은 화면(팀원 관리 화면)을 2번 부탁했어요. 한 번은 그냥, 한 번은 주 스킬 파일을 먼저 읽게 했어요. 설치 명령은 우리 작업 환경에서 돌리지 못해 스킬 파일을 직접 넣었어요. 한 번씩만 해 본 결과라 늘 이렇게 나온다는 뜻은 아니에요.
설치하고 처음 써 보기
- 저장소를 먼저 한 번 열어 봐요.설치 명령은 남이 올린 파일을 내 컴퓨터에 받아 오는 명령이에요. github.com/emilkowalski/skills에서 무엇이 들어 있는지 보고 시작하세요.
- 프로젝트 폴더에서 설치 명령을 돌려요.
{cmd} - 하나만 받으려면 스킬 이름을 붙여요.
{cmdOne} - 에이전트에게 스킬 이름과 함께 부탁해요.무엇을 쓸지 모르겠으면 주 스킬 /emil-design-eng 하나로 시작하라고 만든 사람이 적어 두었어요.
복사할 프롬프트
만든 사람이 문서에 적어 둔 예시 문장
/emil-design-eng make this button feel more responsive /emil-design-eng review this popover and tell me what you'd change
특별한 말투는 필요 없고, 동료에게 말하듯 문제를 설명하면 된다고 적혀 있어요.
스킬 17개의 쓰임새
| 스킬 | 하는 일 |
|---|---|
| animation-vocabulary | 원하는 움직임의 정확한 이름을 찾아 줘요 |
| pick-ui-library | 만든 사람이 고른 목록에서 맞는 라이브러리를 골라 줘요 |
| prototype | 서로 다른 안을 여러 개 만들어 넘겨 보며 고르게 해요 |
| emil-design-eng | 주 스킬. 움직일지 말지, 곡선과 시간, 누르는 느낌을 정해요 |
| animate | 움직임 하나를 알맞은 재료로 처음부터 만들어요 |
| choreograph | 함께 움직이는 여러 요소의 순서를 맞춰요 |
| apple-design | 애플 방식의 물리적인 움직임을 웹으로 옮겨요 |
| gestures | 끌기·밀기·시트가 손가락을 따라가게 만들어요 |
| mobile-native | 웹 앱이 휴대폰에서 앱처럼 느껴지게 고쳐요 |
| animation-performance | 끊기는 움직임의 원인을 찾아 고쳐요 |
| break-ui | 긴 이름, 빈 목록 같은 나쁜 자료를 넣어 깨지는 곳을 찾아요 |
| review-animations | 움직임을 엄격하게 검토해 통과와 반려를 정해요 |
| find-animation-opportunities | 움직임이 필요한 곳과 필요 없는 곳을 찾아요 |
| improve-animations | 앱 전체의 움직임을 점검하고 고칠 계획을 써요 |
| remove-animations | 필요 없는 움직임을 걷어 내요 |
| animate-expo | Expo(리액트 네이티브)용 움직임을 만들어요 |
| ask-sonner | 만든 사람의 알림 라이브러리 Sonner 쓰는 법이에요 |
알아 둘 것
- 우리 시험은 화면 하나를 한 번씩 만든 것이에요. 스킬 없이도 Codex는 꽤 잘 만들었고, 차이는 누를 때의 반응과 곡선 같은 작은 데서 났어요.
- 주 스킬의 기준 가운데 하나는 화면 속 움직임을 0.3초 안쪽으로 짧게 하라는 것이에요. 하루에 100번 넘게 쓰는 동작에는 움직임을 넣지 말라고도 해요.
- 깃허브 별 5만 5천개 이상, 설치 약 330만회는 2026년 11월 11일에 본 값이에요.
링크
- 문서 사이트: aiforui.dev/skills
- 저장소: github.com/emilkowalski/skills
출처
- 만든 사람의 스킬 문서 사이트https://aiforui.dev/skills
- 깃허브 저장소(스킬 파일과 안내 글)https://github.com/emilkowalski/skills
- skills.sh 설치 집계https://skills.sh/emilkowalski/skills
- Emil Kowalski X 글https://x.com/emilkowalski/status/2119780441658212842
- FUZZY LOGIC 직접 시험
- FUZZY LOGIC 제작
정정 기록
아직 정정한 곳이 없어요.
