# Crear una página web con IA: guía paso a paso

URL: https://agentvera.dev/es/blog/build-website-with-ai/ · Publicado: 2026-10-11

Crea una página web con IA: elige el stack, escribe un primer prompt con dirección de diseño, itera con capturas, revisa móvil y SEO y despliega en Vercel o Netlify.

**En resumen:**

- Para un sitio de contenido, Astro es una buena opción por defecto; usa Next.js cuando necesites inicios de sesión, un panel o una base de datos, y HTML y CSS puros para una sola página.
- Da en el primer prompt páginas, colores y fuentes concretos y una lista de «no», luego corrige una sola cosa cada vez a partir de capturas y haz commit tras cada paso bueno.
- Antes del lanzamiento, comprueba los anchos de 375, 768 y 1440 px y Lighthouse, añade títulos, meta descriptions y un sitemap, quita el contenido inventado y asegúrate de que npm run build pasa.

Para crear una página web con IA, describes el sitio a un agente de programación (Claude Code, Codex, Gemini CLI y similares) en un brief corto y concreto; el agente prepara el proyecto y escribe las páginas, tú lo revisas en el navegador y pides correcciones, y al final lo despliegas en Vercel, Netlify o Cloudflare Pages. Para un sitio de marketing o un portfolio puede llevar una tarde. Lo que marca la diferencia es el stack adecuado, un buen primer prompt y una lista de comprobación antes del lanzamiento.

Esta guía recorre todo el camino, desde una carpeta vacía hasta un sitio en vivo: qué stack elegir y por qué, qué poner en el primer prompt, cómo afinar el diseño con capturas, comprobaciones de móvil y accesibilidad, nociones básicas de SEO, un formulario de contacto, un dominio y el despliegue. Al final hay una lista de los errores que suele cometer la IA y algunas reglas de seguridad.

## Primera decisión: ¿creador de sitios con IA o agente de programación?

Hay dos caminos, y ambos cuentan como «crear una página web con IA».

**Los creadores de sitios con IA** (las funciones de IA de plataformas como Wix, Framer o Webflow, o los generadores de apps en el navegador) convierten una frase en una página en vivo en minutos. Son rápidos y el alojamiento va incluido. La contrapartida: el código se queda sobre todo en la plataforma, pagas una cuota mensual, no puedes hacer lo que la plataforma no permite y marcharte es difícil.

**Los agentes de programación** se ejecutan en tu máquina, en tu carpeta. Escriben archivos, ejecutan `npm install`, leen los errores y los corrigen. Requiere más pasos; a cambio, terminas con un repositorio de código normal. Puedes alojarlo en planes gratuitos, dárselo a cualquier desarrollador y añadir la librería que quieras.

| | Creador de sitios | Agente de programación |
| --- | --- | --- |
| Tiempo hasta el primer resultado | Minutos | Una o dos horas |
| Quién es dueño del código | Sobre todo la plataforma | Tú |
| Alojamiento | El suyo, con un plan de pago | Donde quieras, a menudo un plan gratuito |
| Necesidades a medida | Hasta donde permita la plataforma | Hasta donde llegue el código |
| Curva de aprendizaje | Muy baja | Cierta soltura con la terminal y git |

Esta guía cubre el segundo camino: hacer un sitio con [vibe coding](/es/glossary/vibe-coding/), donde el agente escribe el código y tú diriges el resultado. Si aún no has elegido agente, consulta [las mejores herramientas CLI de programación con IA](/es/blog/best-ai-coding-cli-tools/).

## 1. Instala lo básico

Necesitas tres cosas:

1. **Node.js** (la versión LTS). Astro y Next.js funcionan sobre él.
2. **Git** y una cuenta de **GitHub**. Es tu botón de deshacer y la forma más fácil de conectar con el alojamiento.
3. Un **[agente de programación](/es/glossary/coding-agent/)**, por ejemplo:

```bash
npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex
```

Luego crea una carpeta vacía, inicializa git e inicia el agente ahí:

```bash
mkdir cafe-site && cd cafe-site
git init
claude
```

Empezar con git importa: cuando el agente rompe algo, `git diff` muestra qué cambió y `git checkout .` lo deshace.

## 2. Elige un stack: Astro, Next.js o HTML puro

El agente puede escribir cualquier cosa, pero sin indicaciones puede tirar de la opción más pesada que se le ocurra. A grandes rasgos:

- **HTML + CSS puros:** una invitación de una página, un adelanto de producto, una página de «próximamente». Sin paso de compilación, sin dependencias, funciona en cualquier sitio.
- **Astro:** sitios de marketing, sitios de empresa, blogs, portfolios. Las páginas se renderizan a HTML puro por defecto, así que son rápidas y buenas para SEO, y las entradas del blog viven como archivos Markdown. Es mi opción por defecto para sitios de contenido.
- **Next.js:** trabajo con mucha lógica de aplicación, como cuentas de usuario, paneles, una base de datos o pagos. Excesivo para un sitio de presentación por sí solo.

