
Galería de vista previa
Skills similares
Ver todas las SkillsLo que obtienes
- Un Hero de cristal acanalado en vivo con calor naranja en los bordes, grano de película y una declaración en tres líneas, además de un respaldo estático terminado y un modo sereno de movimiento reducido
- Un sitio de estudio completo: estudio, trabajos destacados y un índice de proyectos con búsqueda, pestañas de servicios, proceso, modalidades, testimonios, equipo, artículos, FAQ y un formulario de brief de proyecto
- Páginas de casos de estudio, artículos, privacidad, términos y una página de no encontrado, con fuentes web y fotos planificadas por función, todo en un archivo sin conexión
Ideal para
- Estudios de diseño, branding e ingeniería que quieren una primera pantalla premium y viva sin perder legibilidad
- Freelancers y pequeñas agencias que lanzan un portafolio con casos de estudio reales, precios claros y un formulario de brief
- Equipos de producto que quieren un sitio de lanzamiento luminoso y acristalado, y pueden adaptar trabajos, servicios y modalidades a clientes, funciones y planes
No es para
- Marcas oscuras y sombrías: la página se mantiene en gris papel luminoso con una sola superficie oscura, el pie
- Sitios que necesitan un CMS o decenas de páginas: los casos de estudio y los artículos viven como datos estáticos en la página
- Páginas que deben funcionar con JavaScript desactivado: el texto y el diseño se muestran, pero la animación de cristal, los menús y los formularios lo necesitan
Identidad de marca y sistemas visualesDiseño web y experiencias digitalesCrear página webCrear landing pageEstilo fijadoResultado editableMinimal luminosoVidrio acanaladoDegradado granuladoIluminado con shaders
Acerca de esta Skill

Landing page de cristal fundido crea el sitio web de un estudio con una primera pantalla viva: una luz brillante gris papel vista a través de cristal acanalado, con un calor naranja intenso que presiona desde los bordes. Debajo hay un sitio editorial sereno con secciones numeradas, páginas reales de casos de estudio y un brief de proyecto funcional. El ejemplo es Arclune, un estudio ficticio de diseño e ingeniería.

Lo que obtienes
- Un Hero de cristal en vivo con un degradado de respaldo ya terminado, un fotograma fijo para movimiento reducido y botones cuyas etiquetas ruedan al pasar el cursor
- Secciones de inicio: estudio con cifras animadas, trabajos destacados y un índice de proyectos con búsqueda, pestañas de servicios, proceso, modalidades con selector de moneda, testimonios, equipo y vacantes, artículos, FAQ y un brief de proyecto
- Páginas de casos de estudio con resultados y créditos, artículos, privacidad, términos y una página de no encontrado
- Un pie casi negro con un logotipo gigante, y un solo archivo que se abre en cualquier navegador y funciona sin conexión

Cómo usarlo
- Comparte el nombre de tu estudio, una declaración de posicionamiento en una frase y al menos dos proyectos insignia con un resultado medible cada uno.
- Tu agente completa cada sección y caso de estudio, planifica y genera las fotos, y redacta lo que falte para que lo confirmes.
- Abre el archivo, recorre cada caso de estudio, pestaña y formulario, y pide cambios con tus propias palabras.

Las fotos salen de la herramienta de imagen de tu agente, que puede tener costos de uso, o de tu propia biblioteca. En un proyecto existente con framework, el agente construye el mismo diseño como componentes de tu stack.
Lo que necesitas antes de empezar
- Tú aportas
- Nombre del estudio o de la marca y una declaración de posicionamiento en una frase · Al menos dos proyectos insignia, cada uno con un resultado medible en una línea · Disciplinas, condiciones o precios de las modalidades, responsables del equipo y datos de contacto (opcional; lo que falte se redacta para que lo confirmes)
- Dependencias
- Node.js 18 o superior en la máquina de tu agente, para ejecutar el script incluido que genera el archivo único sin conexión · Acceso a internet mientras se genera el archivo, para descargar las fuentes una vez e incrustarlas · Una herramienta de imagen en tu agente para las fotos del estudio, los proyectos y el equipo (opcional; la página se lee correctamente con marcadores de posición o tus propias fotos)
- Costos externos
- Las fotos del estudio, los proyectos y el equipo se generan con la propia herramienta de imagen de tu agente cuando quieres fotos nuevas, lo que puede tener costos de uso de esa herramienta. También puedes aportar tus propias fotos o mantener los marcadores de posición. Nada más usa un servicio de pago.
- Última prueba
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Reseñas de usuarios
Cargando reseñas…









