Stylepack
Grátis: 3 pacotes por dia, 10 com uma conta gratuita

Transforme qualquer site em um pacote de design para sua IA

Cole uma URL. O Stylepack mede a página como ela é renderizada (cores, tipografia, espaçamento, raios, sombras, componentes) e como ela se comporta: hover e foco, menus e tooltips, o outro tema e quatro larguras de tela. Você recebe DESIGN.md, BEHAVIOR.md, tokens, um tema Tailwind, um SKILL.md e capturas de tela em um único zip.

Medido, não adivinhado

Todo valor vem da página real, ponderado pelo que de fato aparece na tela. Sem chute a partir de uma captura de tela, sem modelo inventando um código hex.

Comportamento, não só cores

Estados de hover e foco, posição e tempo de fade dos tooltips, menus, animação ao rolar, elementos fixos, tabelas, formulários, quebra de texto, modo escuro e todos os breakpoints.

Formatos prontos para agentes

DESIGN.md do Google, um SKILL.md, tokens W3C, variáveis CSS e um tema Tailwind v4. Coloque a pasta no projeto e aponte seu agente para ela.

Extraia o design system de qualquer site

  1. Cole uma URL

    Qualquer site público, como stripe.com. Subdomínios como docs.stripe.com contam como sites separados.

  2. Mande medir o site

    A página abre em um navegador de verdade, em quatro larguras de tela e nos dois temas. Menos de um minuto depois, o pacote está pronto.

  3. Entregue à sua IA

    Baixe o zip, coloque a pasta no projeto e peça ao agente que leia DESIGN.md e BEHAVIOR.md antes de escrever qualquer código.

O que vem no pacote

Uma pasta, pronta para qualquer agente de código com IA ou app de chat.

DESIGN.md
O design system no formato DESIGN.md do Google: cores, tipografia, espaçamento, raios, sombras e componentes.
BEHAVIOR.md
Hover, foco, tooltips, menus, movimento, rolagem, tabelas, formulários, quebra de texto, regras responsivas e modo escuro.
SKILL.md
Uma skill para Claude Code e Cursor que guia o agente pelo pacote na ordem certa.
tokens.json
Design tokens W3C (DTCG) para Style Dictionary e plugins de tokens do Figma.
tokens.css
Todos os valores como variáveis CSS.
tailwind.css
Os mesmos valores como um bloco @theme do Tailwind v4.
screenshots/
O site em 1440, 1024, 768 e 390 pixels de largura, mais o outro tema quando houver.
README.md, PROMPT.md
Como entregar o pacote a cada ferramenta de IA, e o prompt para colar.

Funciona com as ferramentas de IA que você já usa

Um guia passo a passo para cada uma:

Exemplos de pacotes de design

Ver a galeria inteira
Página inicial do linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS e produtividadeEscuro + claro
Página inicial do resend.com
resend.com
domaine + aBCFavorit
Ferramentas para devsEscuro + claro
Página inicial do supabase.com
supabase.com
Manrope + Inter
Ferramentas para devsClaro + escuro
Página inicial do figma.com
figma.com
figmaSans + figmaMono
Ferramentas de designClaro
Página inicial do framer.com
framer.com
GT Walsheim Medium + Inter Variable
Ferramentas de designEscuro
Página inicial do apple.com
apple.com
SF Pro Text + SF Pro Display
Tecnologia de consumoEscuro + claro
Página inicial do arc.net
arc.net
Marlin Soft SQ + -apple-system
Tecnologia de consumoClaro

Perguntas

O que é o Stylepack?

O Stylepack (stylepack.ai) é uma ferramenta web gratuita que transforma qualquer site público em um pacote de design para agentes de código com IA: DESIGN.md, BEHAVIOR.md, SKILL.md, design tokens, um tema Tailwind e capturas de tela, em um único zip.

Como copio o design de um site para o Cursor ou o Claude Code?

Cole o endereço do site no Stylepack e baixe o pacote. Coloque a pasta no seu projeto e peça ao agente que leia DESIGN.md e BEHAVIOR.md e veja as capturas de tela antes de criar qualquer coisa. Cada página de pacote traz os passos exatos e um prompt para copiar.

O que é o DESIGN.md?

DESIGN.md é o formato aberto do Google para descrever uma identidade visual a agentes de código em um único arquivo Markdown: cores, tipografia, espaçamento, raios, sombras e componentes. O Stylepack gera um para qualquer site público.

Como extrair design tokens de um site?

Cole o endereço dele no Stylepack. O pacote inclui tokens.json no formato de design tokens do W3C (DTCG), os mesmos valores como variáveis CSS em tokens.css e um tema Tailwind v4 em tailwind.css.

O que o BEHAVIOR.md cobre?

Como o site se comporta, não só como ele parece: estados de hover e foco, tooltips, menus, movimento, rolagem, tabelas, formulários, quebra de texto, o layout em 1440, 1024, 768 e 390 pixels de largura e o modo escuro.

É grátis?

Sim. São 3 pacotes por dia sem conta e 10 por dia com uma conta gratuita. Pacotes que já estão na galeria não contam.

Com quais ferramentas de IA funciona?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable e Bolt, ou qualquer outra que leia Markdown e CSS.

O Stylepack é afiliado aos sites da galeria?

Não. Um pacote descreve o design público de um site como referência. Logotipos, fontes, imagens e textos pertencem aos seus donos, e verificar as licenças das fontes fica por sua conta.