Cómo crear una landing page con Claude Code combinando 4 skills (prueba real con errores)

Una skill sola hace una cosa bien. La gracia está en combinarlas: en esta guía encadenamos cuatro skills públicas en Claude Code para crear una landing page que vende, con buen diseño, datos estructurados y una auditoría SEO antes de publicar. Lo hicimos de verdad, con un negocio de ejemplo, y aquí tienes el resultado, lo que costó y los cinco errores que nos encontramos por el camino, con su arreglo.

Si nunca has instalado una skill, lee antes la guía de skills de Claude Code.

La receta: 4 skills, un resultado

El orden importa: el copy alimenta el diseño, el diseño ya trae un primer JSON-LD que schema corrige, y seo-audit revisa el conjunto antes de publicar. Cada paso deja un archivo que lee el siguiente (copy.md → index.html → auditoria-seo.md).

Entorno de la prueba: Claude Code 2.1.316 en Linux, modelo por defecto (Sonnet 5.5), CLI skills 1.7.4, marketingskills 2.14.0 (commit 88c79f6) y anthropics/skills en el commit ca45fc4, el 31 de octubre de 2026.

El caso: la landing de un taller de bicicletas

Para que la prueba fuera realista usamos un negocio local inventado: Rueda Libre, un taller de bicicletas en Quito con recogida a domicilio en bicicleta de carga, diagnóstico gratis y presupuesto por WhatsApp. Objetivo de la página: que el visitante escriba por WhatsApp.

Las skills de marketingskills buscan primero un archivo de contexto de producto (.claude/product-marketing.md) y, si existe, no te hacen preguntas que ya responde. Es el truco que más tiempo ahorra al combinarlas: lo escribes una vez y lo leen las tres.

# Contexto de producto: Rueda Libre (negocio ficticio de prueba)

- Qué es: taller de reparación y mantenimiento de bicicletas en Quito (La Floresta).
- Servicios y precios (USD): mantenimiento básico 15; completo 35; frenos y cambios 8;
  cambio de cámara 5 + repuesto; armado de bici nueva 25.
- Diferencia: recogida y entrega a domicilio en bici de carga (norte de Quito, 3 USD);
  diagnóstico gratis; presupuesto por WhatsApp antes de tocar nada; casi todo en 24 h.
- Público: ciclistas urbanos, familias, ciclistas de ruta de fin de semana.
- Objetivo de la página: que escriban por WhatsApp.
- Voz: cercana, español de Ecuador, tuteo. Sin inventar reseñas, estrellas ni años.

Paso 0: instalar las cuatro skills

Con la CLI skills se instalan en el proyecto (.claude/skills/) en dos comandos:

npx skills add coreyhaines31/marketingskills --skill copywriting --skill schema --skill seo-audit --agent claude-code -y
npx skills add anthropics/skills --skill frontend-design --agent claude-code -y

La CLI deja además un skills-lock.json con el hash de cada SKILL.md, útil para saber si alguien las cambió. Como avisa el propio instalador, las skills se ejecutan con todos los permisos del agente: léelas antes de usarlas (son Markdown, se leen en cinco minutos). Si quieres buscar otras para combinar, find-skills lo hace por ti.

Paso 1: el copy con copywriting

claude -p "/copywriting Escribe el copy de la landing page de Rueda Libre y guárdalo en copy.md." \
  --allowedTools "Read,Write,Edit,Glob,Grep,Skill"

La skill obliga a empezar con un diagnóstico de tres casos (A: partir de cero, B: hay una voz que respetar, C: retoque puntual). Nuestro copy.md arranca así: *"Diagnóstico: A. Hay contexto de producto (servicios, precios, diferenciales) pero ningún borrador previo ni voz de marca escrita."*

Lo que más nos gustó es lo que no hizo: dejó vacía la sección de reseñas con un [NEED: reseñas o testimonios reales de clientes], y lo mismo con la política de presupuesto rechazado, que el brief no aclaraba. Además avisó de que las descripciones de los servicios eran supuestos suyos y pidió confirmarlas. Titular final: "Te recogemos la bici en casa y te la devolvemos lista".

Paso 2: el diseño con frontend-design

