Ir al contenido
ComStack

Galería de ejemplos de páginas personalizadas

Qué es esto

Cuatro páginas personalizadas en vivo, cada una para un negocio ficticio diferente y un arquetipo distinto. Todas fueron creadas por un agente de IA que aprendió a usar la plataforma solo a partir de la documentación en esta sección —las mismas páginas que acabas de leer—, luego subidas con upload-custom-page y publicadas mediante el flujo estándar de dos pasos. Son una prueba real de la documentación, no maquetas.

Cada ejemplo supera el estándar de calidad descrito en Quality gates (Lighthouse ≥95 en rendimiento, accesibilidad, mejores prácticas y SEO), incluye marcadores de traducción y se renderiza en todos los idiomas del sitio; abre cualquiera de ellas bajo /es/ para ver la variante en español.

Los ejemplos

Clínica Veterinaria Harbor Paws

Arquetipo: página de aterrizaje para negocio local. Una clínica veterinaria de pueblo: cabecera con una promesa clara, servicios destacados, horario de atención y una llamada a la acción tel:. La página personalizada básica: el tipo de sitio que un restaurante, clínica o salón publica el primer día. Demuestra una cobertura limpia de marcadores data-t-key y un diseño de archivo único totalmente autónomo.

Hervidor inteligente LUMEN

Arquetipo: lanzamiento de producto. Una página de lanzamiento para un hervidor inteligente ficticio: cabecera animada, trío de características, tabla de especificaciones y una llamada a la acción para reserva. Demuestra animaciones CSS keyframe que utilizan transform/opacity (sin cambios de diseño), manejo de prefers-reduced-motion y disciplina de marcado en textos de marketing densos.

Calculadora TileWise

Arquetipo: herramienta interactiva. Una calculadora de cantidad de azulejos y lechada en JavaScript puro: controles de formulario etiquetados, resultados instantáneos, compatible con teclado y lectores de pantalla. Demuestra que las páginas personalizadas pueden ser genuinamente interactivas —script incluido— manteniendo el estándar de accesibilidad.

Aurora Skies Tours

Arquetipo: muestra animada. Un operador de tours de auroras boreales con un tratamiento visualmente impactante y muy animado: auroras con gradientes CSS en capas, estrellas a la deriva y secciones reveladas al hacer scroll. Demuestra hasta dónde puede llegar el CSS puro manteniendo el rendimiento, y cómo una página tan diseñada se traduce limpiamente porque cada cadena de texto está marcada.

Qué aprender de ellos

  • Ver código fuente. Cada página es un cuerpo autónomo: exactamente lo que su autor subió. Lo que ves es lo que upload-custom-page publicó.
  • Cambiar idioma. Visita cualquier ejemplo con el prefijo /es/: mismo diseño, cadenas traducidas, sin copias de página por idioma. Es el sistema de marcadores haciendo su trabajo; consulta Translation.
  • Copiar los patrones. Las versiones anotadas de estas técnicas, con el razonamiento explicado línea por línea, están en Recipes.

Relacionado

Última actualización: