작업 방식
Design Tokens는 새 컴포넌트가 참조할 값을 정합니다. 먼저 기존 CSS 변수, 테마 프로바이더, 토큰 파일과 프레임워크 의존성을 확인한 뒤 해당 기능의 디자인 브리프를 읽습니다. 시스템이 이미 있다면 교체하지 않고 부족한 부분을 확장합니다.
결과물은 프로젝트 스택에 맞춰 CSS 사용자 정의 속성, Tailwind 설정 또는 테마 모듈로 제공됩니다. 문서에 명시된 워크플로는 라이트·다크 팔레트를 모두 다루며 간격, 타이포그래피, 레이아웃, 모션과 반응형 값도 포함합니다. 에이전트는 선택한 시각적 방향과 그 방향에서 벗어난 결정을 설명합니다.
예상 산출물
- 프로젝트가 사용하는 형식의 토큰 파일 또는 테마 확장.
- 시맨틱 역할을 갖추고 의도적으로 설계한 라이트·다크 팔레트.
- 디자인 방향과 구현 선택에 대한 간단한 설명.
브리프에서 검토까지
- 01기존 기반 확인
CSS 변수, Tailwind 설정, 테마 프로바이더와 토큰 내보내기를 찾습니다. 생성 전에 다크 모드나 모션 값 누락 등의 빈틈을 확인합니다.
- 02브리프와 스택 연결
진행 중인 기능의 브리프와 미적 방향을 읽습니다. 애플리케이션에 맞는 토큰 형식을 선택하며 스택이 불분명하면 CSS 사용자 정의 속성을 기본으로 사용합니다.
- 03서로 연결된 척도 정의
시맨틱 색상과 일관된 간격, 타이포그래피 및 레이아웃 값을 만듭니다. 컴포넌트가 참조할 수 있는 모션과 브레이크포인트 분류도 포함합니다.
- 04두 테마 모드 구현
다크 값을 의도적으로 설계하고 원문의 시스템 선호 및 수동 테마 패턴을 지원합니다. 새 값이 기존 시스템을 어떻게 확장하는지 설명합니다.