icon of getdesign

getdesign

www.getdesign.app

Extrai o sistema de design de um site para um arquivo design.md

Visitar siteAbre em uma nova janela
image of getdesignVisitar site

O que é o getdesign?

getdesign extrai um sistema de design de um site público. Ele abre o site em um navegador real, lê o CSS do site e captura a página renderizada, depois grava suas cores, tipografia, espaçamento e componentes em um arquivo design.md que é fundamentado no CSS real do site. A saída pode ser lida como um guia de estilo ou entregue a um agente de codificação como contexto ao construir uma interface.

A ferramenta está disponível em cinco superfícies que compartilham um núcleo de agente, além de uma Skill que é executada dentro de um agente de codificação. Atualmente está em beta, e as execuções hospedadas dependem das suas próprias chaves de provedor, em vez de uma chave de API do getdesign.

Como usar o getdesign?

Painel da web

Faça login no painel, salve suas chaves Daytona e OpenAI em Conta, depois cole a URL de um site público em Agente para gerar um design.md. Você também pode explorar exemplos em cache sem executar provedores.

API

GET /v1/design em api.getdesign.app retorna Markdown ou JSON. Autenticação bearer do WorkOS e chaves de provedor são necessárias.

CLI

Execute bunx @getdesign/cli no Bun com suas chaves Daytona e OpenAI. Ele grava o design.md em um arquivo local.

SDK

Instale @getdesign/sdk com bun add @getdesign/sdk para executar o agente em processo no Bun, com resultados tipados e eventos de progresso, usando suas chaves de provedor.

Skill

Adicione o SKILL.md portátil com skills add MohtashamMurshid/getdesign. Ele é executado dentro do Claude Code, Codex ou Cursor, usando as próprias ferramentas do agente.

Principais recursos do getdesign

Extração de sistema de design

getdesign lê os tokens CSS de um site público, captura a página em um navegador e produz um documento de design cobrindo cores, tipografia, espaçamento e componentes.

Saída design.md

Os resultados são entregues como um documento Markdown descrevendo o sistema de design do site. Execuções visuais também incluem capturas de tela.

Múltiplas superfícies de acesso

Web, API, CLI e TypeScript SDK acessam o mesmo núcleo de agente; a Skill é executada dentro do seu próprio agente de codificação. A CLI e o SDK rodam localmente no Bun, enquanto a API HTTP suporta execuções hospedadas.

Execuções privadas com publicação opcional

As execuções do painel permanecem privadas até que você as publique. A publicação cria um link que qualquer pessoa pode usar para visualizar e baixar o documento de design e as capturas de tela; você pode tornar uma execução privada novamente para encerrar o acesso futuro, embora cópias já baixadas permaneçam com seus destinatários.

Casos de uso do getdesign

Produzir um guia de estilo a partir de um site ativo

Gere um documento de design legível a partir de um site público que descreva suas cores, tipografia, espaçamento e componentes.

Dar contexto de design a um agente de codificação

Passe o design.md gerado e suas capturas de tela para um agente de codificação, ou instale a Skill para que o agente extraia o contexto de design com suas próprias ferramentas.

Executar extração em um fluxo de trabalho local ou hospedado

Use a CLI ou o TypeScript SDK para execuções locais no Bun, ou a API HTTP para execuções hospedadas retornando Markdown ou JSON.

Compartilhar um documento de design

Publique uma execução do painel para criar um link que outros possam usar para visualizar e baixar o documento de design e as capturas de tela.

Perguntas frequentes sobre o getdesign

O que é um arquivo design.md?

Um design.md é um documento Markdown que descreve o sistema de design de um site. Você pode lê-lo como um guia de estilo ou entregá-lo a um agente de codificação como contexto ao construir uma interface. Execuções visuais também incluem capturas de tela.

Como extraio as cores e fontes de um site?

Salve suas chaves Daytona e OpenAI em Conta, depois cole a URL de um site público em Agente. O getdesign lê tokens CSS, captura a página em um navegador e gera um documento de design que você pode baixar. Você também pode explorar exemplos em cache sem executar provedores.

Posso usar o getdesign com um agente de codificação?

Sim. Entregue ao seu agente de codificação o design.md gerado e suas capturas de tela, ou instale a Skill do getdesign para extrair o contexto de design usando as próprias ferramentas do agente. A CLI e o TypeScript SDK também rodam localmente no Bun, e a API HTTP suporta execuções hospedadas.

Há autenticação ou plano pago?

O painel usa login do WorkOS. As execuções hospedadas exigem suas próprias chaves Daytona e OpenAI; não há chave de API do getdesign na V1. A V1 não tem cobrança de execuções do getdesign. Você paga à Daytona pela captura no navegador e à OpenAI pelo uso do modelo.

Minhas execuções de design são públicas?

Suas execuções do painel são privadas até que você as publique. A publicação cria um link que qualquer pessoa pode usar para visualizar e baixar o documento de design e as capturas de tela. Você pode tornar uma execução privada novamente para encerrar o acesso futuro; cópias já baixadas permanecem com seus destinatários.

Ferramentas semelhantes

Explorar categoria