Lo que te llevarás: un sitio web real, con diseño profesional,
funcionando y previsualizándose en tu máquina — construido enteramente hablando, en menos de una hora.
Abre Claude Code en una carpeta nueva y vacía. Elige el prompt que más se parezca a tu
caso, pégalo, y mira cómo lo construye con vista previa en vivo. Después ejecuta el bucle: mira la
vista previa, di qué está mal en palabras normales («hero más grande», «intercambia las secciones 2
y 3», «colores más cálidos»), repite. No busques lo perfecto — busca tenerlo en vivo.
Atento a esto
- Si algo se ve raro, describe el arreglo, no intentes «programarlo». «Los botones se sienten apretados» funciona.
- Pídele la vista previa cuando quieras: «abre la vista previa en vivo para verla».
- Es normal dar 5–10 vueltas. Eso no es fracasar — ese es el flujo de trabajo.
Los prompts vienen precargados con una barra de diseño (hero con gradiente de malla
fluido, jerarquía y espaciado reales, movimiento sutil) y toman tus colores y tipografías de tu
design.md — así tu sitio sale profesional y distinto al de cualquiera.
📋 Prompt principal (traducido) — negocio de una página
Pega esto en Claude Code (rellena los corchetes)
Construye una web moderna de una página, con diseño profesional, para mi
[tipo de negocio] llamado [nombre]. Audiencia: [quién]. Tono: [2-3 palabras]. Secciones: un hero
con titular centrado en el resultado + un solo botón «Reserva ahora», un cómo-funciona en 3
pasos, un bloque de precios de 3 niveles (resalta el del medio), una fila corta de testimonios y
un formulario de contacto. Incluye una barra de navegación fija con enlaces a cada sección con
scroll suave, y mantén el botón «Reserva ahora» fijado en la nav. Haz que parezca hecho por un
estudio de diseño real, no IA genérica — cumple este listón: un hero con gradiente de malla CSS
fluido con profundidad real (formas difuminadas que derivan + una tarjeta de cristal esmerilado,
nunca un bloque de color plano ni caricatura); una escala tipográfica clara (una fuente display +
una de cuerpo limpia vía Google Fonts, con saltos de tamaño decididos — un H1 grande y seguro);
una escala de espaciado consistente con padding generoso y uniforme (sin huecos apretados ni
raros); jerarquía visual fuerte; y una paleta contenida (usa mi design.md si lo tengo; si no, un
acento + neutros — nunca el gradiente genérico morado-a-azul de IA). Escribe copy de relleno real
y específico, no lorem. Iconos SVG en línea — sin librería de iconos. Mantén el movimiento sutil y
elegante en esta fase: scroll suave, revelados con fundido suave al entrar las secciones y
elevaciones suaves al pasar el ratón — nada llamativo aún. Que sea RÁPIDO y a prueba de balas:
solo animaciones de transform/opacidad (sin filtros de ruido/desenfoque animados, sin marquesinas
auto-deslizantes), sin librerías JS externas, totalmente visible sin JavaScript, el enlace de
Google Fonts como único recurso externo. Mobile-first y fluido en un portátil modesto. Un único
archivo HTML autocontenido. Muéstrame una vista previa en vivo.
Las 3 variantes de la lección
1 · Negocio — hero + 3 pasos + pricing 3 niveles + testimonios + contacto (el de arriba)
2 · Portfolio — misma barra de diseño, con tarjetas de proyectos con hover
3 · Servicio local — promesa audaz + insignias de confianza + 3 beneficios (como resultados) + testimonios + FAQ + formulario «Pide presupuesto»
🧩 La spec común a los tres (la «barra de diseño»): hero de malla con
profundidad · escala tipográfica con saltos decididos · espaciado generoso · jerarquía fuerte ·
paleta contenida (tu design.md o un acento + neutros) · copy real, no lorem · SVG en
línea · movimiento sutil (solo transform/opacidad) · sin librerías externas · un solo archivo HTML ·
mobile-first · vista previa en vivo.
Los toques de firma llegan en la siguiente lección («Haz que parezca diseñado») y
la conversión en la otra («Constrúyelo para convertir»). Aquí el objetivo es tenerlo vivo.
Fuente: Claude Code Club · Aula · Etapa 3 «Websites» — lección «Construyendo tu primer sitio».
Nota: los prompts de portfolio y servicio local comparten la misma spec; traducido el principal íntegro. · Añadido: 7 de julio de 2026.