망가진 AI UI를 수동으로 수정하는 일을 멈추세요

AI 코딩 도구는 디자인에서 실패할 때가 많습니다.

버튼을 요청하면 AI는 한 가지 색상의 파란색을 줍니다. 다른 컴포넌트를 요청하면 AI는 또 다른 색상의 파란색을 줍니다. 이는 AI에게 엄격한 디자인 시스템이 없기 때문에 발생합니다.

Google Labs는 이 문제를 해결하기 위해 design.md를 출시했습니다.

이는 Cursor, Claude Code, GitHub Copilot과 같은 도구가 디자인 규칙을 읽을 수 있게 해주는 사양(specification)입니다. 이를 통해 일관성 없는 간격, 잘못된 폰트, 색상 이탈을 방지할 수 있습니다.

작동 방식:

design.md는 두 부분으로 구성된 Markdown 파일입니다.

  • YAML Front Matter: 정밀한 디자인 토큰을 포함합니다. 여기서 색상, 타이포그래피, 간격, 코너 반경(corner radii)을 정의합니다.
  • Markdown Body: 디자인 근거(rationale)를 포함합니다. 특정 색상을 왜 사용하는지, 언제 사용을 피해야 하는지를 설명합니다.

이 구조는 AI가 데이터와 로직을 모두 이해하도록 돕습니다. AI는 단순히 헥스(hex) 코드만 보는 것이 아니라, 특정 색상이 헤드라인용이며 본문 텍스트에는 사용해서는 안 된다는 점을 이해하게 됩니다.

design.md CLI의 주요 기능:

  • Linting: 토큰이 올바른지 확인합니다. WCAG AA 접근성 대비(contrast)까지 확인합니다.
  • Diffing: 디자인을 업데이트할 때 어떤 토큰이 변경되었는지 정확히 보여줍니다.
  • Exporting: 디자인 파일을 Tailwind CSS, JSON 또는 W3C Design Tokens로 변환합니다.
  • Spec: AI에게 파일을 읽는 방법을 가르치기 위해 전달할 수 있는 가이드를 생성합니다.

이것이 중요한 이유:

대부분의 개발자는 일반적인 규칙을 위해 CLAUDE.md 또는 AGENTS.md를 사용합니다. 도움이 되긴 하지만, 이 파일들은 대부분 자연어로 되어 있어 AI가 여전히 구체적인 값을 추측해야 합니다.

design.md는 디자인 시스템을 기계가 읽을 수 있는 데이터로 변환합니다.

사용 방법:

  1. 프로젝트 루트에 DESIGN.md를 배치합니다.
  2. CLAUDE.md 또는 Cursor rules에 다음 문구를 추가합니다: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

AI에게 "색상이 틀렸어"라고 반복해서 말하는 일을 멈추세요. AI에게 단일 진실 공급원(single source of truth)을 제공하세요.

Source: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Optional learning community: https://t.me/GyaanSetuAi