Crea la Web de tu negocio con Claude y que no parezca IA

¿De qué trata este tutorial?

En este tutorial te enseño cómo crear una landing page profesional para cualquier negocio usando Claude Code, sin que el resultado se vea genérico o "hecho por IA".

La clave está en un prompt estructurado que obliga a Claude a hacerte preguntas antes de generar código, usar una imagen de referencia real, y aplicar principios de diseño y responsive de verdad.

El resultado: una web con copy persuasivo en español, código limpio (HTML + CSS + JS), 100% responsive y orientada a conversión.

Video del tutorial

Video próximamente...

Requisitos antes de empezar

1. Tener Claude Code instalado

Si aún no lo tienes, sigue mi guía: Cómo instalar Claude Code con Homebrew en Mac

2. Instalar las Skills necesarias

Abre tu terminal y ejecuta estos dos comandos:

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

npx skills add https://github.com/supercent-io/skills-template --skill responsive-design

Estas skills le dan a Claude conocimiento especializado en diseño de interfaces y responsive design.

3. Tener una imagen de referencia

Busca una landing page que te guste como referencia visual. Puedes encontrar inspiración en:

• Behance
• Dribbble
• Cosmos

Descarga la imagen y colócala en la carpeta de tu proyecto.

4. (Opcional) Agregar recursos de tu marca

Si tienes logo, imágenes, iconos o fuentes, agrégalos a la carpeta del proyecto. Claude los detectará y los usará automáticamente.

El Prompt (copia y pega)

Este es el prompt completo que usé en el tutorial. Cópialo, pégalo en Claude Code y responde las preguntas que te haga:

Actúa como especialista en diseño y desarrollo de landing pages para cualquier industria (ejemplo: maderería, real estate, autopartes, salud, educación, etc.). No asumas que el negocio es de IA.

Usa estas skills durante todo el proceso:
- interface-design
- responsive-design

Primero, haz preguntas obligatorias y espera mis respuestas:
1. ¿Cuál es el giro del negocio y qué producto/servicio ofrece?
2. ¿Cuál es el objetivo principal de la landing? (ventas, leads, WhatsApp, llamada, registro, etc.)
3. ¿Quién es el público ideal?
4. ¿Cuál es la propuesta de valor y qué diferencia al negocio de su competencia?
5. ¿Qué colores quiere usar la marca? (primario, secundario, fondo, acento)
6. ¿Qué estilo visual quiere proyectar? (moderno, elegante, corporativo, minimalista, etc.)
7. ¿Qué secciones obligatorias debe incluir? (testimonios, precios, bonos, garantía, FAQs, CTA, etc.)
8. ¿Cuál es el nombre exacto del archivo de imagen de referencia dentro del directorio actual? (ejemplo: referencia.png). No continúes sin usar esa imagen.
9. ¿Agregaste más recursos en la carpeta del proyecto para usar en la web (logos, imágenes, íconos, videos, fuentes, etc.)? Si sí, asume que están dentro del directorio actual y úsalos con rutas relativas.

Instrucciones clave:
- La imagen de referencia estará dentro del directorio actual; cárgala desde ese path local.
- No inventes assets externos si ya existen archivos en el directorio. SI no hay recursos crealos para que se vea con data
- Prioriza usar los recursos locales disponibles.

Con mis respuestas + la imagen de referencia, genera:
- Estructura completa de landing orientada a conversión.
- Copy persuasivo en español.
- Código completo en HTML + CSS + JS.
- Diseño 100% responsive (mobile-first, tablet y desktop).
- Variables CSS para colores y tipografía.
- Accesibilidad básica (contraste, alt text, jerarquía de headings).

Entrega final en este orden:
1) Resumen de decisiones de diseño
2) Estructura de secciones
3) Código completo
4) Checklist de responsive y accesibilidad

Repo de ejemplo

Si quieres ver el resultado final o usarlo como base, aquí está el repo con el diseño de Real Estate que hice en el tutorial:

github.com/elalo4171/real-state

¿Por qué funciona este prompt?

La mayoría de la gente le dice a la IA "hazme una landing page" y el resultado se ve genérico. Este prompt funciona porque:

1. Obliga a Claude a preguntar antes de actuar — no asume nada, entiende tu negocio primero
2. Usa una imagen de referencia real — Claude analiza el diseño y lo replica, no inventa desde cero
3. Aplica skills especializadas — interface-design y responsive-design le dan criterio de diseñador, no solo de programador
4. Usa recursos locales — si tienes logo e imágenes, los integra en vez de usar placeholders genéricos
5. Genera copy persuasivo — no solo código bonito, sino texto orientado a conversión

Tips finales

• Sé específico en tus respuestas — mientras más detalle le des en las 9 preguntas, mejor será el resultado
• Invierte tiempo en la imagen de referencia — es lo que más impacta el diseño final
• Itera — si algo no te gusta, dile a Claude qué cambiar. No tienes que aceptar la primera versión
• Agrega tus recursos — un logo real y fotos del negocio hacen toda la diferencia vs. placeholders

¿Qué sigue?

Ya tienes tu landing lista. Ahora solo dile a la IA qué quieres que cambie o agregue y lo hará por ti. Algunos ejemplos:

• "Cambia el color principal a azul oscuro"
• "Agrega una sección de precios con 3 planes"
• "Hazme un formulario de contacto con WhatsApp"
• "Agrega animaciones al scroll"
• "Optimiza las imágenes para que cargue más rápido"

No necesitas saber código. Solo describe lo que quieres y Claude se encarga.