문서

Design Extractor 작동 방식

URL을 붙여 넣으면 구조화된 디자인 사양을 받아요. 색상, 타이포그래피, 간격, 컴포넌트를 저장소에 바로 넣을 수 있는 DESIGN.md에 담아 드려요.

DESIGN.md란 무엇인가요?

DESIGN.md는 사람과 AI 에이전트 모두 읽을 수 있는 일반 텍스트 디자인 시스템 문서예요. AGENTS.md의 디자인 버전이라고 생각하면 돼요. AGENTS.md가 에이전트에게 프로젝트를 빌드하는 방법을 알려 준다면, DESIGN.md는 프로젝트가 어떤 모습과 느낌이어야 하는지 알려 줘요.

내부적으로 모든 DESIGN.md는 두 층으로 되어 있어요. 기계가 읽을 수 있는 디자인 토큰이 담긴 YAML 프런트매터와, 디자인 설계 근거를 설명하는 Markdown 본문이에요. 토큰은 에이전트에게 정확한 값을 주고, 설명은 그 값이 왜 있는지 알려 줘요.

DESIGN.md 사양 전체 읽기 ->

표준 섹션

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

작동 방식

  1. 입력

    공개 URL을 붙여 넣으세요 (예: design-extractor.com).

  2. 추출

    시스템이 페이지를 크롤링하고 시각적 속성을 분석해요: 색상, 타이포그래피, 간격, 컴포넌트 패턴, 전반적인 디자인 언어.

  3. 출력

    다음 내용이 담긴 DESIGN.md 하나:

    • 개요와 브랜드 스타일 가이드
    • 이름이 붙은 토큰으로 정리한 색상 팔레트
    • 타이포그래피 단계와 폰트 속성
    • 레이아웃, 간격, 모양 토큰
    • 컴포넌트 가이드와 토큰 참조
    • 디자인 가드레일 역할을 하는 Do's and Don'ts

출력

추출할 때마다 DESIGN.md 하나가 만들어져요.

Markdown

  • DESIGN.md. 표준 DESIGN.md 형식은 Google Stitch가 처음 선보였어요. 어떤 저장소에든 넣으면 AI 에이전트가 활용해요.

Chrome 확장 프로그램

여기로 돌아오지 않고도 현재 탭의 페이지를 추출하세요. 확장 프로그램은 사이트 세션을 그대로 쓰고 같은 크레딧을 사용해요. 확장 프로그램 작동 방식 읽기 ->

핵심 포인트

AI 에이전트는 정확한 토큰과 사람이 읽을 수 있는 설계 근거를 함께 받을 때 더 좋은 디자인 결과물을 만들어요. YAML 프런트매터는 정확한 값을 주고, Markdown 본문은 그 값을 실제로 어떻게 써야 하는지 설명해요.

직접 해 볼까요?

어떤 공개 URL에서든 DESIGN.md를 받아 보세요. 추출에는 최소 1분이 걸려요.

사이트 추출하기