이 영상에서 단테는 GitHub에 공개된 디자인 스킬 묶음 일곱 가지를 Claude Design에 추가해 직접 사이트를 만들어 보고, 실제로 결과가 달라진 스킬만 골라 소개합니다. AI로 만든 웹사이트가 어디서 본 듯한 모습이 되는 문제, 이른바 AI 슬롭을 줄이고 싶은 개발자와 디자이너에게 맞는 내용입니다.
왜 디자인 스킬이 필요한가
요즘 모델은 디자인도 잘하지만, 모델마다 디자인할 때 따라가는 고유한 패턴이 있고 그 패턴은 보면 바로 티가 납니다. 단테는 스킬이 모델을 그 패턴 밖으로 끌어내는 역할을 한다고 설명합니다. 소개한 스킬들은 디자인 경력이 긴 사람들이 직접 써 보고 효과를 본 워크플로를 재사용 가능한 형태로 포장한 것입니다.
사용 방법에 대한 팁도 있습니다. Claude 설정에 추가한 스킬은 Claude Design에서도 그대로 쓰이므로 한 번만 추가하면 됩니다. 영상은 Claude Design으로 시연하지만 Claude Code나 Codex 같은 다른 에이전트에서도 같은 방식으로 동작한다고 합니다. 호출은 슬래시 뒤에 스킬 이름을 쓰고, 프롬프트에 원하는 사이트를 적는 식입니다.
Emil Kowalski의 스킬: 컴포넌트와 애니메이션
열 개가 넘는 스킬이 들어 있는 묶음으로, 단테가 실제 작업에서도 쓰는 스킬입니다. 그중 자주 쓰는 세 가지는 다음과 같습니다.
- emil-design-eng: 보기 좋은 UI 컴포넌트를 만들고 애니메이션을 붙이는 방법을 담고 있어, 디자인을 처음 시작할 때 쓰기 좋습니다.
- animate: 애니메이션을 처음부터 만드는데, 애초에 움직여야 하는지부터 사라지는 방식까지 결정 순서가 정해져 있습니다.
- improve-animations: 이미 만든 코드베이스의 움직임을 훑어 우선순위를 매긴 감사 결과와 실행 계획을 내놓습니다. 소스 코드는 건드리지 않으므로 계획을 그대로 실행시키면 됩니다.
이 밖에 Apple의 디자인 원칙을 담은 apple-design, 애매한 애니메이션 설명을 모델이 알아듣는 정확한 용어로 바꿔 주는 animation-vocabulary도 있습니다.
시연에서는 emil-design-eng로 시작했더니 Claude Design이 먼저 질문을 던졌고, 답을 준 뒤 모노톤의 미니멀한 첫 버전이 나왔습니다. 애니메이션 타이밍이 몇 군데 어긋나 improve-animations를 돌리자 움직임이 스크롤과 맞아떨어졌습니다. 다만 랜딩 페이지에서는 차이가 크지 않았고, 이 스킬이 힘을 발휘하는 곳은 앱의 기능적인 작은 요소라고 합니다. 레스토랑 사이트에 써 보니 폼 제출이나 호버 같은 곳에 작은 애니메이션이 붙어 상호작용하는 느낌이 좋아졌습니다.
레퍼런스와 규칙으로 방향을 잡는 스킬
ConardLi의 web-design-engineer는 기능보다 비주얼에 집중합니다. 먼저 요구사항을 함께 정리한 뒤, "좋은 디자인은 무에서 시작하지 않는다"는 원칙에 따라 참고할 실제 디자인을 찾습니다. 디자인 판단 기준, 흔히 망가지는 패턴, Apple이나 Linear 같은 사이트의 스타일 레시피도 들어 있습니다. 이미 디자인이 있으면 영역별 점수를 매겨 주므로, 다듬고 다시 돌리기를 반복할 수 있습니다.
elayadesign의 landing-page-design은 파일 하나로 된 단일 스킬입니다. 색, 타입, 여백 같은 페이지 전체의 규칙을 정합니다. 바탕에 깔린 생각은 랜딩 페이지는 홈페이지가 아니라는 것입니다. 방문자가 해 주길 바라는 행동 하나를 중심으로 페이지를 짜고 시선을 모으며, 검색에서 잘 찾히도록 하는 부분까지 챙깁니다. 단테는 결과물이 실제 브랜드 같은 느낌이었다고 평가했습니다.
Meng To의 Skills에는 화면 녹화를 에이전트용 프롬프트로 바꾸는 video-to-superprompt도 있지만, 단테가 강조한 것은 build-awwwards-quality-sites입니다. 디자인 수상 사이트들의 원칙과 함께, 사이트를 비싸 보이게 만드는 실제 기법이 들어 있습니다. 결과물은 은은한 애니메이션 배경과 스크롤 기반 스토리텔링 구조를 갖췄습니다.
리뷰와 취향을 다루는 스킬
Jakub Krehel의 스킬은 타이포그래피, 색, 접근성처럼 영역별로 나뉘어 있습니다. 단테는 interface-review를 씁니다. GitHub에 연결하면 변경 전후 디자인을 비교해, 마지막 수정 때문에 망가진 부분과 원인이 된 변경까지 짚어 줍니다. better-layout은 Claude Design이 약한 여백과 정렬을 꼼꼼하게 보는데, 날짜 하나가 몇 픽셀 더 필요한지까지 잡아냈다고 합니다.
tastemaker는 레퍼런스 이미지를 텍스트 요약으로 바꾸지 않고, 스크립트로 정확한 디자인 값을 추출해 구조화된 형태로 저장합니다. 그래서 말로 옮기며 사라지는 디테일이 보존되고, 여기서 내린 결정이 프로젝트 전체에 이어집니다.
Owl-Listener의 designer-skills는 디자이너들이 기준으로 삼는 이름 붙은 법칙마다 스킬이 따로 있습니다. 단테는 화면을 일곱 차원으로 나눠 보는 visual-critique(커맨드 하나로 일곱 개가 함께 실행됨)와 ui-design 쪽 법칙 스킬들을 골라 설치했습니다. 리뷰를 돌리면 문제를 순위별 목록으로 뽑아 주고, 법칙을 적용한 뒤 사이트가 더 정돈된 느낌이 났다고 합니다.
정리
- 모델마다 반복되는 디자인 패턴이 있고, 디자인 스킬은 그 기본값에서 벗어나게 하는 도구입니다.
- Claude 설정에 추가한 스킬은 Claude Design에서도 그대로 쓰이며, 다른 에이전트에서도 같은 방식으로 동작합니다.
- 처음 만들 때는 emil-design-eng, web-design-engineer, landing-page-design처럼 방향을 잡는 스킬을, 이후에는 improve-animations, interface-review, better-layout처럼 검토하는 스킬을 쓰는 흐름이 유용합니다.
- 묶음 전체를 설치할 필요는 없고, 자기 작업 방식에 맞는 것만 골라 쓰면 됩니다.
- 소개한 스킬은 모두 GitHub에 공개돼 있어 무료로 받아 쓸 수 있습니다.