DESIGN.md 검사기

YAML 프런트매터, 필수인 primary 색상, 색상이 색상 형식(hex, rgb, hsl, oklch, 색상 이름 등)으로 작성되었는지, 폰트 크기와 반경이 px, em, rem 단위인지, 타이포그래피 속성, 컴포넌트 속성과 그 토큰 참조(YAML이 텍스트로 읽지 않는, 따옴표 없는 참조 포함), omitted 목록, 중복되거나 순서가 어긋난 섹션, 그리고 각 컴포넌트의 텍스트 색상과 배경 색상 간 대비가 WCAG AA 최소 기준인 4.5:1을 충족하는지 검사해요. 오류가 있으면 파일이 유효하지 않고, 경고는 고칠 만한 부분을 알려 줘요.

아니요. 검사는 전적으로 브라우저에서 실행돼요. 붙여 넣은 텍스트나 선택한 파일은 저희 서버로 전송되지 않아요. 미리보기가 보내는 요청은 폰트 스타일시트뿐이에요. 저희 서버가 Google Fonts에서 스타일시트를 가져오며, 이 요청에는 타이포그래피 토큰의 폰트 패밀리 이름만 포함돼요.

Stitch에서 사용하고 google-labs-code/design.md 저장소에 공개된 Google의 DESIGN.md 형식을 따라요. 검사기는 Design Extractor가 생성하는 모든 DESIGN.md를 검사할 때 쓰는 것과 같은 규칙에, 컴포넌트 색상 대비 검사를 더해 적용해요.

"{colors.brand}" 같은 참조는 프런트매터에 실제로 있는 토큰을 가리켜야 해요. 이 예시에서는 colors 아래의 brand 항목이에요. 누락된 토큰을 추가하거나, 참조가 존재하는 토큰을 가리키도록 바꾸세요. 참조는 따옴표로 감싸 두세요. 따옴표가 없는 {colors.brand}는 YAML이 텍스트가 아닌 매핑으로 읽어요.

네. Google의 오픈 소스 명령줄 도구로 파이프라인에서 파일을 검사할 수 있어요: npx @google/design.md lint DESIGN.md를 실행하세요. JSON 보고서를 출력하고 오류가 있으면 종료 코드 1로 끝나므로, 파일이 깨지면 작업이 실패해요. 규칙 세트는 이 페이지와 겹치지만 일부 심각도는 달라요.