Landing Page Designpor elayadesign

Landing Page Design Skill.

Conecta el argumento de la página y sus reglas visuales en torno a una única conversión prevista.

Landing pages
Redacción publicitaria
Diseño web

Revisión de la fuente · Landing Page DesignSKILL.md

Tarea Landing pages Produce • Un esquema de página, el texto del hero, beneficios, flujo de trabajo y un borrador de preguntas frecuentes. • Una recomendación de index/noindex con título y descripción cuando corresponda. • Una implementación sección por sección con el diseño y las reglas visuales seleccionados. Antes de empezar No se requiere un único entorno de ejecución de aplicaciones; los ejemplos de implementación hacen referencia a valores de Tailwind, IntersectionObserver y herramientas de movimiento opcionales.

Resumen editorial · fuente revisada el 2026-10-07 · no es un ejemplo generado

01 Qué hace

Crea una landing page en torno a una sola acción

Planifica la oferta, el texto, la estructura y el tratamiento SEO, y luego aplica las reglas visuales detalladas de la fuente donde encajen con el proyecto.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Landing Page Design empieza con una oferta, una audiencia y una acción principal. Su primera mitad recoge el objetivo de conversión, las objeciones, el contexto del tráfico, las pruebas y las restricciones, y después propone la secuencia de secciones y el texto antes de construir. Su segunda mitad prescribe un sistema visual detallado para tipografía, espaciado, radios, heroes, iconos, movimiento y estados de los componentes.

Es una Skill inusualmente opinada, más que una lista de comprobación neutral. Incluye opciones restringidas de fuentes y espaciado, una sección obligatoria de revelado del eslogan y convenciones de animación específicas. Estas decisiones pueden entrar en conflicto con un sistema de marca establecido o con requisitos de accesibilidad, y no deben sustituirlos sin avisar. Su planteamiento de alta conversión es una intención, no una prueba de que se haya medido una mejora de conversión.

Entregables esperados

Un esquema de página, el texto del hero, beneficios, flujo de trabajo y un borrador de preguntas frecuentes.
Una recomendación de index/noindex con título y descripción cuando corresponda.
Una implementación sección por sección con el diseño y las reglas visuales seleccionados.

Ver el brief de ejemplo

Del brief a la revisión

01
Aclarar la oferta
Reúne en una sola toma de requisitos la audiencia, la acción, las objeciones, la fuente de tráfico y los materiales de prueba reales.
02
Elegir el argumento
Selecciona un hero clásico, una historia larga, una página de conversión minimalista o una estructura comparativa, y explica por qué.
03
Redactar antes de construir
Produce el esquema, el texto, el tratamiento SEO y la recomendación de diseño antes de implementar.
04
Construir y revisar por secciones
Recorre la página en orden mientras compruebas estados, enlaces, semántica, metadatos y restricciones de marca.

02 Cuándo usarlo

Cuándo usarla

No se requiere un único entorno de ejecución de aplicaciones; los ejemplos de implementación hacen referencia a valores de Tailwind, IntersectionObserver y herramientas de movimiento opcionales.

Buen encaje

Campañas de una sola ofertaÚtil cuando el visitante debe dar un siguiente paso claramente definido.
De la estrategia a la implementaciónConecta el texto y la gestión de objeciones con decisiones concretas de diseño y de estados.

Límites que conviene comprobar

Sin garantía de conversiónLa fuente aporta reglas de diseño y de texto, no resultados de un experimento con tu oferta.
Las reglas de marca pueden entrar en conflictoLas fuentes, los degradados, el movimiento y el uso de mayúsculas y minúsculas en el texto que prescribe no son requisitos universales para productos existentes.
Las pruebas deben ser realesNunca deben inventarse como evidencia factual estadísticas de apariencia precisa, nombres de clientes o garantías.

Aporta estos datos

Oferta y conversiónIndica qué recibe el visitante y qué acción cuenta como éxito.
Audiencia y objecionesProporciona el contexto del visitante, la fuente de tráfico y los motivos reales de duda.
Pruebas y restricciones de marcaAporta capturas de pantalla aprobadas, testimonios, datos, condiciones y requisitos del sistema de diseño.

03 Decisiones importantes

Decisiones importantes

Estructura antes que decoración
El argumento de la página se elige antes que las reglas visuales, lo que reduce el riesgo de pulir secciones sin función persuasiva.
La intención del tráfico importa
Una página de descarga breve y de alta intención necesita un argumento distinto al de una landing page educativa pensada para búsquedas.
Revisa sus valores por defecto
La especificidad de la fuente solo resulta útil cuando sus fuertes supuestos visuales encajan con el proyecto.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación actual del repositorio e incluye la carpeta completa de la Skill. La fuente es un conjunto de reglas de diseño, no un creador de páginas alojado.

Archivo fuente original

https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

No se requiere un único entorno de ejecución de aplicaciones; los ejemplos de implementación hacen referencia a valores de Tailwind, IntersectionObserver y herramientas de movimiento opcionales.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa landing-page-design para planificar una página perenne para nuestro producto design-review. La audiencia son agencias pequeñas y la acción es solicitar una demo. Usa solo las capturas de pantalla suministradas y pruebas verificadas. Devuelve, antes de programar, el esquema, el texto del hero, unas preguntas frecuentes basadas en objeciones, la recomendación SEO y la elección de diseño. Conserva nuestros tokens de marca actuales y los requisitos de movimiento reducido.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Una única acción principal se mantiene coherente desde el hero hasta el CTA final.
Cada dato probatorio procede de evidencias aportadas.
Las reglas visuales se concilian con la marca existente y los requisitos de accesibilidad.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill venga incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: elayadesign
Repositorio: elayadesign/ai-design-skills
Archivo de la skill: skills/landing-page-design/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · 1c1e97cb9878

Resumen editorial de la fuente

Planifica la oferta, el texto, la estructura y el tratamiento SEO, y luego aplica las reglas visuales detalladas de la fuente donde encajen con el proyecto.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Está pensada solo para páginas de inicio?

No. Su distinción central es que una landing page atiende una oferta y una intención, a diferencia de una página de inicio que atiende a varias audiencias u objetivos.

¿Hay que seguir todas las recomendaciones en un sitio existente?

No. Su propio alcance reconoce las instrucciones explícitas del usuario, y una marca establecida o un requisito de accesibilidad deben resolverse, no sobrescribirse sin avisar.

¿Añadir sus preguntas frecuentes garantiza visibilidad en buscadores?

No. Recomienda contenido útil de preguntas y respuestas y metadatos adecuados; la indexación y el rendimiento en búsquedas son resultados distintos.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración de la propia skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño