Claude Code UI 디자인 스킬, 많이 겹칠수록 좋아질까

Claude Code로 화면을 만들 때 디자인 스킬을 많이 설치하면 품질도 함께 오를까. `ui-ux-pro-max-skill`, `taste-skill`, `Impeccable`이 빠르게 늘면서 선택은 오히려 어려워졌다. 답은 개수보다 역할 분리에 가깝다.

스킬과 컴포넌트는 같은 문제를 풀지 않는다

Anthropic 공식 문서에서 스킬은 `SKILL.md`와 보조 자료로 구성된 작업 지침이다. 프로젝트용 스킬은 `.claude/skills/`에 두고 Claude Code가 관련 요청에서 불러온다. 스킬은 판단 규칙을 줄 뿐, 완성된 버튼 소스를 반드시 공급하지는 않는다.

`awesome-design-md`는 인기 사이트를 분석한 `DESIGN.md` 모음이다. 색 역할, 서체, 간격, 컴포넌트 상태, 반응형 규칙을 프로젝트에 가져오는 참고층에 해당한다. VoltAgent는 파일을 복사한 뒤 에이전트에게 읽히라고 안내하는데, UI 구현은 여전히 React나 CSS 코드로 해야 한다.

반면 `shadcnblocks`와 `Astryx`는 실제 구현 재료에 가깝다. 전자는 shadcn 호환 레지스트리에서 React·Tailwind 소스를 프로젝트로 복사하고, 후자는 Meta 내부에서 성장한 React 19+ 디자인 시스템이다. 같은 목록에 놓고 우열을 가리면 선택 기준부터 어긋난다.

먼저 하나의 디자인 계약을 만든다

출발점은 마음에 드는 스킬이 아니라 제품의 시각 계약이다. 이미 분석된 스타일이 맞으면 `awesome-design-md`에서 `DESIGN.md` 하나를 고른다. 현재 사이트를 기준으로 삼으려면 `insane-design`에 URL을 넣는다.

`insane-design` 공식 저장소가 설명하는 산출물은 CSS 토큰, `design.md`, HTML 리포트와 스크린샷이다. 설치는 Claude Code 마켓플레이스에 `gptaku_plugins`를 추가한 뒤 `insane-design` 플러그인을 고르는 순서다. URL을 실행하면 색, 타입, 간격, 반경, 그림자 규칙을 뽑는다.

두 결과를 동시에 최상위 규칙으로 두지는 않는 편이 낫다. 하나를 프로젝트의 `DESIGN.md`로 확정한 뒤 브랜드 자산과 금지 패턴을 덧붙여 버전 관리한다. `awesome-design-md`도 분석 파일이 원 브랜드의 공식 가이드라고 주장하지는 않는다. 상용 제품은 특정 브랜드 복제보다 자사 규칙으로 변형해야 한다.

구현 재료는 Shadcnblocks와 Astryx 중 고른다

기존 shadcn 프로젝트라면 `shadcnblocks`가 빠르다. 먼저 shadcn CLI로 프로젝트를 초기화하고 `components.json`에 레지스트리를 연결한다. Claude Code에서는 `pnpm dlx shadcn@latest mcp init --client claude`로 MCP를 붙인다. 이후 로그인 폼이나 가격 섹션을 자연어로 찾아 설치한다.

이 방식은 소스가 프로젝트 안으로 들어와 수정 자유도가 높다. 대신 업데이트와 품질 책임도 프로젝트가 떠안는다. 무료와 유료 블록의 사용 조건도 다르므로 배포 전 라이선스를 확인해야 한다.

새 React 19 앱에서 공통 API와 테마를 오래 유지하려면 `Astryx`가 다른 선택지다. 공식 저장소는 150개 이상 컴포넌트, 테마, 템플릿과 CLI를 제공한다고 밝힌다. `@astryxdesign/core`, 테마, CLI를 설치하고 컴포넌트 목록을 조회해 조합한다. 2026년 8월 현재 공개판은 Beta다.

`Astryx`에는 최신 문서를 검색하는 hosted MCP가 있다. 설치 버전과 프로젝트 테마까지 읽는 로컬 MCP는 아직 공개 RFC 단계다. MCP가 현재 프로젝트를 완전히 이해한다고 가정하면 잘못된 API를 선택할 수 있다.

생성 규칙은 하나만 좁게 쓴다

`ui-ux-pro-max-skill`은 업종과 화면 요구를 검색해 스타일, 팔레트, 서체, UX 규칙을 추천한다. `uipro init --ai claude`로 설치하고 일반 UI 요청에서 쓰거나, 검색 스크립트로 디자인 시스템을 Markdown에 저장한다. React 외 여러 스택을 다루는 폭이 장점이다.

`taste-skill`은 레이아웃 변주, 모션, 정보 밀도를 조절하며 반복적인 AI 패턴을 억제한다. 공식 문서상 기본 v2는 아직 실험판이다. 안정성이 중요하면 v1을 고정한다. 제품 UI라면 모션과 변주를 낮춰 시작하는 편이 안전하다.

클코단에서는 검증된 공개 리소스를 조합하는 편이 개인 철학을 새로 쓰는 것보다 낫다는 의견이 많았다. 다만 `ui-ux-pro-max-skill`이 과한 화면을 만들 수 있다는 경험도 나왔다. 써본 사람들 사이에서도 빠른 MVP에는 유용하지만 구체적 참고 화면이 없으면 전형적인 AI 랜딩페이지로 수렴한다는 반응이 엇갈린다.

그래서 생성 스킬은 `ui-ux-pro-max-skill`이나 `taste-skill` 중 하나만 먼저 쓴다. 확정한 `DESIGN.md`보다 낮은 우선순위를 주고 정보 구조나 반복 패턴 억제처럼 맡을 범위를 적는다. 둘을 겹친다면 색, 서체, 모션의 최종 결정권을 문서에 명시해야 한다.

Impeccable은 마지막 화면에서 값을 한다

`Impeccable`은 새 화면 생성과 기존 UI 감사를 잇는 도구다. `npx impeccable install` 뒤 `/impeccable init`을 실행하면 `PRODUCT.md`를 만들고 `DESIGN.md` 작성을 돕는다. 공식 저장소는 23개 명령과 59개 결정적 탐지 규칙을 제공한다.

실전 순서는 짧다. 디자인 계약을 하나 확정한 뒤 `Shadcnblocks`나 `Astryx` 중 한 계열로 화면을 만든다. 생성 규칙 하나를 제한적으로 적용한 뒤 `/impeccable critique`, `audit`, `polish`로 좁혀 고친다. 마지막에는 실제 브라우저에서 반응형, 키보드 이동, 긴 콘텐츠와 빈 상태를 확인한다.

스킬을 더 설치하는 행동은 디자인 판단을 자동으로 만들지 않는다. 개인 개발자와 소규모 팀의 이득은 같은 기준을 매번 설명하지 않아도 된다는 데 있다. 좋은 조합은 도구 일곱 개가 아니라, 충돌하지 않는 네 단계다.