Siteprint
Siteprint · Programación · Prompts
Siteprint mide los colores, las fuentes, el espaciado y la maquetación de cualquier web en un navegador real, y convierte el resultado en un prompt, un DESIGN.md y archivos de tema para agentes de código.
Acerca de Siteprint
About
Qué es Siteprint
Siteprint es un extractor de diseño web. Pegas una dirección, la página se abre en un navegador real del lado del servicio y unos 20 segundos después tienes la paleta, el stack de fuentes, la escala tipográfica, los pasos de espaciado, los radios de esquina, las sombras, las curvas de aceleración, los puntos de ruptura, el logotipo y el framework. Todo se mide sobre la página renderizada, así que los números reflejan lo que ve el visitante y no lo que promete la hoja de estilos.
El problema que resuelve es el encargo que tarde o temprano recibe cualquier constructor con IA: que quede como esta web. Una captura de pantalla lleva el aspecto, no los valores. El agente improvisa códigos hex, alturas de línea y rellenos de botón, y tú te pasas la hora siguiente ajustando píxeles. El paso de web a prompt es el centro del producto: Siteprint entrega los valores exactos en un prompt escrito para Lovable, Claude Code o Cursor, más un archivo DESIGN.md que plantea el diseño como una dirección aplicable a páginas nuevas.
Hay dos límites que conviene saber antes de empezar. Siteprint mide un diseño, no lo construye, así que sigues necesitando un agente o una persona que escriba el código. Y la versión web lee la página desde su servidor, de modo que los sitios que bloquean visitantes automáticos, las páginas con inicio de sesión o una tarjeta concreta de la página piden la extensión de Safari en un Mac.
Primeros pasos
- Abre siteprint.app y pega la dirección de una web. Para este paso no hace falta cuenta.
- Espera el escaneo. Siteprint abre el sitio en un navegador real, tarda unos 20 segundos y rellena la página con valores medidos.
- Lee las secciones que te interesen: colores y sus roles, fuentes y estilos de texto, espaciado y formas, sombras y movimiento, puntos de ruptura, recursos y tecnología. Pulsa cualquier valor para copiarlo.
- Para el prompt de reconstrucción y el DESIGN.md, inicia sesión y pasa a Pro. Entra en Build with this design y copia el prompt en Lovable, Claude Code o Cursor.
- Si trabajas en Safari con Mac, instala la extensión para escanear páginas con login, una sección suelta o sitios que rechazan visitantes automáticos, y deja que tu agente lea los escaneos guardados por MCP.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Siteprint.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores front-end y creadores independientes
- Diseñadores que estudian una web de referencia
- Fundadores y responsables de marketing que saben describir un aspecto pero no el CSS
- Equipos que mantienen varios productos con la misma imagen
Tareas
- Rehacer una landing en un constructor con IA
- Sacar tokens de diseño de una web que te gusta
- Igualar un proyecto ya hecho con una referencia
Casos de uso
- Cambiar el aspecto de un panel interno al estilo que el equipo ya aprobó
- Componer una dirección visual nueva a partir de dos sitios
- Revisar la escala tipográfica y el ritmo de espaciado de un competidor antes de un rediseño
Funciones clave
Paleta con roles
Siteprint lista todos los colores de la página, separados en neutros y tonalidades, con valores HEX, RGB y HSL. Cada escaneo funciona como un sistema de diseño de la página: además de los colores, marca roles como lienzo, superficie, texto y atenuado, de modo que el agente sabe qué tono va en cada sitio. Las variantes de modo oscuro y los degradados se recogen aparte cuando el sitio los usa.
Tipografía y escala de texto
El panel de tipografía nombra cada familia, sus pesos, los archivos que carga y de dónde vienen. Los estilos de texto llegan con tamaño, altura de línea, interletraje y el elemento al que se aplican. Esa es la parte que una captura no te da, y suele ser donde una reconstrucción empieza a desviarse.
Espaciado, formas y movimiento
Los pasos de espaciado, los radios y los anchos de contenido se leen de la maquetación renderizada, no se deducen. Las sombras, las curvas de aceleración y las duraciones aparecen con una vista previa que se reproduce al pasar el cursor, algo útil cuando un botón se siente bien en la web de referencia y mal en tu versión.
Prompt de reconstrucción y DESIGN.md
Pro convierte un escaneo en un solo prompt que describe maquetación, movimiento y medidas, con el formato del constructor de IA que indiques. El archivo DESIGN.md plantea el mismo diseño como dirección y no como página fija, así el agente puede aplicarlo a pantallas que todavía no existen en el sitio de referencia.
Exportaciones y tokens de diseño
Además del prompt, Siteprint exporta configuración de Tailwind v4, temas de shadcn/ui, variables CSS y un archivo de tokens. Cada color y cada estilo de texto va nombrado y colocado, lo que ahorra la pasada de renombrado manual que de otro modo se lleva una tarde.
Acceso del agente por MCP
La extensión de Safari levanta un servidor MCP de diseño local con tres herramientas: list_designs, get_design y get_reference_image. Claude Code, Cursor, Codex o cualquier cliente MCP pueden leer un escaneo guardado como prompt, diseño, maquetación, configuración de Tailwind, tema de shadcn, CSS o JSON. En la versión web conectas el agente desde la Library, y con la extensión los archivos no salen de tu máquina.
Match your build
Pega la dirección de tu propia versión y Siteprint la compara con el sitio de referencia. La salida es una lista de correcciones y un prompt que empuja tu página hacia el original, más útil que un diff de códigos hex cuando la maquetación se desvía unos píxeles.
Ventajas y desventajas
Ventajas
- Inspección gratuita de tantas webs como quieras, con copia al pulsar y sin registro.
- Los valores salen de un render real, así que incluyen estilos calculados que el HTML estático no muestra.
- El prompt de reconstrucción apunta por nombre a Lovable, Claude Code, Cursor y otros agentes, lo que recorta el trabajo de escribir prompts a mano.
- La extensión de Safari lee las páginas en local, de modo que las webs con login y las que bloquean bots quedan a tiro, y los escaneos se quedan en el Mac.
- Compose y la Library convierten consultas sueltas en un conjunto de referencias reutilizable.
Desventajas
- El prompt de reconstrucción, el DESIGN.md y las exportaciones están detrás de Pro, así que el plan gratuito responde preguntas pero no entrega nada con lo que construir.
- Cada escaneo web tarda unos 20 segundos y falla en sitios que bloquean visitantes automáticos, lo que empuja a los usuarios de Mac hacia la extensión de pago.
- La extensión necesita Safari en macOS 14 o posterior, así que quien use Windows o Chrome se queda con la vía del servidor, más lenta.
- Mide y no construye, de modo que la salida sigue siendo un encargo que tu agente tiene que interpretar bien.
Preguntas frecuentes
Inspeccionar una web es gratis y no pide cuenta, colores, fuentes, espaciado, recursos y tecnología incluidos. Pro cuesta 9 $ al mes o 69 $ al año y añade el prompt de reconstrucción, DESIGN.md, exportaciones, fondo animado y Match your build. La extensión de Safari se compra aparte por 19,99 $ una sola vez.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Siteprint.
Alternativas a Siteprint
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Google EmbeddingGemma 2
Google DeepMind · Escritura · Imagen · ProgramaciónGoogle EmbeddingGemma 2 es un modelo abierto de 740 millones de parámetros que convierte texto, código, imágenes, audio y fotogramas de vídeo en vectores de un mismo espacio de 768 dimensiones, y funciona en móviles y portátiles.
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.