Proyecto 02 · Herramienta para desarrolladores
Capturar una interfaz pulida no debería exigir reconstruirla en una herramienta de diseño.
DOMShot convierte un elemento real de una web en un PNG limpio y listo para compartir. El mismo sistema de captura está disponible en una extensión de Chrome, un editor, una CLI y un servidor MCP.
DOMShot
El editor permite ajustar el fondo, el espaciado, el radio, la sombra, la escala y el tamaño alrededor del elemento seleccionado.
01 / Punto de partida
Preparar una buena captura suele dar más trabajo del necesario.
El componente ya está en el navegador, pero convertirlo en una imagen limpia suele implicar abrir las herramientas de desarrollo, recortar una captura, rehacer el espaciado, añadir un fondo y volver a comprobar la exportación.
DOMShot aprovecha el propio renderizado del navegador. Captura el elemento seleccionado y abre un editor para ajustar el fondo, el espaciado, la sombra y el tamaño.
Principio de productoSelecciona el elemento real. Comprueba la composición final. Exporta una vez.
02 / Cómo funciona
Seleccionar, ajustar y exportar.
Navegador
Seleccionar un elemento
La extensión superpone una capa sobre la página y muestra con claridad qué se va a capturar.
Captura
Renderizar el elemento
DOMShot aísla el contenido seleccionado y conserva su aspecto en el navegador.
Editor
Componer la imagen
Los presets y controles permiten ajustar fondo, espaciado, sombra, radio y escala.
Salida
Exportar el PNG
La vista previa se convierte en una imagen local con el tamaño y la composición elegidos.
El modo de selección delimita el elemento exacto antes de crear la imagen.
03 / Decisiones de producto
Rápido para una captura puntual y preciso cuando hay que repetirla.
Vista previa antes de guardar
El editor muestra la composición final antes de descargarla.
Procesamiento local por defecto
El contenido se procesa en el navegador para crear la captura y no se sube a ningún servidor de DOMShot.
Transparencia siempre que se pueda
La captura conserva la transparencia y recurre a alternativas claras cuando una página no puede renderizarse bien.
Una única base de captura
La extensión, la API de Node, la CLI y el servidor MCP comparten la misma lógica de captura.
04 / Lo que hay detrás
La extensión, la CLI y el servidor MCP.
DOMShot es un único producto con tres formas de usarlo: una extensión de Chrome, una API y una CLI de Node para scripts, y un servidor MCP para agentes.
Extensión
Captura con Manifest V3
Selección del elemento, renderizado en el navegador, historial reciente y paso al editor.
Editor
Solo los controles necesarios
Presets y ajustes directos para las decisiones que importan en una imagen lista para compartir.
Herramientas para agentes
Node, CLI y MCP
Opciones programables para scripts, agentes de código y automatizaciones repetibles.
Sitio
Producto y documentación
Un punto de entrada claro para instalación, ejemplos, privacidad y soporte.
La vista previa coincide con el PNG que se descargará.
La extensión, la CLI y el servidor MCP comparten la misma lógica de captura.
Lo que ha sido difícil
La web no se comporta como un lienzo
Los elementos pueden contener transparencias, estilos anidados, fuentes, iframes o comportamientos difíciles de conservar en una imagen.
Demasiados controles acaban estorbando
Si el editor ofreciera todos los ajustes posibles, terminaría recreando una herramienta de diseño. Cada control tiene que justificar su sitio en una captura rápida.
Un fallo debe verse como un fallo
La CLI y las herramientas MCP necesitan errores claros, alternativas y archivos fáciles de localizar para que un fallo no parezca un éxito.
05 / Lo que he aprendido
Qué hace fiable una herramienta pequeña para desarrolladores.
Una herramienta pequeña genera confianza cuando cada estado deja claro cuál es el siguiente paso.
Procesar la captura en local mejora la privacidad y simplifica el producto.
La automatización funciona mejor cuando sigue los mismos pasos que la extensión.
06 / Cómo está ahora
Hoy
La extensión está publicada; las herramientas para agentes siguen en pruebas.
La extensión de Chrome y la web ya están publicadas. La API de Node, la CLI y el servidor MCP se pueden usar en local y siguen en fase de pruebas para ofrecer una experiencia coherente entre sí.
Después
- Seguir mejorando los casos difíciles de captura y el manejo de transparencias.
- Ampliar las herramientas para agentes sin complicar el flujo básico del navegador.
- Mejorar los ejemplos y la documentación para capturas de interfaz que se repiten a menudo.