brand.md가 말의 규칙이라면, design.md는 모양의 규칙입니다. 색·폰트·간격·모서리를 숫자와 코드 값으로 적어둡니다. AI가 그 숫자를 매번 읽고, 매번 같은 결정을 내립니다.

왜 텍스트로 적는가

이미지 한 장은 정확하지 않습니다. "이런 분위기"는 사람마다 다르게 읽힙니다. 값으로 적으면 한 가지로 읽힙니다.

/* color */
--bg: #F5F4F0;
--bg-deep: #181816;
--text: #1A1A18;
--accent: #여기에_본인_포인트색;

/* type */
--font-head: "Cormorant Garamond", serif;
--font-body: "DM Mono", monospace;

/* space */
--unit: 8px;
--space-1: var(--unit);          /* 8px */
--space-2: calc(var(--unit) * 2); /* 16px */
--space-4: calc(var(--unit) * 4); /* 32px */

/* radius */
--radius-sm: 4px;
--radius-lg: 16px;

이 값이 그대로 코드에 들어가 사이트가 됩니다. 카드뉴스를 만들 때도, 슬라이드를 만들 때도, 같은 값을 쓰면 같은 분위기가 납니다.

트리오 구조

세 파일이 한 묶음으로 움직입니다.

brand.md   ← 가치·톤·금지어 (말)
design.md  ← color · type · spacing · radius (모양)
CLAUDE.md  ← 위 둘을 import하는 머리 파일

CLAUDE.md 안에 두 줄만 적으면 Claude Code가 매 세션 처음에 둘 다 읽습니다.

@brand.md
@design.md

한 줄도 다시 설명하지 않아도 됩니다.

design.md가 잡아주는 것

• 색 — 배경 두 개(밝은·어두운), 텍스트 한 개, 포인트 한 개. 그 이상은 만들지 않습니다.
• 타이포 — 제목용 한 개, 본문용 한 개. 두 개를 넘기지 않습니다.
• 간격 — 4의 배수 또는 8의 배수만 씁니다. 5·7·11 같은 잡수는 쓰지 않습니다.
• 모서리 — 작은 것·큰 것 두 단계.
• 모션 (선택) — 페이드 시간, 이징 곡선.

이 다섯 개가 design.md의 전부입니다. 늘리면 일관성이 흔들립니다.

어떤 도구로 만드는가

claude.ai/design을 씁니다.