Z-Proto | Djalma Jr.

Um web component sem dependências e agnóstico de framework que envolve qualquer protótipo de UI em um shell de dispositivo de verdade — presets, zoom, redimensionamento, capturas de tela e captura para o Figma em um clique.

Pare de tirar print do seu dev server. O Z-Proto é um shell de prototipagem que você envolve em qualquer markup para ganhar na hora uma moldura de dispositivo convincente — com chrome de janela no estilo do macOS, traffic lights e barra de título. É um único web component com zero dependências e sem framework, então cai bem em HTML puro, React, Vue ou qualquer coisa que renderize no DOM.

Envolva e pronto

Carregue um módulo de um CDN, aninhe o protótipo dentro de <z-proto-body> e o shell cuida do resto. Sem build, sem arquivo de configuração.

<script
  type="module"
  src="https://cdn.jsdelivr.net/gh/djalmajr/z-proto@main/src/z-proto.js"
></script>

<z-proto>
  <z-proto-body title="My App" width="1280" height="800">
    <!-- seu protótipo -->
  </z-proto-body>
</z-proto>

Um laboratório de dispositivos em um elemento

Tudo o que você precisa para testar um layout vive na toolbar:

17 presets de dispositivo entre mobile, tablet e desktop, mais um modo responsivo para dimensionar livremente.
Campos manuais de largura/altura com restrições min-width / min-height, para que a moldura nunca encolha abaixo do tamanho útil.
5 níveis de zoom (50%–125%) para caber uma moldura grande na tela ou inspecionar detalhes.
8 alças de redimensionamento por arraste em cada borda e canto, ao vivo.

Capture sem sair da página

Screenshot para a área de transferência — copie a área de conteúdo direto para o clipboard via Screen Capture API, pronto para colar em qualquer lugar.
Captura para o Figma — ligue o fluxo HTML-to-Design com ?FIGMA_KEY=<key> na URL ou um atributo figma-key, e envie o protótipo renderizado para o Figma como camadas editáveis.

Feito para a plataforma

A theming é puro CSS custom properties, então temas claro e escuro estão a uma troca de variável de distância. Os estilos são carregados com import ... with { type: "css" } e aplicados via adoptedStyleSheets, mantendo o shadow DOM limpo e rápido — sem tags <style> inline, sem flash de conteúdo sem estilo.

A API permanece declarativa: <z-proto figma-key zoom> configura o shell; <z-proto-body title width height min-width min-height> define uma moldura; e dois slots permitem estendê-la — <z-proto-header> para conteúdo abaixo da toolbar e <z-proto-extras> para controles à direita da barra de título.

Exemplos inclusos

O repositório traz duas referências funcionais: um popup de captura para o Figma feito com htm/preact e um app de tarefas multi-página usando preact-iso com roteamento no cliente — o suficiente para copiar já no primeiro dia.

Disponibilidade

Código: github.com/djalmajr/z-proto

Open source sob a licença MIT.