DESIGN.md 생성기

실제 웹사이트에서 DESIGN.md를 만드세요. URL을 입력하면 생성기가 코딩 에이전트가 읽는 파일을 만들어요. 색상, 타이포그래피, 간격, 컴포넌트 토큰과 그 사용 규칙이 담겨요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.

생성기가 DESIGN.md를 만드는 방식

  1. 웹사이트 URL 입력

    마케팅 사이트, 문서 사이트, 웹 앱의 랜딩 페이지 등 공개 페이지라면 무엇이든 돼요. 먼저 회원가입하세요. 추출할 때마다 선불 팩의 크레딧이 사용돼요.

  2. 생성기가 사이트를 읽어요

    실제 브라우저에서 사이트를 열고, 실제로 쓰이는 색상, 폰트, 간격, 모서리 반경, 컴포넌트를 측정해요. Pro 추출은 사이트의 약 5개 페이지를 샘플링해요. 추출마다 최소 1분이 걸려요.

  3. DESIGN.md를 받아요

    토큰은 YAML 프런트매터에, 사용 규칙은 Markdown에 들어가요: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, Do's and Don'ts. 내 추출 목록에서 복사, 다운로드, 편집할 수 있어요.

출력 예시: Anthropic의 DESIGN.md

생성기가 anthropic.com에서 만든 파일의 일부예요. 그룹별로 토큰 몇 개와 Overview의 앞부분만 잘라 보여 드려요. 전체 파일에는 레이아웃, 엘리베이션, 모양, 컴포넌트, 해야 할 것과 하지 말아야 할 것도 담겨 있어요.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

Anthropic DESIGN.md 전체 보기DESIGN.md 예시 더 보기

FAQ

DESIGN.md 생성기 FAQ

생성기가 무엇을 만드는지, 비용은 얼마인지, 코딩 에이전트에서 파일을 어떻게 쓰는지 알려 드려요.

Google의 DESIGN.md 사양을 따르는 DESIGN.md 파일 하나를 만들어요. YAML 프런트매터에는 사이트의 색상, 타이포그래피, 간격, 모서리 반경, 컴포넌트 토큰이 담겨요. Markdown 본문은 섹션별로 사용 방법을 설명하므로 코딩 에이전트가 사이트와 어울리는 새 UI를 만들 수 있어요.

생성기로는 안 돼요. 생성기는 실제 공개 웹사이트에서 파일을 만들기 때문이에요. 처음부터 디자인한다면 사양에 따라 DESIGN.md를 직접 작성하고, 무료 DESIGN.md 검사기로 구조와 토큰을 확인하세요.

HTTP 또는 HTTPS로 접속할 수 있는 모든 공개 웹사이트예요. 정적 사이트, 싱글 페이지 앱, 서버 렌더링 페이지 모두 포함돼요. 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 지원하지 않으며, 일부 사이트는 자동화된 브라우저를 차단해요.

회원가입 후 선불 크레딧 팩을 구매하면 돼요. 가격은 US$5(50크레딧)부터예요. 구독은 없고 크레딧은 만료되지 않아요. 추출할 때마다 크레딧이 사용되며, 추출당 현재 비용은 요금 페이지에서 확인할 수 있어요. 저희 쪽 문제로 추출이 실패하면 크레딧은 환불돼요.

프로젝트 루트나 docs 폴더에 DESIGN.md로 저장하고 프롬프트에서 언급하세요. Claude Code, Cursor, GitHub Copilot, Windsurf 등 파일에 접근할 수 있는 에이전트가 스타일 레퍼런스로 읽어요. 에이전트가 Design Extractor MCP 서버를 통해 생성기를 직접 실행할 수도 있어요.

네. 생성한 모든 DESIGN.md는 내 추출 목록에 저장되고, 거기서 편집하거나, 다시 다운로드하거나, 나중에 사이트를 다시 추출할 수 있어요. 일반 텍스트이므로 내 에디터에서 편집해도 돼요.