design-system-patterns작성자 Seth Hobson

Design System Patterns 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex skill: 확장 가능한 디자인 시스템, 토큰, 테마 인프라, 컴포넌트 아키텍처입니다.

Brand & Design Systems
디자인 시스템

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

업스트림 파일에서 2026-09-14에 읽은 전문 및 섹션 제목 · 전체 4,003자

01 기능

Claude Code와 Codex에서 design-system-patterns 스킬이 하는 일

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

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

스킬 자체의 표현으로

이 스킬은 디자인 토큰, 테마 인프라, 컴포넌트 아키텍처 패턴을 활용하여 확장 가능한 디자인 시스템을 구축합니다. 원시 값을 위한 primitive 토큰, 맥락적 의미를 위한 semantic 토큰, 특정 용도를 위한 component 토큰이라는 3단계 토큰 계층을 생성한 다음, CSS custom properties와 React context provider를 사용해 테마 전환을 구현합니다.

이 스킬은 CSS, iOS, Android용 멀티 플랫폼 토큰 생성을 처리하고, Style Dictionary를 이용한 Figma-투-코드 워크플로를 구축하며, compound component, polymorphic component, variant, slot, headless UI 패턴을 사용해 컴포넌트 라이브러리를 설계합니다. 또한 prefers-color-scheme 같은 시스템 환경설정과 모션 감소 모드를 감지합니다.

산출물

CSS, iOS, Android용으로 생성된 멀티 플랫폼 토큰 파일
variant와 크기 체계를 갖춘 컴포넌트 라이브러리
디자인 시스템 문서 및 가이드라인

예시 프롬프트 보기 ↗

작동 방식

01
Primitive 토큰 정의
기반 계층 역할을 하는 색상, 크기, 폰트에 대한 원시 값 토큰을 생성합니다. 이는 헥스 코드와 픽셀 측정값 같은 리터럴 값입니다.
02
Semantic 토큰 계층 구축
primitive 토큰을 참조하여 text-primary, surface-elevated, border-default처럼 시각적 설명보다 의미를 담는 맥락적 토큰을 생성합니다.
03
컴포넌트별 토큰 생성
semantic 토큰을 참조하는 button-bg, card-border 같은 특정 컴포넌트 용도의 토큰을 정의합니다.

02 적합성 확인

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

이러한 종류의 브랜드 및 디자인 시스템 작업일 때 Claude Code 또는 Codex에서 design-system-patterns 스킬을 사용합니다. 적합성과 한계는 스킬 자체 파일에서 가져왔습니다.

적합한 경우

색상, 타이포그래피, 간격 및 그림자를 위한 디자인 토큰 생성
CSS 사용자 정의 속성을 사용한 라이트/다크 테마 전환 구현
멀티 브랜드 테마 시스템 구축
일관된 API를 갖춘 컴포넌트 라이브러리 설계
Figma 토큰을 사용한 디자인-코드 워크플로우 구축

한계 인지하기

토큰이 웹에는 존재하지만 모바일에는 없거나 그 반대인 플랫폼 격차

03 스킬 내부

design-system-patterns 스킬이 Claude Code와 Codex에 부여하는 규칙

1 SKILL.md가 에이전트에 설정하는 구체적인 지침, 기본값, 제한 — 결과를 바꾸는 파일 부분입니다.

토큰을 Semver로 버전 관리
토큰 변경을 API 변경으로 취급하고 시맨틱 버전 관리를 사용합니다. 토큰 수정은 API 변경과 동일한 방식으로 소비 애플리케이션에 영향을 미칩니다.

04 활용하기

Claude Code 또는 Codex에 design-system-patterns 설치

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

Claude Code, Codex 또는 사용 중인 에이전트에 design-system-patterns 추가

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

Terminal

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

plugins/ui-design/skills/design-system-patterns/SKILL.md에 대한 일반적인 skills CLI 형식이며, 리포지토리에서 자체 경로를 문서화할 수 있습니다.

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

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

Starter prompt

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

첫 번째 결과 확인

출력을 수락하기 전에 대화 기록과 파일에서 다음을 확인하십시오:

결과는 카탈로그가 이 스킬에 대해 나열한 대로 디자인 시스템으로 전달됩니다.
에이전트가 결과를 생성하기 전에 계획 또는 기록에서 design-system-patterns 스킬을 명시합니다.
사용자의 콘텐츠, 이름 및 숫자는 출력에서 변경되지 않습니다.

OpenDesign에서 SKILL.md 링크로 design-system-patterns를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/ui-design/skills/design-system-patterns/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 이 카탈로그에 18개의 스킬을 포함하는 전체 wshobson/agents 리포지토리에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. design-system-patterns에 대한 평점 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 사용해야 할 때디자인 토큰, 테마 설정, 멀티 브랜드 시스템, 컴포넌트 라이브러리, Figma 워크플로에 대한 시나리오를 나열합니다
핵심 기능디자인 토큰, 테마 인프라, 컴포넌트 아키텍처, 토큰 파이프라인 기능을 상세히 설명합니다
디자인 토큰네이밍 규칙과 멀티 플랫폼 생성을 갖춘 primitive, semantic, component 토큰 레이어를 정의합니다
테마 인프라CSS 커스텀 속성, React 컨텍스트, 동적 전환, 시스템 설정, 접근성 모드를 다룹니다
컴포넌트 아키텍처복합 컴포넌트, 폴리모픽 패턴, variants, slots, headless UI, style props를 설명합니다
토큰 파이프라인Figma 동기화, Style Dictionary 설정, 변환, CI/CD 통합을 설명합니다
빠른 시작CSS 커스텀 속성을 사용한 primitive 및 semantic 토큰 구조의 TypeScript 예제를 제공합니다
모범 사례일곱 가지 규칙을 나열합니다: 시맨틱 네이밍, 계층 구조, 문서화, 버전 관리, 테스트, 자동화, 마이그레이션
일반적인 문제토큰 남용, 네이밍 불일치, 다크 모드 누락, 하드코딩된 값, 순환 참조, 플랫폼 격차에 대해 경고합니다

스킬 자체 설명

"디자인 토큰, 테마 인프라 및 컴포넌트 아키텍처 패턴으로 확장 가능한 디자인 시스템을 구축합니다. 디자인 토큰 생성, 테마 전환 구현, 컴포넌트 라이브러리 구축 또는 디자인 시스템 기반 구축 시 사용합니다."

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

Design System Patterns

실제 브랜드 및 design-system 작업 과제에서 design-system-patterns 실행.

OpenDesign를 다운로드하고, SKILL.md 링크에서 design-system-patterns를 가져온 다음, 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill design-system-patterns