최근 연구진이 49개의 인기 에이전트 스킬을 대상으로 565개의 실제 소프트웨어 엔지니어링 작업을 수행해 보았습니다. 그중 39개는 합격률을 정확히 0%만 변화시켰을 뿐이었으나, 토큰 비용은 최대 451%까지 치솟았습니다. 이 연구는 예비 결과를 담은 프리프린트이지만, 대부분의 설치된 스킬이 클로드가 이미 따르고 있는 조언에 대해 불필요한 오버헤드를 지불하고 있다는 패턴은 변함없이 나타납니다.
디자인은 예외입니다. Anthropic의 400토큰 프론트엔드 스킬은 동일한 프롬프트를 가시적으로 변화시켰는데, 이는 디자인 결과물이 한눈에 평가되기 때문입니다. 또한 Claude의 기본값(Inter, 보라색 그라데이션, 세 장의 어울리는 카드)은 첫 1초 만에 알아볼 수 있습니다.
단, 한 가지 주의할 점은 공식 클로드 디자인 스킬만으로는 ‘AI가 생성한 것처럼 보이지 않는다’는 수준에 그친다는 것입니다. ‘당신의 브랜드처럼 보인다’는 수준에 도달하려면 오직 당신만이 작성할 수 있는 파일이 필요합니다. 이 가이드에서는 두 가지 방법을 모두 다루며, 단 하루 만에 나만의 파일을 구축하고 클로드의 기준선과 비교해 그 효과를 입증하는 방법도 포함하고 있습니다.
요약: 먼저 Anthropic의 frontend-design 스킬을 설치하세요. Claude Code에서 단 한 번의 명령어로 코드를 작성하기 전에 미적 방향을 확립할 수 있습니다. 완성된 시각 자료를 위해 canvas-design을, 일관된 프레젠테이션을 위해 theme-factory나 brand-guidelines를 추가하고, Figma에서 디자인을 주로 작업한다면 Figma의 스킬도 추가하세요.
공식 스킬을 사용하면 출력이 AI가 생성한 것처럼 보이지 않습니다. 16진수 값, 글꼴 크기, 사용 금지 패턴이 포함된 맞춤형 SKILL.md 파일만이 비로소 제품 고유의 스타일을 구현해 줍니다. 모든 스킬을 동일한 방식으로 테스트하세요: 동일한 프롬프트를 사용하여 스킬 적용 시와 미적용 시를 비교하고, 출력에 가시성이 없는 항목은 모두 삭제하세요. 그런 다음 디자인 시스템에 맞춰 파일 버전을 관리하세요. 그렇지 않으면 리브랜딩이 끝난 후에도 지난 분기의 강조색상이 계속 적용될 수 있습니다.
Claude Design 스킬이란 무엇인가요?
Claude 디자인 스킬은 Claude에게 디자인의 모양을 알려주는 간단한 지침 파일입니다. Claude는 디자인 작업이 발생할 때마다 이 파일을 자동으로 읽으므로, 매번 프롬프트에 규칙을 반복해서 입력할 필요가 없습니다.
스킬은 일반적인 규칙이나 구체적인 규칙을 설정할 수 있습니다. Anthropic의 프론트엔드 디자인 스킬은 일반적인 규칙을 설정합니다. 즉, 실제 서체를 선택하고, 시각적 스타일을 정하며, 코드를 작성하기 전에 이 두 가지를 모두 완료해야 합니다. 직접 작성하는 스킬은 여러분만의 규칙을 설정합니다. 즉, 여러분만의 색상, 폰트, 간격, 그리고 팀에서 절대 사용하지 않는 패턴 등을 정할 수 있습니다.
스킬은 사용에 방해가 되지 않도록 설계되었습니다. 세션이 시작될 때 Claude는 각 스킬의 이름과 한 줄 분량의 요약만 확인합니다. 해당 작업이 나타나면 전체 지침이 표시됩니다. 덕분에 스킬을 십여 개나 설치해 두더라도 세션이 빠르게 진행됩니다.
이는 또한 파일 내 다른 어떤 내용보다도 한 줄짜리 요약이 더 중요하다는 것을 의미합니다. Claude가 해당 스킬을 열지 여부를 결정하는 기준이 바로 이 요약문이기 때문입니다. Anthropic의 Agent Skills 문서에서는 이를 ‘점진적 공개(progressive disclosure)’라고 부릅니다.
Claude의 디자인 스킬은 Claude Design과 어떻게 다른가요?
Claude Design은 claude.ai/design에서 대화 형식으로 디자인을 생성하는 Anthropic의 별도 제품입니다. 디자인 스킬은 Claude AI 및 Claude Code의 출력 결과를 형성하는 지시 파일입니다. 또한, 가져온 디자인 시스템이 없는 경우 Claude Design이 생성하는 결과물을 제어하는 역할도 합니다. Claude Design은 Pro, Max, Team 및 Enterprise 플랜에서 이용 가능합니다.
Claude Skills와 MCP: 차이점은 무엇일까요?
Claude 스킬은 Claude에게 작업 방식을 알려줍니다. MCP 서버는 Figma 파일에 대한 실시간 연결과 같이 Claude가 작업할 대상을 제공합니다. Claude 프로젝트는 이 둘과 혼동되기 쉬운 세 번째 개념으로, 한 클라이언트의 파일과 컨텍스트를 함께 보관하는 저장된 작업 공간입니다.
| 측면 | 클로드 스킬 | MCP 서버 | Claude 프로젝트 |
|---|---|---|---|
| 개요 | 작업이 일치할 때 Claude가 불러오는 지침이 담긴 폴더 | Figma나 GitHub와 같은 외부 tool과의 실시간 연결 | 진행 중인 하나의 노력을 위해 컨텍스트가 고정된 작업 공간 |
| 디자인 일에 최적 | 디자인 시스템, 토큰 및 미적 규칙 코딩하기 | Figma 파일에서 실제 컴포넌트 데이터 추출하기 | 단일 스레드를 통해 한 클라이언트의 브랜드 맥락을 일관되게 유지하기 |
| 설정 | SKILL.md 파일을 작성하거나, 단 몇 분 만에 파일을 설치해 보세요. | 서버 및 인증 설정 | 프로젝트를 생성하고 Claude AI에 파일을 추가하세요 |
| 컨텍스트 비용 | 트리거될 때까지는 이름과 설명만 표시됩니다 | tool 정의는 세션마다 로드되며, 로딩에 시간이 오래 걸릴 수 있습니다. | 모든 대화에서 프로젝트 지식이 불러와집니다 |
대부분의 디자인 팀은 스킬과 MCP 서버를 함께 사용하게 됩니다. Figma 연결을 통해 Claude는 파일에 이미 포함된 실제 버튼, 색상, 컴포넌트를 인식하고, 스킬은 이를 어떻게 사용해야 하는지 알려줍니다.
함께 읽어보세요: Claude를 사용하여 AI 에이전트를 구축하는 방법: 단계별 가이드
왜 디자인 분야에서 기술 투자 대비 성과가 가장 큰 것일까요?
디자인은 그 결과물이 한눈에 판단되기 때문에, 다른 어떤 일보다 더 빨리 실력을 인정받을 수 있습니다. 평범한 문단이나 기능은 누군가가 그 평범함을 알아차리기 전까지 읽어야 하지만, 기본 폰트와 템플릿 레이아웃으로 만들어진 페이지는 순식간에 무시당합니다. 이는 또한 그러한 선택들을 바로잡아 주는 기술이 그 가치를 즉시 입증한다는 것을 의미합니다.
Anthropic은 자사의 프론트엔드 스킬을 구축하는 과정에서 SaaS 랜딩 페이지, 블로그 레이아웃, 관리자 대시보드에서 이 스킬을 적용한 경우와 적용하지 않은 경우를 동일하게 설정하여 프롬프트를 실행하며 이를 측정했습니다. 스킬이 로드되자 대시보드는 평면적인 구성 요소를 굵은 글꼴과 세심하게 설계된 모션이 적용된 통일감 있는 다크 테마로 바꾸었고, 블로그 레이아웃은 편집용 서체와 적절한 간격을 적용했습니다. 프롬프트는 전혀 변경되지 않았습니다.
이러한 결과를 만들어낸 스킬은 약 400개의 토큰으로 실행되며, 16진수 코드나 레이아웃 규칙은 포함되어 있지 않습니다. 이 스킬에는 피해야 할 폰트와 패턴, 그리고 대신 채택해야 할 방향만 명시되어 있습니다: 독특한 폰트, 선명한 악센트가 가미된 하나의 주된 색상, 타이밍이 잘 잡힌 단일 페이지 로딩 애니메이션, 그리고 레이어 구조의 배경입니다. Anthropic은 타이포그래피 지침만으로도 언급조차 하지 않았던 디자인의 일부가 개선되었다는 사실까지 발견했습니다. 모델은 항상 그 능력을 갖추고 있었으나, 안전한 선택지를 고르는 것을 멈출 이유가 부족했을 뿐이기 때문입니다.
앞서 언급한 벤치마크 분류 기준도 동일한 논리에 따라 설명됩니다. 결과를 향상시킨 7가지 스킬은 금융 위험 수식 같은 전문적인 절차적 지식을 반영했으며, 주어진 작업에 부합하는 것이었습니다.
아무것도 바꾸지 못한 39개 스킬은 너무 일반적이어서 단 하나의 결정조차 바꾸지 못했습니다. 그중 3개는 해당 프로젝트와 지침이 상충하여 오히려 결과에 부정적인 영향을 미쳤습니다. 이번 벤치마크는 디자인이 아닌 소프트웨어 엔지니어링 작업만을 대상으로 했지만, 그 원리는 동일하게 적용됩니다. 즉, 스킬이 무언가를 바꾸려면 구체적인 견해가 필요합니다.
Anthropic의 공식 스킬은 Claude가 전반적으로 더 나은 폰트, 색상, 레이아웃을 제시할 수 있도록 돕습니다. 자체 디자인 시스템을 기반으로 구축한 스킬은 한 단계 더 나아가 브랜드 정체성에 부합하는 결과를 제공합니다. 이 가이드의 나머지 부분에서는 설치해야 할 공식 스킬과 자체 스킬을 만드는 방법, 이 두 가지 주제를 모두 다룹니다.
디자인을 위해 설치할 만한 클로드 스킬은 무엇일까요?
디자인 작업에 설치할 가치가 있는 공식 스킬은 총 6가지입니다: Anthropic의 frontend-design, Canvas-design, theme-factory, brand-guidelines, web-artifacts-builder, webapp-testing, 그리고 팀이 Figma로 디자인하는 경우 Figma의 스킬 세트도 포함됩니다. frontend-design 스킬은 설치 시 가장 큰 효과를 볼 수 있는 첫 번째 스킬입니다.
코드 실행 기능을 활성화하면 무료 플랜을 포함한 모든 Claude 플랜에서 미리 구축된 스킬을 사용할 수 있습니다. 맞춤형 스킬을 업로드하려면 Pro, Max, Team 또는 Enterprise 플랜이 필요합니다. ‘맞춤형’ > ‘스킬’에서 두 가지를 모두 관리할 수 있습니다.
Claude Code에서/plugin marketplace add anthropics/skills 명령어를 사용하여 Anthropic의 스킬 저장소를 등록한 후, /plugin install example-skills@anthropic-agent-skills 명령어를 통해 디자인 관련 컬렉션을 설치하세요.
스킬은 에이전트가 따르게 될 일련의 지침이므로, 코드를 병합하기 전에 코드를 검토하듯이 타사의 SKILL.md 파일도 꼼꼼히 읽어보시기 바랍니다.
| 스킬 | 출처 | 가장 적합한 대상 | 다음의 경우 건너뛰세요 |
|---|---|---|---|
| frontend-design | Anthropic | AI가 생성한 것처럼 보이지 않는 UI 및 랜딩 페이지 | 엄격한 디자인 시스템 스킬이 이미 여러분의 결과물을 지배하고 있습니다 |
| canva-design | Anthropic | PNG 또는 PDF 형식으로 제공되는 포스터 및 소셜 미디어용 시각 자료 | 완성된 아트 작업물이 아닌, 편집 가능한 소스 파일이 필요합니다. |
| theme-factory | Anthropic | 덱과 페이지에 사용할 기성 색상 및 폰트 테마 선택하기 | 브랜드에서는 이미 색상과 서체를 정해 놓았습니다. |
| 브랜드 가이드라인 | Anthropic | Anthropic의 자체 아이덴티티를 기반으로 구축된 완전한 브랜드 스킬의 실제 예시 | 브랜드를 파악해 주기를 기대하시겠지만, 이 도구는 Anthropic의 |
| web-artifacts-builder | Anthropic | Claude AI에서 제공하는 인터랙티브 React 및 Tailwind 프로토타입 | 프로토타입에는 프로덕션용 컴포넌트가 필요합니다. |
| webapp-testing | Anthropic | 인계하기 전에 실제 브라우저에서 생성된 페이지를 확인하기 | 정적 디자인 자산만 제작합니다 |
| Figma 스킬 | Figma | Figma와 코드 간에 양방향으로 일을 이동하기 | 팀에서 Figma를 사용하지 않는 경우 |
| 디자인 시스템 스킬 | 여러분은 | 제품의 시각적 언어에 부합하는 결과물 | 아직 반복 가능한 디자인 규칙이 없습니다. |
frontend-design
frontend-design은 인터페이스 작업에 있어 가장 큰 영향을 미치는 설치 항목입니다. Claude가 UI 코드를 작성하기 전에, 이 스킬은 미적 방향을 커밋하도록 유도하며, 페이지가 기계가 만든 것처럼 보이게 하는 폰트, 그라데이션, 레이아웃을 피하도록 안내합니다.
효과적인 사례
- 코드를 한 줄도 작성하기 전의 방향성: 이 스킬은 Claude가 진행 과정에서 스타일을 적용하는 대신, 브리프에 맞는 구체적인 시각적 정체성을 선택하도록 하며, 여기에는 의도적으로 한 가지 미적 위험 요소도 포함됩니다.
- 피해야 할 기본값: Inter, Roboto, 흰색 바탕에 보라색 그라데이션, 그리고 진부한 컴포넌트는 명시적으로 제외됩니다. 바로 이 때문에 결과물이 다른 AI 페이지들과 똑같이 보이지 않는 것입니다.
- 매우 작은 메모리 사용량: 이 가이드의 길이는 약 400 토큰이므로, 설치해 두어도 비용이 거의 들지 않습니다.
한도
- ‘일반적인 취향’, ‘사용자의 취향’이 아님: 이 스킬은 ‘일반적인’ 디자인이 어떤 모습인지 파악하여 이를 피하지만, 사용자의 제품이 어떤 모습이어야 하는지에 대해서는 전혀 알지 못합니다.
- 인터페이스 작업 전용: 웹 UI 작업에서 트리거되며, 포스터 및 정적 비주얼은 canvas-design에 속합니다.
다음과 같은 경우에는 건너뛰세요: 이미 더 엄격한 규칙을 따르는 디자인 시스템 스킬을 운영 중이라면. 동일한 세션에서 두 가지 미적 관점이 대립할 때, 여러분의 관점이 우선되어야 합니다. 예시로, Claude Code에서는 개인 및 프로젝트 스킬이 이와 같은 플러그인 설치보다 우선순위가 높기 때문에, 기본적으로 여러분의 스킬이 우선 적용됩니다.
가장 적합한 용도: ‘AI가 생성한 것처럼 보이지 않는 것’이 막대이며, 아직 자체 디자인 가이드라인이 정립되지 않은 랜딩 페이지, 대시보드 및 컴포넌트.
canva-design
canvas-design은 포스터나 소셜 미디어용 그래픽과 같은 완성된 시각 예술 작품을 PNG 또는 PDF 파일로 생성합니다. 이 도구는 디자이너의 작업 방식을 반영하여 두 단계로 작동합니다. 먼저, 해당 작품에 대한 간결한 디자인 철학을 작성합니다. 그런 다음 그 철학을 바탕으로 시각적 요소를 생성하며, 텍스트는 최소한으로 유지하고 타이포그래피를 구도의 일부로 취급합니다.
효과적인 사례
- 픽셀보다 먼저 오는 개념: 철학적 검토 단계는 일관된 시각적 아이디어를 확립하도록 유도하므로, 결과물은 단순히 꾸며진 공허함이 아닌 하나의 보기를 갖게 됩니다.
- 'instruction'에 의한 독창성: 이 스킬은 클로드에게 기존 예술가를 모방하기보다는 독창적인 디자인을 만들도록 명시적으로 지시합니다.
한도
- 완성된 파일만 제공: 렌더링된 PNG 또는 PDF 파일과 설계 철학 문서를 제공받으며, 나중에 편집할 수 있는 레이어별 원본 파일은 포함되어 있지 않습니다.
다음과 같은 경우에는 건너뛰세요: 결과물을 수정하기 위해 Figma나 Illustrator로 다시 가져와야 하는 경우. 이 경우 편집은 재생성하는 방법밖에 없습니다.
가장 적합한 경우: 마감 기한이 있는 일회성 시각 자료로, 편집 가능한 파일보다 완성도 높은 최종 결과물이 더 중요한 경우.
theme-factory 및 brand-guidelines
이 두 가지는 서로 상반된 접근 방식으로 일관성 문제를 해결합니다. theme-factory는 10개의 기성 테마를 제공하며, 각 테마는 조화를 이루는 색상 팔레트와 폰트 조합으로 구성되어 있습니다. 요청 시 새로운 테마를 생성할 수 있으며, 선택한 테마를 데크, 문서 또는 페이지 전체에 적용할 수 있습니다. brand-guidelines는 한 회사의 정확한 색상 팔레트와 폰트 조합이 반영된, 완벽하게 정의된 브랜드 스킬의 모습을 보여줍니다. 단, 이 회사의 이름은 Anthropic이므로, 이 예제를 여러분의 브랜드를 파악하는 스킬로 여기기보다는, 여러분의 가치관에 맞춰 포크하여 활용할 수 있는 기본 틀로 간주하시기 바랍니다.
효과적인 사례
- 한 번의 결정, 모든 곳에 적용: 테마를 한 번만 선택하면 아티팩트의 모든 슬라이드나 페이지가 해당 테마를 따르게 되어, 3번 슬라이드와 14번 슬라이드 간의 스타일 불일치 문제를 해결할 수 있습니다.
- 브랜드가 없는 경우의 대체 방안: 내부 일이나 아직 시각적 정체성이 확립되지 않은 초기 컨셉의 경우, 미리 설정된 테마를 사용하는 것이 즉흥적으로 스타일을 적용하는 것보다 낫습니다.
한도
- 스타일링, 디자인이 아님: 두 스킬 모두 색상과 폰트를 제어합니다. 레이아웃, 계층, 이미지는 여전히 세션을 이끄는 다른 요소에서 비롯됩니다.
다음과 같은 경우에는 건너뛰세요: 브랜드 가이드라인이 이미 맞춤형 디자인 시스템 스킬에 포함되어 있는 경우. 색상과 서체에 대한 두 번째 기준이 생기면, 예전의 액센트 색상이 다시 슬그머니 들어올 수 있습니다.
가장 적합한 대상: 독창성보다 일관성이 더 중요한, 프레젠테이션 자료나 클라이언트 대상 문서를 대량으로 제작하는 팀.
web-artifacts-builder 및 webapp-testing
이 두 도구는 프로토타입의 양 끝을 담당합니다. web-artifacts-builder를 사용하면 Claude가 React, Tailwind, shadcn/ui를 활용해 여러 파일에 걸쳐 Claude Artifacts를 생성한 다음, 모든 것을 단일 파일 아티팩트(require)로 묶어줍니다. 따라서 프로토타입은 단순한 HTML 페이지 하나가 아닌, 작동하는 양식과 실제 컴포넌트를 갖춘 형태로 제공됩니다.
webapp-testing은 결과를 실제 브라우저에서 열고, 화면을 클릭하며 이동하면서 스크린샷과 콘솔 로그를 캡처합니다. 이로 인해 이해관계자가 발견하기 전에 상호작용 오류가 드러나게 됩니다.
효과적인 사례
- 기본 제공되는 더 풍부한 프로토타입: 스킬을 사용하여 구축한 작업 관리 앱에는 카테고리와 마감일이 포함된 정상 작동하는 작업 생성 양식이 포함되어 있는 반면, 스킬을 사용하지 않은 버전은 최소한의 기능만 제공합니다.
- 인계 전 검증: 실제 브라우저에서 캡처한 스크린샷은 생성된 코드보다 ‘실제로 작동하는지’를 훨씬 더 확실하게 보여줍니다.
한도
- 일반 컴포넌트 라이브러리: 프로토타입은 실제 프로덕션 컴포넌트가 아닌 shadcn/ui 파트를 기반으로 구축되므로, 제품과의 유사도에는 한계가 있습니다.
- 테스트를 위해서는 로컬 앱이 필요합니다: webapp-testing은 로컬 웹 애플리케이션을 구동하므로, 디자인 도구라기보다는 개발자 워크플로우 도구입니다.
다음의 경우에는 건너뛰세요: 프로토타입에 프로덕션용 컴포넌트를 반드시 사용해야 하거나, 결과물이 브라우저에서 실행되지 않는 경우.
가장 적합한 대상: 검토를 위해 인터랙티브 프로토타입을 출시하며, 단순히 보기만 좋은 것이 아니라 실제로 기능하는 프로토타입을 원하는 디자인 엔지니어.
Figma의 공식 스킬
Figma는 GitHub에서 Figma Model Context Protocol(MCP) 서버와 연동되도록 구축된 자체 스킬 세트를 관리하고 있습니다. 이 세트는 양방향으로 작동합니다. figma-design-to-code는 Figma 노드를 실제 스택의 코드로 변환합니다. figma-generate-design은 게시된 컴포넌트와 토큰을 기반으로 Figma에서 화면을 생성합니다. figma-generate-library는 코드베이스에서 컴포넌트 라이브러리를 구축합니다. 또한 figma-code-connect는 디자인을 해당 코드 구현에 매핑하므로, Dev Mode에서는 생성된 근사값 대신 실제 컴포넌트 코드가 표시됩니다.
효과적인 사례
- 추측이 아닌 실제 컴포넌트: 스킬이 MCP 연결을 기반으로 작동하기 때문에, Claude는 사용자의 실제 변수, 스타일 및 게시된 컴포넌트를 기반으로 작동합니다.
- 엄격한 규율: 이 스킬들은 코드를 작성하기 전에 디자인 컨텍스트를 요구하며, 하드코딩된 값 대신 디자인 시스템 토큰을 사용해야 하는데, 이는 수동으로 프롬프트를 입력하는 세션에서 흔히 저지르는 실수와 정확히 일치합니다.
한도
- 정의상 Figma 기반: 모든 스킬은 디자인 자산이 MCP 서버와 연결된 Figma 파일에 저장되어 있다고 가정하며, 설정 과정이 단일 명령어 설치보다 더 복잡합니다.
다음과 같은 경우에는 건너뛰세요: 팀에서 Figma를 사용하여 디자인하지 않는 경우. 초기 탐색 단계에서는 Figma AI를 프로세스에 포함시켜야 하는지, 아니면 프롬프트 중심의 도구를 사용하는 것이 더 빠른지 고려해 볼 가치가 있습니다.
가장 적합한 대상: Figma 디자인 시스템을 공개한 제품 팀 중, ‘디자인에서 코드로’ 및 ‘코드에서 디자인으로’의 변환 과정을 더 이상 수작업으로 처리하지 않으려는 팀.
함께 읽어보세요: 토큰맥싱(Tokenmaxxing)이란? 스스로 무너진 AI 메트릭
디자인 시스템용 Claude 스킬을 구축하는 방법
디자인 시스템 스킬을 구축하는 데는 6단계가 필요합니다: 반복되는 워크플로우 하나를 선택하고, Claude의 도움을 받아 SKILL.md 초안을 작성하며, Claude가 실제 작업과 매칭할 수 있는 설명을 작성하고, 지침에 실제 디자인 토큰을 입력하고, 스킬을 적용했을 때와 그렇지 않았을 때의 결과를 비교한 후, 팀이 작업하는 폴더에 설치하세요.
1단계: 반복적으로 수행하는 디자인 워크플로우 하나를 선택하세요
일주일에 여러 번 클로드에게 시키는 작업을 위한 스킬을 작성해 보세요. 반복 작업이야말로 이 파일을 만드는 이유입니다. 스킬을 사용하면 매 세션마다 같은 규칙을 붙여넣기할 필요가 없어지므로, 한 번만 실행하는 작업에는 스킬이 필요하지 않습니다.
일반적인 예시:
- 제품 UI: 제품의 시각적 언어에 포함된 화면과 컴포넌트
- 클라이언트 프레젠테이션 자료: 스튜디오의 정립된 스타일을 따르는 슬라이드
- Handoff 사양: 엔지니어들이 기대하는 형식의 개발자 문서
전문가 팁: 작성하기 가장 쉬운 워크플로우가 아니라, 일반적인 출력 결과로 인해 재작업이 가장 많이 발생하는 워크플로우를 선택하세요.
2단계: Claude가 SKILL.md 초안을 작성하도록 하세요.
Claude에게 워크플로우를 설명하면 초안을 작성해 줍니다. Claude는 작업 내용이 무엇인지, 스킬이 언제 활성화되어야 하는지, 완성된 결과물이 어떤 모습인지 묻고, 그 후 파일을 생성합니다. 이 질문들은 사람들이 파일을 직접 작성할 때 가장 자주 대답하는 것을 잊는 부분들입니다.
Anthropic의 작성 지침은 초안을 출발점으로 삼으며, 그 이후의 반복 과정은 간단합니다. 실제 작업을 실행하고, 출력 결과에서 잘못된 부분을 확인한 뒤, 지침을 수정하고, 다시 실행하면 됩니다.
3단계: 실제로 트리거되는 설명 작성하기
YAML 프론트매터의 설명 줄은 스킬이 실행될지 여부를 결정합니다. Claude는 설치된 스킬을 스캔하여 일치하는 항목을 찾을 때 해당 줄만 읽기 때문에, ‘디자인 지원’이라는 설명은 일치하는 항목이 없으므로 그 아래의 지침은 로드되지 않습니다.
트리거 설명은 프롬프트에 입력할 단어 중에서 다음 세 가지를 명시합니다:
- 작업: ‘UI, 랜딩 페이지 또는 컴포넌트 생성’
- 범위: 해당 스킬이 적용되는 제품 또는 브랜드
- 적용되는 규칙: ‘당사의 디자인 토큰, 타이포그래피 스케일 및 스페이스 규칙’
Claude AI는 업로드되는 스킬에 대해 200자라는 더 짧은 한도를 적용하므로, 200자 분량으로 작성하고 사양에 명시된 1,024자는 Claude 코드 개발을 위한 여유 공간으로 남겨두세요.
4단계: 형용사가 아닌 디자인 시스템을 코딩하세요
지침에는 값을 직접 입력하고, 값에 대한 설명은 포함하지 마세요. ‘깔끔하고 현대적’이라는 표현은 모든 실제 결정을 모델에 맡기게 되며, 모델은 기본값을 사용하여 이를 해결합니다. 여러분의 디자인 시스템은 이미 이러한 결정을 내렸으므로, 해당 내용을 그대로 복사하여 붙여넣으세요:
- 색상: 색상명이 아닌 정확한 16진수 값
- 유형: 전체 스케일, 명명된 폰트 및 굵기 포함
- 스페이스: 간격 단위 및 테두리 반경
- 모션: 시스템에서 정의되어 있다면 기간과 이징
- 금지 목록: 기본 카드 그리드, 그라데이션이 적용된 히어로 이미지, 스톡 일러스트 스타일, 그리고 시스템에서 명시적으로 금지한 기타 모든 요소
금지 목록은 허용 목록보다 더 큰 역할을 합니다. 지침이 소진되었을 때 모델이 의존하는 대체 옵션을 제거해 주기 때문입니다. 이미 브랜드 가이드라인을 관리하고 있다면, 이 단계는 새로운 것을 창안하는 것이 아니라 기존 내용을 적용하는 과정입니다. 컴포넌트 목록이나 접근성 규칙과 같이 부피가 큰 참조 자료는, 작업 수행 시에만 스킬이 불러오는 ‘references’ 폴더에 보관해야 합니다.
5단계: Claude의 기준값을 기준으로 테스트하기
스킬을 설치한 상태와 설치하지 않은 상태에서 실제 작업 하나를 각각 두 번씩 실행한 후, 결과물을 나란히 비교해 보세요. 이 비교를 통해 두 가지 사실을 알 수 있습니다. 첫째, 스킬이 트리거되었는지 여부, 둘째, 지침이 눈에 띄는 변화를 일으켰는지 여부입니다.
두 결과물이 똑같이 보인다면, 지침이 너무 모호한 것입니다. 가장 모호한 부분을 구체적인 값으로 대체한 다음, 작업을 다시 실행해 보세요.
전문가 팁: 최근에 출시한 컴포넌트를 테스트 작업으로 활용하세요. 실제 운영 환경의 일 결과와 비교할 수 있는 출력은, 임의로 만든 프롬프트보다 미흡한 지침을 더 빨리 드러내 줍니다.
6단계: 작업 환경에 설치하고 버전 관리하기
Claude AI에서는 설정 > 맞춤형 > 스킬 순으로 이동하여 스킬 폴더를 업로드하세요. Claude 코드에서는 프로젝트의 claude/skills/ 디렉터리에 커밋하면, 레포지토리를 클론하는 모든 사용자가 해당 스킬을 사용할 수 있습니다.
디자인 시스템을 업데이트하는 것과 동일한 풀 리퀘스트에서 스킬도 함께 업데이트하세요. 그렇지 않으면 리브랜딩이 적용되고 토큰이 변경되더라도, 아무도 손대지 않은 스킬이 모든 새 빌드에 지난 분기의 액센트 색상을 계속 적용하게 됩니다. Claude는 해당 파일이 오래된 것임을 알 수 있는 방법이 없으므로, 검토 과정은 여러분의 프로세스 내에서 이루어져야 합니다.
전문가 팁: 이 기술을 디자인 시스템 감사 체크리스트에 추가하여, 해당 파일이 그 시스템과 동일한 일정에 따라 검토되도록 하세요.
눈앞에 뻔히 보이지만 간과하기 쉬운 5가지 스킬 실수
명백한 오류는 쉽게 알아차릴 수 있습니다. 오류가 발생하는 스킬, 트리거 단어에 오타가 있는 설명, 또는 서로 모순되는 사용법 등이죠. 하지만 디자인 스킬을 실제로 무용지물로 만드는 실수들은 겉으로 드러나지 않습니다. 스킬은 문제없이 설치되고, 세션도 잘 실행되지만, 결과물은 아무런 경고 없이 계속해서 잘못된 상태로 나옵니다. 주의해야 할 다섯 가지 사항은 다음과 같습니다:
아무런 기능도 하지 않는 스킬 모음. 스킬 폴더에는 15개의 다운로드 파일이 들어 있고, 세션은 정상적으로 로드되며, 출력 결과는 스킬을 추가하기 전과 완전히 똑같습니다. 오류도 발생하지 않으니 의문을 품을 이유도 없습니다. 각 스킬은 전혀 트리거되지 않거나 클로드가 이미 따르고 있는 조언을 반복할 뿐이며, 여러분은 아무런 변화도 얻지 못한 채 사소한 토큰 오버헤드 비용만 지불하고 있는 셈입니다.
해결 방법: 설치된 모든 스킬을 직접 실행했을 때와 마찬가지로 ‘이전/이후’ 테스트를 수행해 보세요. 출력이 가시적으로 달라지는 두세 개만 남기고, 나머지는 망설임 없이 삭제하세요.
모델과 일치하는 스킬. 지침에 ‘모던하고, 깔끔하며, 접근성이 뛰어나다’라고 명시했음에도 Claude는 어쨌든 중간값 페이지를 생성합니다. Claude가 사용자의 지침을 무시한 것은 아닙니다. 중간값 페이지는 이미 모던하고, 깔끔하며, 접근성이 뛰어나기 때문에, 사용자의 스킬이 요청한 내용은 기본값이 제공하는 것과 정확히 일치하는 것입니다. 형용사로 된 지침은 항상 통과되지만, 바로 그 때문에 항상 실패하게 됩니다.
해결책: 모든 형용사를 ‘결정 사항’으로 다시 작성하세요. 16진수 값, 명명된 폰트, 금지된 패턴 등이 그 예입니다. 해당 규칙을 어길 수 없다면, 그것은 지침이 아닙니다.
결코 호출되지 않는 스킬. 이 파일은 몇 주 동안 설치된 상태로 남아 있지만, Claude는 이를 불러오는 것에 대해 전혀 멘션하지 않습니다. 세션에서 여전히 결과물이 생성되지만, 스킬을 적용하지 않은 결과물일 뿐이라 아무도 눈치채지 못합니다. Claude는 사용자의 요청을 한 줄짜리 프론트매터 설명과 대조하여 스킬을 선택하는데, 모호한 설명은 어떤 스킬과도 일치하지 않습니다.
해결 방법: 작업을 할당할 때 입력한 정확한 문구로 설명을 다시 작성하세요. ‘가격 정책 페이지 구축’이라고 말했다면, 설명에는 ‘시각적 품질 개선 지원’이 아닌 ‘페이지’라고 명시되어야 합니다.
스킬을 마치 눈처럼 활용하세요. 지침에서 예상한 모든 작업에 대해서는 브랜드 정체성을 유지한 출력을 제공하지만, 요청이 지침 범위를 벗어나는 순간 브랜드 정체성을 벗어나게 됩니다. 이러한 격차는 항상 존재해 왔습니다. 스킬은 선택지를 제한할 수는 있지만, 제품을 직접 볼 수는 없기 때문입니다. 지침에 포함되지 않은 부분은 모델이 기본값을 바탕으로 채워 넣습니다.
해결 방법: 연결된 디자인 파일, 캡처된 컴포넌트, 출시된 화면의 스크린샷 등 Claude가 실제로 확인할 수 있는 요소와 스킬을 연계하세요. 규칙과 참조 자료를 함께 사용하면 규칙만으로는 다룰 수 없는 부분까지 커버할 수 있습니다.
리브랜딩을 넘어 지속되는 기술. 새로운 색상 팔레트가 출시된 지 3주가 지났지만, Claude는 여전히 모든 새 빌드에 예전 액센트 색상을 전혀 망설임 없이 적용하고 있습니다. 파일 내부의 내용은 전혀 변경되지 않았기 때문에, 파일이 깨진 것처럼 보이지도 않습니다. 바로 이것이 문제입니다. 디자인 시스템은 변경되었지만 기술은 그대로였으며, Claude는 그 차이를 알아차릴 방법이 없습니다.
해결 방법: 스킬 파일을 디자인 시스템과 동일한 릴리스 프로세스에 연계하여, 검토 과정에서 두 시스템이 서로 어긋나지 않도록 하세요.
ClickUp에서 스킬 기반 디자인 워크플로우를 실행하는 방법

