Landing Page Generatorpor Alireza Rezvani

Landing Page Generator Skill.

Conecta una propuesta de producto real con las secciones de la página antes de generar los componentes.

Landing pages
Copywriting
Frontend

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

Tarea Landing pages Produce • Secciones de landing page en TSX para React o Next.js con estilos de Tailwind • Variantes de copy organizadas en torno a un marco de mensaje elegido • Base para título, descripción, canonical y datos estructurados Antes de empezar Un proyecto compatible de React o Next.js con Tailwind; los componentes de UI referenciados y las herramientas opcionales de análisis de marca pueden requerir una configuración aparte.

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

01 Qué hace

Redacta una landing page en React a partir de un brief de producto

Un flujo de trabajo que va del brief de producto a TSX y combina marcos de copy, secciones de landing page y listas de comprobación de SEO o rendimiento.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El método de trabajo

Landing Page Generator combina marcos de copywriting de marketing con patrones de secciones para React o Next.js y estilos de Tailwind. Reúne la audiencia, el problema, el beneficio, los precios y la dirección de diseño, y luego redacta el copy antes de componer la página. La fuente ofrece patrones de hero, características, precios, preguntas frecuentes y CTA; las secciones irrelevantes se omiten en lugar de rellenarse automáticamente.

La fuente usa el lenguaje de conversión y rendimiento como objetivos, no como resultados medidos de una página generada. Sus plantillas también incluyen ejemplos de testimonios, garantías y afirmaciones de producto que deben sustituirse por datos verificados o eliminarse. Los metadatos SEO y los datos estructurados son una base útil, pero deben coincidir con la página real y con la política de rutas e indexación del sitio.

Entregables previstos

Secciones de landing page en TSX para React o Next.js con estilos de Tailwind
Variantes de copy organizadas en torno a un marco de mensaje elegido
Base para título, descripción, canonical y datos estructurados

Ver el brief de ejemplo

Del brief a la revisión

01
Reúne los datos del producto
Define la audiencia, la acción principal, el beneficio y los precios reales. Separa las pruebas aprobadas de las afirmaciones que no se han establecido.
02
Escribe primero el mensaje
Elige una narrativa de problema-solución o de antes y después que encaje con el producto y decide qué secciones hacen falta de verdad.
03
Construye y valida
Genera los componentes en el proyecto existente, revisa el diseño móvil y los metadatos, y mide el rendimiento real en lugar de repetir los objetivos de la plantilla.

02 Cuándo usarlo

Cuándo usarlo

Un proyecto compatible de React o Next.js con Tailwind; los componentes de UI referenciados y las herramientas opcionales de análisis de marca pueden requerir una configuración aparte.

Buen encaje

Borradores de lanzamiento de productoÚtil cuando se conocen los datos del producto y se necesita una primera implementación coherente.
Variantes de mensajeSirve para explorar distintos enfoques de titular y CTA manteniendo la misma oferta verificada.

Límites que conviene comprobar

Sin garantía de conversiónUn marco de copy o una plantilla no demuestra una mayor conversión. Para eso hacen falta un plan de medición real y datos suficientes.
Sin pruebas inventadasLos testimonios, logotipos de clientes, garantías y beneficios numéricos deben proceder de fuentes aprobadas, no del componente de ejemplo.

Aporta estos datos

Producto y audienciaIndica la oferta real, el cliente objetivo y la tarea principal que debe facilitar la página.
Oferta y pruebasProporciona los precios actuales y los testimonios, métricas o garantías aprobados; señala qué pruebas no están disponibles.
Restricciones del proyectoEspecifica la configuración de React o Next.js, las reglas de marca y las convenciones de SEO del sitio.

03 Decisiones importantes

Decisiones importantes

Primero el copy, después los componentes
Escribir antes la propuesta ayuda a que la elección de secciones dependa de la oferta y no de un inventario fijo de plantillas.
SEO desde el borrador
Los metadatos, la gestión del canonical y la estructura semántica se consideran junto con el código de la página, en lugar de dejarlos para la entrega.

04 Ejemplo de brief

Prueba un brief concreto

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

Revisa la configuración

Carga el Skill completo y adapta sus ejemplos de componentes al repositorio. No des por hecho que las importaciones de ejemplo ni los archivos de SEO del sitio ya existen.

Archivo fuente original

https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

Un proyecto compatible de React o Next.js con Tailwind; los componentes de UI referenciados y las herramientas opcionales de análisis de marca pueden requerir una configuración aparte.

Empieza con un solo entregable

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

Brief de ejemplo

Usa landing-page-generator para redactar una página de Next.js para nuestro producto de programación de citas a partir del brief proporcionado. Usa solo los precios y beneficios que te indico, omite testimonios y garantías porque no hay ninguno aprobado, y conserva nuestros tokens de marca. Escribe primero las variantes de titular y CTA y luego construye las secciones relevantes. Añade metadatos y solo datos estructurados compatibles, e informa por separado del rendimiento medido y de los objetivos.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada afirmación y cada dato de precios coincide con un dato aprobado.
La página tiene una acción principal clara y secciones utilizables en móvil.
Los metadatos y los datos estructurados reflejan el contenido visible, y los resultados de rendimiento indican su estado de medición.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Esta ficha no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer el 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: Alireza Rezvani
Repositorio: alirezarezvani/claude-skills
Archivo del skill: product-team/skills/landing-page-generator/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 19392f7a0826

Resumen editorial de la fuente

Un flujo de trabajo que va del brief de producto a TSX y combina marcos de copy, secciones de landing page y listas de comprobación de SEO o rendimiento.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Garantiza una mejor conversión?

No. La fuente ofrece patrones de copy y de diseño; su efecto en el negocio debe probarse con el producto y la audiencia reales.

¿Debe toda página incluir testimonios y precios?

No. El flujo de trabajo permite expresamente omitir las secciones irrelevantes, y no deben inventarse pruebas sin respaldo.

¿Las cifras de rendimiento son resultados demostrados?

Son objetivos declarados en la fuente. Mide la página resultante en su entorno real antes de informar de una métrica alcanzada.

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 propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño