Claude Design과 디자인 시스템 Skill: 어떤 경로를 먼저 써야 할까

먼저 설치할 skill을 고르지 말고, 어떤 층에서 풀 문제인지부터 정해야 합니다. 2026년 10월 10일 기준 Claude Design은 Anthropic의 공식 시각 제작 제품 경로이고, 무료 플랜을 포함한 모든 요금제에서 쓸 수 있습니다. Claude Code의 project skill은 repo의 tokens, components, examples, checks를 따라 UI 코드를 바꾸게 할 때 더 맞습니다. 커뮤니티 UI/UX skill은 초안 품질을 높이는 데 도움이 될 수 있지만, 설치 전에 파일과 스크립트를 확인해야 합니다. 디자인 시스템 자체가 빈약하다면 새 skill이 아니라 원본 자료와 검사를 먼저 고쳐야 합니다.

중단 규칙은 간단합니다. 믿을 수 있는 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에 점진적으로 제공됐습니다.

이 접근 제한은 이제 없습니다. 2026년 9월 16일부터 Claude Design은 모든 Claude 대화에서 쓸 수 있고(입력창의 "Output" > "Design" 또는 Artifacts 탭의 Design 템플릿), Claude Code에서는 /design으로 씁니다. 10월 8일 베타를 마치고 Free, Pro, Max, Team, Enterprise 모두에서 기본으로 켜졌습니다. Enterprise는 10월 15일부터 기본으로 켜지며, 소유자가 Organization settings > Artifacts에서 먼저 켤 수 있습니다. 단독 사이트 claude.ai/design은 2026년 12월 14일에 닫힙니다(Claude Design 도움말). 그래도 보이지 않으면 Settings > Capabilities의 "Cloud code execution and file creation"이 켜져 있는지 확인하고, Enterprise라면 소유자에게 요청합니다. 메뉴에 없는 것은 설정 문제이지 skill을 안 깔아서가 아닙니다.

Claude Design이 팀의 디자인 시스템을 적용할 수 있다는 설명도 local skill과는 다릅니다. 그것은 Claude Design 제품이 접근 권한을 받았을 때의 기능입니다. .claude/skills/design-system/SKILL.md는 Claude Code가 repo 안에서 어떻게 작업해야 하는지 알려 주는 workflow 파일입니다.

이 둘은 이제 한곳에서 만납니다. Anthropic의 디자인 시스템 설정 도움말에 따르면 디자인 시스템은 Claude 안의 아티팩트이고, Pro, Max, Team, Enterprise에서 베타로 제공됩니다(무료 플랜 제외). 채팅에서 브랜드 자료, 슬라이드, 로고, 폰트, Figma 파일로 만들 수 있고, 디자인 시스템이 이미 React components로 있다면 Claude Code에서 /design-sync를 실행해 tokens와 components를 직접 읽게 할 수 있습니다. 단독 사이트에서 옮기는 팀은 "Migrate team design systems"로 이전합니다. 만든 디자인 시스템은 Claude Code를 포함한 모든 대화에서 쓸 수 있습니다. 저희가 읽기에 도움말이 설명하는 범위는 새 디자인과 슬라이드에 적용되는 색, 글꼴, components, 레이아웃까지이고 tests, CI, repo 규칙 실행은 언급하지 않습니다. 코드 변경은 여전히 project skill과 결정적 검사의 몫입니다.

시각 방향을 탐색하려면 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를 가리켜야 합니다.

기본 경로는 이렇게 둘 수 있습니다.

.claude/skills/design-system/SKILL.md

최소 구조는 이 정도면 충분합니다.

---
name: design-system
description: Use when UI work must follow this repository's tokens, components, examples, accessibility rules, and visual QA checks.
---

# Design System Skill

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가 적합합니다.

가장 작은 실행 순서

1. "Output" > "Design" 또는 Artifacts 탭에서 Claude Design을 엽니다. 2026년 10월 8일부터 모든 요금제에 있습니다. React components가 있고 Pro 이상이라면 Claude Code의 /design-sync로 Claude Design이 적용할 디자인 시스템을 만들 수 있습니다.
2. repo의 디자인 시스템 자료를 inventory합니다. tokens, components, examples, screenshots, accessibility rules, checks를 찾습니다.
3. Claude Code가 UI 작업 중 이 자료들을 반복적으로 읽어야 할 때만 .claude/skills/design-system/SKILL.md를 만듭니다.
4. skill은 절차로 둡니다. 언제 쓰는지, 무엇을 읽는지, 무엇을 지키는지, 어떤 check를 실행하는지 씁니다.
5. 작은 UI 변경으로 테스트합니다. component reuse, token fidelity, responsive, keyboard, contrast를 봅니다.
6. 커뮤니티 UI/UX skill은 이후 branch에서 비교합니다. 실제 작업량을 줄이지 못하면 제거합니다.

문제가 task-specific method가 아니라 장기 project preference라면 Claude Code memory guide를 먼저 보세요.

자주 묻는 질문

Anthropic 공식 디자인 시스템 skill이 있나요?

그 이름의 단일 공식 제품은 없습니다. 가장 가까운 공식 기능은 Claude Code의 /design-sync로 React components에서 만들 수 있는 Claude Design 디자인 시스템(Pro 이상, 베타)입니다. 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입니다. 2026년 가을부터는 둘이 바로 이어집니다. Claude Code의 /design으로 디자인을 만들고 고치며, /design-sync로 component library를 디자인 시스템으로 바꿉니다.

디자인 시스템 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를 숨기면 안 됩니다.