디자인 시스템 설계: DESIGN.md 생성은(는) 무엇을 하나요?
Stitch 프로젝트를 분석하여 시멘틱 디자인 시스템을 DESIGN.md 파일로 합성합니다.
개요
이 도구는 Stitch 기반 프로젝트의 디자인 시스템을 정적으로 분석하고, 일관된 문서(DESIGN.md)를 생성합니다.
주요 기능
- 시멘틱 토큰 추출: 색상, 타이포그래피, 간격 등의 디자인 토큰을 추출합니다.
- 컴포넌트 변형 문서화: 각 컴포넌트의 변형(variant), 상태(state), 크기(size) 등을 문서화합니다.
- 상호작용 패턴: hover, focus, active, disabled 등 상호작용 패턴을 기록합니다.
- 접근성 고려 사항: ARIA 속성, 키보드 내비게이션 등을 포함합니다.
- 사용 예시: 각 컴포넌트의 기본 사용법과 함께 코드 스니펫을 제공합니다.
사용 방법
- 프로젝트 루트에서 다음 명령어를 실행합니다:
npx google-labs-code/design-md
- 생성된
DESIGN.md파일을 확인합니다.
출력 예시
# 디자인 시스템 – MyApp
## 디자인 토큰
| 토큰 이름 | 값 | 용도 |
|-------------------|-------------|-------------|
| --color-primary | #1a73e8 | 주요 액션 색상 |
| --color-background | #ffffff | 기본 배경 |
| --font-size-base | 16px | 본문 텍스트 크기 |
## 컴포넌트: Button
### 변형
- `primary` (기본): 주요 액션
- `secondary` (보조): 부수적 액션
- `ghost` (고스트): 경량 액션
### 상태
- `default` (기본): 일반 상태
- `hover` (호버): 마우스 오버 시
- `active` (활성): 클릭 중
- `disabled` (비활성): 비활성화 상태
요구 사항
- Node.js 16+
- 프로젝트가 Stitch 디자인 시스템을 사용하고 있어야 합니다.
참고
이 도구는 디자인 시스템의 소스 코드를 분석하여 문서를 생성하므로, 코드 변경 사항을 바로 반영할 수 있습니다. 자세한 내용은 공식 문서를 참조하세요.