design-system작성자 Anthropic

Design System 스킬.

Claude Code 및 Codex용 브랜드 및 디자인 시스템 작업 스킬: 기존 디자인 시스템을 감사, 문서화 또는 확장합니다.

Brand & Design Systems
디자인 시스템

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

2026-09-14에 업스트림 파일에서 읽은 앞부분 및 섹션 제목 · 전체 5,552자

01 기능

design-system Skill이 Claude Code와 Codex에서 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

기존 디자인 시스템 작업을 위한 슬래시 커맨드 skill로, audit(진단), document(문서화), extend(확장) 세 가지 모드를 제공합니다. 진단 단계는 명명 일관성, 토큰 커버리지, 컴포넌트 완성도를 점검하고 시스템 전체를 100점 만점으로 채점합니다. 문서화 모드는 설명, 변형, 속성, 상태, 접근성, 권장/비권장 사항이 포함된 컴포넌트 스펙을 산출합니다.

확장 모드는 시스템에 이미 존재하는 컴포넌트들을 기준으로 새로운 컴포넌트나 패턴을 제안하며, 사용될 토큰과 남는 질문들을 함께 제시합니다. 이 skill은 디자인 토큰, 컴포넌트, 패턴을 다루며, 디자인 도구나 지식 베이스가 연결되어 있으면 그 안으로 접근할 수도 있습니다. 대상 독자는 시스템의 일관성을 유지하는 디자이너와 개발자입니다.

산출물

우선순위가 매겨진 조치 항목으로 끝나는 디자인 시스템 진단 보고서
속성, 유형, 기본값, 설명으로 구성된 속성 표가 포함된 컴포넌트 문서
해결하고자 하는 문제로 시작하는 새로운 컴포넌트 제안

예시 프롬프트 보기 ↗

작동 방식

01
인수(Argument)로 모드 선택하기
이 커맨드는 모드와 대상을 함께 받습니다: 시스템 전체를 진단하거나, 단일 컴포넌트나 패턴을 document 또는 extend 모드로 실행합니다.
02
세 가지 축에 걸쳐 진단 실행하기
진단은 명명 일관성, 하드코딩된 값과 대비한 토큰 커버리지, 각 컴포넌트의 완성도를 점검한 후 우선순위 조치 항목을 명시합니다.
03
컴포넌트 스펙 작성하기
문서화 모드는 설명, 변형, 유형과 기본값이 포함된 속성, 상태, 접근성, 권장/비권장 표로 구성된 템플릿을 채웁니다.
04
기존 요소를 기준으로 확장안 제안하기
확장 모드는 새로운 아이디어를 관련 컴포넌트들과 비교한 후, API, 변형, 상태, 그리고 해당 컴포넌트가 사용할 정확한 토큰을 제안합니다.
05
연결된 도구가 있을 경우 그로부터 정보 가져오기
디자인 도구가 연결되어 있으면 이 skill은 문서화를 위해 컴포넌트 속성과 레이어 구조를 가져올 수 있으며, Figma에서 명명, 변형, 토큰 사용을 점검할 수 있습니다.

02 적합성 확인

design-system Skill을 사용해야 하는 경우

이러한 종류의 브랜드 및 디자인 시스템 작업의 경우 Claude Code 또는 Codex에서 design-system 스킬을 사용하십시오. 아래의 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

컴포넌트 전반에 명명 불일치나 하드코딩된 값이 생긴 것 같다고 의심될 때입니다.
하나의 컴포넌트에 대해 변형, 상태, 접근성 관련 사항을 다루는 문서가 필요할 때입니다.
새로운 컴포넌트나 패턴을 디자인하면서 기존 시스템에 맞추고자 할 때입니다.
이 스킬이 연결된 지식 베이스를 사용하여 더 작성하기 전에 이미 문서화된 내용을 확인하도록 할 수 있습니다.

한계 인지하기

시스템이 이미 제공하는 것을 중복하는 일회성 컴포넌트는 시스템을 갖추는 목적을 무의미하게 만듭니다.
확장 제안은 어려운 판단을 해결하지 않으며, 여전히 디자인 리뷰가 필요한 결정을 남긴 채 끝날 수 있습니다.
Figma에서 컴포넌트를 직접 읽어오는 것은 디자인 도구 커넥터가 있을 때만 가능합니다.

제공할 사항

