“이 디자인대로 만들어”가 정말 되는 세상

AI 코딩 에이전트에게 UI를 만들라고 하면, 매번 비슷하면서도 다른 결과가 나온다. 색상이 다르고, 간격이 다르고, 버튼 스타일이 들쭉날쭉하다. Figma 시안을 스크린샷으로 보여줘도 “대략 비슷한” 수준에 그친다.

Google Stitch 팀이 새로운 접근법을 제안했다. 방법은 의외로 단순했다: 디자인 시스템을 마크다운으로 적어서 프로젝트 루트에 넣는 것.

DESIGN.md란 무엇인가

DESIGN.md는 프로젝트의 시각적 정체성을 마크다운으로 기술한 파일이다. AI 에이전트가 이 파일을 읽고 일관된 UI를 생성하도록 안내하는 역할을 한다.

이미 README.md가 프로젝트 설명을, AGENTS.md(또는 CLAUDE.md)가 빌드·코딩 방법을 정의하듯, DESIGN.md는 프로젝트의 룩앤필을 정의한다.

핵심 인사이트: 마크다운은 LLM이 가장 잘 이해하는 포맷이다. Figma 파일이나 JSON 디자인 토큰과 달리 별도 파싱이 필요 없고, 어떤 LLM이든 즉시 해석할 수 있다.

DESIGN.md 권장 구조

Google Stitch 팀이 제안한 포맷은 9개 섹션으로 구성된다. 공식 표준은 아니며 아직 초기 단계이지만, awesome-design-md 같은 커뮤니티 프로젝트를 중심으로 채택이 늘고 있다:

이 구조가 강력한 이유는 선언적이라는 점이다. 컴포넌트를 구현하지 않고 “어떻게 보여야 하는가”만 서술한다. AI가 React, Vue, Svelte 어떤 프레임워크로든 자유롭게 구현할 수 있다.

awesome-design-md: 58개 실제 사이트 컬렉션

VoltAgent 팀이 관리하는 awesome-design-md는 실제 웹사이트에서 CSS 값을 추출해 DESIGN.md로 변환한 컬렉션이다. 7개 카테고리에 걸쳐 58개 사이트가 등록되어 있다.

카테고리별 대표 사이트

설치와 사용

# 원하는 사이트의 DESIGN.md를 프로젝트에 추가
npx getdesign@latest add claude
npx getdesign@latest add vercel
npx getdesign@latest add stripe

이 명령 하나로 해당 사이트의 DESIGN.md가 프로젝트 루트에 복사된다. AI 에이전트가 자동으로 읽고 그 스타일대로 UI를 생성한다.

디자인 철학 비교: 6개 사이트 심층 분석

실제 DESIGN.md 내용을 비교하면 각 기업의 디자인 철학이 극명하게 드러난다.

Claude (Anthropic)

• 분위기: 따뜻한 에디토리얼. 테라코타(#DA7756) 악센트
• 특징: AI 도구임에도 기술적 차가움을 피하고 “출판물” 느낌을 추구
• 폰트: Copernicus (세리프) — 기술 기업에서 세리프를 쓰는 드문 사례

Vercel

• 분위기: 극도의 모노크롬. 배경 #000, 텍스트 #FFF
• 특징: “코드의 미학”을 시각적으로 구현. 불필요한 색상을 모두 제거
• 철학: 타이포그래피와 여백만으로 위계를 전달

Linear

• 분위기: 고밀도 인터랙티브 UI
• 특징: 바이올렛(#5E6AD2) 악센트, 풍부한 호버 효과와 마이크로인터랙션
• 철학: “도구는 느껴져야 한다” — 속도감 있는 인터페이스 추구

Stripe

• 분위기: 금융 신뢰성 + 기술 우아함
• 특징: Blurple(#635BFF)이라는 고유 악센트, 그래디언트 활용
• 철학: 복잡한 결제 로직을 “간단해 보이게” 만드는 디자인

Notion

• 분위기: 최소한의 크롬, 콘텐츠 최우선
• 특징: 블루(#2383E2) 악센트, 아이코닉한 이모지 시스템
• 철학: UI가 콘텐츠를 방해하지 않는 “투명한 도구”

Supabase

• 분위기: 다크 우선 개발자 인터페이스
• 특징: 에메랄드 그린(#3ECF8E) 악센트, 코드 블록과 터미널 미학
• 철학: 개발자가 “집 같은” 편안함을 느끼는 UI

실전 활용법

1. 기존 사이트 스타일로 프로토타이핑

프로젝트에 DESIGN.md 추가 후:
"이 디자인 시스템을 따라서 대시보드 페이지를 만들어줘"

Linear 스타일의 프로젝트 관리 도구나 Stripe 스타일의 결제 페이지를 빠르게 프로토타이핑할 수 있다.

2. 여러 DESIGN.md 혼합

"Claude의 색상 팔레트 + Linear의 컴포넌트 스타일 + Notion의 레이아웃으로 조합해줘"

마크다운이라 여러 파일의 섹션을 잘라서 붙일 수 있다. JSON 디자인 토큰에서는 어려운 작업이다.

3. 자체 DESIGN.md 작성

기존 프로젝트가 있다면 Google Stitch의 9개 섹션 구조를 따라 직접 작성할 수 있다. 핵심은:

• 색상은 hex 값 + 시맨틱 이름 + 기능적 역할 모두 명시
• 컴포넌트는 기본·호버·포커스·비활성 상태를 모두 기술
• Do’s and Don’ts로 명확한 가드레일 설정

4. Vibe Coding과의 시너지

“바이브 코딩”(AI에게 자연어로 코딩을 지시하는 방식)에서 DESIGN.md는 일관성 앵커 역할을 한다. 매번 “버튼을 둥글게, 색상은 파란색으로”라고 말할 필요 없이 DESIGN.md가 모든 디자인 결정을 자동으로 적용한다.

AGENTS.md와 DESIGN.md의 관계

두 파일은 AI 에이전트의 코드 인터페이스와 디자인 인터페이스를 각각 담당한다:

프로젝트 루트/
├── README.md        ← 사람이 읽는 프로젝트 설명
├── AGENTS.md        ← AI가 읽는 빌드/코딩 지침
├── DESIGN.md        ← AI가 읽는 디자인 시스템
└── src/             ← 실제 코드

이 조합으로 AI 에이전트는 “어떻게 만들어야 하는가”(AGENTS.md)와 “어떻게 보여야 하는가”(DESIGN.md)를 모두 이해한 상태에서 코드를 생성한다.

한계와 주의점

• SSOT 동기화 문제: 실제 CSS/Tailwind 코드와 DESIGN.md가 따로 관리되므로 동기화가 깨질 수 있다. CSS에서 DESIGN.md를 자동 추출하는 도구가 아직 부족하다
• 토큰 비용: 상세한 DESIGN.md는 수천 줄이 될 수 있어 프롬프트 크기를 급격히 키운다. 컨텍스트 윈도우를 압박하고 API 비용을 올린다
• 해석의 불확실성: 마크다운은 구조적이지만 여전히 자연어다. 같은 DESIGN.md를 다른 LLM에 넣으면 미묘하게 다른 결과가 나온다
• 브랜드 권리: 실제 사이트의 디자인을 그대로 복제하는 것은 상업적 사용에서 주의 필요

누가 주목해야 하나

• AI로 프로토타이핑하는 개발자: DESIGN.md 하나로 일관된 UI를 반복 생성할 수 있다
• 디자인 시스템 운영자: 기존 디자인 토큰을 마크다운으로 변환하면 AI 도구와의 호환성이 올라간다
• 프리랜서·에이전시: 클라이언트에게 “어떤 느낌으로?”라고 물을 때 DESIGN.md 컬렉션을 보여줄 수 있다
• 바이브 코더: Cursor, Claude Code, Copilot 등에서 일관된 디자인을 유지하는 가장 가벼운 방법이다

참고 자료

• Google Stitch 공식 문서 — DESIGN.md 포맷 명세
• awesome-design-md (GitHub) — 58개 사이트 컬렉션
• getdesign CLI — DESIGN.md 설치 도구

관련 글

• 구글 스티치 2.0 사용법: AI로 앱 화면 만드는 무료 디자인 도구 총정리
• Claude Code는 왜 TUI를 골랐을까: 2026년 터미널 UI 부활의 진짜 이유
• Claude Opus 4.7과 Claude Design — Anthropic이 자기 모델로 자기 도구를 먹였다