ClickUp은 Claude 스킬과 관련된 모든 작업이 이루어지는 곳입니다. 스킬의 기반이 되는 브리핑, 스킬의 모양을 바꾸는 검토, 그리고 출시를 위한 인계가 모두 여기서 진행됩니다. 디자인 스킬은 Claude의 산출물을 수정합니다. ClickUp은 그 산출물이 포함된 워크플로우를 개선합니다.
스킬 기반 디자인에 특히 효과적인 요소:
- Claude 및 기타 대규모 언어 모델(LLM)을 원활하게 활용하세요: ClickUp Brain에서 작업 공간을 떠나지 않고도 대화 도중 Claude로 전환할 수 있습니다. 현재 진행 중인 디자인 작업에 대해 질문하면, Brain이 독립형 Claude 세션에서는 확인할 수 없는 정보(예: 클라이언트의 마지막 피드백이나 스레드에서 두 단계 앞의 브리프)를 불러옵니다.
- 팀의 디자인 규칙을 재사용 가능한 플레이북으로 전환하세요: ClickUp에는 자체 AI 스킬이 있습니다. 이는 Brain이 일치하는 작업이 발생할 때마다 적용하는 저장된 지침 세트입니다. “랜딩 페이지 검토 시, 타입 스케일, 금지된 패턴, 간격 토큰을 확인하라”는 스킬을 하나 만들면, 모든 검토에서 동일한 체크리스트가 실행됩니다. 이 스킬이 참조하는 디자인 시스템 문서는 버전 관리가 되는 ClickUp Docs wiki로 함께 저장되어, 팀 전체가 쉽게 찾을 수 있습니다.

