Cómo programar un sitio web con IA sin saber programar: así hice el mío

La respuesta corta: para programar un sitio web con IA sin saber programar necesitas cinco piezas. Claude Code escribe el código, Astro le da la estructura, GitHub lo guarda, Cloudflare lo publica y tu dominio es la dirección. Tú escribes una frase con buen contexto, revisas una vista previa y dices “va”. No necesitas el skill ni la plantilla de nadie.

Así están hechos este sitio, el de mi agencia y otros tres que te enseño abajo, uno de un cliente. No escribo su código: lo dirijo. Abajo va cómo funciona cada pieza, qué pago y qué le escribo al agente.

¿Qué vas a encontrar aquí?

• Cómo programar un sitio web con IA cuando no sabes escribir código.
• Qué cuesta este stack comparado con pagarle a una agencia cada mes.
• Cómo una frase y unos enlaces arrancan un cambio real.
• Cinco sitios hechos así, uno de un cliente sin GitHub.
• Cuándo vale la pena guardar tu proceso, y por qué no al principio.
• Cómo se revisa el trabajo del agente antes de que se publique.

¿Qué necesitas para programar un sitio web con IA?

Cinco piezas, y cada una hace un solo trabajo. Si una falla o sale algo mejor, la cambias sin tirar las demás.

Pieza	Qué hace	Qué pagas
Claude Code	Escribe el código y los textos, y sigue tus reglas	Tu suscripción de Claude
Astro	La estructura del sitio: cómo se arma una página rápida y que Google entiende	Nada, es de código abierto
GitHub	La caja fuerte del código: cada cambio queda guardado y se puede regresar	Nada, los repositorios privados son gratis
Cloudflare	Publica el sitio y una vista previa de cada cambio	Nada en el plan gratis para un sitio estático
Tu dominio	La dirección	Una vez al año

La pieza que casi nadie pone es la sexta: las reglas escritas. En la raíz de mi repositorio hay un archivo que el agente lee antes de tocar nada: qué voz usar, qué cifras están permitidas, que ninguna dirección se quede en error 404 y qué tiene que pasar antes de subir un cambio. Es el puesto del agente, por escrito.

¿Y el diseño, quién lo hace?

El mismo agente, si le das buenos ejemplos. Un sitio que te guste como referencia y unas reglas de gusto (tipografías, colores, qué evitar) hacen más que pedirle “que se vea moderno”.

Para eso armé una configuración gratis: diseño web con Claude, con las skills de diseño, Playwright para que el agente vea cómo quedó la página y Figma conectado por MCP. La siguiente que voy a probar es Paper, un lienzo de diseño que se conecta a Claude Code por MCP: todavía no la uso, así que cuando la pruebe cuento cómo me fue.

¿Cuánto cuesta un sitio con IA contra pagarle a una agencia?

El gasto fijo es la suscripción de Claude, y la usas para mucho más que el sitio. Lo demás es gratis o se paga una vez al año.

Lo que cambia más que el precio es de quién es el código. Con una agencia tradicional, el sitio vive en su plantilla, en su hosting y en su cuenta; cada cambio es un ticket en la bandeja de alguien y una semana de espera. Con este stack, el código vive en tu GitHub y cualquier agente, o cualquier persona, lo puede tomar mañana.

¿Por qué no usar Lovable, Bolt o Replit?

Porque cobran un impuesto que no ves. Pagas créditos sin saber cuánto vale cada uno, no sabes qué modelo construye tu sitio y el código se queda en su plataforma.

Esas herramientas sirven para probar una idea en una tarde. Para el sitio de tu empresa, el que va a recibir clientes durante años, quieres el código en un lugar que controlas y la libertad de cambiar de herramienta de IA sin empezar de cero.

¿Necesitas el skill o la plantilla de alguien más?

No. Con una frase y buen contexto alcanza. Lo que hace que el agente acierte es lo que le das para leer, no un prompt secreto ni el comando de otra persona.

Este artículo arrancó así. Le mandé al agente una captura de una página que me gustó, la transcripción de un video y una frase: “hagamos una página similar a esta”. Después le pedí “agrega los otros sitios y pon ejemplos para que se vean bien”. El agente leyó mis reglas, revisó qué artículos ya existían para no repetir, escribió el borrador, dibujó los diagramas y abrió el cambio para que yo lo revisara.

Si nunca has hecho un sitio con IA, abre Claude Code en una carpeta vacía y pega esto, con tus datos:

Hazme la página de inicio de [nombre del negocio] con Astro.
Quiénes somos: [una línea: qué vendes y a quién].
Lee mi sitio actual: [enlace]. Toma de ahí el logo, los colores y las fotos.
Lee también: [perfil de Google, Instagram o LinkedIn].
Me gusta cómo se ve este sitio: [enlace a un ejemplo].
Escribe en español de México, sin inventar cifras ni testimonios.
Guárdalo en un repositorio privado de GitHub y publica una vista previa en Cloudflare.
Antes de entregarme, compila, revisa que no haya enlaces rotos y dime qué no pudiste hacer.

Son ocho líneas y ninguna es técnica. Lo que cambia el resultado son los enlaces: mientras más se parezcan a lo que quieres, menos corriges.

¿Qué sitios he hecho así?

