Theming System작성자 Owl-Listener

Theming System 스킬.

구조를 중복하지 않고도 하나의 컴포넌트 라이브러리의 외관을 바꿀 수 있게 합니다.

디자인 시스템
테마 설정

소스 검토 · Theming SystemSKILL.md

작업 디자인 시스템 산출물 • 오버라이드 규칙을 포함한 3계층 토큰 아키텍처 • 필요한 색상, 브랜드 또는 밀도 모드를 다루는 테마 매트릭스 • 컴포넌트 적용 범위와 고정 토큰 대 테마 적용 가능 토큰에 대한 가이드 시작하기 전에 구현에는 프로젝트의 토큰 시스템 또는 플랫폼의 동등한 기능을 사용합니다. 런타임 전환은 직접 구축하고 테스트해야 합니다.

편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

토큰으로 여러 테마 지원하기

여러 브랜드, 색상 모드, 밀도 변형에 걸쳐 공유되는 컴포넌트를 위한 계층형 테마 아키텍처입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Theming System은 테마 간 차이를 계층형 토큰 아키텍처에 둡니다. 원시 팔레트 값이 시맨틱 역할에 연결되고, 이것이 다시 컴포넌트 범위 토큰에 연결됩니다. 테마 오버라이드는 주로 시맨틱 레이어를 변경하므로 동일한 컴포넌트가 서로 다른 브랜드나 색상 모드에 쓰일 수 있습니다.

소스는 테마를 단순한 색상 반전과 구분합니다. 다크 표면, 엘리베이션, 채도, 이미지 변형에는 의도적인 처리가 필요합니다. 또한 밀도를 테마 차원으로 나열하므로, 이 사양은 색상 외의 영역에도 적용할 수 있습니다.

예상 산출물

오버라이드 규칙을 포함한 3계층 토큰 아키텍처
필요한 색상, 브랜드 또는 밀도 모드를 다루는 테마 매트릭스
컴포넌트 적용 범위와 고정 토큰 대 테마 적용 가능 토큰에 대한 가이드

예시 브리프 보기

브리프에서 검토까지

01
토큰 레이어 분리
원시 프리미티브, 목적 기반 별칭, 컴포넌트 수준 참조를 식별합니다.
02
테마 오버라이드 매핑
컴포넌트 계약을 유지하면서 요청된 각 테마에 맞게 시맨틱 역할을 변경합니다.
03
전체 라이브러리 점검
지원하는 모든 테마에서 이미지와 OS 설정 동작을 포함해 모든 컴포넌트를 검토합니다.

02 활용 상황

사용 시기

구현에는 프로젝트의 토큰 시스템 또는 플랫폼의 동등한 기능을 사용합니다. 런타임 전환은 직접 구축하고 테스트해야 합니다.

적합한 경우

다중 브랜드 제품화이트 라벨 또는 서브 브랜드 인터페이스가 컴포넌트 라이브러리를 공유해야 할 때 유용합니다.
라이트와 다크 그 이상고대비 또는 밀도 변형을 위한 구조도 제공합니다.

확인할 한계

단일 팔레트 작업이 아님색상 한 세트를 고르는 것만으로 유지 관리 가능한 테마 아키텍처가 만들어지지는 않습니다.
자동 대비 인증 없음실제 텍스트, 표면, 상태 조합마다 여전히 테스트가 필요합니다.

준비할 입력

지원 테마브랜드, 색상 모드, 대비 모드, 밀도 요구 사항을 나열하세요.
기존 토큰팔레트, 시맨틱 별칭, 컴포넌트 참조를 제공하세요.
고정 브랜드 요소테마 간에 바뀌면 안 되는 자산이나 값을 식별하세요.

03 핵심 결정

중요한 결정

올바른 레이어에서 오버라이드
시맨틱 별칭을 쓰면 브랜드별 색상이 컴포넌트 구현 곳곳에 흩어지는 것을 막을 수 있습니다.
자산도 테마의 일부
이미지와 일러스트에는 변형이 필요할 수 있으며, CSS 변수만 바꾸는 것으로는 다크 모드가 일관되지 않을 수 있습니다.

04 예시 브리프

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 특정 디자인 방법을 설명합니다.

업스트림 소스 파일

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

구현에는 프로젝트의 토큰 시스템 또는 플랫폼의 동등한 기능을 사용합니다. 런타임 전환은 직접 구축하고 테스트해야 합니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 조정하세요.

예시 브리프

라이트와 다크 모드를 갖춘 두 브랜드가 공유하는 컴포넌트 라이브러리에 theming-system을 사용하세요. 프리미티브, 시맨틱, 컴포넌트 레이어를 정의하고, 고정 토큰을 식별하며, 테마 오버라이드가 어떻게 작동하는지 보여 주세요. 색상 반전만으로 충분하다고 가정하지 말고, 이미지 변형과 컴포넌트별·테마별 QA 매트릭스를 포함하세요.

결과 점검

실제 출력물을 다음의 관찰 가능한 기준과 비교해 확인하세요.

컴포넌트 토큰은 문서화된 시맨틱 역할을 통해 해석됩니다.
테마 적용 가능한 값과 고정 값이 구분되어 있습니다.
테스트 매트릭스에 지원하는 모든 테마가 포함되어 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록이 해당 스킬이 번들로 포함되어 있다거나, 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻은 아닙니다.

OpenDesign 다운로드 퀵스타트 읽기

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자: Owl-Listener
저장소: Owl-Listener/designer-skills
스킬 파일: design-systems/skills/theming-system/SKILL.md
라이선스: MIT
검토한 스냅샷: 2026-10-07 · 9a6930cf84a8

편집 소스 요약

여러 브랜드, 색상 모드, 밀도 변형에 걸쳐 공유되는 컴포넌트를 위한 계층형 테마 아키텍처입니다.

링크된 소스를 바탕으로 OpenDesign이 직접 작성한 요약입니다. 저장소 스타 수는 날짜 기준의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

테마는 어디에서 토큰을 오버라이드해야 하나요?

소스는 주요 오버라이드를 원시 값과 컴포넌트별 토큰 사이의 시맨틱 레이어에 둡니다.

밀도도 테마가 될 수 있나요?

네. 소스는 색상 및 브랜드 모드와 함께 comfortable, compact, spacious 밀도를 포함합니다.

특정 구현 도구를 규정하나요?

하나의 스택을 강제하지 않고 CSS 사용자 지정 속성, 토큰 파일, Figma 변수 모드, 런타임 전환을 나열합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

OpenDesign 다운로드 디자인 스킬 둘러보기