getdesign

www.getdesign.app

공개 웹사이트의 디자인 시스템을 추출하여 design.md 파일로 저장합니다.

공식 사이트 방문새 창에서 열립니다

공식 사이트 방문

getdesign이란 무엇인가요?

getdesign은 공개 웹사이트에서 디자인 시스템을 추출합니다. 실제 브라우저에서 사이트를 열고 사이트의 CSS를 읽고 렌더링된 페이지를 캡처한 다음 색상, 타이포그래피, 간격 및 구성 요소를 사이트의 실제 CSS를 기반으로 한 design.md 파일에 기록합니다. 출력물은 스타일 가이드로 읽거나 인터페이스를 구축할 때 코딩 에이전트에 컨텍스트로 전달할 수 있습니다.

이 도구는 하나의 에이전트 코어를 공유하는 다섯 가지 인터페이스와 코딩 에이전트 내에서 실행되는 Skill로 제공됩니다. 현재 베타 버전이며, 호스팅 실행은 getdesign API 키가 아닌 사용자의 제공자 키에 의존합니다.

getdesign 사용 방법

웹 대시보드

대시보드에 로그인하고 Account에 Daytona 및 OpenAI 키를 저장한 다음, Agent에 공개 웹사이트 URL을 붙여넣어 design.md를 생성하세요. 제공자를 실행하지 않고 캐시된 예제를 살펴볼 수도 있습니다.

API

api.getdesign.app의 GET /v1/design은 Markdown 또는 JSON을 반환합니다. WorkOS 베어러 인증과 제공자 키가 필요합니다.

CLI

Bun에서 Daytona 및 OpenAI 키와 함께 bunx @getdesign/cli를 실행하세요. design.md를 로컬 파일에 기록합니다.

SDK

bun add @getdesign/sdk로 @getdesign/sdk를 설치하여 제공자 키를 사용해 Bun에서 에이전트를 인프로세스로 실행하고, 타입이 지정된 결과와 진행 이벤트를 받으세요.

Skill

skills add MohtashamMurshid/getdesign으로 휴대용 SKILL.md를 추가하세요. Claude Code, Codex 또는 Cursor 내에서 에이전트 자체 도구를 사용하여 실행됩니다.

getdesign의 핵심 기능

디자인 시스템 추출

getdesign은 공개 사이트의 CSS 토큰을 읽고, 브라우저에서 페이지를 캡처하고, 색상, 타이포그래피, 간격 및 구성 요소를 다루는 디자인 문서를 생성합니다.

design.md 출력

결과는 웹사이트의 디자인 시스템을 설명하는 Markdown 문서로 제공됩니다. 시각적 실행에는 캡처된 스크린샷도 포함됩니다.

다양한 접근 인터페이스

웹, API, CLI 및 TypeScript SDK는 동일한 에이전트 코어에 접근합니다. Skill은 사용자의 코딩 에이전트 내에서 실행됩니다. CLI와 SDK는 Bun에서 로컬로 실행되며, HTTP API는 호스팅 실행을 지원합니다.

비공개 실행 및 선택적 게시

대시보드 실행은 게시할 때까지 비공개로 유지됩니다. 게시하면 누구나 디자인 문서와 스크린샷을 보고 다운로드할 수 있는 링크가 생성됩니다. 실행을 다시 비공개로 설정하여 향후 접근을 차단할 수 있지만, 이미 다운로드된 복사본은 수신자에게 남아 있습니다.

getdesign의 사용 사례

라이브 사이트에서 스타일 가이드 생성

공개 웹사이트에서 색상, 타이포그래피, 간격 및 구성 요소를 설명하는 읽기 쉬운 디자인 문서를 생성합니다.

코딩 에이전트에 디자인 컨텍스트 제공

생성된 design.md와 스크린샷을 코딩 에이전트에 전달하거나, Skill을 설치하여 에이전트가 자체 도구로 디자인 컨텍스트를 추출하도록 합니다.

로컬 또는 호스팅 워크플로에서 추출 실행

Bun에서 로컬 실행을 위해 CLI 또는 TypeScript SDK를 사용하거나, Markdown 또는 JSON을 반환하는 호스팅 실행을 위해 HTTP API를 사용하세요.

디자인 문서 공유

대시보드 실행을 게시하여 다른 사람들이 디자인 문서와 스크린샷을 보고 다운로드할 수 있는 링크를 생성합니다.

getdesign에 대한 자주 묻는 질문

design.md 파일이란 무엇인가요?

design.md는 웹사이트의 디자인 시스템을 설명하는 Markdown 문서입니다. 스타일 가이드로 읽거나 인터페이스를 구축할 때 코딩 에이전트에 컨텍스트로 제공할 수 있습니다. 시각적 실행에는 캡처된 스크린샷도 포함됩니다.

웹사이트의 색상과 글꼴을 어떻게 추출하나요?

Account에 Daytona 및 OpenAI 키를 저장한 다음, Agent에 공개 웹사이트 URL을 붙여넣으세요. getdesign은 CSS 토큰을 읽고, 브라우저에서 페이지를 캡처하고, 다운로드할 수 있는 디자인 문서를 생성합니다. 제공자를 실행하지 않고 캐시된 예제를 살펴볼 수도 있습니다.

getdesign을 코딩 에이전트와 함께 사용할 수 있나요?

예. 코딩 에이전트에 생성된 design.md와 스크린샷을 제공하거나, getdesign Skill을 설치하여 에이전트 자체 도구로 디자인 컨텍스트를 추출하세요. CLI와 TypeScript SDK는 Bun에서 로컬로 실행되며, HTTP API는 호스팅 실행을 지원합니다.

인증이나 유료 등급이 있나요?

대시보드는 WorkOS 로그인을 사용합니다. 호스팅 실행에는 사용자의 Daytona 및 OpenAI 키가 필요하며, V1에는 getdesign API 키가 없습니다. V1에는 getdesign 실행 청구가 없습니다. 브라우저 캡처 비용은 Daytona에, 모델 사용 비용은 OpenAI에 지불합니다.