google-labs-code/design.md

어떤 프로젝트인가요?

핵심 기능

• 01YAML 디자인 토큰과 그 근거를 설명하는 Markdown을 하나의 파일에 담습니다.
• 02lint 명령으로 구조, 잘못된 토큰 참조, WCAG 대비율을 검증합니다.
• 03diff 명령으로 두 디자인 시스템 버전 사이의 토큰 단위 변경 사항을 보고합니다.
• 04토큰을 Tailwind v3 및 v4 설정과 W3C DTCG JSON으로 내보냅니다.
• 05TypeScript linter API와 프롬프트 컨텍스트를 제공하는 spec 명령을 제공합니다.

활용 사례

• 코딩 에이전트에 브랜드의 색상, 타이포그래피, 컴포넌트 스타일을 지속적으로 설명합니다.
• CI에서 디자인 시스템의 잘못된 토큰 참조와 대비율이 낮은 컴포넌트 색상을 확인합니다.
• export 명령으로 디자인 토큰을 Tailwind 프로젝트에 동기화합니다.

빠른 시작

1. 1

   CLI 패키지를 설치합니다

   npm install @google/design.md
2. 2

   DESIGN.md 파일을 검증합니다

   npx @google/design.md lint DESIGN.md

사용 전 알아둘 점

• !이 형식은 알파 버전이며, 성숙해지면서 변경될 수 있습니다.
• !이 프로젝트는 Google 오픈소스 취약점 보상 프로그램의 대상이 아닙니다.

토픽

자주 묻는 질문

design.md은(는) 무엇인가요?

코딩 에이전트가 일관된 UI를 만들 수 있도록 디자인 토큰과 설명문으로 시각적 정체성을 기술하는 형식 사양과 CLI입니다. DESIGN.md는 코딩 에이전트에 디자인 시스템을 설명하는 파일 형식입니다. 각 파일은 YAML front matter로 작성한 기계 판독형 디자인 토큰과, 각 값이 존재하는 이유 및 적용 방법을 설명하는 Markdown 문장을 함께 담습니다. 토큰은 정확한 색상, 타이포그래피, 간격, 모서리 둥글기와 컴포넌트 속성을 지정하고, 설명문은 분위기, 팔레트의 역할, 사용 규칙 같은 의도를 다룹니다.

design.md은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

design.md은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

design.md은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. design.md의 마지막 커밋은 2026년 10월 16일입니다.

design.md은(는) 어디에 사용할 수 있나요?

코딩 에이전트에 브랜드의 색상, 타이포그래피, 컴포넌트 스타일을 지속적으로 설명합니다. CI에서 디자인 시스템의 잘못된 토큰 참조와 대비율이 낮은 컴포넌트 색상을 확인합니다. export 명령으로 디자인 토큰을 Tailwind 프로젝트에 동기화합니다.

design.md는 어떻게 설치하나요?

CLI 패키지를 설치합니다: npm install @google/design.md DESIGN.md 파일을 검증합니다: npx @google/design.md lint DESIGN.md

design.md은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/google-labs-code/design.md