Crea tu primera web con un agente de código, sin saber programar

Hace dos años, hacer una web sin saber programar significaba usar una plantilla. Hoy puedes describirla con palabras y un agente de programación la construye por ti: crea los archivos, escribe el código, lo prueba y lo corrige. A esta forma de trabajar se le llama vibe coding. Funciona muy bien para webs sencillas, prototipos y herramientas personales, siempre que revises lo que hace.

Paso 1: elige la herramienta

Herramienta	Cómo se usa	Precio
Claude Code	En la terminal, en VS Code o en la app de escritorio	Requiere plan de pago de Claude o API
Codex	En la terminal, en el editor o en la nube	Incluido en los planes de ChatGPT, con límites
Cursor	Editor de código visual con agente integrado	Plan gratuito; individual 20 $ al mes

Si nunca has abierto una terminal, Cursor o la app de escritorio de Claude te resultarán más amigables. Si te animas, Claude Code y Codex se instalan con un comando. Comparamos las tres en agentes de código comparados.

Paso 2: instala y crea una carpeta

• Claude Code (macOS, Linux o WSL): curl -fsSL https://claude.ai/install.sh | bash. En Windows, desde PowerShell: irm https://claude.ai/install.ps1 | iex. Después, claude dentro de la carpeta del proyecto.
• Codex (macOS o Linux): curl -fsSL https://chatgpt.com/codex/install.sh | sh y después codex en la carpeta; la primera vez, elige Sign in with ChatGPT.
• Cursor: descárgalo de cursor.com, abre una carpeta vacía y usa el panel del agente.

Crea una carpeta vacía, por ejemplo mi-web, y abre la herramienta dentro.

Paso 3: describe la web y pide un plan

No empieces con «hazme una web». Describe:

«Quiero una web de una sola página para mi clase de yoga en [ciudad]. Debe tener: presentación, horarios, precios, tres opiniones de alumnos que te daré y un botón para escribirme por WhatsApp. Estilo tranquilo, colores tierra, que se vea bien en el móvil. Usa solo HTML, CSS y JavaScript, sin dependencias. Antes de escribir código, propón un plan y espera a que lo apruebe.»

Pedir el plan antes que el código te permite corregir el rumbo cuando aún es barato.

Paso 4: revisa y pide cambios concretos

Abre el archivo index.html en el navegador (o pide al agente que arranque un servidor local y te diga la dirección). Prueba todo, también en el móvil. Y pide cambios concretos:

• «El botón de WhatsApp no se ve en el móvil; hazlo fijo abajo a la derecha.»
• «Los horarios en una tabla con los días en filas.»
• «Explícame qué hace cada archivo, en una frase cada uno.»

Ese último pedido es oro: aprenderás cómo está hecha tu web.

Paso 5: guarda versiones

Pide: «inicializa un repositorio git y haz un commit con cada cambio que funcione». Si algo se rompe, podrás volver atrás. Si no quieres git, al menos copia la carpeta cuando algo funcione.

Paso 6: publícala

Una web así (solo HTML, CSS y JavaScript) puede alojarse gratis en servicios de webs estáticas. Pide al agente: «guíame paso a paso para publicar esta web en un alojamiento gratuito de webs estáticas, explicándome cada paso». Antes de publicar, revisa que no haya datos personales que no quieras mostrar.

Lo que el agente no hace por ti

• Decidir qué quieres. Cuanto más claro lo tengas, mejor sale.
• Garantizar la seguridad. Para formularios con datos, pagos o cuentas de usuario, pide ayuda profesional.
• Saber si está bien. Prueba todo como lo haría un visitante.

Revisa también seguridad de agentes: un agente de código ejecuta comandos en tu ordenador, así que conviene darle solo los permisos que necesita.