Deja de capturar pantallas de tu dev server. Z-Proto es un shell de prototipado que envuelves alrededor de cualquier markup para obtener al instante un marco de dispositivo convincente — con chrome de ventana al estilo de macOS, traffic lights y barra de título. Es un único web component con cero dependencias y sin framework, así que encaja en HTML puro, React, Vue o cualquier cosa que renderice al DOM.
Envuélvelo y listo
Carga un módulo desde un CDN, anida tu prototipo dentro de <z-proto-body> y el
shell hace el resto. Sin build, sin archivo de configuración.
<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">
<!-- tu prototipo -->
</z-proto-body>
</z-proto>Un laboratorio de dispositivos en un elemento
Todo lo que necesitas para poner a prueba un layout vive en la toolbar:
- 17 presets de dispositivo entre móvil, tablet y escritorio, más un modo responsive para dimensionar libremente.
- Campos manuales de ancho/alto con restricciones
min-width/min-height, para que el marco nunca se reduzca por debajo de su tamaño útil. - 5 niveles de zoom (50%–125%) para encajar un marco grande en pantalla o inspeccionar el detalle.
- 8 manijas de redimensionado por arrastre en cada borde y esquina, en vivo.
Captura sin salir de la página
- Captura al portapapeles — toma el área de contenido directo al portapapeles vía Screen Capture API, lista para pegar en cualquier lugar.
- Captura a Figma — activa el flujo HTML-to-Design con
?FIGMA_KEY=<key>en la URL o un atributofigma-key, y envía el prototipo renderizado a Figma como capas editables.
Hecho para la plataforma
El theming es puro CSS custom properties, así que los temas claro y oscuro están
a un cambio de variable de distancia. Los estilos se cargan con
import ... with { type: "css" } y se aplican vía adoptedStyleSheets,
manteniendo el shadow DOM limpio y rápido — sin etiquetas <style> inline, sin
flash de contenido sin estilo.
La API se mantiene declarativa: <z-proto figma-key zoom> configura el shell;
<z-proto-body title width height min-width min-height> define un marco; y dos
slots permiten extenderlo — <z-proto-header> para contenido debajo de la
toolbar y <z-proto-extras> para controles a la derecha de la barra de título.
Ejemplos incluidos
El repositorio trae dos referencias funcionales: un popup de captura a Figma hecho con htm/preact y una app de tareas multipágina usando preact-iso con enrutamiento en el cliente — suficiente para copiar desde el primer día.
Disponibilidad
- Código: github.com/djalmajr/z-proto
Open source bajo la licencia MIT.