# Landing Page Design

> Optimización de conversión para landing pages: fórmula above-the-fold, diseño del hero, psicología de los CTA, prueba social, diseño móvil y patrón de lectura en F.

Fuente: https://skillsagentes.com/skills/skills-101/superpowers/landing-page-design
Markdown: https://skillsagentes.com/skills/skills-101/superpowers/landing-page-design.md

Repositorio: https://github.com/skills-101/superpowers
Autor: skills-101
Licencia: no declarada
Actualizado: el mes pasado
Coste de contexto: 127 tok instalada, 2.5k tok al activarse, 2.5k tok con todos los archivos del bundle
Bundle: 1 archivo, 10 KB
Permisos que pide: bash(belt *)

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add skills-101/superpowers --skill landing-page-design --agent claude-code
# Cursor
npx -y skills add skills-101/superpowers --skill landing-page-design --agent cursor
# Codex
npx -y skills add skills-101/superpowers --skill landing-page-design --agent codex
# Gemini CLI
npx -y skills add skills-101/superpowers --skill landing-page-design --agent gemini
# Windsurf
npx -y skills add skills-101/superpowers --skill landing-page-design --agent windsurf
# Cline
npx -y skills add skills-101/superpowers --skill landing-page-design --agent cline
```

## Qué hace

- Aplica reglas de diseño para landing pages: fórmula above-the-fold, jerarquía de titulares, imágenes hero, botones CTA y orden de secciones
- Genera imágenes hero y de OG mediante belt app run con modelos como falai/flux-dev-lora
- Da pautas de diseño de formularios, optimización móvil y velocidad de página
- Investiga páginas de la competencia y estadísticas de conversión con belt app run tavily/search-assistant o exa/answer

## Cuándo usarla

- Diseñar landing pages de startups, productos SaaS o páginas de producto
- Optimizar la tasa de conversión de una página existente
- Crear la sección hero, CTA o imagen OG de una landing page

## Qué la activa

- "Ayúdame a diseñar la landing page de mi SaaS"
- "Genera una imagen hero para mi página de producto"
- "Revisa mi CTA y dime cómo mejorarlo"
- "Crea una imagen OG para compartir mi landing page"

## Antes de instalar

- Requiere instalar el CLI belt (inference.sh) con `npx skills add belt-sh/cli` y hacer `belt login`.
- Necesita en el PATH: npx

## Archivos

- SKILL.md — 10 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/skills-101/superpowers/blob/main/guides/design/landing-page-design/SKILL.md

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [skills-101](https://skillsagentes.com/creators/skills-101.md) — 86 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Web Search](https://skillsagentes.com/skills/skills-101/superpowers/web-search.md): Búsqueda web y extracción de contenido con Tavily y Exa vía la CLI de inference.sh, con apps para búsqueda IA, extracción, respuestas directas e investigación.
- [Twitter Automation](https://skillsagentes.com/skills/skills-101/superpowers/twitter-automation.md): Automatiza Twitter/X: publicar tweets, programar contenido, dar like, retuitear, enviar DMs y seguir usuarios mediante el CLI de inference.sh.
- [Qwen Image 2](https://skillsagentes.com/skills/skills-101/superpowers/qwen-image-2.md): Genera y edita imágenes con los modelos Qwen-Image-2.0 de Alibaba vía la CLI de inference.sh: texto a imagen, edición multi-imagen y renderizado de texto complejo.
- [Speech To Text](https://skillsagentes.com/skills/skills-101/superpowers/speech-to-text.md): Transcribe audio a texto con los modelos ElevenLabs Scribe y Whisper vía la CLI de inference.sh, con diarización, timestamps y traducción.
- [Happyhorse](https://skillsagentes.com/skills/skills-101/superpowers/happyhorse.md): Genera y edita videos físicamente realistas con los modelos Alibaba HappyHorse 1.0 vía el CLI de inference.sh: texto-a-video, imagen-a-video, referencia-a-video y edición de video.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)