claude -p "/frontend-design Construye index.html, la landing de Rueda Libre, con el texto de copy.md tal cual (no reescribas el copy). Un solo archivo HTML con el CSS dentro, responsive, lista para publicar." \
  --allowedTools "Read,Write,Edit,Glob,Grep,Skill"

La skill de Anthropic enumera los cinco estilos en los que cae el diseño generado por IA: fondo crema con serif y acento terracota, negro con un verde ácido, maquetación de periódico, el kit de tarjetas SaaS y los "tics" de plantilla (etiquetas en mayúsculas sobre cada título, metadatos con puntos medios, una palabra del titular resaltada en otro color...).

La versión sin skills (más abajo) cae en casi todos. Con la skill, Claude eligió una paleta "de taller" (gris cemento, azul tinta y naranja de chaleco reflectante), una tipografía condensada para los titulares y una rueda grande que gira con el scroll como único movimiento de la página. Los pasos llevan números porque sí son una secuencia; las demás secciones, no.

Pero la primera versión salió con fallos. Lo vemos en los errores 2 y 3.

Paso 3: los datos estructurados con schema

claude -p "/schema Revisa los datos estructurados de index.html y déjalos completos y correctos para este negocio local. Edita index.html." \
  --allowedTools "Read,Write,Edit,Glob,Grep,Skill"

El diseño ya traía un JSON-LD básico. La skill lo corrigió y lo amplió sin inventar nada:

• addressRegion decía "La Floresta" (un barrio); lo cambió a "Pichincha" (la provincia).
• Añadió priceRange, currenciesAccepted, areaServed y un hasOfferCatalog con los seis servicios y sus precios.
• No añadió FAQPage, porque Google ya no muestra resultados enriquecidos de FAQ para la mayoría de sitios, ni url, geo o image, porque no existían en la página.

Buen criterio. Aun así, se le escapó el error más serio de la prueba (el 4).

Paso 4: la auditoría con seo-audit

claude -p "/seo-audit Audita index.html antes de publicarla (SEO técnico y on-page, incluido SEO local). Guarda el informe en auditoria-seo.md, ordenado por prioridad. No edites index.html todavía." \
  --allowedTools "Read,Write,Edit,Glob,Grep,Skill"

El informe tiene cuatro prioridades, un plan de acción en tabla y la evidencia con número de línea. Lo más útil que encontró:

• Title de 68 caracteres y meta description de 195: Google los corta hacia 60 y 155. Propuso versiones de 56 y unos 150.
• El H1 no contenía la búsqueda principal ("taller de bicicletas Quito"), que solo estaba en el antetítulo. En vez de cambiar el titular por su cuenta, pidió visto bueno porque era una decisión de copy.
• Falta de canonical, robots.txt, sitemap.xml, og:image y un enlace tel:.
• Para SEO local, la ficha de Google Business Profile pesa más que la propia web, y "norte de Quito" es demasiado vago como zona de servicio.
• Dos restos de código muertos (una clase CSS sin uso y un getElementById a un id que no existe).

Después le pedimos a Claude que aplicara los arreglos que no necesitaban datos reales (title, description, H1, tel:, navegación y limpieza). El canonical, og:image y geo quedaron pendientes a propósito: sin dominio ni fotos reales, cualquier valor sería inventado.

El resultado: con skills y sin skills

Para comparar, lanzamos el mismo encargo en una carpeta sin skills: *"Lee contexto.md y crea index.html: la landing page de ese negocio, un solo archivo con el CSS dentro, lista para publicar."*

La versión sin skills no es mala: es una landing correcta que podría salir de cualquier plantilla. La diferencia está en que la combinación trabaja con método (diagnóstico, crítica, auditoría) y deja por escrito qué falta para publicar de verdad. Por 1,30 USD más, nos parece buen negocio. Lo que no hace sola es comprobar su propio trabajo, y de ahí salen casi todos los errores.

Los 5 errores que nos encontramos (y cómo los arreglamos)

Error 1: la skill no se cargó sola

En la primera ejecución pedimos *"Escribe el copy de la landing page de Rueda Libre y guárdalo en copy.md"*. La skill copywriting aparecía en la lista de skills disponibles y su descripción incluye literalmente "landing pages"... y Claude no la usó. Escribió el copy con su criterio por defecto: Bash, Grep, Read y Write, ninguna llamada a la herramienta Skill.