Si dudas, empieza con Astro. Más adelante sigue pudiendo gestionar un formulario de contacto o una API pequeña.

## 3. El primer prompt, con dirección de diseño

El error más común es escribir «hazme una web para una cafetería». Obtienes la plantilla que todo el mundo ha visto: degradado morado, titular centrado, tres tarjetas. Pon contenido, estructura y dirección de diseño en el primer mensaje:

```text
Build a marketing site with Astro for a neighbourhood cafe called "Piggy Bank Coffee".

Pages: Home, Menu, About, Contact.
Home: a large photo area (placeholder for now), a one-line tagline,
a "See the menu" button, opening hours, address and a map link.
Menu: a list grouped by category (coffee, pastries, breakfast), prices in USD.

Design direction: warm and simple. Cream background (#f6f0e6), dark brown text (#2b1d14),
terracotta accent (#c2603a). Serif for headings, a readable sans-serif for body text
(Google Fonts). Generous whitespace, small corner radius, no shadows, no gradients.
Mobile first.

Rules:
- No Tailwind; use plain CSS and CSS custom properties.
- html lang="en".
- Every page gets a unique <title> and meta description.
- When done, start `npm run dev` and list the files you created.
```

Por qué funciona: diste colores y fuentes concretos, una lista de «no» (degradados, sombras), y la estructura y el contenido de las páginas. Cuanto menos tenga que adivinar el agente, más se parecerá el resultado a lo que tenías en mente. También puedes adjuntar una captura de un sitio que te guste: «Match the spacing and typography feel of this site; don’t copy its colours or content».

## 4. Itera el diseño con capturas

Una vez que el agente ejecuta `npm run dev`, el sitio suele abrirse en `http://localhost:4321` (Astro) o `http://localhost:3000` (Next.js). A partir de aquí es un bucle:

1. Abre la página y haz una captura de lo que no te gusta.
2. Dale la imagen al agente (la mayoría de las CLI aceptan imágenes arrastrando o pegando) y pídele que arregle **una sola cosa**.
3. Comprueba el resultado; si está bien, haz commit.

```text
The attached image is the home page on mobile. Three problems:
1. The tagline doesn't fit; the line breaks look bad.
2. The "See the menu" button touches the screen edge.
3. The opening-hours table overflows horizontally.
Fix only these. Don't change anything else.
```

El «Don’t change anything else» es pequeño pero importante: a los agentes les gusta «mejorar» componentes vecinos mientras arreglan uno. Tras cada paso bueno ejecuta `git add -A && git commit -m "..."`, de modo que si la siguiente petición lo rompe todo puedas volver al último estado bueno.

Si quieres que el agente maneje un navegador por sí mismo, añade un servidor [MCP](/es/glossary/mcp/) de Playwright; puede abrir la página, hacer sus propias capturas y arreglar lo que ve.

## 5. Comprobaciones de móvil y accesibilidad

Los sitios hechos con IA suelen verse bien en escritorio y desmoronarse en un teléfono. Antes del lanzamiento:

- Activa el modo dispositivo en las herramientas de desarrollo de tu navegador y comprueba al menos 375 px (teléfono), 768 px (tableta) y 1440 px (escritorio). Una barra de desplazamiento horizontal significa que algo se desborda.
- Ejecuta **Lighthouse** desde Chrome DevTools. Puntúa Rendimiento, Accesibilidad, Buenas prácticas y SEO y enumera advertencias concretas.
- Navega por la página solo con el teclado (Tab, Enter). ¿Llegas a todos los enlaces y botones y ves dónde está el foco?

Pasa las advertencias directamente al agente:

```text
The Lighthouse accessibility report says: [paste the warnings].
Fix them. Also check that every image has meaningful alt text, every form field
has a label, text/background contrast meets WCAG AA and keyboard focus is visible.
```

## 6. Nociones básicas de SEO

El agente sabe todo esto, pero a menudo lo deja a medias si no lo pides. Lista de comprobación:

- **Un `<title>` único** por página (unos 60 caracteres) y una **meta description** (unos 150–160 caracteres).
- **Un solo `<h1>`** por página, con un orden sensato de `<h2>`/`<h3>` debajo.
- **sitemap.xml** y **robots.txt.** En Astro, la integración `@astrojs/sitemap` genera el sitemap; necesita que la URL `site` esté definida en `astro.config`.
- **Etiquetas Open Graph** (`og:title`, `og:description`, `og:image`); las vistas previas de enlaces en apps de chat y redes sociales salen de aquí.
- Una **URL canónica** y el atributo `lang` correcto.
- Para un negocio local, escribe la dirección, el teléfono y el horario como texto (no incrustados en una imagen) y, si quieres, añade datos estructurados `LocalBusiness`.

