01 기능 소개
디자인 토큰 카테고리, 3단계 관계, 네이밍, 사용 및 버전 관리 가이드를 다룹니다.
Design Token는 디자인 시스템의 기반을 정의합니다. 색상, 간격, 타이포그래피, 고도, 테두리, 모션을 다루며, 원시 값을 시맨틱한 의미와 연결하는 네이밍 및 사용 규칙을 포함합니다.
3단계 구조는 전역 값, 시맨틱 별칭, 컴포넌트별 토큰을 구분합니다. 이 구분 덕분에 팀은 값이 사용되는 이유를 잃지 않고 값을 변경할 수 있습니다. 기존 사용 현황 감사와 멀티 브랜드 매핑은 명시적으로 별도의 작업입니다.
예상 산출물
제품에 필요한 색상, 레이아웃, 타입, 고도, 모션 값을 나열합니다.
원시 스케일과 시맨틱 역할을 분리하고, 유용한 경우에만 컴포넌트별 이름을 추가합니다.
별칭을 적용할 위치와, 컴포넌트가 하드코딩된 값 대신 별칭을 참조하는 방법을 설명합니다.
02 활용 상황
기존 시각적 값, 컴포넌트 예시, 네이밍 제약 사항을 제공하세요. 이 스킬은 토큰 이름과 관계를 정의하며, 내보내기 도구와 프레임워크 통합은 별도 설정이 필요합니다.
03 핵심 결정
시맨틱 별칭은 원시 값이 바뀌어도 의도를 보존합니다.
전역 색상과 버튼 상태 색상을 서로 바꿔 쓸 수 있는 이름으로 취급해서는 안 됩니다.
04 예시 브리프
아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.
designer-skills 저장소에서 이 작업의 SKILL.md를 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 명시되어 있지 않습니다.
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md기존 시각적 값, 컴포넌트 예시, 네이밍 제약 사항을 제공하세요. 이 스킬은 토큰 이름과 관계를 정의하며, 내보내기 도구와 프레임워크 통합은 별도 설정이 필요합니다.
스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 사항을 조정하세요.
design-token를 사용해 이 소규모 제품 시스템의 토큰 레이어를 정의하세요. 원시 스케일, 시맨틱 별칭, 필요한 컴포넌트 토큰을 분리하세요. 제공된 버튼과 카드 예시를 매핑하고 네이밍 규칙을 문서화하되, 아직 구현하지 않은 내보내기 파이프라인이 있다고 주장하지 마세요.실제 출력이 다음의 관찰 가능한 기준을 충족하는지 확인하세요.
OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻이 아닙니다.
05 출처 및 라이선스
이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.
9a6930cf84a8디자인 토큰 카테고리, 3단계 관계, 네이밍, 사용 및 버전 관리 가이드를 다룹니다.
링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐, 스킬 사용량이나 품질 점수가 아닙니다.
06 시작 전 질문
OpenDesign
브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md