Qué obtienes
- Un archivo HTML con fuentes e imágenes incrustadas, sin peticiones de red
- Héroe shader, banda de clientes, franja del estudio, cuadrícula de trabajos y un índice buscable
- Una página por caso de estudio, además de diario, privacidad, condiciones y una página no encontrada
- Pestañas de servicios, planes con cambio de moneda, presupuestos, equipo, FAQ y formulario de encargo
- Fotos opcionales del estudio, de casos y del equipo, y un bucle para la tarjeta de caso con PopNow tras presupuestarlo
Ideal para
- Estudios de diseño, branding, web, motion y 3D
- Freelancers y pequeñas consultoras con proyectos reales que mostrar
- Estudios de arquitectura e interiorismo que quieren un portafolio sereno y premium
No es para
- Tiendas online o marcas oscuras y muy neón
- Páginas que necesitan una foto o un vídeo tras el titular
- Sitios sin trabajos terminados que presentar
Cómo usarlo
En Claude o ChatGPT
Usa el skill de PopNow «Web de agencia creativa con héroe shader» (creative-agency-website) para esto: Haz la web de Quarrow, un estudio de marca y web de cuatro personas en Oporto. Proyectos: relanzamiento de una tienda de cerámica, una app de horarios de ferry y una identidad para una panadería. Servicios: Sprint, Launch, Retainer.
En un agente de programación
/popnow-creative-agency-website Haz la web de Quarrow, un estudio de marca y web de cuatro personas en Oporto. Proyectos: relanzamiento de una tienda de cerámica, una app de horarios de ferry y una identidad para una panadería. Servicios: Sprint, Launch, Retainer.
Luego prueba
Presupuesta las fotos de los tres casos de estudio y una cuadrícula de equipo antes de generar nada.
Convierte la tarjeta del caso del ferry en un bucle de vídeo lento a partir de su foto principal y dime antes el precio.
Qué tener a mano
- Nombre del estudio, una frase de posicionamiento, ciudades y datos de contacto
- De dos a seis proyectos con el encargo, lo que hiciste y un resultado medible
- Servicios, cómo te contratan los clientes y las personas que lideran
- Opcional: una clave de API de PopNow o tus propias fotos de estudio y proyectos
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.
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.
Landing page desde maquetas de IA
+3Ve tres diseños de página completa primero, elige uno y tu agente lo construye como código limpio y adaptable.
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
¿El shader ralentiza la página?
Se renderiza a resolución reducida con la proporción de píxeles limitada, se pausa cuando el héroe sale de la pantalla o la pestaña está oculta, y con movimiento reducido muestra un único fotograma fijo. Debajo hay una versión CSS del mismo aspecto, así que la página se ve terminada incluso sin WebGL.
¿Qué genera PopNow aquí?
Fotos para la franja del estudio, cada caso de estudio y el equipo, todas con una misma dirección artística, más un bucle lento opcional que sustituye la imagen fija de una tarjeta de caso. El héroe en sí es código y no necesita nada. Cada ejecución se presupuesta en créditos y solo empieza cuando aceptas.
¿Puedo usarla sin clave de API de PopNow?
Sí. Las fotos de estudio incluidas pueden quedarse como sustitutos neutros, los medios de los casos pueden convertirse en paneles CSS con los colores de cada cliente, y los presupuestos usan avatares con iniciales. El skill enumera los huecos que aún piden fotos reales.
¿Puedo cambiar el acento naranja?
Sí, con unos pocos tokens y los preajustes de color del shader. La página mantiene un único acento y evita tonos morados y violetas, algo que comprueba el validador; un DESIGN.md de marca en tu proyecto se asigna a esos tokens.