문제왜 필요한가
결과가 매번 무난해지는 이유
"UI 만들어줘"라고 하면 어디서 본 듯한 화면이 나옵니다. 색·간격·폰트를 정해준 적이 없으니 매번 무난한 기본값으로 만드는 것입니다.
해결 방법은 CLAUDE.md와 똑같습니다 — 규칙을 파일로 적어두면 됩니다. 다만 담는 내용이 디자인이라 관례상 DESIGN.md라는 이름을 씁니다.
| 파일 | 담는 것 |
|---|---|
| CLAUDE.md | 코드 규칙 — 컨벤션 · 금지 · 아키텍처 결정 |
| DESIGN.md | 화면 규칙 — 색 토큰 · 타입 스케일 · 간격 · 컴포넌트 · 모션 |
이 페이지는 선택입니다화면을 만들지 않는다면 넘어가도 됩니다. 과정 순서와 무관한 부록입니다.
받기카탈로그
직접 쓰기 어렵다면
getdesign.md는 이런 DESIGN.md를 모아둔 카탈로그입니다. CLI로 한 줄이면 프로젝트에 들어옵니다. (Node.js 18 이상)
npx getdesign list # 사용 가능한 템플릿 목록 npx getdesign add <slug> # 프로젝트 루트에 DESIGN.md 생성 npx getdesign add <slug> --force # 기존 파일 덮어쓰기 npx getdesign add <slug> --out ./docs/design.md # 다른 경로에 저장
이미 DESIGN.md가 있으면 덮어쓰지 않고 <slug>/DESIGN.md로 따로 저장됩니다.
파일만 넣으면 안 됩니다파일을 둔다고 저절로 적용되지 않습니다. 읽으라고 말해줘야 합니다. CLAUDE.md에 이 문장을 한 줄 적어두면 매번 말하지 않아도 됩니다.
UI를 작성하기 전에 DESIGN.md를 먼저 읽고, 거기 정의된 색 토큰 · 타입 스케일 · 컴포넌트 패턴에 맞춰줘.
구성여섯 항목
파일 안에 들어 있는 것
직접 쓰는 경우에도 아래 6개만 채우면 충분합니다.
| 항목 | 내용 |
|---|---|
| 색 토큰 | 배경 · 글자 · 강조 · 상태색, 각각의 hex와 쓰이는 자리 |
| 타입 스케일 | 제목 · 본문 · 라벨 크기와 행간 · 자간 |
| 간격 · 레이아웃 | 그리드, 여백, 컨테이너 폭, 컴포넌트 안쪽 여백 |
| 컴포넌트 패턴 | 버튼 · 카드 · 내비 · 폼 · 모달을 말로 서술 |
| 모션 | 지속 시간, 이징, 호버 · 등장 방식 |
| 반응형 전략 | 화면이 좁아질 때 어떻게 접히는가 |
값이 아니라 이유까지"강조색 #2F6FED"보다 "강조색 #2F6FED — 주 버튼과 활성 탭에만. 링크에는 쓰지 않는다"가 훨씬 잘 지켜집니다.
실습10분
우리 것으로 바꾸기
받은 파일을 그대로 쓰지 않는 것이 핵심입니다. 값을 우리 브랜드로 바꿔 커밋하면, 그때부터 팀 전체가 같은 톤으로 화면을 만듭니다.
1
하나 받아서 열어본다
npx getdesign list 로 목록을 보고 마음에 드는 것을 받습니다.
2
우리 값으로 교체한다
색 hex와 폰트를 우리 브랜드 값으로 바꿉니다. 없으면 지금 정합니다.
3
한 화면으로 검증한다
가장 자주 쓰는 화면 하나를 만들어 보고 어긋나는 항목을 파일에 반영합니다.
4
커밋한다
저장소에 넣어야 팀 전체에 적용됩니다.
그대로 쓰지 않기배포된 템플릿은 공식 디자인 시스템이 아니라 참고용으로 만들어진 파일입니다. 특정 브랜드의 외형을 그대로 흉내 내는 용도가 아니라, "디자인을 AI에게 설명하는 방법"의 예시로 보세요. 외부 서비스이므로 사내 정책상 사용 가능한지도 확인하세요.
- DESIGN.md를 하나 받아 열어봤다
- 색·폰트를 우리 값으로 바꿨다
- 읽으라는 지시를 CLAUDE.md에 넣었다
- 화면 하나를 만들어 결과를 확인했다
클로드코드 시작하기부록 · 선택