Qué obtienes
- Dos o tres maquetas de página completa con direcciones artísticas distintas, de un catálogo de diez
- El diseño elegido construido como página estática o como componentes de tu proyecto, con texto real
- Imágenes principales y de sección redibujadas limpias al tamaño justo y exportadas como WebP adaptable
- Capturas de escritorio y móvil, una comparación lado a lado con la maqueta y un informe de control de calidad
- Un informe de lint de hábitos de máquina, con las correcciones aplicadas
Ideal para
- Landing pages de startups, apps y productos
- Páginas de lanzamiento y de lista de espera que necesitan un aspecto propio
- Rediseñar una página que parece una plantilla genérica
No es para
- Construcciones con píxel exacto a partir de un archivo de diseño existente
- Sitios de varias páginas con lógica de aplicación o un CMS
- Plantillas de correo electrónico
Cómo usarlo
En Claude o ChatGPT
Usa el skill de PopNow «Landing page desde maquetas de IA» (landing-page-from-mockup) para esto: Landing page para Lumen Notes, una app de notas de texto plano que sugiere notas relacionadas mientras escribes. Gratis en un dispositivo, Pro 6 $ al mes. Aún no tiene testimonios.
En un agente de programación
/popnow-landing-page-from-mockup Landing page para Lumen Notes, una app de notas de texto plano que sugiere notas relacionadas mientras escribes. Gratis en un dispositivo, Pro 6 $ al mes. Aún no tiene testimonios.
Luego prueba
Toma el héroe de la maqueta B y la tabla de precios de la maqueta A.
Constrúyela en nuestro proyecto de Astro dentro de site/ y vuelve a ejecutar la revisión.
Qué tener a mano
- Nombre del producto, público y la promesa principal del titular
- Tres o cuatro funciones con un detalle concreto cada una, además de planes y precios
- Pruebas que puedas defender (citas, cifras o datos reales)
- Una clave de API de PopNow, y tu DESIGN.md si la marca ya está definida
Skills similares
Ver todos →Creador de avatares 3D
+3Crea un adorable personaje 3D de peluche en tu navegador y guárdalo como PNG transparente o como página 3D.
Mapa de calor de calendario
+3Un año de actividad diaria en una cuadrícula de calendario sombreada, con rachas, totales y acceso por teclado.
Landing page de SaaS con IA
+3Papel arena cálido y guías finas alrededor de un tablero kanban en vivo donde un asistente planifica tareas.
Sección hero animada
+3Un hero de landing page con una palabra del titular que rota suavemente, dos botones y un marco ancho para imagen.
Web de agencia creativa con héroe shader
+3Un héroe shader vivo en naranja tras un titular anclado abajo, navegación en píldora y casos en cuadrícula.
Landing page SaaS oscura
+3Una web de marketing oscura y llena de movimiento para un producto de software, entregada como un único archivo HTML autónomo.
Web de portafolio para diseñadores
+3Seis tarjetas inclinadas flotan alrededor de un titular que se desvanece, con una tarjeta de retrato roja.
Web de portfolio para desarrolladores
+3Una web personal oscura para ingenieros con casos de estudio, artículos, charlas, currículum y formulario de contacto.
Web SaaS de estilo editorial
+3Héroe dividido en azul marino, titular serif junto a una foto documental y un acento cobalto.
Plantilla web de glassmorphism
+3Píldoras de cristal esmerilado sobre fondo casi negro, titular serif enorme y captura de correo.
Web de producto de hardware
+3Nombres de modelo enormes y finos sobre fotos de estudio plateadas y tarjetas de especificaciones.
Diagrama de arquitectura interactivo
+3Un diagrama de sistema offline y clicable, creado a partir de un modelo JSON validado, con la evidencia detrás de cada caja.
Héroe con cuadrícula interactiva
+3Una cuadrícula oscura de hilos finos que se inclina hacia el cursor y lanza un anillo luminoso con cada clic.
Explorador de grafos de conocimiento
+3Convierte notas de proyecto en un grafo offline y con búsqueda donde cada afirmación enlaza con su línea de origen.
Plantilla de panel de KPIs
+3Cuatro KPIs con indicadores de cambio, gráfico de líneas, desglose y barras de objetivo.
Plantilla web para revistas
+3Una web de revista con calidad de imprenta, con artículos, temas, una pequeña tienda y suscripciones, en un único archivo HTML.
Héroe con animación de partículas
+3Texto sobre papel cálido junto a una esfera de puntos que cambia con cada idea.
Web de marca personal
+3Retrato fundido con papel cálido bajo un corchete fino, con afirmaciones a cada lado.
Página de lanzamiento de producto cinematográfica
+3Página oscura con iluminación de cine: titular serif, escena nocturna y formulario de reserva.
Plantilla de dashboard de administración
+3Una consola de back office funcional con gráficos, tablas, kanban y calendario, en un único archivo HTML offline.
Plantilla de landing page SaaS
+3Una web de marketing tranquila y luminosa para un producto de software, con consola de producto funcional, precios y registro.
Web de portfolio estilo scrapbook
+3Un CV online de varias páginas hecho con objetos de papel, con casos de estudio y un currículum imprimible.
Plantilla web de tienda de zapatillas
+3Una tienda completa de calzado o ropa con catálogo, páginas de producto, cesta y checkout de demostración en un único HTML.
Landing page de automatización de flujos
+3Página grafito, titular pequeño y un grafo de nodos en vivo que ejecuta, reintenta y transmite registros.
Preguntas
¿Por qué hacer maquetas antes de escribir código?
Elegir entre páginas con aspecto terminado es más rápido y más honesto que describir un estilo con palabras. Además, da a la construcción un objetivo concreto, así que la comparación de capturas puede decir exactamente dónde se desvió el código.
¿Qué genera PopNow y cuánto cuesta?
Las maquetas (unos 30-35 créditos cada una) y, si las quieres, imágenes principales y de sección limpias (unos 35-75 créditos cada una). Una ejecución completa típica ronda los 275 créditos; el modo ligero con una maqueta cuesta unos 35. Cada generación se presupuesta primero y solo se ejecuta cuando aceptas.
¿Necesito tener algo instalado?
Node y Python 3, además de Chrome, Chromium o Edge en local para las capturas. Se usa Playwright si tu proyecto ya lo tiene. No hay más dependencias.
¿La página contendrá texto de las imágenes de las maquetas?
No. Las maquetas son imágenes y su texto pequeño puede salir deformado. Los titulares, las funciones, los precios y las FAQ salen de tu encargo, y lo que el agente tuvo que redactar se lista para que lo confirmes.

