브랜드 디자인을 AI 에이전트가 이해하는 언어로 바꿔주는 마크다운 모음
프로젝트 루트에 특정 브랜드의 디자인 규칙을 담은 파일 하나만 넣으면, AI 코딩 에이전트가 그 브랜드의 색감과 레이아웃을 그대로 따라 UI를 만들어냅니다. 이 저장소는 구글 스티치가 제안한 DESIGN.md 형식을 기반으로, 실제 웹사이트에서 추출한 디자인 시스템을 마크다운 문서로 정리해 제공합니다. 복잡한 디자인 토큰을 별도 도구로 변환할 필요 없이, AI가 가장 잘 읽는 텍스트 형식으로 바로 사용할 수 있습니다.
DESIGN.md가 해결하는 문제
기존에는 AI 에이전트가 일관된 UI를 생성하려면 Figma 내보내기나 JSON 스키마 같은 복잡한 설정이 필요했습니다. DESIGN.md는 이러한 장벽을 없애고, 평문 마크다운 파일 하나로 디자인 언어를 전달합니다. 이 파일은 프로젝트의 '어떻게 만들어야 하는가'를 정의하는 AGENTS.md와 달리, '어떻게 보여야 하는가'를 정의합니다. AI 에이전트나 구글 스티치가 이 파일을 읽으면, 해당 브랜드의 시각적 정체성을 즉시 파악하고 일관된 화면을 생성합니다.
포함된 브랜드와 카테고리
저장소에는 다양한 산업의 인기 브랜드 디자인 시스템이 카테고리별로 정리되어 있습니다.
- AI 및 LLM 플랫폼 Claude, Cohere, ElevenLabs 등 AI 서비스의 디자인 시스템이 포함되어 있습니다. 각 플랫폼의 고유한 색감과 레이아웃 스타일을 반영합니다.
- 개발자 도구 및 IDE Cursor, Vercel, Warp 등 개발자 친화적인 도구의 디자인이 정리되어 있습니다. 다크 테마와 코드 중심의 레이아웃 특징을 담고 있습니다.
- 핀테크 및 암호화폐 Stripe, Coinbase, Revolut 등 금융 서비스의 신뢰감을 주는 디자인 시스템이 포함되어 있습니다. 브랜드 컬러와 데이터 시각화 스타일을 정의합니다.
- 레트로 웹 시리즈 1996년 Dell, 2001년 Nintendo.com 등 과거 웹 디자인을 재현하는 파일들이 있습니다. 특정 시대감의 UI를 생성할 때 유용합니다.
파일 내부 구조와 활용법
각 DESIGN.md 파일은 9개 섹션으로 구성되어 디자인의 모든 측면을 정의합니다. 시각적 테마, 색상 팔레트, 타이포그래피 규칙, 컴포넌트 스타일, 레이아웃 원칙, 깊이감, 금지 사항, 반응형 동작, 에이전트 프롬프트 가이드까지 상세히 기록되어 있습니다. 사용법은 매우 간단합니다. 원하는 사이트의 DESIGN.md 파일을 프로젝트 루트에 복사한 뒤, AI 에이전트에게 이 파일을 참고해 페이지를 만들어달라고 지시하기만 하면 됩니다. 각 사이트 폴더에는 디자인 시스템을 보여주는 preview.html과 다크 모드 버전인 preview-dark.html도 함께 제공됩니다.
사용 전 확인 사항
이 저장소는 공개된 웹사이트의 CSS 값을 추출해 만든 문서이므로, 특정 브랜드의 시각적 정체성을 소유하지 않는다는 점을 명시하고 있습니다. 또한, 이 파일들은 AI 에이전트가 일관된 UI를 생성하도록 돕는 도구일 뿐, 실제 브랜드의 공식 디자인 시스템은 아닙니다. 기여를 원할 경우, 기존 파일의 오류 수정이나 토큰 보완이 가능하며, PR을 열기 전에 이슈를 통해 유지보수자와 논의하는 것이 권장됩니다.
