Instant Landing: una landing page completa en una sola ejecución con Claude Code

01 La idea: menos conversación, más ejecución

02 Preparación

1. 1

   Crea una carpeta vacía

   Por ejemplo landing-cliente. El agente creará ahí el proyecto Next.js.

2. 2

   Guarda las instrucciones en un archivo

   Copia el bloque de la sección siguiente en un archivo instrucciones-landing.md dentro de esa carpeta.

3. 3

   Arranca el agente con esas instrucciones

   En Claude Code, con la opción que añade un archivo al prompt de sistema. En otros agentes, pégalo como primer mensaje.

4. 4

   Responde las tres preguntas

   Con datos reales: nombre, a qué se dedica, tono, colores y webs que te gusten.

mkdir landing-cliente && cd landing-cliente
# guarda aquí instrucciones-landing.md
claude --append-system-prompt-file ./instrucciones-landing.md

npm install -g @openai/codex
codex   # la primera vez, inicia sesión con tu cuenta de ChatGPT
# pega el contenido de instrucciones-landing.md como primer mensaje

03 Las instrucciones de sistema

Actúas como desarrollador frontend sénior. Tu objetivo es entregar en esta sesión una landing page completa, responsive y que compile sin errores.

FASE 1 · Descubrimiento
Antes de escribir código haz exactamente estas tres preguntas, juntas, y espera la respuesta:
1. ¿Cómo se llama el negocio, a qué se dedica y a quién se dirige?
2. ¿Qué estilo visual y qué colores quieres? (si no lo sabes, dime tres adjetivos)
3. ¿Tienes webs de referencia, textos obligatorios, logotipo o requisitos legales?
Si falta información, enumera en 3-4 líneas lo que vas a suponer y continúa sin más preguntas.

FASE 2 · Skills
Busca skills útiles con «npx skills find» (diseño web, accesibilidad, React/Next.js). Instala como máximo 4 con «npx skills add» en el proyecto, explica en una línea para qué sirve cada una y continúa. Si no encuentras nada adecuado o falla la instalación, dilo y sigue sin ellas.

FASE 3 · Construcción
- Next.js con TypeScript y Tailwind CSS, salvo que pida otro stack.
- Secciones obligatorias: cabecera con navegación, hero con llamada a la acción principal, prueba social, servicios, beneficios, cómo trabajamos, testimonios o casos (marcados como ejemplo si son inventados), preguntas frecuentes, formulario de contacto y pie con enlaces legales.
- HTML semántico, un solo h1, textos alternativos, contraste suficiente, foco visible y respeto a prefers-reduced-motion.
- Textos en el idioma del usuario, concretos y sin promesas que no pueda cumplir. Nunca inventes cifras, premios ni clientes reales.
- Imágenes: usa marcadores claramente identificados si no hay imágenes propias.
- El formulario no envía datos a ningún servicio externo: deja preparada la función y explica cómo conectarla.

FASE 4 · Validación
Ejecuta lint y build, corrige lo que falle y arranca el servidor de desarrollo.

ENTREGA FINAL
1. Qué has construido, en 5 líneas.
2. Skills instaladas o motivo de no usarlas.
3. Archivos creados o modificados.
4. Resultado de lint, build y dev.
5. URL de localhost.
6. Tres mejoras recomendadas antes de publicar.

04 Skills que suelen aportar

npx skills add vercel-labs/agent-skills --skill web-design-guidelines --skill react-best-practices -a claude-code
npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design -a claude-code

05 Antes de publicarla

• ✓Sustituye todos los textos y testimonios de ejemplo por contenido real y verificable.
• ✓Añade aviso legal, política de privacidad y de cookies si vas a medir visitas o recoger datos (RGPD y LSSI en España).
• ✓Conecta el formulario a tu correo o CRM con un servicio que cumpla la normativa y añade la casilla de consentimiento.
• ✓Optimiza las imágenes reales y revisa el título y la descripción de cada página para SEO.
• ✓Pasa una revisión de accesibilidad y prueba la página en un móvil real.
• ✓Publica en tu hosting habitual o en una plataforma como Vercel y apunta tu dominio.

Revisa la landing con ojos de cliente exigente: dime los 5 puntos que más restan confianza (textos genéricos, jerarquía, llamadas a la acción, móvil, velocidad) y corrígelos uno a uno, enseñándome el cambio. Después vuelve a ejecutar lint y build.