DESIGN.md 생성기.

색상, 폰트, 모서리 반경, 간격을 입력하면 Codex와 다른 코딩 에이전트에게 제품이 어떻게 보여야 하는지 알려 주는 DESIGN.md 파일이 만들어집니다. 브라우저에서 실행되며, 입력한 내용은 업로드되거나 저장되지 않습니다.

DESIGN.md

---
version: alpha
name: "Pagely"
colors:
  primary: "#1F3D2B"
  on-primary: "#FAF6EE"
  secondary: "#E8735A"
  tertiary: "#F2C14E"
  neutral: "#FAF6EE"
  surface: "#FFFFFF"
  on-surface: "#1F2A22"
typography:
  headline-lg:
    fontFamily: "Georgia"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
  body-md:
    fontFamily: "system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 16px
  lg: 22px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---

## Overview

Pagely의 비주얼 아이덴티티. 모든 화면은 이 파일의 토큰만 사용합니다.

## Colors

- **primary (#1F3D2B):** 주요 액션과 가장 중요한 요소.
- **on-primary (#FAF6EE):** primary 위의 텍스트와 아이콘.
- **secondary (#E8735A):** 보조 포인트 색상. 아껴서 사용합니다.
- **tertiary (#F2C14E):** 배지, 진행률 같은 강조 요소.
- **neutral (#FAF6EE):** 페이지 배경.
- **surface (#FFFFFF):** 카드, 시트, 입력창.
- **on-surface (#1F2A22):** surface 위의 본문 텍스트와 아이콘.

## Typography

제목에는 Georgia, 나머지에는 모두 system-ui를 사용합니다. 위에 정의한 크기만 사용하고 다른 크기는 쓰지 않습니다.

## Layout

간격은 스케일을 따릅니다. 관련 항목 사이는 8px, 컴포넌트 안쪽은 16px, 섹션 사이는 24px입니다.

## Shapes

모서리는 작은 요소 8px, 버튼과 입력창 16px, 카드 22px입니다.

## Components

기본 버튼은 primary 색상에 on-primary 텍스트를 사용합니다. 기본 버튼은 화면당 하나만 사용합니다.

## Do's and Don'ts

- 텍스트 명도 대비를 WCAG AA(4.5:1) 이상으로 유지하세요.
- 새 값을 만들지 말고 이 토큰을 재사용하세요.
- 여기에 정의되지 않은 색상을 추가하지 마세요.
- 카드 하나에 글자 크기를 세 가지 이상 섞지 마세요.

브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.

DESIGN.md 만드는 방법

제품 이름을 정하고, 원한다면 어떤 느낌이어야 하는지 한두 문장으로 적으세요. 이 설명이 파일의 description과 Overview가 됩니다.
일곱 가지 색상을 정하세요. primary, on-primary, secondary, tertiary, neutral, surface, on-surface입니다. 색상 견본에서 고르거나 HEX 코드를 붙여넣으세요. 어떤 조합의 텍스트가 잘 안 읽힐 것 같으면(4.5:1 미만) 양식이 해당 조합을 알려 줍니다.
타이포그래피를 정하세요. 제목 폰트와 본문 폰트, 그리고 각각의 크기입니다.
모서리 반경과 간격을 정하세요. 각각 작은, 중간, 큰 단계(sm, md, lg)로 정합니다.
파일을 복사하거나 다운로드하세요. 입력하는 대로 업데이트되며, 처음에는 DESIGN.md 가이드의 독서 앱 Pagely로 채워진 완성 예시로 시작합니다.

파일은 Google Labs의 DESIGN.md 형식을 따릅니다.

YAML 프런트매터의 토큰: 일곱 가지 색상, headline-lg와 body-md 타입 스타일, 모서리 반경과 간격 스케일, 그리고 이들을 참조하는 button-primary 컴포넌트.
본문 섹션: 형식이 정한 순서대로 Overview, Colors, Typography, Layout, Shapes, Components, Do’s and Don’ts. 각 색상의 용도와 지켜야 할 규칙 네 가지가 들어갑니다.

Codex에서 사용하기

파일을 프로젝트 루트의 AGENTS.md 옆에 DESIGN.md로 저장하세요. Codex는 AGENTS.md는 자동으로 읽지만 DESIGN.md는 스스로 찾지 않으므로, AGENTS.md에서 가리켜 주세요.

## Design

- Before any UI work, read DESIGN.md and use only its tokens.
- If a screen needs a value that DESIGN.md doesn't define, ask before inventing one.

그다음 평소처럼 화면을 요청하세요.

DESIGN.md로 디자인하기

DESIGN.md를 따라서 [홈] 화면을 단일 HTML 파일로 디자인해 줘. DESIGN.md에 정의된 색상, 글자 크기, 모서리 반경, 간격만 쓰고, 정의되지 않았는데 필요했던 것이 있으면 정리해 줘.

제품이 커지면 파일도 키울 수 있습니다. 타입 스타일, 카드나 입력창 같은 컴포넌트, Elevation & Depth 섹션을 직접 또는 Codex로 추가하고, npx @google/design.md lint DESIGN.md로 결과를 확인하세요. 전체 형식과 기존 코드에서 Codex가 파일을 작성하게 하는 방법은 DESIGN.md 가이드에서 다룹니다.

자주 묻는 질문

DESIGN.md란 무엇인가요?

AI 코딩 에이전트에게 디자인 시스템을 설명하는 텍스트 파일입니다. 정확한 색상, 타이포그래피, 간격, 컴포넌트를 YAML 토큰으로 담고, 그 사용법을 본문으로 설명합니다. Google Stitch에서 시작된 Google Labs의 공개 형식이며, 명세는 아직 alpha 단계입니다.

Codex가 DESIGN.md를 자동으로 읽나요?

아니요. Codex가 자동으로 읽는 것은 DESIGN.md가 아니라 AGENTS.md입니다. 위에서 본 것처럼 AGENTS.md에 UI 작업 전에 DESIGN.md를 읽으라는 한 줄만 넣으면 됩니다.

생성기에 없는 항목을 추가해도 되나요?

네. 생성기는 대부분의 화면에 필요한 토큰을 다룹니다. 형식상 타입 스타일, 컴포넌트, Elevation & Depth 섹션을 더 넣을 수 있으니 직접 추가하거나 Codex에 요청하세요.

무료인가요? 입력한 내용이 업로드되나요?

무료이며 회원가입이 필요 없습니다. 파일은 브라우저 안에서 만들어지고, 입력한 내용은 업로드되거나 저장되지 않습니다.