모드와 대상명령에 모드와 적용할 컴포넌트, 패턴 또는 시스템을 지정하여 스킬이 채워야 할 템플릿을 알 수 있도록 합니다.
비교를 위한 기존 컴포넌트확장 제안은 관련 컴포넌트가 공유하는 것과 그것이 충분하지 않은 이유를 비교하므로, 그 인접 컴포넌트들을 알고 있어야 합니다.

03 스킬 내부

디자인 시스템 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

표준 대비 네이밍 불일치 보고
네이밍 불일치는 단순히 표시되는 것이 아니라, 각 행마다 관련된 컴포넌트와 채택할 표준을 명시합니다.
하드코딩된 값을 눈으로 보지 말고 세십시오
토큰 커버리지는 정의된 개수와 발견된 인스턴스 수(하드코딩된 헥스 값, 임의의 spacing 값, 커스텀 폰트나 크기 등)를 비교합니다.
모든 것을 문서화하십시오
컴포넌트, 변형 또는 규칙이 문서화되어 있지 않으면 스킬은 이를 존재하지 않는 것으로 취급합니다.
제약 안에서 유연성을 유지하십시오
컴포넌트는 경직되기보다 조합 가능하도록 설계되어 있어, 패턴 세트가 포기되지 않으면서도 유연하게 대응합니다.
주요 변경 사항의 버전 관리
모든 주요 변경 사항에는 단순한 대체 컴포넌트가 아니라 마이그레이션 경로가 함께 제공되어야 합니다.
오디트로 시작하십시오
기본 진입점은 문서화하거나 확장하기 전에 시스템이 현재 어디에 있는지에 대한 오디트입니다.
완벽함보다 커버리지가 우선입니다
컴포넌트의 80%를 문서화하는 것이 10개의 컴포넌트를 완벽하게 처리하는 것보다 낫다고 간주됩니다.

04 활용하기

Claude Code 또는 Codex에 design-system 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 design-system 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

design/skills/design-system/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 브랜드 및 design-system 작업 과제를 제공합니다

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

오디트 요약을 읽습니다: 검토된 컴포넌트 수, 발견된 문제, 100점 만점 점수입니다.
컴포넌트별 완성도 테이블을 확인합니다. 상태, 변형, 문서가 별도로 표시되고 점수화되기 때문입니다.
문서화된 컴포넌트에 대해 접근성 항목이 채워져 있는지 확인합니다.
확장 컴포넌트의 경우, 검토로 넘어가기 전에 상태 표에 기본, 호버, 비활성 동작이 모두 포함되어 있는지 확인합니다.

OpenDesign에서 SKILL.md 링크를 통해 design-system을 가져옵니다: Plugins → Add → Skill → Import from link를 선택한 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins 브랜치 main
스킬 파일: design/skills/design-system/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 8f877b6
License: Apache-2.0 LICENSE에서 확인
리포지토리 스타: 24,012 이 카탈로그에 7개의 스킬을 포함하는 anthropics/knowledge-work-plugins 저장소 전체에 대한 2026-09-14 GitHub 스냅샷입니다. design-system에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

사용법세 가지 실행 방식: 시스템을 감사하고, 컴포넌트를 문서화하고, 패턴을 확장합니다.
디자인 시스템의 구성 요소디자인 토큰, 컴포넌트, 패턴을 하위 요소, 상태, ARIA 관련 사항과 함께 정의합니다.
원칙독창성보다 일관성, 제약 안에서의 유연성, 모든 것을 문서화, 버전 관리와 마이그레이션.
결과물 — 감사감사 템플릿: 요약 점수, 명명 일관성, 토큰 커버리지, 완성도, 우선순위 조치.
결과물 — 문서화컴포넌트 템플릿: 설명, 변형, 프롭, 상태, 접근성, 권장 사항과 지양할 사항, 코드 예시.
결과물 — 확장신규 컴포넌트 템플릿: 문제, 관련 패턴, API, 변형, 상태, 토큰, 미해결 질문.
커넥터 사용 가능 시감사, 문서화, 게시를 위한 선택적 디자인 도구 및 지식 베이스 단계.
팁감사로 시작하고, 빌드하면서 문서화하고, 완벽함보다 커버리지를 우선합니다.

스킬 자체 설명

디자인 시스템을 검토하거나 문서화하거나 확장합니다. 컴포넌트 간 명명 불일치나 하드코딩된 값을 확인하거나, 컴포넌트의 변형, 상태 및 접근성 주석에 대한 문서를 작성하거나, 기존 시스템에 맞는 새 패턴을 설계할 때 사용합니다.

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 5,552자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에