재사용 가능한 플레이북 생성부터 올바른 지침을 자동으로 브레인 로딩하는 과정까지, ClickUp AI 스킬이 실제로 어떻게 작동하는지 확인해 보세요:
- Claude가 생성한 디자인 자산에 대한 피드백 루프를 완성하세요: Claude가 생성한 모크업이나 랜딩 페이지 스크린샷을 해당 작업에 첨부하면, 이해관계자들은 ClickUp 교정을 통해 해당 자료에 직접 코멘트를 남길 수 있습니다. “헤로 이미지의 간격이 어색해 보입니다”와 같은 피드백은 정확한 좌표에 주석으로 표시되며, 담당 디자이너에게 할당되어 해당 디자이너의 홈 화면에 표시됩니다.
- 스크린샷 대신 인터랙티브 미리보기를 제공하세요: Brain에 랜딩 페이지, 프레젠테이션 자료 또는 대시보드를 요청하면, 프로젝트에 이미 첨부된 브리프, 브랜드 문서 및 작업 데이터를 바탕으로 작동하는 HTML 페이지인 ‘ClickUp 아티팩트’를 실시간으로 생성해 줍니다. 작업 공간 내 어디에나 URL을 붙여넣기만 하면, 이해관계자들이 클릭하여 직접 확인할 수 있도록 렌더링됩니다.
한도:
- ClickUp은 Claude 스킬을 작성하거나 실행하는 곳이 아닙니다: Claude 스킬은 Claude AI와 Claude Code에서 운영됩니다. ClickUp은 이를 관리하는 기록 시스템일 뿐, 실제 실행 환경은 아닙니다.
- 설정 과정에 학습 곡선이 있습니다. 더 단순한 tool을 사용했거나 PM 도구를 전혀 사용하지 않았던 팀은 미리 계층과 상태를 신중하게 고려해야 합니다. 클라이언트가 세 곳인 1인 디자이너의 경우, 더 단순한 tool을 사용할 때 더 빠르게 결과물을 내놓을 수 있습니다.
다음과 같은 경우에는 건너뛰세요: Claude를 사용하여 일회성 시각 자료를 생성하기만 하면 되고, 이에 대한 팀 검토 절차가 없는 경우.
가장 적합한 대상: Claude가 제작을 담당하고, 별도의 팀이 브리핑, 피드백, 승인을 처리하며, 이러한 업무 인계가 더 이상 흩어진 대화 스레드에 머물러서는 안 되는 디자인 팀.
스킬을 한 번만 구축하면, 그 매력은 영원히 유지됩니다
모든 신뢰할 수 있는 테스트에서 나타나는 패턴은 동일합니다. 특정 관점을 가진 스킬은 디자인 결과물을 변화시키지만, 일반적인 스킬은 아무런 차이를 만들지 않습니다. 지금 바로 Anthropic의 프론트엔드 디자인 스킬을 설치해 보세요. 이는 가장 빠르게 가시성을 높일 수 있는 방법입니다. 그런 다음 오후 한나절 정도 시간을 내어 자신만의 디자인 시스템을 SKILL.md로 구현해 보세요.
기준 버전과 비교하여 테스트하고, 시스템에 맞춰 버전을 관리하세요. 이 단 하나의 파일이 다른 사람들과 똑같은 AI 출력 결과와 여러분만의 독특한 AI 출력 결과를 만드는 결정적인 차이입니다.
하지만 이 스킬은 제작상의 문제는 해결해 주지만, 워크플로우 문제는 해결하지 못합니다. 디자이너는 여전히 한 앱에서 기획서를 받고, 이메일 스레드를 통해 피드백을 받으며, 아무도 회의록을 남기지 않은 회의에서 승인을 받아야 합니다. 결과물은 개선되지만, 이를 둘러싼 프로세스는 여전히 단편적인 상태로 남아 있습니다.
추천 사항: Claude가 스킬을 통해 심도 있는 제작 일을 처리하도록 하고, 팀의 브리핑, 검토 및 승인 절차는 모든 구성원이 볼 수 있는 곳에서 진행하세요.
ClickUp을 무료로 체험해 보고, 방금 만든 스킬이 결과물에 적용한 것과 동일한 시스템을 디자인 워크플로우에도 적용해 보세요.
Claude Design 스킬에 대한 자주 묻는 질문(FAQ)
설치된 스킬은 얼마나 많은 컨텍스트를 사용하나요?
스킬이 트리거될 때까지 스킬당 약 100 토큰이 소요됩니다. Claude는 시작 시 각 스킬의 이름과 설명만 불러오며, 전체 SKILL.md 본문(Anthropic은 5,000 토큰 및 500줄 미만을 권장합니다)은 작업이 일치할 때만 컨텍스트에 포함되며, 번들된 참조 파일은 읽힐 때만 불러옵니다. 12개의 스킬을 설치하면 대략 1,200 토큰의 상시 오버헤드가 발생합니다.
Claude 스킬에 실행 가능한 코드를 포함할 수 있나요?
네. 스킬은 scripts/ 디렉터리에 Python, JavaScript 또는 Bash 스크립트를 묶어 둘 수 있으며, 이를 YAML 프론트매터에서 의존성으로 선언해야 합니다. Claude와 Claude Code는 스킬을 로드할 때 PyPI 및 npm에서 패키지를 설치할 수 있지만, API 스킬의 경우 모든 의존성이 컨테이너에 미리 설치되어 있어야 합니다. Anthropic의 Excel, Word 및 PDF용 문서 스킬은 이 방식을 따릅니다.
두 스킬이 충돌할 경우 어떤 스킬이 우선 적용되나요?
Claude Code에서 스킬 이름이 중복될 경우, 스킬은 고정된 우선순위 순서를 따릅니다. 기업에서 관리하는 스킬이 가장 먼저 적용되고, 그 다음 ~/.claude/skills에 있는 개인 스킬, 그 다음 .claude/skills에 있는 프로젝트 스킬, 마지막으로 플러그인을 통해 설치된 스킬 순입니다. 조직은 기업 스킬을 통해 표준을 적용할 수 있으며, 개인은 개인 스킬을 통해 이를 재정의할 수 있습니다. review 대신 frontend-review와 같이 설명적인 이름을 사용하면 대부분의 충돌을 피할 수 있습니다.
Claude 스킬과 플러그인의 차이점은 무엇인가요?
스킬(skill)은 SKILL.md 설명 파일이 포함된 단일 폴더를 말하며, 플러그인(plugin)은 여러 스킬을 Claude Code용 커넥터 및 명령어와 함께 묶어 배포할 수 있는 번들입니다. Anthropic은 frontend-design을 해당 스킬을 포함하는 플러그인으로 제공하며, 마켓플레이스 명령어 하나로 설치할 수 있습니다. 자신만의 디자인 규칙을 작성하는 경우 스킬을 작성하면 되며, 플러그인은 이러한 규칙 세트를 공유하는 방법입니다.
Claude 스킬은 무료로 사용할 수 있나요?
설정에서 코드 실행이 활성화되어 있다면, Free 플랜을 포함한 모든 Claude 플랜에서 미리 구축된 스킬을 사용할 수 있습니다. 맞춤형 스킬을 업로드하려면 Pro, Max, Team 또는 Enterprise 플랜이 필요합니다. Anthropic의 미리 구축된 스킬은 모든 사용자에게 자동으로 활성화되며, 맞춤형 스킬은 ‘사용자 지정’ > ‘스킬’에서 업로드할 수 있습니다.
아닙니다. 스킬은 SKILL.md 파일이 포함된 폴더입니다. 이 파일은 이름과 설명이 포함된 YAML 프론트매터로 시작하며, 그 뒤에는 일반 Markdown 형식의 지침이 이어집니다. 실행 가능한 Python, JavaScript 또는 Bash 스크립트는 고급 워크플로우를 위한 선택적 추가 요소입니다. Anthropic의 맞춤형 스킬 문서에서는 지침만 먼저 작성한 후, 작업에 필요한 경우 나중에 스크립트를 추가할 것을 권장합니다.
