DESIGN.md 예시, 섹션별 설명
DESIGN.md를 이해하는 가장 빠른 방법은 하나를 직접 따라 읽는 것입니다. AI가 읽는 순서대로 각 섹션의 내용, 모습, 위치 이유를 설명합니다. 이 구조를 자체 스타일의 템플릿으로 바로 사용할 수 있습니다.
파일의 전체 구조
올바른 DESIGN.md는 같은 순서의 세 층으로 구성됩니다. 먼저 기계가 읽는 구조화 메타데이터인 frontmatter, 다음은 색상, 타이포그래피, 간격, 형태, 그림자, 모션을 정확한 값으로 적은 토큰 섹션, 마지막은 토큰을 화면으로 바꾸는 컴포넌트 로직과 사용 규칙입니다.
순서가 핵심입니다. 에이전트는 위에서부터 방향(무엇인가), 어휘(값은 무엇인가), 문법(어떻게 결합하는가)으로 이동합니다. 이 구조는 되돌아가거나 추론하지 않고 한 번에 파싱됩니다.
frontmatter: 이름, 핵심, 플래그
파일은 몇 개 필드만 있는 YAML 블록으로 시작합니다. 스타일 이름, 한 문장의 핵심, 이후 렌더링을 바꾸는 불리언 플래그입니다. Bauhaus라면 '원색 강조를 갖춘 기하학적 명료함, 형태는 기능을 따른다'처럼 쓰며 가장 중요한 플래그는 다크 여부입니다.
작지만 줄마다 가장 많은 일을 합니다. 핵심 문장은 이후 해석의 방향을 잡고 다크 플래그 하나로 대비, 높이, 이미지 처리 방식이 달라집니다. 여기만 읽어도 큰 실수를 피할 수 있습니다.
토큰 섹션: 역할로 이름 붙인 정확한 값
The color section lists a named palette where every entry is a role plus an exact value: background <hex>, ink <hex>, a small set of accents <hex>, hairline <hex>. Roles, not appearances — so the agent knows where each color belongs, not just what it looks like.
The typography section names the font families and weights, then gives a type scale as concrete sizes — display, heading, body, caption, each at <px> with a line height. The spacing section states the rhythm the layout snaps to: a base unit in <px> and the steps built on it.
Shape, shadow, and motion round out the vocabulary: corner radii in <px>, elevation levels with their shadow values, and easing curves with durations. Every one of these is a number a machine can apply verbatim — that is the test each line has to pass.
One honest note: the values in this walkthrough are placeholders like <hex> and <px>. The structure of a DESIGN.md is open; the precise values for each of Curio's styles are the paid product. What matters for a template is the shape — swap in your own values and the file works.
적용 레이어: 컴포넌트 로직과 경계
토큰 뒤에는 반복 컴포넌트의 짧은 선언형 규칙을 둡니다. 기본 버튼은 잉크색 채움, 배경색 텍스트, 형태 섹션의 반경, 그림자 없음. 카드는 헤어라인 테두리 안에 있고 드롭 섀도는 쓰지 않음. 위계는 색을 더하지 않고 크기와 굵기로 표현합니다.
마지막에는 잘 맞는 용도와 피해야 할 용도를 몇 문장으로 적습니다. 에디토리얼과 마케팅에는 맞지만 밀도 높은 표와 대시보드에는 맞지 않는다는 경계가 오용을 막습니다.
템플릿으로 쓰거나 실제 파일 받기
자체 브랜드를 인코딩한다면 이 설명을 템플릿으로 쓰세요. frontmatter로 시작하고 역할별 토큰을 적은 뒤 컴포넌트 로직과 경계로 끝냅니다. 자체 값을 채우면 작동하는 사양이 됩니다.
확립된 스타일이 필요하다면 파일은 이미 있습니다. Curio의 모든 스타일은 이 구조의 완전한 DESIGN.md로 실제 값이 채워져 제공되며 AI가 MCP, 공유 링크 또는 다운로드로 적용합니다.
FAQ
이 구조를 템플릿으로 복사해도 되나요?
가능합니다. 구조는 공개되어 있고 이 글은 복사해 쓰도록 만든 것입니다. frontmatter, 역할별 토큰, 컴포넌트 로직, 사용 경계라는 전체 형태는 Google의 공개 DESIGN.md 사양과 같아 지원 도구가 읽을 수 있습니다.
왜 실제 숫자 대신 플레이스홀더를 쓰나요?
값 자체가 제품이기 때문입니다. DESIGN.md 구조는 공개 지식이지만 Curio 각 스타일의 조사된 정확한 토큰 값은 유료 플랜에서 제공합니다. 자체 브랜드 파일에는 자신의 값을 입력하면 됩니다.
최소한의 DESIGN.md는 어떤 모습인가요?
이름, 핵심 문장, 다크 플래그가 있는 frontmatter, 정확한 색상과 타이포그래피 체계, 간격 단위, 버튼·카드·강조의 세 규칙이면 됩니다. 반 페이지에 들어가며 형용사 프롬프트보다 낫습니다.