Arreglo: invocarla por su nombre al principio del prompt (/copywriting ...). Lo hicimos así en los cuatro pasos. Cuando combinas skills, no confíes en la activación automática: es lo que decide qué método se aplica.

Error 2: el diseño se hizo a ciegas

frontend-design pide "planificar, revisar contra el brief, construir y criticar", pero en modo -p y sin permiso para ejecutar comandos, Claude no puede abrir un navegador. Lo reconoció en su respuesta: *"no pude verla renderizada: el entorno no me dejó ejecutar un navegador"*. La primera versión tenía tres fallos visibles en la captura:

• El H1 ocupaba cinco líneas y el botón de WhatsApp quedaba fuera de la primera pantalla en un portátil de 1440×900.
• La rueda tapaba el final del subtítulo ("…antes de tocar nada").
• En móvil, el botón fijo inferior duplicaba al del hero y tapaba "Diagnóstico gratis".

Arreglo: sacamos capturas a 1440×900 y 390×844 con Playwright, las guardamos en capturas/ y se las pasamos:

claude -p "/frontend-design Abrí index.html en el navegador. Mira capturas/escritorio.png (1440x900) y capturas/movil.png (390x844), critica lo que ves contra el brief y corrige index.html. No cambies el copy." \
  --allowedTools "Read,Write,Edit,Glob,Grep,Skill"

Claude lee imágenes, así que detectó los tres fallos por su cuenta, bajó el tamaño del H1, movió la rueda y ocultó el botón fijo mientras se ve el del hero. Si trabajas en tu PC de forma interactiva, dale permiso para ejecutar un navegador y que haga este bucle él solo.

Error 3: el agente pidió permisos que no tenía

En esa misma corrección, Claude intentó volver a sacar las capturas con un script de Playwright y la ejecución se paró: *"This command requires approval"*. Como solo le dimos Read, Write, Edit, Glob, Grep, Skill, terminó diciendo que los cambios no estaban verificados visualmente.

Arreglo: verificamos nosotros con nuevas capturas (son las de este artículo). Es lo correcto en modo no interactivo: no le des Bash libre a un agente que no supervisas solo para que se haga capturas.

Error 4: el tipo de negocio no existe en schema.org

Este es el bueno. Tanto la versión sin skills como la versión con skills marcaron el negocio como "@type": "BicycleStore". La skill schema lo dio por bueno y seo-audit lo describió como un JSON-LD "coherente con el texto visible". Ese tipo no existe: el correcto es BikeStore.

Quisimos validarlo con el Rich Results Test y el validador de schema.org, pero los dos estaban bloqueados desde nuestro entorno de pruebas (CONNECT tunnel failed, response 403). Así que descargamos el vocabulario oficial de schema.org desde su repositorio de GitHub y lo comprobamos con un script de 43 líneas:

import json, re, sys

grafo = json.load(open(sys.argv[1]))["@graph"]
def ids(x):
    if x is None: return []
    return [i["@id"] for i in (x if isinstance(x, list) else [x])]

padres, dominios, tipos = {}, {}, set()
for n in grafo:
    t = n["@type"] if isinstance(n["@type"], list) else [n["@type"]]
    if "rdfs:Class" in t:
        tipos.add(n["@id"]); padres[n["@id"]] = ids(n.get("rdfs:subClassOf"))
    if "rdf:Property" in t:
        dominios[n["@id"]] = ids(n.get("schema:domainIncludes"))

def ancestros(c, vistos=None):
    vistos = vistos or set()
    for p in padres.get(c, []):
        if p not in vistos: vistos.add(p); ancestros(p, vistos)
    return vistos | {c}

errores, ok = [], 0
def recorrer(o, ruta):
    global ok
    if isinstance(o, list):
        for i, x in enumerate(o): recorrer(x, f"{ruta}[{i}]")
        return
    if not isinstance(o, dict) or "@type" not in o: return
    clase = "schema:" + o["@type"]
    if clase not in tipos:
        errores.append(f"{ruta}: tipo desconocido {o['@type']}"); return
    for k, v in o.items():
        if k.startswith("@"): continue
        p = "schema:" + k
        if p not in dominios: errores.append(f"{ruta}.{k}: propiedad inexistente")
        elif not set(dominios[p]) & ancestros(clase): errores.append(f"{ruta}.{k}: no aplica a {o['@type']}")
        else: ok += 1
        recorrer(v, f"{ruta}.{k}")

