Siteprint
Siteprint · Programação · Prompts
O Siteprint mede cores, fontes, espaçamento e layout de qualquer site em um navegador real, e transforma o resultado em prompt, DESIGN.md e arquivos de tema para agentes de código.
Sobre Siteprint
About
O que é o Siteprint
O Siteprint é um extrator de design de sites. Você cola um endereço, a página abre em um navegador real do lado do serviço e, uns 20 segundos depois, aparecem a paleta, o conjunto de fontes, a escala tipográfica, os passos de espaçamento, os raios de canto, as sombras, as curvas de aceleração, os breakpoints, o logotipo e o framework. Tudo é medido na página renderizada, então os números mostram o que o visitante vê, não o que a folha de estilo promete.
O problema que ele resolve é o pedido que todo builder com IA acaba recebendo: deixa com a cara deste site. Um print carrega a aparência, não os valores. O agente chuta códigos hex, alturas de linha e padding de botão, e você passa a hora seguinte ajustando pixel. O caminho de site para prompt é o centro do produto: o Siteprint entrega os valores exatos em um prompt escrito para Lovable, Claude Code ou Cursor, mais um arquivo DESIGN.md que trata o design como direção aplicável a páginas novas.
Dois limites importam antes de começar. O Siteprint mede um design, não constrói, então você ainda precisa de um agente ou de uma pessoa para escrever o código. E a versão web lê a página a partir do servidor dele, o que significa que sites que bloqueiam visitantes automáticos, páginas com login ou um card específico da página pedem a extensão de Safari em um Mac.
Como começar
- Abra siteprint.app e cole o endereço de um site. Esta etapa não exige conta.
- Espere a varredura. O Siteprint abre o site em um navegador real, leva uns 20 segundos e preenche a página com valores medidos.
- Leia as seções que interessam: cores e seus papéis, fontes e estilos de texto, espaçamento e formas, sombras e movimento, breakpoints, ativos e tecnologia. Clique em qualquer valor para copiar.
- Para o prompt de reconstrução e o DESIGN.md, entre na conta e vá para o Pro. Abra Build with this design e cole o prompt no Lovable, no Claude Code ou no Cursor.
- Se você trabalha no Safari do Mac, instale a extensão para varrer páginas com login, uma seção isolada ou sites que recusam visitantes automáticos, e deixe o agente ler as varreduras salvas por MCP.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Siteprint.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores front-end e criadores independentes
- Designers que estudam um site de referência
- Fundadores e profissionais de marketing que sabem descrever um visual mas não o CSS
- Times que mantêm vários produtos com a mesma imagem
Tarefas
- Refazer uma landing page em um builder com IA
- Tirar tokens de design de um site de que você gosta
- Igualar um projeto já feito a uma referência
Cenários
- Mudar o visual de um painel interno para o estilo que o time já aprovou
- Compor uma direção visual nova a partir de dois sites
- Revisar a escala tipográfica e o ritmo de espaçamento de um concorrente antes de um redesign
Principais recursos
Paleta com papéis
O Siteprint lista todas as cores da página, separadas entre neutros e matizes, com valores HEX, RGB e HSL. Cada varredura funciona como um sistema de design da página: além das cores, ela marca papéis como tela, superfície, texto e apagado, para o agente saber qual tom vai em cada lugar. Variantes de modo escuro e gradientes são registradas à parte quando o site usa.
Tipografia e escala de texto
O painel de tipografia nomeia cada família, seus pesos, os arquivos que carrega e de onde eles vêm. Os estilos de texto chegam com tamanho, altura de linha, espaçamento entre letras e o elemento ao qual se aplicam. Essa é a parte que um print não entrega, e costuma ser onde uma reconstrução começa a desviar.
Espaçamento, formas e movimento
Os passos de espaçamento, os raios e as larguras de conteúdo vêm do layout renderizado, não de dedução. Sombras, curvas de aceleração e durações aparecem com uma prévia que roda ao passar o mouse, o que ajuda quando um botão parece certo no site de referência e errado na sua versão.
Prompt de reconstrução e DESIGN.md
O Pro transforma uma varredura em um único prompt que descreve layout, movimento e medidas, no formato do builder de IA que você indicar. O arquivo DESIGN.md apresenta o mesmo design como direção, não como página fixa, então o agente consegue aplicá-lo a telas que ainda não existem no site de referência.
Exportações e tokens de design
Além do prompt, o Siteprint exporta configuração do Tailwind v4, temas do shadcn/ui, variáveis CSS e um arquivo de tokens. Cada cor e cada estilo de texto vai nomeado e posicionado, o que poupa a passada de renomeação manual que costuma comer uma tarde.
Acesso do agente por MCP
A extensão de Safari sobe um servidor MCP de design local com três ferramentas: list_designs, get_design e get_reference_image. Claude Code, Cursor, Codex ou qualquer cliente MCP podem ler uma varredura salva como prompt, design, layout, configuração do Tailwind, tema do shadcn, CSS ou JSON. Na versão web você conecta o agente pela Library, e no caminho da extensão os arquivos não saem da sua máquina.
Match your build
Cole o endereço da sua própria versão e o Siteprint compara com o site de referência. A saída é uma lista de correções e um prompt que empurra sua página na direção do original, mais útil que um diff de códigos hex quando o layout está alguns pixels fora.
Prós e contras
Prós
- Inspeção gratuita de quantos sites você quiser, com cópia ao clicar e sem cadastro.
- Os valores vêm de uma renderização real, então incluem estilos calculados que o HTML estático não mostra.
- O prompt de reconstrução aponta pelo nome para Lovable, Claude Code, Cursor e outros agentes, o que reduz o trabalho de escrever prompt na mão.
- A extensão de Safari lê as páginas localmente, então sites com login e sites que bloqueiam bots ficam ao alcance, e as varreduras permanecem no Mac.
- O Compose e a Library transformam consultas avulsas em um conjunto de referências reutilizável.
Contras
- O prompt de reconstrução, o DESIGN.md e as exportações ficam atrás do Pro, então o plano gratuito responde perguntas mas não entrega nada com que construir.
- Cada varredura web leva uns 20 segundos e falha em sites que bloqueiam visitantes automáticos, o que empurra usuários de Mac para a extensão paga.
- A extensão exige Safari no macOS 14 ou mais novo, então quem usa Windows ou Chrome fica só com o caminho do servidor, mais lento.
- Mede e não constrói, então a saída continua sendo um pedido que o agente precisa interpretar bem.
Perguntas frequentes
Inspecionar um site é grátis e não pede conta, incluindo cores, fontes, espaçamento, ativos e tecnologia. O Pro custa US$ 9 por mês ou US$ 69 por ano e adiciona o prompt de reconstrução, DESIGN.md, exportações, fundo animado e Match your build. A extensão de Safari é comprada à parte, por US$ 19,99 uma única vez.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Siteprint.
Alternativas a Siteprint
GitGlow
GitGlow · Programação · ProdutividadeO GitGlow é um cliente Git de desktop que coloca seu código e as mudanças dos seus agentes de IA na mesma revisão, para você saber o que vai sair da máquina antes de publicar.
Together Link
Together AI · ProgramaçãoTogether Link é uma ferramenta gratuita e de código aberto da Together AI que liga agentes de código como Claude Code e Codex a modelos abertos, com roteador automático e recibo de custo por sessão.
HeyPi
Proactive Intelligence Ltd. · Programação · Produtividade · NegóciosO HeyPi é uma plataforma de reuniões com IA em que um assistente chamado Pi escuta a chamada, lembra o contexto de sessões anteriores, trabalha dentro dos seus aplicativos e cria páginas, decks e vídeos na hora.