Haz tu sitio web profesional con IA, sin saber programar

El problema que esto resuelve

Necesitas un sitio web y tienes tres caminos malos: pagarle a una agencia lo que todavía no puedes pagar, pelearte con una plantilla que se ve igual a la de todos, o posponerlo otros seis meses.

Hay un cuarto camino. Yo dirijo una agencia que hace sitios web, y te voy a enseñar exactamente cómo se hace uno hoy: le das las instrucciones correctas a una IA y ella lo construye, lo prueba y lo publica. Tú no escribes ni una línea de código. Tu trabajo es tener claro tu negocio y aprobar lo que veas.

Líneas que escribes tú

0

De la idea al enlace

1 tarde

Hosting con Netlify

$0

Piensa en Claude Code como un equipo de desarrollo que trabaja para ti. Tú eres el director: dices qué quieres, entregas tu material, revisas y pides cambios con tus palabras. Él escribe el código, lo prueba y lo sube.

El stack completo son tres piezas, y solo pagas una:

• Claude Code — la IA que construye. Va con tu cuenta de Claude (Pro o Max).
• Astro — la tecnología del sitio. Gratis.
• Netlify — donde vive tu sitio en internet. Gratis en su plan base.

Claude Code corre en tu computadora. Se instala una vez y se queda.

npm install -g @anthropic-ai/claude-code

Después creas tu cuenta gratis en netlify.com. Con eso tienes todo.

La diferencia entre un sitio genérico y uno que vende no está en el código. Está en lo que tú le das. Junta esto en una carpeta antes de escribir el primer prompt.

1. Los textos de tu negocio

Qué haces, para quién, tus servicios o paquetes con precios si los publicas, tres testimonios reales si los tienes, y cómo te contactan. Escríbelo como le hablas a un cliente, no como folleto.

2. Tu logo y tus fotos

El logo en la mejor calidad que tengas y de 5 a 10 fotos reales: tú, tu equipo, tu producto, tu local. Las fotos reales venden más que cualquier banco de imágenes.

3. Tu estilo

Dos o tres sitios que te gusten como referencia, tus colores si ya los tienes, y una palabra de cómo quieres sentirte: serio, cálido, premium, directo.

4. Tu dominio (opcional)

Si ya tienes dominio propio, tenlo a la mano. Si no, Netlify te da uno gratis para arrancar y el propio lo conectas después.

Abre una carpeta nueva en tu computadora, entra a Claude Code ahí, y pégale este texto completo. Cambia solo lo que está entre corchetes.

Quiero que me construyas el sitio web de mi negocio. No soy
programador: hazlo todo tú y explícame en pasos simples.

TECNOLOGÍA: Astro, sitio estático, publicado en Netlify. Sin base de
datos, sin WordPress.

PÁGINAS Y SECCIONES:
1. Inicio con un mensaje principal claro de qué hago y para quién,
 y un botón de contacto visible sin hacer scroll.
2. Sección de servicios o paquetes con lo que incluye cada uno.
3. Sección de confianza: quién soy, mi historia corta y testimonios.
4. Contacto: formulario (nombre, teléfono, mensaje) que me llegue
 por correo usando Netlify Forms, más botón de WhatsApp directo.

DISEÑO: profesional y limpio, pensado primero para celular. Usa mis
colores y mis referencias. Tipografía legible, nada recargado. Las
fotos que te doy son reales: úsalas grandes.

CALIDAD: el sitio debe cargar rápido, verse perfecto en celular,
tener títulos y descripciones para Google en cada página, y poderse
navegar con teclado.

CUANDO TERMINES: publícalo primero como BORRADOR en Netlify con
"netlify deploy" y dame el enlace para revisarlo. NO lo publiques
en producción hasta que yo te diga "apruébalo". Cuando yo apruebe,
lo publicas con "netlify deploy --prod" y me explicas cómo conectar
mi dominio.

MI NEGOCIO:
[pega aquí tus textos: qué haces, servicios, precios, testimonios]

MI ESTILO:
[tus colores, 2 o 3 sitios de referencia y la palabra que te define]

MIS ARCHIVOS: el logo y las fotos están en esta misma carpeta.

Claude Code te va a dar un enlace de borrador. Ábrelo en tu celular, porque ahí lo va a ver la mayoría de tus clientes.

Recorre todo y pide cambios como se los pedirías a una persona: “el título no me convence, hazlo más directo”, “esa foto va más grande”, “el WhatsApp que se vea siempre”. Él ajusta y te da otro enlace. Repite hasta que digas: apruébalo.

