디자인 시스템의 구성
생성된 디자인 시스템에는 다음이 포함됩니다.- 토큰(Tokens) — 시스템의 나머지 부분이 참조하는 이름 붙은 값(색상, 간격, 반경)
- 색상(Colors) — 역할(primary, surface, accent 등)이 부여된 팔레트
- 타이포그래피(Typography) — 폰트 패밀리, 크기, 굵기
- 예시 컴포넌트(Example components) — 시스템의 사용 예시를 보여주는 2~3개의 빌드된 컴포넌트
- 로고와 브랜드 에셋 — 명확하게 제공한 경우 포함됨
저장 방식
생성된 시스템은 프로젝트 안에 살아있는 스타일 가이드로 존재합니다.tokens.json의 토큰이 컴포넌트가 사용하는 CSS 변수(예: src/index.css)로 반영됩니다. DESIGN.md는 이를 문서로 표현한 것으로, 사람이 읽을 수 있고 Agent도 사용할 수 있습니다.
소스로서의 DESIGN.md 활용하기
기존DESIGN.md는 새 디자인 시스템의 소스가 될 수 있습니다. 시스템을 만들 때 Figma URL, 웹사이트, 코드, 참고 이미지 같은 다른 소스와 함께 이를 지정하세요.