AI로 웹사이트를 만들다 보면 어느 순간 “다 비슷하게 생겼다”는 느낌을 받게 된다. 보라색 그래디언트, 흰 배경, 같은 폰트 — 모델이 학습한 방대한 데이터에서 가장 흔한 선택지를 반복하기 때문이다. 이 영상은 그 한계를 벗어나기 위해 Claude에서 쓸 수 있는 디자인 스킬들을 실제 용도별로 정리해 소개한다.
AI 디자인이 다 비슷해 보이는 이유
모델은 엄청난 양의 데이터로 학습했고, 그 데이터 안에는 같은 디자인 패턴이 반복된다. 그래서 디자인을 결정해야 할 때마다 모델은 가장 흔한 선택지로 수렴한다. 다른 프로젝트여도 결과가 비슷해지는 이유가 바로 여기 있다. “옳은 답”을 내놓으려 최적화하기 때문에, 개성보다는 안전한 선택을 반복하는 것이다.
이 문제를 해결하는 열쇠가 스킬이다. 잘 만들어진 스킬은 모델이 코드를 쓰기 전에 디자인 방향을 먼저 확정하도록 강제한다. 방향이 잡히면 그 방향을 일관성 있게 유지하고, 흔한 기본값으로 흘러가지 않는다.
Anthropic 프론트엔드 디자인 스킬 — 랜딩 페이지의 기반
Anthropic이 직접 만든 프론트엔드 디자인 스킬은 많은 디자인 스킬의 토대가 되는 스킬이다. 이 스킬의 핵심은 코드를 작성하기 전에 모델이 실제 디자인 방향을 선택하도록 강제한다는 점이다. skill.md 파일 안에 “AI 슬롭”이라는 표현까지 명시해 두고, 모델이 흔한 폰트와 보라색 그래디언트로 돌아가지 못하게 막는다.
주로 랜딩 페이지나 포트폴리오처럼 디자인 자체가 제품의 일부인 경우에 쓴다. 단, 실제 제품 대시보드나 기능 UI에는 잘 맞지 않는다는 한계도 분명히 있다.
shadcn 스킬 + MCP — 실제 제품 같은 대시보드 만들기
랜딩 페이지와 달리, 실제 대시보드나 앱 UI를 만들 때는 문제의 성격이 완전히 다르다. “예쁘게 보이는 것”보다 “제대로 작동하는 것”이 기준이다. 여기서 shadcn이 중요해진다. 대시보드에서 흔히 쓰는 컴포넌트들은 이미 전문가들이 프로 수준으로 만들어 레지스트리에 올려두었다. 모델이 컴포넌트를 처음부터 만들 필요 없이, 이 레지스트리에서 이미 완성된 컴포넌트를 가져다 쓰면 된다.
shadcn 설정은 두 부분으로 구성된다. 첫 번째는 스킬로, shadcn의 올바른 사용 방식을 담은 규칙집이다. 두 번째는 shadcn MCP로, shadcn 레지스트리에 실시간으로 연결해 모델이 실제 컴포넌트를 프로젝트에 바로 가져올 수 있게 해준다. 스킬과 MCP를 함께 쓸 때 시너지가 나온다.
대시보드 스킬 — 정보 배치 문제를 해결한다
shadcn이 컴포넌트를 해결한다면, 대시보드 스킬은 그 컴포넌트를 어떻게 화면에 배치할지의 문제를 다룬다. 일반 앱과 대시보드의 핵심 차이는 여기에 있다. 컴포넌트 일관성보다, 어떤 정보를 어떻게 묶고 한 화면에 얼마나 담을지를 먼저 생각해야 한다. 이 스킬은 모델이 배치를 먼저 추론하도록 유도해, 결과물이 단순히 정보를 나열한 화면이 아니라 실제 분석 도구처럼 느껴지게 한다.
UI UX 프로맥스 스킬 — 산업 유형별 디자인 시스템 자동 선택
이 스킬은 코드를 짜기 전에 엔진이 깃허브의 오픈소스 데이터베이스에서 다섯 가지 검색을 동시에 실행한다. 161개 산업 카테고리에서 프로젝트에 맞는 스타일을 불러오고, 그중에서 컬러 팔레트·폰트 조합·페이지 레이아웃을 선택한다. 다른 스킬들이 모델의 취향을 개선하는 방식이라면, 이 스킬은 구체적인 결정을 먼저 내려주는 방식이다.
GSAP 스킬 — 애니메이션의 품질을 높인다
GSAP는 실제 프로 수준의 사이트들이 많이 사용하는 애니메이션 라이브러리다. 이 스킬은 GSAP 팀이 직접 만든 것으로, 모델이 GSAP의 올바른 패턴으로 작업하도록 한다. 성능 측면도 이 스킬이 해결하는 중요한 부분이다. AI가 만든 애니메이션이 끊기는 주된 이유는 요소의 크기나 위치를 직접 변경하기 때문이다. 이 스킬은 모델이 브라우저가 쉽게 처리할 수 있는 방식으로 움직임을 구현하도록 유도한다.
스타일 프리셋 스킬 — 원하는 분위기를 빠르게 전달한다
전체 시스템이 아닌 특정 스타일을 원할 때 쓰는 스킬들이다. 하나를 선택해 모델이 그 방향으로 디자인하게 하는 방식이다.
- 미니멀리스트 UI: 여백을 살리고 콘텐츠가 숨 쉬게 하는 스타일. 신문이나 블로그처럼 콘텐츠 중심 사이트에 적합하다.
- 산업적 브루탈리스트 UI: 투박하고 무거운 안티코퍼레이트 스타일.
- 프론트엔드 UIUX: 극단적이지 않은 범용 올라운더. 제품이나 비즈니스 랜딩 페이지에 안전한 선택이다.
- 프리미엄 프론트엔드 UI: 럭셔리 패션 브랜드 랜딩 페이지 같은 느낌을 원할 때.
모바일 UI 스킬 — 웹과는 다른 규칙이 필요하다
모바일은 웹을 작게 만든 것이 아니다. 손에 들고 쓰는 방식, 엄지가 닿을 수 있는 위치, 네비게이션의 작동 방식이 모두 다르다. 모바일 앱 UI 디자인 스킬은 엄지 존·일관된 여백·폰트 크기 최소 제한 등 좋은 모바일 디자인의 원칙을 모델에 직접 주입한다. 플랫폼별로는 안드로이드에 머티리얼 3 스킬, iOS에 스위프트UI 스킬, 양쪽 동시 개발에 Expo 스킬을 선택한다.
실전 가이드: 상황별 스킬 선택법
랜딩 페이지나 포트폴리오라면 Anthropic 프론트엔드 디자인 스킬로 시작한다. 특정 스타일이 머릿속에 있다면 스타일 프리셋 스킬 중 하나를 추가로 선택한다. 대시보드나 데이터 집약적인 앱 UI를 만든다면 shadcn 스킬과 shadcn MCP를 함께 활용한다. 정보 배치가 복잡해지면 대시보드 스킬을 추가한다. 스크롤 기반 스토리텔링이나 동적인 인터랙션을 구현할 때는 GSAP 스킬을 쓴다. 모바일 앱은 플랫폼을 먼저 정한 뒤 해당 플랫폼 스킬을 선택한다.
핵심 요점
- AI 디자인이 다 비슷한 것은 모델 자체의 한계가 아니라 올바른 지시가 없기 때문이다. 스킬은 모델이 코드를 짜기 전에 디자인 방향을 확정하도록 강제해 이 문제를 해결한다.
- 랜딩 페이지와 대시보드는 다른 스킬이 필요하다. Anthropic 프론트엔드 디자인 스킬은 창의적 랜딩 페이지에, shadcn 스킬은 기능적 대시보드에 적합하다.
- shadcn MCP와 스킬은 역할이 다르다. MCP는 컴포넌트를 가져오고, 스킬은 그것을 올바르게 쓰는 규칙과 프로젝트 맥락을 제공한다. 함께 쓸 때 시너지가 나온다.
- 애니메이션 품질은 어떤 라이브러리를 쓰느냐보다 브라우저가 처리하는 방식에 달려 있다. GSAP 스킬은 성능 최적화까지 모델에 내재화한다.
- 모바일은 웹의 축소판이 아니다. 플랫폼별 스킬을 쓰면 진짜 네이티브 앱 같은 결과물을 얻을 수 있다.