Claude Code로 만든 화면이 돌아가긴 하는데 어딘가 어설프다면, 디자인 엔지니어 Jakub Krehel이 공개한 jakubkrehel/skills를 붙여 볼 만합니다. 2026-11-09 기준 깃허브 스타 11,714개, 이번 주 트렌딩에서 일주일 사이 1,938개가 늘었습니다. 라이선스는 MIT입니다. UI, 글꼴, 색, 접근성, 레이아웃, 문구를 다루는 스킬 15개가 들어 있습니다.
먼저 돌려 볼 것: better-interface
화면 하나, 흐름 하나, 또는 인터페이스 전체를 접근성·레이아웃·문구·글꼴·색·UI 마감으로 나눠 살피고, 순위를 매긴 보고서 하나로 돌려줍니다. 각 분야는 better-accessibility, better-layout 같은 개별 스킬이 맡고 이 스킬은 결과를 모읍니다. 취향이 아니라 근거가 있는 문제만 올리라고 적혀 있고, 빈 상태·로딩·오류·좁은 폭 화면까지 보라고 합니다.
break: 최악의 내용에도 버티나
부품 하나를 골라, 실제 서비스에서 나올 수 있는 모든 상황을 임시 페이지에 나란히 그립니다. 내용이 최악일 때도 부품이 무너지지 않는지 눈으로 확인하는 용도입니다. 직접 불러야 하는 스킬이라 /break로 씁니다.
afk: 자리 비운 동안
자리를 비운 사이 프로젝트 하나를 더 낫게 만드는 스킬입니다. 근거를 모으고 아이디어를 넓게 낸 뒤, 가장 좋은 몇 개를 로컬 브랜치에 만들어 두고, 돌아와서 2분 안에 읽을 보고서를 남깁니다. 이것도 직접 불러야 합니다.
나머지
| 스킬 | 하는 일 |
|---|---|
| better-ui | 모서리, 광학 정렬, 그림자, 아이콘 상태, 애니메이션 값을 다듬기 |
| better-typography | 글자 크기 단계, 간격, 줄바꿈, 말줄임, 문장 부호 |
| better-colors | 팔레트 만들기, 의미 이름 토큰, 대비 측정 |
| better-accessibility | 키보드·초점, ARIA, 폼, 스크린 리더 안내 (WCAG 2.2) |
| better-layout | 묶음, 정렬, 읽기 순서, 반응형, 번역문 여유 |
| better-writing | 라벨, 오류, 빈 상태, 확인 문구 |
| interface-review | 브랜치·PR·커밋 전 변경이 만든 UI 문제 검토 |
| explain-interface | 사이트·효과·애니메이션을 어떻게 만들었는지 설명 |
| build-design | Figma나 디자인 이미지대로 UI 만들기 |
| teardown | 물체의 기술 도해를 만들고 SVG·PNG·PDF로 받기 |
| state-machine | 부품의 모든 상태를 임시 페이지에 띄우고 전환 |
| variant | 부품 변형 여러 개를 만들어 고르기 |
설치 (Claude Code)
/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces다른 에이전트는 npx skills add jakubkrehel/skills로 넣습니다.
참고
- jakubkrehel/skills README · Interfaces (2026-11-09 확인)