Cores
Paleta da página agrupada por uso: fundos, textos, contornos, destaques
Exportar Pro
Extraia o sistema de design de qualquer site
O Smart Design Inspector percorre uma página, extrai os tokens de design (cores, escala tipográfica e espaçamentos) e exporta esses tokens para Tailwind v4 @theme, para variáveis CSS ou para um DESIGN_SPECS.md pronto para o seu projeto ou para o seu assistente de IA.
Função Pro em acesso antecipado grátis enquanto não chegar o lançamento da Pro (data por definir)
tucliente.example
/* Tailwind v4 */
@theme {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--text-h1--line-height: 1.1;
--spacing-section: 96px;
}/* Variáveis CSS */
:root {
--color-primary: #2563eb; --color-ink: #0b0b0b; --color-bg: #ffffff; --color-line: #e5e7eb; --font-heading: "Inter", sans-serif;
--text-h1: 48px;
--spacing-section: 96px;
}# Sistema de design · tucliente.example
## Cores
- primary #2563eb · botões e links
- ink #0b0b0b · texto
## Tipografia
- H1 · Inter 600 · 48 px / 1,1
## Espaçamentos
- Bloco · 96 px01
O trabalho que economiza
O problemaO cliente envia um site de referência: «quero algo assim». Para replicar o estilo, são precisas as cores, os tamanhos de letra e os espaçamentos. Tirá-los com um conta-gotas e com o DevTools são dezenas de cliques, e no fim fica uma lista solta de valores, não um sistema que se possa usar.
02
O que exporta
3 tokensTipografia
Cada estilo (H1-H6, corpo, botões) com família, tamanho, peso, entrelinha e espaçamento, e o @font-face ou o link para o Google Fonts
Espaçamentos
A escala de margens e paddings que se repete na página
03
Três formatos de saída
Copiar ou fazer o downloadTailwind v4 @theme
Para colar no seu CSS:
@theme {
--color-primary: …;
--font-heading: …;
--spacing-section: …;
}Variáveis CSS
Em :root, para qualquer projeto sem Tailwind.
DESIGN_SPECS.md
Um documento com todo o sistema explicado. Serve para quem trabalha no projeto e para entregar ao Claude, ao Cursor ou a qualquer assistente de IA quando lhe pedir que construa com esse estilo.
04
Como se usa
3 passos- 01
Abra o site de referência.
- 02
Escolha Design → Exportar sistema.
- 03 Pro
Escolha o formato e copie ou faça o download.
| Grátis0 €para sempre | Pro49 €pagamento único | |
|---|---|---|
| Ver a paleta, as fontes e a escala tipográfica da página | ||
| Exportar o sistema de design: Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md | — | Acesso antecipado grátis |
06
Ética e licenças
Inspire-seO estilo de um site (cores, tamanhos, espaçamentos) não está protegido. Os textos, as imagens, os logos e as fontes comerciais estão. A extensão exporta valores, não conteúdo, e avisa da licença de cada fonte. Use-a para se inspirar, não para copiar uma marca.
É grátis?
É uma função Pro. Enquanto não chegar o lançamento da Pro (data por definir), está em acesso antecipado grátis para todos. Depois passa a estar incluída na Pro de 49 €, de pagamento único.
Que versão do Tailwind usa?
Tailwind v4, com a diretiva @theme. Se usar outra versão, exporte para variáveis CSS.
Extrai o sistema do site inteiro ou de uma página?
Da página que tem aberta. Se as outras páginas usarem o mesmo sistema, o resultado é o mesmo.
Funciona com uma IA como o Claude ou o Cursor?
Sim. O DESIGN_SPECS.md está escrito para que um assistente de IA o leia e construa com esse estilo.
Exporta componentes?
Não. Exporta tokens. Para copiar um bloco como componente, existe a conversão de um site para Tailwind.
Em que navegadores e sistemas funciona?
No Chrome, Edge, Brave, Arc, Opera e Vivaldi, em Windows, Mac e Linux, desde a 1.0. Funciona da mesma forma em todos porque quem executa a extensão é o navegador, não o sistema. O código está preparado para chegar ao Firefox e ao Safari sem ser reescrito. Enquanto está em desenvolvimento, pode haver alterações.
08
Continue com
Funções próximasCores
A paleta da página, conta-gotas e contraste WCAG de cada par de texto e fundo.
Cores de um site →Fontes
Família, pesos, origem, licença e escala tipográfica de toda a página.
Fontes de um site →Site para Tailwind
Copie um bloco como JSX + Tailwind ou como HTML/CSS.
Converter um site para Tailwind →Preços
Grátis para sempre. Pro, 49 € uma única vez.
Ver preços →Lista de espera
Seja dos primeiros a experimentar
O Smart Design Inspector está em desenvolvimento. Deixe o seu email e avisamos no dia em que chegar à Chrome Web Store, com as 7 funções Pro grátis em acesso antecipado.
Um email no dia do lançamento e poucos mais · Cancele com um clique