- El mensaje principal no dice qué vendo. Cámbialo a algo como:
"[tu propuesta en tus palabras]".
- En celular el menú tapa el logo. Arréglalo.
- Agrega una sección de preguntas frecuentes antes del contacto,
te paso las 5 preguntas que siempre me hacen.
- Ya me gustó. Apruébalo y publícalo en producción.

Conecta tu dominio

Cuando apruebes, pídele: “explícame cómo conectar mi dominio [tudominio.com] paso a paso”. Te va a decir exactamente qué cambiar y dónde. Son dos registros y minutos de espera.

El sitio crece contigo

Cada vez que necesites algo, abres Claude Code en la misma carpeta y se lo pides: una página nueva, una promoción, el catálogo. El sitio es tuyo, el código es tuyo, y no le pagas mensualidad a nadie más que tu dominio.

Guarda tu carpeta

Esa carpeta ES tu sitio. Respáldala (Drive, Dropbox, donde sea). Si cambias de computadora, la copias, abres Claude Code ahí, y sigues como si nada.

¿Notaste el video de arriba de esta guía? No se reproduce solo: avanza conforme haces scroll. Tu dedo es la línea de tiempo. Ese efecto se siente caro, y lo vas a replicar en tres pasos sin programar nada.

Paso 1 · Genera el clip con Veo

Veo es la IA de video de Google. Vive dentro de Gemini (gemini.google.com, plan con Veo incluido). Pídele un clip así:

Video cinematográfico de 8 segundos de [tu negocio: un platillo
emplatándose / una casa recorrida en steadicam / un producto girando
sobre fondo limpio].

Requisitos importantes:
- UNA SOLA toma continua, sin cortes ni cambios de escena.
- Movimiento de cámara lento, constante y en una sola dirección.
- Sin texto, sin logos, sin personas hablando.
- Iluminación suave y profesional, colores [tus colores].
- Formato horizontal 16:9.

Descarga el video que te dé Veo y guárdalo en la carpeta de tu sitio como header.mp4.

Paso 2 · Descompón el video en cuadros y móntalo

Aquí está el secreto técnico, y es el paso que casi todos se saltan: un video normal no sirve para scroll. Los videos comprimen guardando un cuadro completo cada varios segundos y el resto son diferencias, así que al arrastrarlo con el dedo brinca. Hay que descomponerlo para que cada cuadro sea una imagen completa e independiente. Eso no lo haces tú: se lo pides a Claude Code junto con el montaje.

En la carpeta está header.mp4, un video que generé con Veo. Quiero
que sea el video del header de mi página de inicio y que avance con
el scroll, no que se reproduzca solo. Hazlo así:

1. Recodifica el video para scrubbing: cada cuadro debe ser un
 keyframe independiente (en ffmpeg es la opción -g 1), formato
 mp4 h264 con faststart, resolución máxima 1280px, y que pese
 menos de 5 MB. Genera también una imagen poster del cuadro final.

2. Móntalo arriba del contenido: mientras el usuario hace scroll en
 la primera pantalla y media, el tiempo del video avanza en
 proporción al scroll (usa currentTime, con requestAnimationFrame
 para que sea fluido). Hacia atrás también funciona.

3. Calidad: muted y playsinline para que funcione en iPhone, el
 poster mientras carga, y si el usuario tiene activado "reducir
 movimiento" en su sistema, muestra solo la imagen fija.

4. Una pista discreta que diga "el video avanza con tu scroll" y
 desaparezca al primer avance.

Cuando esté listo, publica el borrador y dame el enlace.

Paso 3 · Pruébalo con el dedo

Abre el borrador en tu celular y scrollea despacio: el video debe seguirte hacia adelante y hacia atrás sin saltos. Si brinca, díselo con esas palabras: “el video brinca al hacer scroll, revisa que todos los cuadros sean keyframes”. Él sabrá qué hacer.

Lo que te llevas

• No programaste nada. Dirigiste, que es lo que un dueño hace.
• Un sitio con Astro: rápido, seguro y sin mensualidades de plataforma.
• Publicado gratis en Netlify, con formulario que llega a tu correo.
• El hábito correcto: borrador, revisión, y hasta entonces producción.
• Un header con video que avanza con el scroll: Veo lo genera, la IA lo monta.
• Un sitio que crece contigo a punta de pedirle cambios en español.