```text
Run an SEO audit: list every page's title and meta description and fix
any that are missing or too long. Add @astrojs/sitemap, create robots.txt,
put Open Graph tags in the shared layout. Summarise the changes.
```

## 7. Un formulario de contacto

Un sitio estático no tiene servidor propio, así que los envíos del formulario necesitan un destino. Tres opciones razonables:

1. **Un servicio de formularios:** algo como Formspree, o Netlify Forms si alojas en Netlify. El formulario envía los datos al servicio y tú recibes un correo. La vía más fácil.
2. **Una función serverless:** una pequeña ruta de API en Astro o Next.js recibe el formulario y lo envía a través de una API de correo. La clave de API vive solo en el servidor, en una variable de entorno.
3. **Solo un enlace `mailto:`:** sin formulario, sin problema. A menudo basta para un negocio pequeño.

Elijas lo que elijas, pide al agente que añada validación en el servidor de los campos obligatorios, una protección básica contra el spam (un campo honeypot oculto o el captcha del servicio) y un estado claro de «mensaje recibido». Como recoges datos personales, añade también un breve aviso de privacidad.

## 8. Dominio y despliegue

Primero sube el sitio a GitHub:

```bash
git remote add origin git@github.com:you/cafe-site.git
git push -u origin main
```

Después conecta uno de los tres alojamientos habituales. Todos reconstruyen y despliegan en cada push una vez conectado el repositorio, y pueden darte URL de vista previa para ramas o pull requests:

- **Vercel:** hecho por el equipo de Next.js, gestiona bien Astro también. CLI: `npx vercel` para una vista previa, `npx vercel --prod` para producción.
- **Netlify:** muy asentado para sitios estáticos, con formularios integrados. CLI: `npx netlify deploy --prod`.
- **Cloudflare Pages:** aloja en la red de Cloudflare; práctico si tu dominio ya está en Cloudflare. CLI: `npx wrangler pages deploy dist`.

Los ajustes de compilación suelen detectarse automáticamente: en Astro el comando de build es `npm run build` y la carpeta de salida es `dist`. Añade tu dominio en el panel del alojamiento y luego introduce en tu registrador el registro DNS que te dé (normalmente un registro A o CNAME). Los certificados HTTPS se emiten automáticamente.

Tras el lanzamiento, añade el sitio a Google Search Console y envía la URL de tu sitemap para que Google lo encuentre antes.

## Lo que la IA hace mal

- **Aspecto de plantilla.** Sin dirección de diseño, todo recibe el mismo degradado y la misma cuadrícula de tarjetas. Da colores, fuentes y una lista de «no».
- **Contenido inventado.** Los agentes escriben alegremente testimonios falsos, cifras inventadas («más de 10.000 clientes satisfechos») y premios que no existen. Lee cada línea y borra lo que no sea verdad.
- **Imágenes con riesgo de licencia.** Puede enlazar imágenes al azar de la web. Usa tus propias fotos o fotos con licencia adecuada.
- **Dependencias innecesarias.** Una librería enorme de animaciones o de interfaz para un menú sencillo. Añade la regla «pregunta antes de añadir un paquete nuevo».
- **Enlaces rotos y href vacíos.** Busca botones que se quedaron con `href="#"` y haz clic en todos los enlaces antes del lanzamiento.
- **Probar solo en escritorio.** El agente suele comprobar solo el tamaño de ventana por defecto; pide el móvil de forma explícita.
- **Cantar victoria.** Un agente puede dar algo por terminado mientras la compilación falla. Ejecuta `npm run build` tú mismo antes de desplegar; debe terminar sin errores.

## Seguridad

Incluso un sitio de presentación tiene algunas reglas:

- **Guarda los secretos en un archivo `.env`** y asegúrate de que `.env` está en `.gitignore`. En tu alojamiento, introduce los mismos valores como variables de entorno en el panel.
- **Nunca pegues claves de API en el chat.** Dile al agente «la clave está en `.env` como `RESEND_API_KEY`», no el valor en sí. El historial del chat también se guarda en algún sitio.
- **Sin secretos en el código del cliente.** Cualquier clave enviada en JavaScript del navegador es una clave que cualquiera puede leer. Las claves de correo y de pagos pertenecen solo al servidor.
- **Lee lo que ejecuta el agente.** No apruebes automáticamente comandos como `rm -rf`, `curl ... | sh`, instalaciones globales o `git push --force`.
- **Mira el diff antes de hacer commit.** `git diff` es la forma más fácil de detectar tanto bugs como un secreto que se haya colado.

## Hacerlo con AgentVera

