먼저 설치할 skill을 고르지 말고, 어떤 층에서 풀 문제인지부터 정해야 합니다. 2026년 4월 20일 기준 Claude Design은 Anthropic의 공식 시각 제작 제품 경로입니다. Claude Code의 project skill은 repo의 tokens, components, examples, checks를 따라 UI 코드를 바꾸게 할 때 더 맞습니다. 커뮤니티 UI/UX skill은 초안 품질을 높이는 데 도움이 될 수 있지만, 설치 전에 파일과 스크립트를 확인해야 합니다. 디자인 시스템 자체가 빈약하다면 새 skill이 아니라 원본 자료와 검사를 먼저 고쳐야 합니다.
| 독자가 하려는 일 | 먼저 볼 경로 |
|---|---|
| Claude 안에서 prototype, one-pager, slide, visual concept 만들기 | Claude Design 접근 가능 여부 확인 |
| Claude Code가 기존 components와 tokens를 지키게 하기 | .claude/skills/ 아래 project skill 사용 |
| UI/UX 초안 품질을 빠르게 개선하기 | 커뮤니티 skill을 검토한 뒤 테스트 |
| 팀의 UI 일관성이 계속 흔들림 | tokens, examples, screenshots, checks부터 정리 |
중단 규칙은 간단합니다. 믿을 수 있는 tokens, component examples, screenshots, accessibility rules, acceptance checks가 없다면 skill을 더해도 문제가 풀리지 않습니다. Claude가 불안정한 원본을 더 자신 있게 사용할 뿐입니다.
실제로는 네 가지 일이 섞여 있다
“사실 경계: 제품과 가용성 정보는 Anthropic의 Claude Design announcement, Claude의 Skills overview, Claude Code skills documentation, Anthropic custom skills documentation를 기준으로 합니다. 제3자 skill 이름은 검토 대상 예시일 뿐 Anthropic의 공식 추천이 아닙니다.
한국어권 자료는 Claude Design 영상, Claude Skills 사용법, 디자인 시스템 구축 글, Reddit의 디자인 skill 목록, 커뮤니티 설치 가이드를 자주 함께 다룹니다. 수요는 분명하지만, 한 가지 설치 문제로 보면 판단이 흐려집니다. 핵심은 "어떤 package가 유명한가"가 아니라 "어느 층이 결과를 책임져야 하는가"입니다.
Claude Design은 제품 경로입니다. 시각 방향, prototype, slide, one-pager, 브랜드 감각이 있는 visual artifact를 만들 때 적합합니다.
Claude Code project skill은 repo workflow 경로입니다. Claude Code가 local rules, components, examples, checks를 읽고 UI 변경을 해야 할 때 필요합니다.
커뮤니티 UI/UX skill은 선택적 가속 장치입니다. 좋은 process나 taste defaults를 줄 수 있지만, 디자인 시스템의 authority가 되지는 않습니다.
디자인 시스템 거버넌스는 source of truth입니다. tokens, components, Storybook, screenshots, interaction notes, accessibility standards, CI checks는 skill 밖에 먼저 있어야 합니다.
시각 산출물이라면 Claude Design부터 확인한다
Anthropic은 2026년 4월 17일 Anthropic Labs를 통해 Claude Design을 공개했습니다. 공식 발표는 Claude Design을 Claude로 designs, prototypes, slides, one-pagers 같은 시각 산출물을 만드는 제품으로 설명합니다. 또한 Claude Opus 4.7로 구동되고, research preview로 Claude Pro, Max, Team, Enterprise에 점진적으로 제공된다고 설명합니다.
따라서 Claude Design은 공식 제품 경로입니다. 하지만 모든 사용자에게 즉시 열리는 범용 스위치는 아닙니다. 시작점은 claude.ai/design이고, plan과 rollout 상태에 따라 달라집니다. Enterprise에서는 관리자가 활성화해야 할 수 있습니다.
Claude Design이 팀의 디자인 시스템을 적용할 수 있다는 설명도 local skill과는 다릅니다. 그것은 Claude Design 제품이 접근 권한을 받았을 때의 기능입니다. .claude/skills/design-system/SKILL.md는 Claude Code가 repo 안에서 어떻게 작업해야 하는지 알려 주는 workflow 파일입니다.
시각 방향을 탐색하려면 Claude Design을 먼저 봅니다. production code를 편집하고, 기존 components를 재사용하고, tests와 review checks를 통과해야 한다면 Claude Code project skill 쪽이 맞습니다.
repo 일관성에는 project skill이 맞다
디자인 시스템 project skill은 Claude Code가 UI 작업을 할 때 같은 자료를 반복해서 읽게 만들기 위한 것입니다. "예쁘게 만들어"라는 긴 prompt가 아니라, 이미 존재하는 tokens, components, examples, accessibility rules, checks를 가리켜야 합니다.
기본 경로는 이렇게 둘 수 있습니다.
text.claude/skills/design-system/SKILL.md
최소 구조는 이 정도면 충분합니다.
md--- name: design-system description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks. --- Use when: - creating or editing UI in this repository - translating a mockup into production components - reviewing visual consistency before a frontend PR Read first: - `design/tokens.json` - `src/components/ui/` - `storybook/` - `docs/design-system.md` Rules: - use existing components before creating new primitives - preserve token names instead of hard-coding colors or spacing - check responsive, keyboard, and contrast behavior - explain any component divergence before editing
강한 project skill은 전체 디자인 시스템을 Markdown 안에 복사하지 않습니다. 언제 사용할지, 먼저 읽을 파일은 무엇인지, 깨면 안 되는 규칙은 무엇인지, 어떤 검사를 통과해야 하는지 알려 줍니다. 실제 source of truth는 tokens, components, docs, tests에 있어야 합니다.
넓은 skill 선택이 목적이라면 Claude Code skills guide를 먼저 보는 편이 낫습니다. 여기서는 UI 작업과 디자인 시스템 project skill에 초점을 좁힙니다.
커뮤니티 UI/UX skill은 설치 전에 검토한다
관련 콘텐츠에는 Claude Design 영상, Claude Skills 사용법, 디자인 시스템 7단계, UI/UX skill 설치 가이드, 디자이너용 skill 목록이 보입니다. 참고할 만하지만, 공식 상태와는 다릅니다.
네 가지를 확인합니다.
출처. 누가 유지하는지, repository가 어디인지, 최근 변경이 있는지, intended workflow가 설명되어 있는지 봅니다.
내용. SKILL.md, references, examples, scripts를 엽니다. 미학적 문장만 있는 skill은 production UI에 약합니다. scripts가 있으면 실행 전에 읽습니다.
위험. install path, shell commands, file access, network access, human review가 필요한 단계를 Claude에게 넘기지 않는지 확인합니다.
적합성. React/shadcn 중심 skill이 native app에 맞지 않을 수 있습니다. style pack은 초안을 개선할 수 있지만 component system을 지켜 주지는 않습니다.
실무 순서는 읽기, 설치, branch에서 테스트, 유지 여부 결정입니다.
skill을 더하지 않는 편이 나은 경우
항상 적용되어야 하는 규칙이면 CLAUDE.md를 씁니다. naming convention, preferred component library, accessibility baseline, 일반 repo behavior 같은 것들입니다.
진짜 source가 없으면 design assets를 먼저 정리합니다. tokens, component stories, screenshots, interaction notes, review criteria가 필요합니다. skill은 그것들을 가리키는 역할입니다.
강제가 필요하면 hooks나 CI를 씁니다. visual regression, typecheck, lint, accessibility checks는 prose instruction보다 확실하게 실패를 막습니다.
외부 접근이 필요하면 MCP나 integration을 씁니다. private Figma, token service, issue tracker, documentation system에 있는 정보는 skill 설명만으로 가져올 수 없습니다. 이 판단은 Claude Code MCP server guide가 더 가깝고, memory, skills, MCP 비교는 Claude Code memory vs MCP vs skills가 적합합니다.
가장 작은 실행 순서
- 내 account와 organization에서 Claude Design을 사용할 수 있는지 확인합니다.
- repo의 디자인 시스템 자료를 inventory합니다. tokens, components, examples, screenshots, accessibility rules, checks를 찾습니다.
- Claude Code가 UI 작업 중 이 자료들을 반복적으로 읽어야 할 때만
.claude/skills/design-system/SKILL.md를 만듭니다. - skill은 절차로 둡니다. 언제 쓰는지, 무엇을 읽는지, 무엇을 지키는지, 어떤 check를 실행하는지 씁니다.
- 작은 UI 변경으로 테스트합니다. component reuse, token fidelity, responsive, keyboard, contrast를 봅니다.
- 커뮤니티 UI/UX skill은 이후 branch에서 비교합니다. 실제 작업량을 줄이지 못하면 제거합니다.
문제가 task-specific method가 아니라 장기 project preference라면 Claude Code memory guide를 먼저 보세요.
자주 묻는 질문
Anthropic 공식 디자인 시스템 skill이 있나요?
그 이름의 단일 공식 제품은 없습니다. Claude Design은 시각 작업을 위한 공식 제품입니다. Claude Code skills는 reusable workflow instruction을 위한 공식 메커니즘입니다. .claude/skills/ 아래 디자인 시스템 skill은 project workflow로 직접 만들 수 있습니다.
디자이너는 Claude Design과 Claude Code 중 어디서 시작해야 하나요?
시각 산출물이 필요하면 Claude Design입니다. repo를 수정하고 components를 재사용하며 checks를 통과해야 한다면 Claude Code와 project skill입니다.
디자인 시스템 project skill에는 무엇을 넣어야 하나요?
SKILL.md에는 절차를 두고, token files, component directories, Storybook, docs, screenshots, accessibility rules, checks로 연결합니다. skill은 방법이지 디자인 시스템 본체가 아닙니다.
커뮤니티 UI/UX skill은 안전한가요?
출처, files, scripts, permissions, stack fit에 따라 다릅니다. 설치 전 읽고, branch에서 테스트하고, 실제 개선이 없으면 제거합니다.
언제 새 skill을 건너뛰어야 하나요?
부족한 것이 source files, checks, external access라면 먼저 그것을 해결해야 합니다. skill은 신뢰할 수 있는 시스템을 증폭해야지 약한 source를 숨기면 안 됩니다.