Google Stitch에서 화면을 만든 뒤 파일을 내려받았는데 design.md라는 낯선 파일이 들어 있으면 당황하기 쉽다. 더블클릭해도 웹페이지가 열리지 않고 메모장 같은 화면에 영어와 기호만 잔뜩 나온다.
DESIGN.md는 오류 파일도, 완성된 웹사이트도 아니다. Stitch가 만든 화면의 색상과 글꼴, 간격, 구성 원칙을 AI와 개발 도구에 전달하기 위한 디자인 설명서다.
MD 파일은 무엇일까
.md는 Markdown의 줄임말이다. 메모장으로 열 수 있는 텍스트 파일이지만 제목과 목록, 링크, 코드 같은 구조를 간단한 기호로 표시한다.
# Design System
## Colors
- Primary: #2563EB
- Background: #FFFFFF
## Typography
- Heading: Inter Bold
- Body: Inter Regular사람에게는 주요 색상과 글꼴을 설명하고, AI에게는 다음 화면을 만들 때 따라야 할 규칙을 전달한다.
무엇이 들어 있을까
DESIGN.md에는 브랜드의 주요 색상과 용도, 제목과 본문의 글꼴, 여백과 간격, 버튼과 카드의 형태, 화면 분위기, 피해야 할 표현과 접근성 조건 등이 들어갈 수 있다.
Google은 색상 값만 기록하는 데 그치지 않고 이 색을 왜 어디에 쓰는지까지 AI가 이해하게 하는 형식이라고 설명한다. AI가 디자인 의도와 WCAG 접근성 규칙을 확인하도록 만드는 것이 목표다.
HTML과는 완전히 다르다
HTML과 CSS, JavaScript는 브라우저에서 실제 웹사이트를 보여주고 움직이게 하는 실행 파일이다. DESIGN.md는 그 웹사이트를 어떻게 디자인해야 하는지 적은 지침서다.
건축에 비유하면 HTML과 CSS는 실제 벽과 문이고 DESIGN.md는 외벽 색상과 문 모양, 복도 폭을 정한 설계 규칙이다.
DESIGN.md만 브라우저에 끌어다 놓는다고 Stitch 화면이 웹사이트로 실행되지는 않는다. 배포하려면 별도의 HTML·CSS 코드나 프레임워크 프로젝트가 필요하다.
여는 방법
윈도우에서는 메모장이나 Visual Studio Code, 맥에서는 텍스트 편집기나 Markdown 편집기로 열 수 있다. 마우스 오른쪽 버튼을 누르고 연결 프로그램을 선택하면 된다.
일반 메모장에서 #, -, 백틱 같은 기호가 보이는 것은 파일이 깨진 것이 아니다. 확장자를 .txt로 바꾸면 Stitch나 AI 도구가 Markdown으로 인식하지 못할 수 있으므로 그대로 두는 편이 좋다.
Stitch에서 재사용하기
Google은 DESIGN.md를 Stitch 프로젝트 사이에서 디자인 규칙을 내보내고 가져오는 용도로 설명한다.
회사 소개 페이지에서 파란 버튼과 둥근 카드를 정했다면 그 파일을 새 프로젝트에 가져와 비슷한 분위기를 유지할 수 있다. 새 프로젝트마다 색상과 글꼴을 다시 설명하는 일을 줄인다.
Stitch의 디자인 시스템 또는 가져오기·내보내기 메뉴에서 DESIGN.md를 선택하면 된다. 서비스가 빠르게 바뀌고 있어 메뉴 이름과 위치는 계정이나 모드에 따라 다를 수 있다.
Codex·Claude Code·Cursor에서 활용하기
Google은 DESIGN.md 초안 사양을 오픈소스로 공개해 여러 플랫폼에서 사용할 수 있게 했다.
AI 코딩 도구의 프로젝트 폴더에 DESIGN.md를 넣고 다음처럼 요청할 수 있다.
DESIGN.md의 색상, 글꼴, 간격과 컴포넌트 규칙을 따라
이 랜딩 페이지를 구현해줘.
규칙과 충돌하는 부분이 있으면 먼저 알려줘.매번 버튼 색상과 모서리 모양을 반복해서 설명할 필요가 줄어든다. 다만 DESIGN.md는 참고 문서이므로 구현 결과의 대비, 모바일 화면과 접근성은 사람이 다시 확인해야 한다.
직접 수정해도 될까
Markdown은 텍스트 파일이므로 직접 수정할 수 있다. 색상을 바꾸거나 버튼 규칙을 추가하고 “빨간색은 경고 이외에는 사용하지 않는다” 같은 문장을 적을 수 있다.
수정 전에는 원본을 복사해두는 것이 좋다. 제목 구조와 항목 이름을 크게 바꾸면 도구가 예상대로 해석하지 못할 수 있다. “세련된 파란색”보다 “Primary #2563EB는 주요 버튼과 활성 링크에만 사용”처럼 구체적으로 쓰는 편이 유용하다.
ZIP에 DESIGN.md와 이미지만 있다면
최근 한 이용자는 ZIP으로 내보낸 뒤 design.md와 screen.png만 있고 이전에 받았던 HTML과 CSS가 없다고 보고했다. DESIGN.md 안에 HTML 코드가 숨겨져 있는 것은 아니다.
먼저 Stitch 내보내기 메뉴에서 디자인 시스템이나 이미지가 아니라 코드 또는 HTML 내보내기를 선택했는지 확인한다. 화면별 코드 보기나 코드 복사 옵션이 따로 있는지도 살펴본다.
해당 이용자는 코드 복사 기능으로 문제를 피했다고 전했지만 개별 사례라 모든 환경에서 보장되지는 않는다. Stitch SDK는 HTML 다운로드 주소와 스크린샷 주소를 별도로 가져오는 기능도 제공한다.
계속 코드가 없다면 모드나 업데이트에 따른 변경 또는 일시적 오류일 수 있다. 기존 HTML을 덮어쓰기 전에 백업하고 Stitch 피드백 채널에 문의하는 편이 안전하다.
한 줄로 정리하면
Google Stitch의 DESIGN.md는 웹사이트 파일이 아니라 AI가 읽는 디자인 사용 설명서다.
내용이 궁금하면 메모장으로 열고, 다른 Stitch 프로젝트나 AI 코딩 도구에 전달해 같은 색상과 글꼴, 간격을 유지하는 데 사용하면 된다. 웹사이트를 배포하려면 DESIGN.md와 별개로 HTML·CSS 코드가 제대로 내보내졌는지 확인해야 한다.
관련 글
같은 맥락에서 이어서 읽기 좋은 글들입니다.