Design Reference Engine

Salve a referência com as cores, a tipografia e o CSS que a fizeram.

Capture, organize e adapte referências de design da web — offline, na sua máquina.

zfrog jump http://localhost:3000

saída — os tokens desta página, extraídos por ela mesma:

papel #FAFAF5 tinta #111110 acento #3F6212

--papel:#FAFAF5; --tinta:#111110; --acento:#3F6212; --raio:2px; --sombra:none;

não há versão hospedada — por design.

Instalar localmente Ver código

O que sai

Cada saída abaixo veio de um comando rodado de verdade. Nada aqui é ilustração.

playwrightcaptura visual — screenshot full-page nos breakpoints que você definir
scrapydescoberta — segue o site e mapeia as páginas
staticfile + wgetespelha sites estáticos

A auto-detecção escolhe o motor. O pipeline roda offline: screenshot full-page → ZIP → limpeza de trackers.

paleta165 elementos

#111110primary×312

#55554F—×180

#3F6212acento×1

tipografia1 família

JetBrains Mono16px ×68 · 13px ×52 · 12–19px UI · 68px hero

medidasraios 0px e 2px · sombras —

tokensjson

{
  "url": "http://localhost:3000",
  "element_count": 165,
  "palette": [
    {"hex": "#111110", "count": 312, "role": "primary"},
    {"hex": "#55554F", "count": 180, "role": null},
    {"hex": "#3F6212", "count": 1,   "role": "accent"}
  ],
  "fonts": [
    {"family": "JetBrains Mono",
     "sizes": {"16px": 68, "13px": 52, "68px": 1}}
  ],
  "radii":   [["0px", 147], ["2px", 22]],
  "shadows": []
}

design-tokens.json

Fonte: esta própria página, capturada com zfrog jump — os tokens acima são dela mesma.

Comandos

jumpcaptura a URL e guarda a referência: screenshot full-page, ZIP limpo, tokens

$ zfrog jump http://localhost:3000
referência salva · 165 elementos · 7 cores · 1 família

tonguelê os tokens de uma referência salva: paleta, tipografia, medidas

$ zfrog tongue localhost
primary #111110 · acento #3F6212 · JetBrains Mono 16px · raio 2px

pondlista e busca as referências salvas na sua máquina

$ zfrog pond
localhost · 1 referência · 0,4 MB

exportescreve os tokens como CSS ou JSON para usar no seu projeto

$ zfrog export --css localhost
tokens.css

Instalar

Roda inteiro na sua máquina. Copie, cole e espere o Chromium baixar.

git clone https://github.com/ens-Emilio/zfrog
cd zfrog
pip install -e ".[dev]"
playwright install chromium
./zfrog dev

git clone https://github.com/ens-Emilio/zfrog
cd zfrog
docker compose up

Requisitos: Python 3.12+, Playwright + Chromium (~3 GB) e Redis para a fila. Nada sai da sua rede.

Por que não hospedamos

Capturar páginas consome banda e roda browsers pesados. Colocar isso atrás de um servidor significaria pagar por isso de um lado — e limitar a captura do outro.

Rodando local, seus dados ficam na sua rede, não existe custo de infraestrutura e não existe uma superfície de ataque exposta.

Esta página é o outro lado disso: um arquivo HTML estático, sem API, sem cookies, sem telemetria. Não há o que carrear para produção — não há aplicação atrás dela.

Prova

Captura full-page desta própria landing, de 1440 por 5039 pixels, gerada pelo zfrog

Captura full-page desta página — 1440×5039 px, um PNG dentro do ZIP da referência. A paleta e os tokens acima vieram do mesmo jump. Capturas de sites de terceiros ficam na sua máquina; a página oficial só expõe o que é nosso.