DESIGN.md 예시: 웹사이트·앱용 무료 템플릿.

좋은 DESIGN.md를 가장 빨리 쓰는 방법은 완성된 파일에서 출발하는 것입니다. 웹사이트·대시보드용 12종과 모바일 앱용 12종, 무료 예시 24종을 모았습니다. 각 예시에는 라이트·다크 모드 색상, 폰트, 타입 스케일, 모서리 반경, 간격, 사용 규칙이 들어 있고, 에이전트가 URL에서 바로 읽을 수 있는 일반 Markdown 파일입니다.

2026년 11월 6일 업데이트 · 5분 분량

완성된 DESIGN.md는 어떻게 생겼나

DESIGN.md는 디자인 토큰이 담긴 YAML 프런트 매터로 시작하고, 그 뒤에 토큰 사용법을 설명하는 섹션이 이어집니다. 다음은 Swiss 예시를 줄인 버전입니다.

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

전체 파일에는 보조·3차 색상, 디스플레이부터 작은 글씨까지의 타입 스케일, 간격, 컴포넌트, 레이아웃도 들어 있습니다. 형식 자체는 DESIGN.md: Codex에 디자인 시스템 알려 주기를 참고하세요.

웹사이트·대시보드용 DESIGN.md 예시

Paper, 에디토리얼: 차분하고 에디토리얼하며 읽기 편한, 잘 짜인 책의 한 페이지처럼. DESIGN.md
Swiss, 미니멀 그리드: 엄격한 그리드 위의 검정, 흰색, 시그널 레드 하나. DESIGN.md
Ledger, 다크 SaaS 대시보드: 숫자를 위한 촘촘한 다크 인터페이스, 터미널 앰버 포인트. DESIGN.md
Mono, 개발자 문서: 문서와 개발 도구를 위한 민낯의 흰 페이지, Geist 서체, 코발트 블루 하나. DESIGN.md
Atelier, 럭셔리 패션: 아이보리, 잉크, 세련된 세리프. 패션 하우스의 룩북 같은 분위기. DESIGN.md
Noir, 다크 포트폴리오: 검정, 본 화이트, 거대한 세리프. 색은 작품 하나뿐. DESIGN.md
Harbor, 엔터프라이즈 B2B: 진지한 B2B 제품을 위한 네이비, 여백, 탄탄한 구조. DESIGN.md
Nordic, 차분한 SaaS: 생산성 도구를 위한 톤다운된 파랑, 부드러운 회색, 조용한 자신감. DESIGN.md
Clinic, 헬스케어: 건강 웹사이트를 위한 차분한 틸, 또렷한 타이포그래피, 쉬운 말. DESIGN.md
Terra, 어스 톤 친환경: 땅과 가까이 일하는 브랜드를 위한 이끼, 린넨, 클레이. DESIGN.md
Chalk, 친근한 교육: 밝고, 둥글고, 격려하는 분위기. 좋은 교실처럼. DESIGN.md
Pop, 네오 브루탈리즘: 굵은 검정 테두리, 단단한 그림자, 레몬 옐로. 일부러 시끄럽게. DESIGN.md

모바일 앱용 DESIGN.md 예시

앱 예시에는 휴대폰 화면에 필요한 규칙이 더해집니다. 터치 영역, 하단 탭 바, 화면 패딩, 숫자를 표기하는 방식입니다.

Stride, 피트니스 앱: 움직이는 앱을 위한 큼직한 콘덴스드 숫자와 에너지 넘치는 주황. DESIGN.md
Pantry, 음식 주문 앱: 따뜻하고 친근하고 먹음직스럽게. 음식과 주문 앱을 위해. DESIGN.md
Calm, 웰니스 앱: 부드러운 세이지, 온화한 세리프, 숨 쉴 공간. DESIGN.md
Wallet, 금융 앱: 또렷한 잔액, 차분한 초록, 믿을 수 있는 숫자. DESIGN.md
Focus, 할 일 관리 앱: 흰 화면, 파랑 하나, 그리고 할 일을 가로막는 것은 없음. DESIGN.md
Chatter, 메신저 앱: 둥근 말풍선, 친근한 틸, 대화가 중심인 앱. DESIGN.md
Voyage, 여행 앱: 꽉 찬 사진, 오션 블루, 엽서 같은 세리프. DESIGN.md
Boutique, 패션 쇼핑 앱: 가장자리까지 꽉 찬 사진, Bodoni 세리프, 흰 바탕에 검정. 쇼윈도 같은 앱. DESIGN.md
Quest, 게이미피케이션 학습 앱: 연속 기록, XP, 두툼한 버튼으로 연습을 게임처럼 느끼게. DESIGN.md
Care, 헬스케어 앱: 화면마다 명확한 할 일 하나. 빨리 끝내고 싶은 환자를 위해. DESIGN.md
Vinyl, 음악·팟캐스트 앱: 커버 아트가 먼저, 핫핑크 재생 버튼, 듣기 좋은 어두운 방. DESIGN.md
Hearth, 스마트홈 앱: 어둡고 조용한 홈 화면 위의 따뜻한 앰버 불빛. DESIGN.md

각 이름은 라이트·다크 모드의 라이브 프리뷰로 연결되고, 각 DESIGN.md 링크는 일반 텍스트 파일을 엽니다.

예시 사용하는 방법

프롬프트를 복사하세요. 시스템 페이지의 프롬프트를 Codex나 Claude Code에 붙여 넣으세요. 에이전트가 파일을 프로젝트에 DESIGN.md로 저장하고 모든 화면에서 따르게 됩니다.
아니면 파일을 내려받아 프로젝트 루트에 직접 넣으세요. Codex는 AGENTS.md는 자동으로 읽지만 DESIGN.md는 읽지 않으므로, AGENTS.md에 DESIGN.md를 가리키는 줄을 추가하세요.
필요한 부분을 바꾸세요. 주요 색상을 브랜드 색상으로 바꾸거나, 에이전트에게 폰트를 조정해 달라고 요청하고, 나머지는 그대로 두세요.

DESIGN.md는 일반 텍스트 형식이라 같은 파일을 Google Stitch처럼 이를 읽는 다른 도구에서도 쓸 수 있습니다.

자주 묻는 질문

이 DESIGN.md 템플릿은 무료인가요?

네. 모든 예시를 무료로 복사해 내 프로젝트에서 쓸 수 있습니다.

모바일 앱용 DESIGN.md 예시도 있나요?

네. 예시 중 12종이 모바일 앱용입니다. 피트니스와 음식 주문부터 뱅킹, 메신저, 스마트홈 앱까지 있습니다.

나만의 DESIGN.md를 만들 수도 있나요?

네. DESIGN.md 생성기로 내 색상, 폰트, 모서리, 간격을 바탕으로 만들어 보세요.