Cinco. Cuatro los dirigí yo y uno lo hizo un cliente solo, después de que le expliqué el proceso. Dos no están en Astro sino en Next.js, otra estructura parecida: la receta no depende de una herramienta.

• gabrielneuman.com, este sitio. Lo rehíce desde cero en Astro, con el blog, las herramientas gratis y una vista previa por cada cambio.
• neumansolutions.com, el sitio de mi agencia. Está en Next.js, exportado como sitio estático, y se publica en Cloudflare igual que este.
• TrackingBlue, telemetría para flotillas en México. Se armó en un día en Astro: páginas por servicio, por industria, casos de uso, guías y una calculadora que corre en el navegador. Hoy vive en vista previa mientras se compra el dominio.
• SmartWorkplaces, fit-out de oficinas en México. Está en Next.js e incluye páginas por tipo de cliente, guías de precios por ciudad y un formulario que guarda cada contacto en su base de datos.
• The Team Effect (theteameffect.org), el sitio del libro de un cliente, con un diagnóstico de 5 minutos y versión en inglés. Le expliqué el proceso y lo hizo él. No usa GitHub: cada cambio lo descarga en un zip y lo sube a su hosting. Funciona; lo que se pierde es el historial de versiones y la vista previa de cada cambio, por eso yo sí uso GitHub.

¿Cuándo vale la pena guardar tu proceso como skill?

Cuando ya hiciste lo mismo dos o tres veces y te cansaste de explicarlo. Antes no: un skill escrito antes de hacer el trabajo guarda tus suposiciones, no tu proceso.

Un skill es un proceso completo guardado con un nombre, para correrlo con una línea. En Claude Code los llamas con una diagonal. Uno de los míos corre solo cada mañana: escoge una búsqueda de Search Console que cae en mis temas, mejora el artículo que la contesta y abre el cambio para revisión.

Cuando llegues ahí:

1. Haz el trabajo en una conversación normal, de la primera instrucción al resultado final, corrigiendo lo que no te guste.
2. Al final escribe: “guarda todo lo que hicimos en esta conversación como un skill que se llame /nombre”.
3. La siguiente vez corre /nombre con los enlaces nuevos. Cada corrección que repitas dos veces, agrégala.

Guárdalo en tu GitHub y no solo dentro de una app. Así cualquier herramienta de IA que uses después lo puede leer.

¿Quién revisa el trabajo del agente antes de publicarlo?

Primero las máquinas y al final tú. Un cambio a mi sitio no se sube si la compilación o la revisión automática fallan, y cada mañana otro programa revisa que ninguna dirección del sitio vivo responda con error.

Hay revisiones que no dependen de que el agente se acuerde de una regla. Si una herramienta gratis del sitio trae un precio, la compilación falla sola. Si una página se quita, tiene que ir a una lista de redirecciones o la revisión de enlaces la marca.

Para lo que no es exacto, como un texto o un diseño, uso un semáforo. En lo verde (textos, notas, errores de dedo) el agente fusiona con las revisiones en verde. En lo amarillo, otro agente en una sesión separada revisa el trabajo y yo doy el “va”. En lo rojo (pagos, clientes, mensajes a terceros) solo yo.

¿Qué es una vista previa y por qué la necesitas?

Es una copia del sitio con tu cambio, en una dirección aparte que Google no indexa. La revisas desde el celular, la compartes con quien quieras y, si te gusta, la apruebas.

En mi caso cada rama de GitHub se publica sola como vista previa en Cloudflare, y cada fusión a la rama principal publica el sitio real. No tengo que entrar al panel de Cloudflare ni subir archivos.

¿Por qué Astro y no WordPress?

Porque el agente entiende mejor un proyecto de archivos que un panel con plugins. Astro arma páginas que cargan rápido, que los buscadores leen bien y que no mandan código innecesario al navegador.

Cuando rehíce este sitio desde cero en Astro también retiré el CMS. Si tú o tu equipo van a editar arrastrando cajas, un CMS tiene sentido. Si los cambios se los pides a un agente con una frase, es una capa que nadie usa.

Si mañana sale algo mejor que Astro, lo cambio. Por eso el código vive en GitHub y no en una herramienta.

¿Qué sitio deberías construir primero?

El tuyo, o el de un negocio que conoces bien. Una marca personal o el sitio de una empresa de servicios es el mejor lugar para practicar, porque sabes cómo debería verse un buen resultado.

Llevo más de 20 años automatizando procesos, desde 2006, y la regla no ha cambiado: primero haces el trabajo a mano, luego lo escribes y al final lo automatizas. Con un sitio es igual. La primera página la diriges paso a paso; cuando ya la repetiste, la guardas.

Lo que puedes hacer esta semana

1. Abre una cuenta gratis de GitHub y una de Cloudflare, y conecta GitHub a Claude Code.
2. Pega en Claude Code el texto de arriba con tus datos y tus enlaces.
3. Revisa la vista previa en tu celular y corrige con frases cortas. El skill viene después, cuando ya lo repetiste.

Si quieres que lo armemos para tu equipo, empieza con el diagnóstico. Y si prefieres ir por tu cuenta, cada viernes cuento lo que estoy construyendo en el newsletter El CEO agéntico.