Date: 2026-04-11

Description

1. 핵심 주제

DESIGN.md 파일은 AI 에이전트를 활용하여 일관성 있는 사용자 인터페이스(UI)를 생성하기 위한 텍스트 기반의 디자인 시스템 문서입니다.

2. 주요 개념 정리

  • DESIGN.md 정의: Google Stitch가 도입한 새로운 개념으로, AI 에이전트가 읽어 일관된 UI를 생성하는 평문 디자인 시스템 문서입니다.
  • 작동 원리: DESIGN.md는 마크다운 형식으로 작성되며, 프로젝트 루트에 추가하면 AI 에이전트가 이를 읽고 UI 디자인을 생성합니다.
  • 중요한 주장: DESIGN.md는 Figma나 JSON과 같은 복잡한 도구 없이도 AI 에이전트가 쉽게 이해할 수 있는 UI 디자인 형식을 제공합니다.
  • 근거: LLM(대규모 언어 모델)은 마크다운 형식을 가장 잘 읽기 때문에 DESIGN.md는 특별한 파싱이나 구성이 필요 없습니다.

3. 세부 설명

DESIGN.md가 포함하는 주요 섹션

  1. Visual Theme & Atmosphere: 분위기, 밀도, 디자인 철학 등을 다룹니다.
  2. Color Palette & Roles: 색상 이름과 역할, 16진수 코드 등을 제공합니다.
  3. Typography Rules: 글꼴 패밀리와 계층 구조를 정리합니다.
  4. Component Stylings: 버튼, 카드, 입력란, 네비게이션 요소의 상태를 포함한 스타일링을 설명합니다.
  5. Layout Principles: 공간 배율, 그리드, 여백 철학을 다룹니다.
  6. Depth & Elevation: 그림자 시스템과 표면 계층 구조를 설명합니다.
  7. Do's and Don'ts: 디자인 가이드라인과 반패턴을 명시합니다.
  8. Responsive Behavior: 반응형 디자인의 브레이크포인트, 터치 타겟, 축소 전략 등을 포함합니다.
  9. Agent Prompt Guide: 색상 참조 및 사용 가능한 프롬프트를 제공합니다.

사용 방법

  • 프로젝트의 루트에 DESIGN.md를 복사합니다.
  • AI 에이전트에게 해당 DESIGN.md를 사용하도록 지시합니다.

4. 예시 / 적용

  • 브랜드 예시: Claude, Cursor, Vercel, Linear, Apple 등 60개 이상의 인기 브랜드와 웹사이트에서 DESIGN.md 파일을 제공합니다.
  • 시각적 카탈로그: 각 사이트는 DESIGN.md와 함께 색상 견본, 글꼴 크기, 버튼, 카드 등을 보여주는 preview.html, preview-dark.html 파일을 포함합니다.

5. 시사점

  • 디자인 단순화: 복잡한 도구 없이도 AI 에이전트가 일관된 UI를 생성할 수 있어 개발자의 작업 효율성을 높입니다.
  • 확장성: 다양한 브랜드와 웹사이트에 맞춘 DESIGN.md 파일을 통해 다양한 디자인 요구를 충족합니다.
  • 접근성 향상: 마크다운 형식을 통해 누구나 쉽게 수정하고 이해할 수 있는 디자인 시스템을 제공합니다.

핵심 정리

  • DESIGN.md는 AI 에이전트를 위한 텍스트 기반 디자인 시스템입니다.
  • Google Stitch가 도입한 이 시스템은 마크다운 형식으로 작성됩니다.
  • 복잡한 도구 없이도 AI가 UI 디자인을 생성하는 데 유용합니다.
  • 주요 섹션은 테마, 색상, 타이포그래피, 컴포넌트 스타일링, 레이아웃 등을 다룹니다.
  • 다양한 브랜드의 디자인 요구 사항을 쉽게 충족할 수 있습니다.
  • DESIGN.md는 프로젝트에 간단히 추가하여 사용할 수 있습니다.

Timeline

Source: https://github.com/VoltAgent/awesome-design-md/tree/main