Todo lo anterior funciona con una terminal y un navegador. Algunas cosas lo hacen más fluido en mi propio flujo de trabajo, y las uso en [AgentVera](/es/download/):

- **Agentes en paralelo en worktrees separados.** Por ejemplo, un agente Claude Code trabaja en el contenido y el SEO mientras un agente Codex trabaja en la interfaz; cada uno está en su propio [git worktree](/es/glossary/git-worktree/), así que ninguno pisa al otro. Todos aparecen en una misma cuadrícula del [workspace](/es/features/workspace/).
- **Entornos de vista previa.** El servidor de desarrollo de cada worktree recibe su propia dirección; los [entornos de vista previa](/es/features/preview-environments/) pueden capturar páginas en tamaños de móvil, tableta y escritorio y compararlas píxel a píxel con una referencia anterior.
- **Navegador del agente.** Los agentes usan un Chrome con perfil aparte a través de Playwright, y tú ves en vivo lo que hacen en el [navegador del agente](/es/features/agent-browser/).
- **Revisión y seguimiento de tokens.** Cuando termina un turno, la [revisión de código](/es/features/code-review/) hace que un segundo modelo lea lo que escribió el agente, y el uso de [tokens](/es/glossary/token/) de cada agente es visible. Sigues leyendo el diff antes de fusionar.
- **Vercel.** Si el proyecto está vinculado a Vercel, la [pestaña de Vercel](/es/features/vercel/) muestra los despliegues y los logs de compilación, y puedes pasar una compilación fallida a un agente.

Nada de esto es obligatorio; solo facilita llevar el control cuando trabajas con más de un agente. Para el método en sí, consulta [agentes de programación en paralelo](/es/blog/parallel-coding-agents/).

## Lista de comprobación rápida

- [ ] Stack elegido (Astro para un sitio de contenido)
- [ ] El primer prompt cubre páginas, contenido, colores, fuentes y una lista de «no»
- [ ] Un commit tras cada paso bueno
- [ ] Comprobado en 375, 768 y 1440 px; advertencias de Lighthouse corregidas
- [ ] Cada página tiene título, meta description y un h1; existen sitemap y robots.txt
- [ ] No quedan testimonios, cifras ni imágenes inventados
- [ ] El formulario funciona, con protección contra spam y aviso de privacidad
- [ ] `.env` no está en git; secretos solo en el servidor
- [ ] `npm run build` pasa; el sitio está en vivo con tu dominio y HTTPS

## Para terminar

Crear una página web con IA tiene ahora menos que ver con escribir código y más con describir bien y comprobar con cuidado. Elige el stack adecuado, pon dirección de diseño en el primer prompt, avanza en pasos pequeños y haz commit de cada uno, y ejecuta comprobaciones de móvil, accesibilidad y SEO antes del lanzamiento. El agente escribe rápido; tú sigues siendo quien decide qué está bien.

## Preguntas frecuentes

**¿Puedo crear una página web con IA sin saber programar?** Sí, para un sitio de marketing sencillo o un portfolio. Un agente de programación escribe los archivos y ejecuta los comandos; tu trabajo es describir con claridad lo que quieres, comprobar el resultado en un navegador y hacer unas comprobaciones básicas antes de publicarlo.

**¿Qué stack debo usar para crear una página web con IA?** Para un sitio de contenido (páginas de marketing, un blog, un portfolio), Astro es una buena opción por defecto. Si necesitas inicios de sesión, un panel o una base de datos, Next.js encaja mejor; para una sola página, bastan HTML y CSS puros.

**¿Debo usar un creador de sitios con IA o un agente de programación?** Los creadores de sitios con IA te dan una página en vivo en minutos, pero te atan a su plataforma. Un agente de programación requiere más pasos; a cambio, el código es tuyo, puedes alojarlo donde quieras y cambiar lo que quieras.

**¿Se posicionará en Google una página web creada con IA?** Técnicamente sí: con títulos adecuados, meta descriptions, un sitemap y páginas que cargan rápido, Google la rastrea como a cualquier otro sitio. Su posición depende de la calidad y la utilidad del contenido, no de si la IA escribió el código.

**¿Dónde puedo alojar una página web creada con IA?** Vercel, Netlify y Cloudflare Pages son opciones habituales para sitios estáticos; los tres pueden conectarse a un repositorio de GitHub y volver a desplegar en cada push. Añades tu propio dominio en su panel y actualizas el registro DNS en tu registrador.

---

**Sobre AgentVera.** AgentVera es una app de escritorio para macOS, Windows y Linux, desarrollada por Solviera Teknoloji. Ejecuta 18 agentes de programación con IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) en paralelo, por proyecto, en terminales reales con las instalaciones y sesiones de CLI del propio usuario. El plan gratuito tiene agentes ilimitados. Descargar: https://agentvera.dev/es/download/ · Precios: https://agentvera.dev/es/pricing/