Extensão para Chrome e Edge · v1.0

Copie qualquer interface. Cole na sua IA.

Passe o mouse num elemento de qualquer site e copie CSS limpo e Tailwind v4 de graça. Com o Pro, copie o componente inteiro, os tokens de design da página e um briefing pronto para o Claude Code, o Cursor ou o v0. Roda no seu navegador. Sem conta.

Instalar grátis Quero o Pro — US$5 uma vez Quero o Pro — US$5 uma vez Receber o link de instalação

Disponível agora na Chrome Web Store e no Edge Add-ons. CSS limpo e Tailwind grátis para sempre; toda instalação começa com 7 dias de Pro, sem cartão.

A versão 1.0 está pronta e em revisão na Chrome Web Store. A chave do Pro sai logo depois do pagamento e funciona assim que a extensão entrar no ar.

<div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-xs">
  <p class="text-sm font-semibold text-indigo-600">Pro</p>
  <p class="mt-1.5 text-3xl font-semibold tracking-tight">
    $29<span class="text-base font-normal text-zinc-500">/yr</span>
  </p>
  <a class="mt-4.5 inline-flex h-9.5 items-center rounded-lg
            bg-indigo-600 px-4 text-sm font-semibold text-white">
    Upgrade
  </a>
</div>

Exemplo do que o UIBrief gera. O resultado real depende da página inspecionada.

O que faz

De "gostei desse card" a código funcionando em um clique.

Feito para o jeito de construir interface em 2026: você mostra ao seu agente de IA o que quer, e ele escreve o código. O UIBrief entrega o contexto certo.

CSS limpo, não um despejo

Só os estilos que diferem do padrão do navegador e do elemento pai. Nada de 200 linhas de ruído.

Classes Tailwind v4

Mapeadas para a escala do v4 (espaçamento de 0,25rem, cores oklch), com valor arbitrário só quando nada encaixa. Em HTML ou JSX.

Tokens de design

Paleta, escala tipográfica, espaçamentos, raios e sombras da página inteira, exportados como @theme, variáveis CSS ou JSON.

Copiar para IA

Um briefing em markdown com estrutura, estilos, tokens e recorte de tela, pronto para Claude Code, Cursor ou v0.

Como funciona

Três passos. Zero configuração.

Clique no ícone

O inspetor só roda na aba onde você ativar. Nada de permissão para "ler todos os seus dados".

Passe o mouse e escolha

Passe o mouse para realçar e clique para travar. ↑ e ↓ pulam para o elemento pai ou filho.

Copie o formato de que precisa

Tailwind, CSS limpo, tokens ou o briefing para IA, direto para a área de transferência.

Inspetores de CSS típicos comparados com o UIBrief
Inspetor de CSS típicoUIBrief
SaídaCSS bruto, ou Tailwind sem foco no v4CSS limpo, Tailwind v4 (oklch, escala de 0,25rem), JSX
Tokens de designRaramente@theme / variáveis / JSON da página
Feito para agentes de IANãoBriefing em markdown + recorte de tela
Conta e dadosVaria conforme a ferramentaSem conta. Roda no seu navegador.
PreçoAssinaturas de até ~US$96/anoGrátis · Pro US$5 uma vez
Preços

Grátis para CSS e Tailwind. O Pro custa US$5, uma vez.

Sem assinatura. Pague uma vez e fique com todas as funções Pro, inclusive as futuras. Preço em dólar.

Grátis

US$0

Para sempre

  • Inspeção ilimitada
  • CSS limpo de qualquer elemento
  • Classes Tailwind v4 de qualquer elemento
  • Todas as funções Pro grátis por 7 dias
Instalar grátisReceber o link de instalação
Preço de lançamento

Pro

US$5 uma vez

Licença vitalícia · Chrome + Edge

  • Componente inteiro em HTML ou JSX com Tailwind
  • Tokens de design: @theme, variáveis CSS ou JSON
  • Copiar para IA: briefing + captura do elemento
  • Funções Pro futuras incluídas
Quero o Pro — US$5
Regras, sem letra miúda
  • A chave de licença aparece na página logo depois do pagamento. Funciona offline, em todos os seus navegadores. Guarde-a num lugar seguro.
  • Mudou de ideia? Reembolso integral em até 14 dias após a compra, sem perguntas. É só escrever para contact@your-domain.com com o e-mail da compra: confirmamos em até 1 dia útil.
  • O Pro é uma licença vitalícia: todas as funções Pro, inclusive as futuras, enquanto o UIBrief for vendido. Se um dia ele for descontinuado, a versão instalada continua funcionando offline.
  • O pagamento é processado pela Creem, nosso merchant of record (revendedor autorizado), que cuida de impostos e recibos e é o nome que aparece na fatura. A cobrança é em dólar e seu cartão pode aplicar IOF.
Dúvidas

Perguntas frequentes

Ele envia as páginas que eu inspeciono para algum lugar?

Não. Tudo roda no seu navegador. A extensão pede o mínimo de permissões e só mexe na aba onde você clicar. A licença é verificada offline; uma vez por semana a extensão pede ao nosso servidor de licenças para renovar o plano anual e conferir reembolsos. Esse pedido leva só a chave de licença.

Usa IA ou precisa de chave de API?

Nenhuma chamada de IA e nenhuma chave de API. O UIBrief prepara o contexto; o seu agente (Claude Code, Cursor, v0…) faz a geração.

Quais navegadores?

Chrome e Edge (versão 137 ou mais nova). Outros navegadores dependem da demanda.

E o Tailwind v3?

A saída é para o Tailwind v4. Sites feitos com v3 são reconhecidos (a paleta vira os mesmos nomes de classe), e a maioria das classes também funciona num projeto v3.

Funciona em qualquer site?

Na grande maioria. Os navegadores bloqueiam extensões em páginas chrome://, na Chrome Web Store e em PDFs, e elementos dentro de iframes de outro domínio podem ficar fora de alcance com as permissões mínimas do UIBrief.

Preciso criar conta?

Não. Instale e use. Se comprar o Pro, você cola uma chave de licença uma vez; nunca há login.

Quem está construindo?

Um dev solo brasileiro que constrói interfaces com agentes de IA todo dia e queria esta ferramenta. Dúvidas: contact@your-domain.com.