html = open(sys.argv[2]).read()
for bloque in re.findall(r'<script type="application/ld\+json">(.*?)</script>', html, re.S):
    recorrer(json.loads(bloque), "$")
print(f"{ok} propiedades válidas, {len(errores)} errores"); print("\n".join(errores))

Se ejecuta con python3 checkld.py schemaorg-current-https.jsonld index.html y muestra cuántas propiedades son válidas y cada tipo desconocido o propiedad que no corresponde a su tipo.

Arreglo: se lo dijimos a Claude en el paso de correcciones y cambió BicycleStore por BikeStore. Moraleja: las skills mejoran el criterio, pero no sustituyen a un validador. Un JSON-LD con un tipo inventado parece perfecto a simple vista y Google lo ignora.

Error 5: title y description demasiado largos

El copy proponía un title de 68 caracteres y una description de 195. Aquí la combinación funcionó como debe: seo-audit lo detectó, propuso versiones más cortas y el paso de correcciones las aplicó (56 y 146 caracteres). Un detalle de criterio: Claude no copió tal cual la description de la auditoría, que decía "entrega en 24 horas", sino que la dejó en "la mayoría en 24 horas" para no prometer más que la página.

Cómo repetirlo en tu proyecto

1. Escribe .claude/product-marketing.md con el producto, precios, público, objetivo y voz. Todas las skills de marketingskills lo leen.
2. Instala las cuatro skills con los dos comandos de npx skills add.
3. Lanza cada paso invocando la skill por su nombre (/copywriting, /frontend-design, /schema, /seo-audit) y que cada uno deje un archivo para el siguiente.
4. Después del diseño, saca capturas de escritorio y móvil y pídele una crítica sobre ellas.
5. Valida el JSON-LD con el Rich Results Test (o con el script de arriba) antes de publicar.
6. Aplica la auditoría y deja anotado lo que necesita datos reales: dominio, fotos, coordenadas, reseñas.

Si en vez de una landing quieres un flujo de desarrollo completo (planificar, TDD, revisión), la combinación que mejor nos ha funcionado es Superpowers.

Preguntas frecuentes

¿Necesito pagar por las skills? No. Las cuatro son públicas: marketingskills tiene licencia MIT y frontend-design, Apache-2.0. Lo que pagas es el uso de Claude Code: en nuestra prueba, 1,58 USD a precio de lista con Sonnet 5.5.

¿Por qué no usar una sola skill que lo haga todo? Porque cada una trae un método distinto y probado (copy, diseño, datos estructurados, auditoría). Combinadas, unas revisan el trabajo de otras: schema corrigió el JSON-LD del diseño y seo-audit corrigió el title del copy.

¿Funciona con Codex, Cursor u otros agentes? Las skills son archivos SKILL.md, y la CLI skills las instala para varios agentes con --agent. Nosotros solo lo probamos en Claude Code.

¿Las skills inventan reseñas o datos? En nuestra prueba, no: copywriting dejó la prueba social vacía con [NEED] y schema no puso geo ni image sin datos. El tipo BicycleStore sí fue un error inventado, y no lo detectó ninguna de las dos skills.

¿Puedo ejecutarlo sin el modo -p? Sí, y es mejor para el paso de diseño: en una sesión interactiva puedes darle permiso para abrir un navegador y que critique sus propias capturas sin que tú intervengas.

Conclusión

Cuatro skills bien encadenadas convierten un "hazme una landing" en un proceso con método: copy con datos verificables, diseño con identidad propia, datos estructurados y una auditoría antes de publicar, en siete minutos de agente y menos de dos dólares. Lo que no te dan es la verificación: invoca cada skill por su nombre, enséñale capturas al diseño y valida el JSON-LD antes de subir nada. Si es tu primera vez con skills, sigue por la guía de skills de Claude Code.