모든 웹사이트에서
DESIGN.md 추출하기

DESIGN.md는 AI 코딩 에이전트가 일관된 UI를 만들기 위해 읽는 일반 텍스트 디자인 시스템 문서예요. AGENTS.md의 디자인 버전이라고 보면 돼요. 사람과 에이전트 모두 읽고, 편집하고, 적용할 수 있어요. 내부는 두 층으로 되어 있어요. YAML 프런트매터에는 색상, 타이포그래피, 간격 같은 기계가 읽을 수 있는 디자인 토큰이 들어 있고, Markdown 본문은 디자인 설계 근거를 설명해요.

DESIGN.md에는 보통 여덟 개의 표준 섹션이 순서대로 들어 있어요: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, Do's and Don'ts. YAML 프런트매터에는 정확한 토큰 값이 담기고, Markdown 본문은 그 값을 어떻게, 왜 적용하는지 설명해요. 관련 없는 섹션은 생략할 수 있고, 분야에 맞는 섹션을 추가할 수도 있어요.

공개 웹사이트 URL을 Design Extractor에 붙여 넣고 추출을 클릭하세요. 회원가입 후 크레딧 팩을 구매하면 추출할 때마다 크레딧이 조금씩 차감돼요. 결과는 복사할 수 있는 DESIGN.md예요. DESIGN.md를 저장소에 넣으면 AI 에이전트가 Claude, Cursor, Copilot, Stitch에서 스타일 레퍼런스로 읽어요.

프로젝트 디렉터리의 Markdown 파일을 읽을 수 있는 AI 코딩 도구라면 모두 DESIGN.md를 쓸 수 있어요. Claude Code, Cursor, GitHub Copilot을 비롯해 파일에 접근할 수 있는 코딩 어시스턴트가 여기에 해당해요. DESIGN.md를 프로젝트 루트나 docs 폴더에 넣고 프롬프트에서 언급하세요.

공개적으로 접속할 수 있는 웹사이트라면 모두 가능해요. Design Extractor는 브라우저에서 렌더링된 실제 페이지를 분석해요. 정적 사이트, SPA, 서버 렌더링 페이지 모두 지원해요. 사이트는 표준 HTTP/HTTPS URL로 접속할 수 있어야 해요.

정부 포털이나 지역 쇼핑몰처럼 특정 국가의 방문자에게만 열리는 사이트가 있어요. 사이트가 접속을 거부해서 추출이 실패하면 결과 페이지에서 그 사실을 알려 주고, 사이트가 열리는 국가를 제안해요. 국가를 하나 고르면 그 국가의 브라우저가 페이지를 불러온 뒤 평소처럼 추출해요. 다른 국가에서 실행하는 추출은 티어 가격에 소액의 추가 요금이 붙고, 이 금액은 시작 전에 표시돼요. 그래도 실패한 추출은 환불돼요. 같은 옵션을 Chrome 확장 프로그램과 MCP 서버에서도 사용할 수 있어요.

네. Chrome용 Design Extractor 확장 프로그램은 사이트에 로그인한 세션을 그대로 사용하므로 따로 로그인할 필요가 없어요. 팝업에 크레딧 잔액이 표시되고, 클릭 한 번이면 현재 탭의 페이지를 홈페이지 양식과 똑같은 추출로 보내요. Lite나 Pro를 고를 수 있고, 드는 크레딧도 같아요. 완성된 DESIGN.md는 사이트에서 열리고 내 추출 목록에 나타나요. 이번 첫 버전에서는 페이지가 공개되어 있어야 해요. 서버가 페이지를 캡처하기 때문에 로그인이 필요한 페이지, localhost, 사설 네트워크의 페이지는 아직 지원하지 않아요. 편집과 다운로드는 여전히 사이트에서 해요.

네. Design Extractor는 MCP 서버이기도 해요. claude.ai, Claude Desktop, ChatGPT에서는 서버 URL을 커넥터로 추가하고 계정으로 로그인하세요. Claude Code, Codex, Cursor, Agent SDK에서는 명령어 하나로 연결할 수 있어요 (문서 페이지에 클라이언트별 코드 블록이 있고, 클라이언트에 따라 필요한 API 키는 계정 페이지에서 발급받을 수 있어요). 그런 다음 사이트를 추출해 달라고 요청하세요. 에이전트가 추출을 시작하고 1분쯤 뒤에 다시 확인해서 저장소에 저장할 DESIGN.md 텍스트를 받아요. 크레딧은 사이트에서와 똑같이 들어요. Claude Code와 Codex에서는 플러그인으로도 설치할 수 있는데, 이 플러그인은 DESIGN.md를 코드베이스에 적용하는 스킬을 추가해요.