Programación y vibe coding
Landing pages que no parecen hechas con IA: Claude Code o Cursor con una skill de diseño abierta
Instalas la skill landing-page-design de elayadesign/ai-design-skills en Claude Code, Cursor o Codex y le pides la landing en lenguaje normal. La skill pregunta lo que falta, propone estructura y textos y aplica reglas visuales fijas. Gratis, licencia MIT. Curado, no probado por Fluye.
| Herramientas | Claude Code (principal)Cursor |
|---|---|
| Qué necesitas |
|
| Coste aprox. | La skill es gratis y de código abierto (licencia MIT). Pagas tu plan de Claude Code, Cursor u otro agente, y la herramienta de imágenes si la usas. |
| Tiempo de montaje | 10 min (primera vez) |
| Nivel | Fácil |
| Plan gratis | Puede bastar para pruebas |
Prompt listo para usar
Sigue la skill landing-page-design. Quiero una landing para [PRODUCTO], dirigida a [PUBLICO]. La única acción que debe hacer la visita es [ACCION_PRINCIPAL]. Las visitas llegan desde [ORIGEN_TRAFICO]. Pruebas que tengo: [PRUEBAS]. Antes de escribir código, dame el esquema de secciones, el texto del hero, 3 beneficios, cómo funciona en 3 pasos, 6 preguntas frecuentes y el tipo de layout que recomiendas y por qué. Si te falta un dato, haz todas las preguntas de una vez. Después construye sección a sección, empezando por el hero, y espera mi OK entre secciones.
| Variable | Qué poner | Ejemplo |
|---|---|---|
[PRODUCTO] | Lo que ofreces en esta página | un curso de cerámica de 4 semanas |
[PUBLICO] | A quién va dirigida | adultos sin experiencia en Murcia |
[ACCION_PRINCIPAL] | La conversión que cuenta | reservar plaza |
[ORIGEN_TRAFICO] | De dónde vienen las visitas | anuncios de Instagram |
[PRUEBAS] | Testimonios, cifras o fotos reales que puedes enseñar | 12 reseñas de Google y fotos del taller |
Pégalo en: Claude Code, Cursor
Prompt propio de Fluye que pide los entregables de la sección Output format de la skill. No sustituye a la skill: instálala antes para que aplique sus reglas visuales.
Cómo funciona
- Instala la skill en tu agente. En Claude Code: clona elayadesign/ai-design-skills y copia la carpeta skills/landing-page-design dentro de .claude/skills/ de tu proyecto. Después basta con pedir la landing con palabras normales.
- O cárgala en Cursor, Codex o Claude.ai. En Cursor, descarga el SKILL.md a .cursor/rules/ o pégalo en Rules for AI. En Codex va en AGENTS.md y en Windsurf en .windsurfrules. Sin terminal, súbelo a un Proyecto de Claude.ai.
- Responde a las preguntas de partida. La skill pregunta de una vez por la acción principal, la oferta, el público, sus objeciones, el origen del tráfico y las pruebas que tienes. Si no sabes algo, asume una opción y la deja escrita.
- Revisa el esquema antes del código. Pide primero el esquema, el texto del hero, los beneficios, el cómo funciona, las FAQ y la recomendación de layout. Corregir aquí es mucho más barato que rehacer la página.
- Construye sección a sección. La skill marca el orden: hero, beneficios, cómo funciona, pruebas, FAQ y llamada final. Una sección cada vez deja cambios fáciles de revisar.
- Hazla tuya en el SKILL.md. Los valores de diseño (fuentes, colores, espaciado, animación) están en una sección al final del archivo. Haz un fork, cámbialos y el resto de la skill los sigue.
Qué resultado esperar
Una landing con una sola oferta, un público y una acción principal, textos orientados a beneficio y un sistema visual coherente, construida por tu agente sección a sección.
- Qué se hizo
- Un diseñador montó todas sus landing pages de dos meses con Claude, Cursor e imágenes de Higgsfield, guiados por una skill de diseño que ha publicado gratis.
- Cómo fue
- Según el README, la skill landing-page-design hace las preguntas de partida, define estructura y textos de conversión y aplica un sistema visual completo (tipografía, espaciado, radios y animación). Se instala copiando una carpeta o un archivo.
- A tener en cuenta
- La prueba es un portfolio en vídeo, sin cifras de conversión. Las reglas visuales son estrictas y conviene adaptarlas. Sin prueba propia.
Límites y precauciones
- La prueba es el portfolio de una sola persona en un vídeo de 15 segundos. No hay cifras de conversión.
- El autor combina la skill con Higgsfield para imágenes y vídeo. Sin buenos visuales propios el resultado baja.
- Las reglas visuales son muy estrictas (una sola tipografía, sin cursivas ni degradados, una sección de tagline obligatoria). Si no encajan con tu marca, edítalas.
- Sin prueba propia todavía.
- Revisa los textos que escribe: la skill pide cifras y nombres creíbles, y no deben salir inventados en tu web real. Usa solo pruebas que tengas.
- Antes de publicar, añade aviso legal, política de privacidad y validación del formulario. La propia lista de comprobación de la skill lo recuerda.
Variantes
- cursor: En Cursor la skill se usa como regla del proyecto: el archivo SKILL.md dentro de .cursor/rules/ o pegado en Rules for AI.
Fuente: el post de Niko en X del 25 oct 2026 y el repositorio elayadesign/ai-design-skills a 29 oct 2026. Caso curado, no probado por Fluye.
«He diseñado todas estas landing pages en los últimos dos meses, con Higgsfield, Claude y Cursor y mi propia skill de diseño con IA.» Niko (@nikosolenne) en X.
Las webs hechas con IA se reconocen enseguida: el mismo degradado, las mismas tarjetas, el mismo titular vago. El problema no es el agente, es que nadie le ha dado criterio. Eso es lo que hace esta skill: un archivo de instrucciones que Claude Code, Cursor o Codex leen antes de diseñar.
La skill se llama landing-page-design y vive en un repositorio con licencia MIT y más de 11K estrellas en GitHub a 29 oct. Tiene dos mitades. La primera decide qué dice la página: preguntas previas sobre la oferta, el público, sus objeciones y de dónde llega el tráfico, una estructura de 12 bloques y reglas de texto, como una sola llamada a la acción arriba y beneficios concretos en vez de verbos vagos. La segunda es un sistema visual cerrado: tipografía, escala de tamaños, espaciado, radios, iconos y animaciones.
Niko enseña en un vídeo corto el resultado de dos meses. No da cifras de conversión, así que tómalo como portfolio, no como prueba de que venda más. Lo útil es el método: pedir primero el esquema y los textos, revisarlos, y construir sección a sección.
Si prefieres que una herramienta te genere la web entera, mira crear una página web con IA. Para los textos, textos de marketing con IA, y para las imágenes del hero, imágenes de campaña con IA. Más sobre el agente en la ficha de Claude Code.
Preguntas frecuentes
¿Lo habéis probado?
No. La ficha resume el post de Niko del 25 oct 2026 y el README y el SKILL.md del repositorio a 29 oct. No hemos medido si las páginas convierten mejor.
¿Cuánto cuesta?
La skill es gratis y tiene licencia MIT: puedes usarla, modificarla y vender lo que hagas con ella. Pagas tu agente de código y, si la usas, la herramienta de imágenes.
¿Necesito saber programar?
Para Claude Code o Cursor ayuda saber moverte por un proyecto. Sin terminal, puedes subir el SKILL.md a un Proyecto de Claude.ai y pedirle la página, aunque luego tendrás que publicarla en algún sitio.
¿Sirve para mejorar una web que ya tengo?
Esta skill es para hacer landings desde cero. El mismo autor tiene otra en un repositorio aparte, elayadesign/redesign-skill, pensada para rediseñar sitios existentes.
¿En qué se diferencia de hacer la web con Lovable?
Lovable genera la web entera desde una descripción. Aquí usas tu propio agente de código y la skill le pone reglas de estructura, texto y diseño para que el resultado no salga genérico.
Telegram. Suscríbete al canal de Telegram para no perderte nada y estar al loro de todo lo nuevo en automatización y agentes de IA.Unirme al canal