DESIGN.md 파일 하나로 디자인-개발 연결하는 Google Stitch 워크플로우 가이드 (2026)

IBM Research, DESIGN.md 한계점 지적

4월 26일 발표에서 '결과는 기록되지만 이유는 빠져있다'며 검증 가능성 문제를 제기했어요

Google Stitch + Claude Code + MCP Proxy

Google Stitch는 디자인 시스템을 DESIGN.md로 생성하고, Claude Code는 이를 읽어서 코드를 작성해요. MCP Proxy는 둘 사이의 다리 역할을 합니다

npx @_davideast/stitch-mcp proxy

터미널에서 이 명령어 한 줄로 Stitch MCP 프록시를 설치할 수 있어요. 이게 핵심 연결고리예요

디자인 레퍼런스

만들고 싶은 앱의 디자인 레퍼런스나 브랜드 가이드라인만 있으면 돼요. 복잡한 디자인 파일은 필요 없어요

Google Stitch로 DESIGN.md 생성

브랜드 컬러, 폰트, 컴포넌트 스타일을 Stitch에 입력하면 자동으로 DESIGN.md 파일이 생성돼요. 이 파일은 AI 에이전트가 읽을 수 있는 마크다운 형식으로, 색상은 #6366F1, 폰트는 Inter, 버튼 스타일은 rounded-lg 같은 식으로 정리됩니다

프로젝트 루트에 DESIGN.md 배치

생성된 DESIGN.md 파일을 개발 프로젝트 최상위 폴더에 넣어주세요. 이렇게 하면 Claude Code, Cursor, Copilot 같은 모든 AI 코딩 도구가 이 파일을 참조할 수 있어요. 파일 위치가 중요해요!

@ 심볼로 파일 참조하기

Claude Code에서 "@DESIGN.md를 참고해서 새로운 Navbar 컴포넌트를 만들어줘"라고 프롬프트를 입력해보세요. @ 심볼이 핵심이에요. 이러면 AI가 자동으로 디자인 시스템에 맞는 코드를 생성합니다

컴포넌트별 자동 생성

"@DESIGN.md 기반으로 로그인 페이지 만들어줘", "@DESIGN.md 스타일로 대시보드 컴포넌트 생성해줘" 이런 식으로 계속 요청하면 모든 컴포넌트가 일관된 디자인으로 만들어져요. 매번 색상이나 폰트를 다시 설명할 필요가 없어요

자동 통합 및 배포

생성된 모든 컴포넌트가 DESIGN.md 규칙을 따르므로 자동으로 통합돼요. "모든 페이지를 연결해서 완전한 앱으로 만들어줘"라고 하면 라우팅까지 자동 설정됩니다. 진짜 23분이면 완성이에요!

이커머스 플랫폼 23분 완성

상품 목록, 장바구니, 결제 페이지까지 모든 페이지가 동일한 브랜드 컬러와 버튼 스타일로 생성돼요. "Amazon 스타일로 DESIGN.md 만들어줘"라고 하면 그 느낌 그대로 나와요

SaaS 관리자 패널 자동 구축

사용자 관리, 통계 차트, 설정 페이지가 모두 일관된 디자인으로 만들어져요. 특히 차트 컴포넌트까지 브랜드 컬러에 맞춰 자동 생성되는 게 인상적이에요

개인 브랜딩 웹사이트 완성

소개, 프로젝트, 연락처 페이지가 세련되게 연결돼요. "미니멀 디자인 스타일로"라고 하면 깔끔한 포트폴리오가 뚝딱 만들어집니다. 반응형까지 완벽해요

DESIGN.md 파일명 정확히 쓰기

design.md나 Design.md처럼 대소문자를 틀리게 쓰면 AI가 인식하지 못해요. 반드시 DESIGN.md로 정확히 써야 합니다. 이거 때문에 한 시간 헤맨 사람들이 정말 많아요

너무 복잡한 디자인 규칙 작성

DESIGN.md에 너무 세세한 규칙을 넣으면 AI가 오히려 헷갈려해요. 핵심 색상 5개, 메인 폰트 2개, 기본 컴포넌트 스타일 정도면 충분해요. 단순하게 유지하는 게 키포인트입니다

디자인 결정의 이유가 빠져있음

IBM Research에서 지적한 것처럼, DESIGN.md는 '무엇을'은 기록하지만 '왜'는 설명하지 않아요. 특별한 브랜드 철학이나 사용자 경험 의도는 별도로 문서화해야 해요