---
title: "Cómo empezar a programar con IA: guía para principiantes 2026"
description: "Aprende a empezar a programar con IA en 2026: elige tu stack, configura GitHub, escoge un asistente de codificación con IA, añade servidores MCP y lanza tu primer proyecto."
date: 2025-11-12
categories: ["ai"]
tags: ["ai-coding","ai-agents","github-copilot"]
---
import Button from "@components/widgets/Button.astro";
import Notice from "@components/widgets/Notice.astro";
import ListCheck from "@components/widgets/ListCheck.astro";
import Accordion from "@components/widgets/Accordion.astro";
import Tabs from "@components/widgets/Tabs.astro";
import Tab from "@components/widgets/Tab.astro";
Programar con IA en 2026 es el camino más corto que un principiante absoluto ha tenido jamás entre una idea y un sitio web o app en producción. No necesitas un título en informática ni pasar seis meses memorizando sintaxis. Necesitas un portátil, una cuenta de GitHub, un asistente de codificación con IA y la disciplina de revisar lo que ese asistente produjo antes de que llegue a producción.
Esta guía te lleva por el camino en orden: elegir un stack, configurar el control de versiones, escoger un asistente de codificación con IA, enseñarle tu proyecto, añadir servidores MCP, construir funciones de forma incremental, revisar el código que no escribiste, desplegar y luego monitorizar lo que lanzaste. Hay muchas herramientas de codificación con IA y la mayoría están bien. El flujo de trabajo de abajo es lo que realmente decide si tu proyecto sobrevive a la tercera semana.
- Cómo elegir el stack tecnológico adecuado para tu proyecto
- Los mejores asistentes de codificación con IA para principiantes (opciones gratuitas y de pago)
- Cómo configurar tu entorno de desarrollo correctamente
- Cómo crear documentación que ayude a la IA a entender tu proyecto
- Cómo usar servidores MCP para potenciar tu asistente de IA
- Cómo construir funciones de forma incremental sin abrumar a la IA
- Cómo desplegar y monitorizar tu proyecto terminado
Tres cosas dejaron obsoleta la versión anterior de esta guía, así que las actualicé todas:
- Cambió la facturación de Copilot. Las solicitudes premium desaparecieron el 1 de junio de 2026. Pro sigue costando 10 $/mes, pero ahora eso compra 1.000 AI Credits más una asignación flexible de 500 créditos, que se consumen a tarifas por token. Ya no hay degradación automática a un modelo más barato cuando se agotan.
- Los niveles gratuitos mejoraron de verdad, y luego uno de ellos se fue. FreeBuff te da un agente de codificación real por 0 $, pagado con anuncios de texto. Amp hizo la misma jugada con Amp Free y luego la pausó en 2026. Los niveles gratuitos son una promoción, no una promesa; por eso las recomendaciones de 10 $ de abajo siguen importando.
- Los agentes se volvieron más potentes. Claude Code, Codex, los agentes de Copilot y compañía ahora editan muchos archivos y ejecutan comandos de shell por su cuenta. Eso significa que los pasos de revisión y reversión (8, 10, 12) importan más que el año pasado, no menos.
## Por qué programar con IA funciona para principiantes absolutos
La programación tradicional tenía un bucle de retroalimentación brutal. Pasabas semanas con la sintaxis antes de poder construir algo que hiciera algo visible, y un solo mensaje de error críptico podía comerse una tarde entera. La IA colapsa ese bucle. Describes lo que quieres, obtienes código, lo ejecutas, ves el resultado.
**Con asistencia de IA, puedes:**
- **Empezar a construir de inmediato** - céntrate en lo que quieres crear, no en memorizar sintaxis
- **Aprender haciendo** - la IA explica el código mientras construyes, ayudándote a entender conceptos en contexto
- **Corregir errores más rápido** - pega el stack trace, obtén la causa probable y la solución
- **Acceder a conocimiento experto** - consigue consejos de arquitectura y buenas prácticas desde el primer día
- **Iterar rápidamente** - prueba ideas y haz cambios sin miedo a romperlo todo
Piénsalo como un desarrollador senior de guardia a cualquier hora: paciente con las preguntas de principiante, generoso con las explicaciones y, ocasionalmente, equivocado con total seguridad en sí mismo. Recuerda esa última parte.
### Lo que la IA no hará por ti
Esta es la parte que la mayoría de las guías para principiantes se saltan. Que la IA escriba el código no elimina los cuatro trabajos que deciden si tienes un producto que funciona o una pila de archivos:
- **Decidir qué construir.** La IA no tiene opinión sobre tu producto. Tú sí.
- **Verificar.** El código que compila no es código que funciona. Alguien tiene que pulsar el botón en un teléfono.
- **Entender lo suficiente para depurar.** Cuando el despliegue falla a las 23:00, «lo escribió la IA» no es una estrategia de depuración.
- **Asumir el radio de explosión.** Si el agente tiene las credenciales de tu base de datos de producción, puede perfectamente ejecutar la migración equivocada.
Así que el objetivo es construir cosas reales desde el primer día mientras entiendes cada vez más lo que estás lanzando. Eso es algo distinto de fingir que nunca leerás código. Todo lo que sigue está organizado en torno a eso.
## Paso 1: Elige el stack tecnológico adecuado para el desarrollo asistido por IA
La primera decisión que tomarás es qué stack tecnológico usar. Tu elección depende de lo que estés construyendo.
### Para sitios web y blogs: Astro
Si estás construyendo un sitio web o blog centrado en contenido, [Astro](https://astro.build/) funciona bien. Es rápido, amigable para principiantes y encaja con sitios que no necesitan interactividad compleja. Astro 7 (la versión actual en 2026) reemplazó el compilador `.astro` por uno en Rust y redujo aproximadamente a la mitad los tiempos de compilación en mi sitio de 743 páginas. Publiqué esos números en [tiempos de compilación de Astro 7 en un sitio de 743 páginas](/es/astro-7-compilaciones-mas-rapidas/), y las compilaciones cortas importan doblemente: iteras más cada tarde, y el hosting estático sigue siendo barato.
**¿Por qué Astro?**
- **Rápido** - carga más rápido que WordPress u otras plataformas CMS tradicionales
- **Fácil de aprender** - estructura de archivos simple y contenido basado en markdown
- **Bueno para SEO** - la generación estática significa buen rendimiento en buscadores
- **Hosting gratis** - despliega en Cloudflare Pages o Vercel a coste cero
- **Amigable con la IA** - la estructura simple facilita que la IA te ayude a construir
**Ideal para:**
- Blogs personales
- Sitios de portafolio
- Sitios de documentación
- Sitios web de marketing
- Sitios de afiliados
Escribí una guía sobre cómo crear un blog con Astro completamente gratis: [Cómo crear un blog gratis con Astro y Cloudflare en 30 minutos](/es/crear-blog-astro-gratis/). Si prefieres ver cómo una IA genera un tema completo con modo oscuro, búsqueda y paginación, también lo hice: [construir un tema de blog en Astro con IA](/windsurd-build-astro-blog/).
### Para aplicaciones web: TanStack Start
¿Construyes algo más interactivo? TanStack Start es un framework React full-stack que maneja tanto el frontend como el backend. Llegó a la versión 1.x con una API estable, reemplazó vinxi por un plugin nativo de Vite y mantuvo las partes que importan: enrutado basado en archivos, funciones de servidor con seguridad de tipos y sin dependencia de un proveedor de hosting concreto.
**¿Por qué TanStack Start?**
- **Framework full-stack** - construye frontend y backend en un solo proyecto
- **Con seguridad de tipos** - detecta errores antes de que ocurran con TypeScript
- **Herramientas modernas** - incluye enrutado, obtención de datos y funciones de servidor
- **Backends flexibles** - funciona con [Convex](https://go.bitdoze.com/convex), Drizzle + PostgreSQL u otras bases de datos
- **Se ejecuta en cualquier parte** - la salida de Nitro significa Node, serverless o tu propio VPS
**Ideal para:**
- Aplicaciones SaaS
- Dashboards y paneles de administración
- Apps web interactivas
- Proyectos con autenticación de usuarios
- Apps que necesitan una base de datos
Empieza aquí: [Primeros pasos con TanStack Start y Convex](/tanstack-start-get-start/). Si prefieres montar Postgres por tu cuenta, [crea una app de tareas con TanStack Start y Drizzle](/es/tanstack-start-bunny-database-drizzle/) muestra ese camino.
### Para fans de Svelte: SvelteKit
Si prefieres el enfoque de reactividad de Svelte y quieres un modelo mental más simple que React, SvelteKit es una buena elección.
**¿Por qué SvelteKit?**
- **Menos boilerplate** - escribe menos código que en React o Vue
- **Reactividad real** - sin DOM virtual, solo variables reactivas
- **Funciones integradas** - enrutado, renderizado del lado del servidor y más, de serie
- **Gran rendimiento** - bundles más pequeños y ejecución más rápida
- **Ecosistema en crecimiento** - comunidad activa y herramientas en mejora
**Ideal para:**
- Desarrolladores que prefieren una sintaxis más simple
- Proyectos donde el tamaño del bundle importa
- Apps que necesitan alto rendimiento
- Equipos familiarizados con Svelte
### Árbol de decisión rápido: Astro vs TanStack Start vs SvelteKit
Elige según lo que estés construyendo:
**Elige Astro si:**
- Estás construyendo un blog, portafolio o sitio de marketing
- El contenido es mayormente estático (artículos, páginas)
- Quieres los tiempos de carga más rápidos posibles
- Eres completamente nuevo programando
**Elige TanStack Start si:**
- Necesitas autenticación de usuarios y bases de datos
- Estás construyendo un producto SaaS o un dashboard
- Quieres seguridad de tipos de extremo a extremo
- Prefieres React o quieres aprenderlo
**Elige SvelteKit si:**
- Quieres algo más simple que React
- Valoras los bundles pequeños
- Te sientes cómodo aprendiendo un enfoque diferente
- Quieres alto rendimiento
Si quieres la versión larga con benchmarks y costes de hosting por 10K/50K/100K visitantes, lee la [comparativa de Astro vs Next.js vs TanStack Start](/es/astro-vs-nextjs-vs-tanstack-start-cual-gana/).
## Paso 2: Configura tu repositorio de código (GitHub + SSH)
Antes de escribir código, crea un repositorio en GitHub. Te da control de versiones, copia de seguridad y habilita despliegues automáticos. También le da a tu agente de IA un diff que mirar, que es como sabe qué cambió.
### Crea una cuenta de GitHub
1. Visita [github.com](https://github.com)
2. Regístrate con una cuenta gratuita
3. Verifica tu dirección de email
### Configura claves SSH (recomendado)
Las claves SSH te permiten subir código de forma segura sin introducir contraseñas cada vez:
```bash
# Generate a new SSH key
ssh-keygen -t ed25519 -C "your_email@example.com"
# Start the ssh-agent
eval "$(ssh-agent -s)"
# Add your SSH key
ssh-add ~/.ssh/id_ed25519
# Copy your public key
cat ~/.ssh/id_ed25519.pub
```
Añade la clave pública a GitHub:
1. Ve a GitHub Settings → SSH and GPG keys
2. Haz clic en «New SSH key»
3. Pega tu clave pública
4. Guarda
Para la versión larga, incluido el paso del llavero de macOS: [Vincular GitHub con SSH en Mac/Linux](/link-github-with-ssh-maco-linux/).
### Verifica tu configuración SSH
Antes de crear nada, confirma que la autenticación funciona:
```bash
ssh -T git@github.com
```
Salida esperada:
```
Hi your-username! You've successfully authenticated, but GitHub does not provide shell access.
```
Esa línea de «does not provide shell access» es un éxito, no un error. Si en su lugar ves `Permission denied (publickey)`, casi siempre es una de estas causas:
- La clave no está cargada: ejecuta `ssh-add -l`. Una lista vacía significa que te saltaste `ssh-add`.
- Añadiste la clave equivocada a GitHub: compara el fingerprint de `ssh-add -l` con el de GitHub Settings.
- Estás usando un nombre de clave no predeterminado: añade `-i ~/.ssh/your_key` o un bloque `Host github.com` en `~/.ssh/config`.
### Crea tu repositorio
1. Haz clic en el icono «+» de GitHub
2. Selecciona «New repository»
3. Ponle un nombre (p. ej., `my-first-ai-project`)
4. Mantenlo público o privado (tu elección)
5. No lo inicialices con README (lo crearás en local)
6. Haz clic en «Create repository»
### Haz tu primer commit
En una carpeta de proyecto vacía, crea un `.gitignore` *antes* de añadir cualquier otra cosa. Es la forma más barata de evitar commitear secretos:
```bash
mkdir my-first-ai-project && cd my-first-ai-project
printf '%s\n' 'node_modules/' 'dist/' '.env' '.env.local' '.DS_Store' > .gitignore
git init -b main
git add -A
git commit -m "chore: initial commit"
git remote add origin git@github.com:your-username/my-first-ai-project.git
git push -u origin main
```
Verifica:
```bash
git log --oneline
git status # should say "working tree clean"
git check-ignore -v .env # should print the matching .gitignore rule
```
Si `git check-ignore` no imprime nada, tu `.gitignore` no está capturando `.env` y cualquier clave que pegues después irá a GitHub. Arréglalo antes de escribir código.
**Otros fallos comunes:** `remote origin already exists` significa que necesitas `git remote set-url origin ` en lugar de `add`. Un push rechazado como non-fast-forward significa que el remoto tiene commits que tú no tienes; ejecuta `git pull --rebase origin main` y vuelve a hacer push.
## Paso 3: Elige un asistente de codificación con IA con el que puedas crecer
Esta es la decisión que da forma a todo lo demás. El asistente de codificación con IA adecuado marca la diferencia en tu experiencia de aprendizaje y construcción, y el mercado se movió con fuerza en 2026: las herramientas agénticas que editan varios archivos y ejecutan comandos son ahora el estándar, y casi todo pasó a facturación por uso. Si quieres primero el panorama completo, mantengo una comparativa actualizada en [las mejores herramientas y agentes de codificación con IA en 2026](/es/herramientas-codificacion-ia/). Si no, sigue leyendo para ver las dos opciones de pago que yo pagaría de verdad y las gratuitas que valen tu primer mes.
### Recomendado: GitHub Copilot Pro (10 $/mes)
Copilot Pro sigue siendo la forma más barata que conozco de conseguir un agente con modelo frontera, completados ilimitados, un CLI y un plugin de editor bajo una sola suscripción. Lo que cambió el 1 de junio de 2026 es lo que esos 10 $ compran.
| Plan | Precio | Qué obtienes |
|------|--------|--------------|
| Copilot Free | 0 $ | 2.000 completados/mes, 50 solicitudes de chat/mes, más una pequeña asignación de AI Credits |
| **Copilot Pro** | **10 $/mes** | 1.000 AI Credits + 500 créditos flex (1.500 en total), completados ilimitados, CLI, modo agente |
| Copilot Pro+ | 39 $/mes | 3.900 AI Credits + 3.100 flex (7.000 en total) |
| Copilot Max | 100 $/mes | 10.000 AI Credits + 10.000 flex (20.000 en total) para ejecuciones largas de agente |
**Qué cambió realmente:**
- **AI Credits reemplazaron las solicitudes premium.** 1 crédito = 0,01 $, consumido a las tarifas API por token publicadas del modelo que elijas, así que 10 $ de suscripción compran 1.000 créditos base.
- **Hay una asignación flex encima.** Pro añade 500 créditos más, Pro+ añade 3.100, Max añade 10.000. Los créditos flex son variables, así que trata el número base como el mínimo con el que puedes contar.
- **Sin degradación automática.** Con el sistema antiguo, al agotar las solicitudes premium pasabas a un modelo más barato y seguías trabajando. Ahora o activas el uso adicional (es un presupuesto que defines, y puede tener tope) o esperas al reinicio mensual. Los créditos incluidos nunca se acumulan; se reinician cada mes.
- **Los completados siguen siendo gratis.** Los completados en línea y las sugerencias Next Edit no consumen créditos en ningún plan de pago.
- **La revisión de código cuesta el doble.** La revisión de PRs de Copilot también consume minutos de GitHub Actions además de AI Credits.
La consecuencia práctica para un principiante: las preguntas cortas de chat son baratas, y una sesión agéntica de una hora en un modelo frontera puede comerse una parte importante del mes. La solución no es evitar los agentes, sino ejecutarlos en tareas acotadas y reservar los completados para lo pequeño. Escribí una guía operativa completa de esto: [GitHub Copilot Pro: el mejor plan de codificación con IA de 10 $ con Zed IDE y CLI](/github-copilot-complete-guide/). Y cuando 10 $ dejen de ser suficientes, aquí tienes [alternativas a GitHub Copilot más baratas](/es/alternativas-github-copilot-2026/) con las cuentas de coste reales.
**IDE recomendado:** [Zed](https://zed.dev/). Es rápido, moderno y tiene integración de Copilot incorporada. VS Code también funciona bien.
### Alternativa económica: OpenCode Go (10 $/mes, más de 20 modelos)
Si no quieres hacer cuentas por token en absoluto, OpenCode Go es una suscripción plana del equipo de OpenCode: una clave API, más de dos docenas de modelos a fecha de hoy (la lista rota) incluyendo GPT 5.6 Luna, Kimi K3, GLM-5.3, DeepSeek V4 y MiniMax M3, por 10 $/mes tras un primer mes de 5 $. Habla APIs compatibles con OpenAI, así que se conecta a OpenCode, Hermes, Pi o cualquier otra cosa que ya uses.
Para un principiante, el atractivo es que una sesión larga de agente cuesta lo mismo que una corta. La contrapartida es que los modelos más baratos lo son por una razón: asignaciones de uso mensual más bajas, y algunos proveedores (Grok 4.6, GPT 5.6 Luna) conservan registros durante 30 días. Lo analicé en detalle en [los modelos de OpenCode Go por 10 $ al mes](/es/opencode-go-plan/).
### Herramientas de codificación con IA gratuitas para principiantes (sin tarjeta de crédito)
Si quieres empezar completamente gratis, 2026 es un buen año para ello. Tienes opciones reales, y ya no son juguetes.
#### 1. Amp Free (de Sourcegraph) — En pausa
Vale la pena conocerlo porque era la mejor oferta gratuita disponible, y por por qué dejó de serlo. Amp Free te daba el agente Amp completo por 0 $, primero financiado con anuncios más un requisito de datos de entrenamiento, y luego solo con anuncios después de que Sourcegraph eliminara la cláusula de entrenamiento una semana después. En marzo de 2026 también eliminó los anuncios y pasó a una concesión diaria de créditos gratuitos. A mediados de 2026 el nivel gratuito se pausó directamente: la conclusión del propio Sourcegraph fue que los anuncios no pueden pagar tokens de frontera.
Si ya lo tenías, algunas cuentas conservaron una concesión diaria. Si eres nuevo, trata Amp como una herramienta de pago con un excelente CLI (`amp -x` para scripts y pipes) y mira FreeBuff abajo para la opción realmente gratuita.
Más información: [Amp Code Free: qué era y por qué se pausó](/amp-code-free-ai-coding-agent/)
#### 2. FreeBuff (CLI y web gratuitos, sin suscripción)
FreeBuff es la versión gratuita con publicidad de Codebuff. Instalas un agente CLI o usas la versión de navegador, inicias sesión y codificas con modelos como MiMo V2.5 de Xiaomi, DeepSeek V4 Pro/Flash, MiniMax M3 y Kimi K2.6. Sin tarjeta de crédito, sin claves API que gestionar. Rota modelos por región, que es lo único a vigilar: lo que obtienes en Europa no es exactamente lo que obtienes en EE. UU.
Más información: [FreeBuff: agente de codificación con IA gratis sin suscripción](/es/freebuff-agente-ia-gratis/)
#### 3. Créditos gratuitos para modelos de frontera
Hay formas legítimas de usar modelos premium sin pagar por adelantado:
- **Droid CLI** - 20 millones de tokens gratis en tu primer mes
- **AgentRouter** - unos 100 $ en créditos API gratuitos (más por referidos), una clave para Claude Code, Codex y Gemini CLI
- **Copilot Free** - 2.000 completados y 50 solicitudes de chat cada mes, para siempre
Detalles completos de todos: [Cómo usar Claude Sonnet 4.6, Opus 4.7, GPT-5.5 y Gemini 3 gratis](/es/usar-claude-sonnet-4-5-gpt-5-gratis/). Si prefieres un agente centrado en terminal que configures tú mismo, la [guía de configuración del agente Pi](/es/guia-configuracion-pi-agent/) es la opción mínima.
### Mi recomendación
**Semana uno:** empieza con **Copilot Free** más **FreeBuff**. Aprenderás más lanzando algo feo que comparando planes.
**Cuando construyas en serio:** pasa a **GitHub Copilot Pro** (10 $/mes) si quieres la integración de editor más ajustada, o a **OpenCode Go** (10 $/mes) si prefieres no pensar en el consumo de tokens. En ambos casos, 10 $ es menos que un pedido de comida a domicilio, y compra una tarde extra de producción a la semana.
Los niveles gratuitos de agentes siguen teniendo un precio. FreeBuff funciona con anuncios de texto, y los modelos detrás mantienen sus propias políticas de retención. Es un trato razonable para un proyecto de aprendizaje o un repositorio open-source. No es un trato razonable para el código de un cliente, nada bajo NDA, o un repositorio donde `.env` contiene credenciales reales. En caso de duda, paga los 10 $.
## Paso 4: Escribe documentación del proyecto que tu IA pueda usar de verdad
Esto es importante y la mayoría de los principiantes se lo saltan. Una carpeta de documentación bien mantenida ayuda a la IA a entender tu proyecto y a tomar mejores decisiones.
### Por qué importa la documentación
La IA es potente, pero no sabe automáticamente:
- Cómo está estructurado tu proyecto concreto
- Qué comandos ejecutar para las pruebas
- Qué convenciones estás siguiendo
- Qué librerías y versiones estás usando
Con documentación clara, tu asistente de IA ofrece ayuda adaptada a tu proyecto. Sin ella, obtienes consejos genéricos para un proyecto que no existe.
Una regla antes de escribir un muro de texto: cada línea que añades aquí es una línea que el modelo lee en cada turno, y compite por contexto con tu código real. Corto y específico gana a exhaustivo. Si una sección está desfasada, bórrala.
### Crea una carpeta `docs/`
En la raíz de tu proyecto, crea una carpeta `docs` con estos archivos:
```bash
mkdir docs
```
### Archivos de documentación esenciales
#### 1. Documentación del framework
Si usas Astro, crea `docs/astro.md`:
````markdown
# Astro Framework Guide
## Installation & Setup
npm create astro@latest
## Development Commands
- `npm run dev` - Start dev server (http://localhost:4321)
- `npm run build` - Build for production
- `npm run preview` - Preview production build
## Project Structure
- `src/pages/` - File-based routing
- `src/layouts/` - Reusable page layouts
- `src/components/` - React/Vue/Svelte components
- `src/content/` - Markdown content collections
- `public/` - Static assets
## Key Concepts
- Islands Architecture - Only hydrate interactive components
- Content Collections - Type-safe markdown content
- Zero JS by default - Ship less JavaScript
## Common Patterns
- Use `---` frontmatter for component scripts
- Import components: `import Header from '../components/Header.astro'`
- Access props: `const { title } = Astro.props`
````
#### 2. Guías específicas del stack
Para TanStack Start, crea `docs/tanstack-start.md`:
````markdown
# TanStack Start Guide
## Project Structure
- `src/routes/` - File-based routing
- `src/components/` - React components
- `src/server/` - Server-side functions
- `src/lib/` - Utilities and helpers
## Key Features
- Server functions with `createServerFn()`
- Type-safe routing
- Built-in data loading
- SSR and SSG support
## Backend Options
- Convex - Realtime serverless backend
- Drizzle + PostgreSQL - Traditional database
- Supabase - Backend as a service
````
#### 3. Documentación de estilos
Crea `docs/tailwind.md` si usas Tailwind CSS:
````markdown
# Tailwind CSS v4 Guide
## Configuration
- CSS-first config using the `@theme` directive
- No more `tailwind.config.js` needed
## Common Patterns
- Use utility classes: `bg-blue-500 text-white p-4`
- Responsive: `sm:text-lg md:text-xl lg:text-2xl`
- Dark mode: `dark:bg-gray-800`
- Hover states: `hover:bg-blue-600`
## Custom Theme
```css
@theme {
--color-primary-500: #3b82f6;
--font-sans: 'Inter', sans-serif;
}
```
````
### Ejemplo: documentación completa de un proyecto
Este es el aspecto de una buena documentación. Es de mi proyecto TanStack [bitbuddies.me](https://bitbuddies.me/):
````markdown
# Project Overview
## Tech Stack
- Framework: TanStack Start (React 19)
- Backend: Convex
- Auth: Clerk
- Styling: Tailwind CSS v4 + shadcn/ui
- Type Safety: TypeScript strict mode
## Commands
- `bun run dev` - Development server (port 3000)
- `bun run build` - Production build
- `bun run test` - Run tests
- `bun convex dev` - Start Convex backend
## Code Conventions
- Use React Server Components by default
- Client components must have 'use client' directive
- Keep server functions in `src/server/`
- Use Zod for validation
- Follow existing file naming patterns
## Important Notes
- Always run tests before committing
- Use TypeScript strict mode
- Database schema changes require a migration
- Environment variables go in `.env.local`
````
### Verifica que tu documentación funciona
Cierra tu editor, abre una sesión nueva de IA y pregunta:
```
Read docs/ and AGENTS.md, then tell me the exact command to run the dev
server, which framework version this project uses, and where server
functions live. Don't look at any other file.
```
Si el modelo responde las tres cosas correctamente sin abrir archivos fuente, tu documentación hace su trabajo. Si duda o adivina, el archivo que necesitaba aún no está ahí.
## Paso 5: Crea un archivo AGENTS.md que tu asistente de IA obedezca
El archivo `AGENTS.md` es el manual de instrucciones de tu asistente de IA para tu proyecto. Le dice a la IA exactamente cómo trabajar con tu codebase. Los agentes convergieron en este nombre de archivo durante 2025, así que lo leen Amp, Codex, Devin Desktop, Cursor, los agentes de Copilot, OpenCode, Pi y la mayoría de los demás. Escríbelo una vez, y cada herramienta que pruebes después se comportará mejor.
### Crea AGENTS.md en tu raíz
```bash
touch AGENTS.md
```
### Qué incluir
Aquí tienes una plantilla basada en mis proyectos en producción:
```markdown
# Agent Instructions
You don't need to create any documentation unless I specifically ask for it. Just provide short summaries of what you did.
## Commands
- **dev**: `npm run dev` (runs on http://localhost:4321)
- **build**: `npm run build`
- **test**: `npm test`
## Architecture
- **Framework**: Astro v7 static site generator
- **Content**: Markdown files in `src/content/posts/`
- **Styling**: Tailwind CSS v4
- **Components**: Reusable components in `src/components/`
## Code Style
- Use TypeScript for type safety
- Follow existing file naming conventions
- Use Tailwind utilities for styling
- Keep components simple and focused
## Important Notes
- Always test changes locally before committing
- Follow existing code patterns in similar files
- Check that all images exist before referencing them
- Run the build to verify no errors
- Never commit or print the contents of `.env` files
## Testing Workflow
1. Make changes
2. Run `npm run dev` to test locally
3. Run `npm run build` to check for errors
4. Review changes carefully
5. Commit with a descriptive message
## Common Pitfalls
- Don't add libraries that aren't already installed
- Check TypeScript errors before committing
- Verify all imports are correct
- Test responsive design at different screen sizes
```
### Por qué importa
Sin `AGENTS.md`, la IA hace suposiciones: instala una librería que no querías, inventa un script de npm que no existe, o reorganiza tus carpetas porque prefiere otra estructura. Con él, el agente sigue tus patrones y el diff se puede revisar.
Mantén los secretos fuera. Es un archivo que el agente lee *y* a menudo cita de vuelta en una conversación, y en los niveles gratuitos las conversaciones pueden compartirse.
### Ve más lejos con skills reutilizables
Cuando `AGENTS.md` te resulte natural, el siguiente paso son las Agent Skills: archivos `SKILL.md` que codifican un flujo de trabajo (reglas de diseño, pasos de despliegue, checklists de revisión) para que no te repitas en cada prompt. Comparé las que merecen instalarse para trabajo web en [skills de agente de IA para diseño web](/es/mejores-skills-ia-diseno-web/). El mismo patrón es lo que permite a un asistente [desplegar apps Docker desde un solo mensaje](/es/skill-despliegue-docker-ia/).
## Paso 6: Añade servidores MCP a tu asistente de IA
Los servidores Model Context Protocol (MCP) conectan tu asistente de IA con servicios y herramientas externos. Si el término es nuevo para ti, mi [introducción a MCP para principiantes](/es/introduccion-mcp-principiantes/) cubre el protocolo en sí. La versión corta: MCP es USB para herramientas de IA. Construyes un servidor una vez, y funciona con Claude, Cursor, Copilot, Codex, Amp y cualquier otra cosa que hable el protocolo.
### ¿Qué son los servidores MCP?
En lugar de solo escribir código, tu IA puede:
- Buscar en la web información actualizada
- Acceder a documentación de frameworks al día
- Probar tu aplicación automáticamente
- Interactuar con bases de datos y APIs
### Servidores MCP esenciales para principiantes
#### 1. Context7 - Documentación al día
Context7 proporciona documentación fresca de frameworks y librerías. En lugar de que la IA use datos de entrenamiento desfasados, obtiene la documentación actual en el momento de la consulta. Context7 lanzó v4 en agosto de 2026 con nuevos esquemas de herramientas, así que fija `@latest` (o una versión v4 conocida) y no mezcles instrucciones escritas para nombres de herramientas de v3.
**En qué ayuda:**
- Referencias API más recientes
- Buenas prácticas actuales
- Actualizaciones recientes de frameworks
- Funciones nuevas y deprecaciones
#### 2. Bright Data MCP - Búsqueda web y datos
Bright Data MCP permite a tu IA buscar en la web y extraer datos de sitios web, con un nivel gratuito de 5.000 solicitudes/mes. Es el que marca la diferencia cuando la respuesta del modelo tiene dos años de retraso y la página real dice otra cosa.
**En qué ayuda:**
- Buscar soluciones a problemas
- Encontrar ejemplos y tutoriales
- Investigar competidores
- Recopilar datos para tu proyecto
Más información: [guía de Bright Data MCP](/brightdata-mcp-guide/) y la propia [plataforma Bright Data](https://go.bitdoze.com/brightdata). Si prefieres búsqueda web, fetch y un navegador headless detrás de una sola clave sin la pila de proxies, [TinyFish](https://go.bitdoze.com/tinyfish) es la otra opción que miraría.
#### 3. Playwright MCP - Pruebas de aplicación
Playwright MCP permite a tu IA probar tu aplicación automáticamente controlando un navegador. Así es como un agente verifica que el formulario que acaba de construir realmente se envía.
**En qué ayuda:**
- Probar flujos de usuario
- Verificar que los formularios funcionan correctamente
- Comprobar el diseño responsive
- Detectar errores antes del despliegue
GitHub: [playwright-mcp](https://github.com/microsoft/playwright-mcp)
### Cómo añadir servidores MCP
El proceso de configuración depende de tu herramienta de IA. Así se hace en las opciones populares:
Claude Code tiene un CLI propio para esto, y escribe en una configuración a nivel de usuario por defecto (sin tokens aterrizando en un archivo commiteado):
```bash
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
claude mcp add brightdata --transport sse "https://mcp.brightdata.com/sse?token=YOUR_TOKEN"
# Confirm what's registered
claude mcp list
```
El scope importa: añade `-s project` y la configuración aterriza en `.mcp.json` en el repo, que los compañeros de equipo heredan. Nunca hagas eso con un servidor que requiera una credencial.
Codex lee `~/.codex/config.toml`. Añade una tabla por servidor:
```toml
[mcp_servers.context7]
command = "npx"
args = ["-y", "@upstash/context7-mcp@latest"]
[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest", "--headless"]
```
Mantenlos en la configuración de nivel usuario. Codex ignora deliberadamente parte de la configuración local del proyecto por razones de seguridad, así que los archivos del proyecto pueden no recoger los proveedores.
1. Abre Cursor Settings
2. Ve a Tools & Integrations
3. Añade Custom MCP
4. Pega la configuración:
```json
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
},
"brightdata-mcp": {
"command": "npx",
"args": ["-y", "@brightdata/mcp"],
"env": {
"API_TOKEN": "your_brightdata_token"
}
}
}
}
```
Para Droid CLI, crea o edita `~/.factory/mcp.json`:
```json
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp@latest"]
},
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--headless"]
}
}
}
```
Amp usa la configuración del editor en su lugar, bajo la clave `amp.mcpServers`. La forma JSON de cada servidor es la misma.
### Verifica que un servidor MCP funciona de verdad
No asumas que se cargó. Haz una pregunta que *requiera* el servidor:
```
Use context7 to fetch the current Astro docs for content collections,
then tell me the exact current API.
```
Si el agente responde con citas de la documentación obtenida, está conectado. Si responde de memoria o dice que no tiene esa herramienta, revisa:
- El servidor aparece en la lista de herramientas (`claude mcp list`, `/agent-files` en Amp, o el panel MCP de tu editor).
- `npx` se resuelve. Los editores lanzados desde el Dock o el menú Inicio no heredan el PATH de tu shell; en macOS eso significa apuntar a `/opt/homebrew/bin/npx` en lugar de `npx`.
- El archivo de configuración es JSON válido. Una coma final mata silenciosamente todo el archivo.
- Reinicia el editor tras editar la configuración. La mayoría de los clientes solo la leen al arrancar.
### No te pases
Empieza con solo 2-3 servidores MCP. Cada servidor añade definiciones de herramientas a tu ventana de contexto, y una pila de herramientas que nunca llamas cuesta tokens en cada turno y hace que el modelo elija peor.
**Conjunto inicial recomendado:**
- Context7 (documentación)
- Bright Data MCP (búsqueda web)
- Eso es todo.
Para una lista completa de servidores MCP disponibles, visita [mcpservers.org](https://mcpservers.org/).
## Paso 7: Empieza a construir funciones de forma incremental
Aquí es donde la mayoría de los principiantes se equivocan. Intentan construir todo de una vez, abrumándose a sí mismos y a la IA.
### Piensa en pequeño y con foco
Divide tu proyecto en funciones pequeñas y manejables. En lugar de «construir un blog», piensa:
1. Crear el layout de la página de inicio
2. Añadir un menú de navegación
3. Crear una página de post individual
4. Añadir una página de listado de posts
5. Implementar la funcionalidad de búsqueda
6. Añadir categorías y etiquetas
### Crea primero la arquitectura del proyecto
Antes de escribir código, pide a tu IA que te ayude a planificar la estructura:
**Buen prompt:**
```
I want to build a personal blog with Astro. It should have:
- Homepage with recent posts
- Individual post pages
- About page
- Contact form
- Categories and tags
Please create a project architecture document that outlines:
- Folder structure
- Key components needed
- Content organization
- Routing approach
Don't write code yet, just plan the structure.
```
Esto te da una hoja de ruta y te ayuda a entender lo que estás construyendo.
### Trabaja en una función cada vez
Al construir, céntrate en una sola función completamente antes de pasar a la siguiente:
**Enfoque malo:**
```
Build the homepage, blog pages, contact form, and about page
```
**Enfoque bueno:**
```
Create the homepage layout with:
- Header with site title and navigation
- Hero section with welcome message
- Grid of latest 3 blog posts
- Footer with copyright
Use Tailwind for styling and make it responsive.
```
### Ejemplo: construir una página de post de blog
Así es como abordar una sola función paso a paso:
**Paso 1: Crea la estructura básica de la página**
```
Create a blog post page template at src/pages/blog/[slug].astro
- It should accept a slug parameter
- Display post title, date, and author
- Render markdown content
- Use the main layout
```
**Paso 2: Añade estilos**
```
Style the blog post page:
- Use Tailwind typography plugin for content
- Add a max-width container
- Style the header with gradient
- Make code blocks look good
```
**Paso 3: Añade metadatos**
```
Add SEO metadata to the blog post template:
- Title tag with post title
- Meta description from frontmatter
- Open Graph tags for social sharing
- Canonical URL
```
**Paso 4: Prueba y refina**
```
Test the blog post page with different content:
- Long posts with many headings
- Posts with images
- Posts with code blocks
- Short posts
```
Cada paso está enfocado y es manejable. La IA puede manejarlos fácilmente sin confundirse.
### Verifica cada función antes de la siguiente
El hábito que separa a quienes lanzan de quienes acumulan un repositorio roto:
```bash
npm run dev # dev server on http://localhost:4321
npm run build # production build; catches type and import errors
git diff --stat # see what the agent actually touched
```
Luego abre la página en un navegador y úsala. Una función no está terminada cuando la IA dice «hecho». Está terminada cuando has hecho clic en la cosa. Si el agente tocó diez archivos para una función de un archivo, es una señal de que adivinó; pídele que explique los cambios extra.
### Mantén a la IA enfocada
Si notas que la IA empieza a añadir funciones que no pediste, regrésala:
```
That's good, but I only asked for the header right now.
Let's finish the header completely before moving to other sections.
Can you remove the footer and sidebar code and focus only on the header?
```
## Paso 8: Revisa cada línea de código (para no hacer solo vibe coding)
Este es el paso que convierte «construí una cosa con IA» en «estoy aprendiendo a programar». También es como evitas el modo de fallo del que todos te advierten.
### Qué significa realmente «vibe coding»
Vibe coding es aceptar código generado sin leerlo, iterando sobre el comportamiento en lugar de la implementación. Recibió nombre a principios de 2025 y es una técnica legítima para prototipos desechables: un script para renombrar 400 archivos, una landing que borrarás la semana que viene, una demo para un pitch. No necesitas entender el código que vas a tirar.
Deja de ser legítimo en el momento en que el código sostiene algo. Autenticación, pagos, datos de usuarios, cualquier cosa con una base de datos detrás, cualquier cosa que se ejecute según un horario, cualquier cosa con credenciales al alcance. Ahí es donde «parece que funciona» se convierte en un incidente a las 2 de la madrugada donde el síntoma está en un sitio y la causa en otro.
Así que la regla que le daría a un principiante: **haz vibe coding con los prototipos, revisa el camino de producción.**
### Pide explicaciones
Después de que la IA genere código, pídele que lo explique:
**Buenos prompts de seguimiento:**
```
Explain what this component does line by line
Why did you use this approach instead of [alternative]?
What are the potential issues with this code?
How would I modify this to add [feature]?
```
### Ejecútalo y rómpelo
Leer un diff detecta erratas. Ejecutar el código detecta la lógica. Dos hábitos baratos:
- Lee el diff, no el archivo. `git diff` muestra exactamente lo que el agente cambió. Un diff de 400 líneas para un botón es una bandera roja.
- Intenta romperlo. Formulario vacío, entrada de 5.000 caracteres, red apagada, contraseña incorrecta, dos pestañas a la vez. Cada uno de esos es un informe de error que presentas gratis en lugar de leerlo después.
### Pide comentarios
Para código complejo, pide a la IA que añada explicaciones:
```
Add comments to this code explaining what each section does.
Focus on the "why" not just the "what."
```
### Identifica oportunidades de aprendizaje
Cuando veas algo que no entiendes:
```
I don't understand this TypeScript syntax: `const { data }: { data: Post[] }`
Can you explain what this means and why we use it?
```
### Lleva un registro de aprendizaje
Crea un archivo `LEARNING.md` en tu proyecto. Este único hábito convierte «construí una cosa con IA» en «aprendí a programar»:
````markdown
# Things I've Learned
## TypeScript Destructuring
```typescript
const { title, date } = post;
```
This extracts specific properties from an object. More concise than:
```typescript
const title = post.title;
const date = post.date;
```
## Component Props in Astro
Props are passed to components and accessed via `Astro.props`:
```astro
---
const { title } = Astro.props;
---
{title}
```
## Tailwind Responsive Classes
`sm:`, `md:`, `lg:` prefixes apply styles at breakpoints:
- `sm:` = 640px and up
- `md:` = 768px and up
- `lg:` = 1024px and up
````
Este registro se convierte en tu referencia personal mientras aprendes.
## Paso 9: Obtén una segunda opinión de un modelo de IA diferente
La IA puede equivocarse o usar enfoques subóptimos. Conseguir la perspectiva de una segunda IA detecta problemas pronto, y es la revisión de código más barata que conseguirás jamás.
### Usa una IA diferente para la revisión de código
Si construiste funciones con Claude Sonnet 4.6, pide a GPT-5.5 que las revise. Si usaste GPT-5.5, pide a Claude o Gemini 3 que revisen. El punto no es que un modelo sea más listo; es que modelos diferentes alucinan de forma diferente, así que la intersección es mucho más fiable que cualquiera de las dos respuestas por separado.
**Prompt de revisión de código:**
```
Please review this [component/feature/file] for:
1. Security vulnerabilities
2. Performance issues
3. Code quality and maintainability
4. Potential bugs
5. Best practice violations
Be thorough and critical. I want to improve this code.
```
### Crea un documento de revisión
Pide a la segunda IA que cree `REVIEW.md`:
```
After reviewing the entire codebase, create a REVIEW.md file with:
## Security Issues
List any security concerns found
## Performance Optimizations
Suggest improvements for speed and efficiency
## Code Quality
Note areas that could be cleaner or more maintainable
## Best Practices
Identify where we deviate from best practices
## Recommended Changes
Prioritized list of improvements
Be specific with file names and line numbers where relevant.
```
### Itera basándote en el feedback
No solo recolectes feedback. Actúa sobre él:
```
Based on the review, let's fix the top 3 security issues first.
Start with [specific issue from review].
```
### Ejemplo de proceso de revisión
Así es una sesión de revisión típica:
1. **Construye la función con la IA n.º 1** (p. ej., Claude Sonnet 4.6)
2. **Cambia a la IA n.º 2** (p. ej., GPT-5.5) y comparte el código
3. **Pide una revisión detallada** centrada en seguridad y rendimiento
4. **Revisa el feedback** y pregunta lo que no esté claro
5. **Prioriza las correcciones** empezando por los problemas de seguridad
6. **Implementa las mejoras** con la IA n.º 1
7. **Verifica las correcciones** con la IA n.º 2
Este ir y venir detecta problemas que una sola IA podría pasar por alto. Y no es gratis en planes basados en créditos, así que apúntalo a los archivos arriesgados, no al CSS.
## Paso 10: Despliega tu primer proyecto a producción
Es hora de poner tu proyecto en vivo. El despliegue es donde un proyecto de hobby se convierte en uno real, y también donde los errores dejan de ser reversibles refrescando la página.
### Haz push a GitHub
Primero, asegúrate de que todos tus cambios están commiteados:
```bash
# Stage all changes
git add -A
# Review what you're about to commit - look for .env, keys, database files
git status
# Commit with descriptive message
git commit -m "Initial project setup with homepage and blog"
# Push to GitHub
git push origin main
```
Verifica que el push llegó: `git log --oneline -3` debería coincidir con lo que GitHub muestra en la página del repositorio. Luego ejecuta `npm run build` en local y confirma que termina limpio. Si la compilación falla en local, fallará en CI, y no tiene sentido enterarte por un email.
### Consigue un nombre de dominio (opcional)
Aunque puedes usar subdominios gratuitos, un dominio propio se ve más profesional. Si estás eligiendo el primero, mi guía de [cómo elegir un buen nombre de dominio](/es/elegir-nombre-dominio/) cubre las trampas de nomenclatura.
**Dónde comprar dominios:**
- [Namecheap](https://www.namecheap.com/) - 1-15 $/año
- [Cloudflare](https://www.cloudflare.com/products/registrar/) - precios a coste
- [Porkbun](https://porkbun.com/) - precios bajos, buen servicio
Elige un `.com` si está disponible, o `.dev` para proyectos tecnológicos.
### Opciones de despliegue
**Ideal para:** Principiantes, Next.js, TanStack Start
**Configuración:**
1. Visita [vercel.com](https://vercel.com)
2. Regístrate con GitHub
3. Haz clic en «New Project»
4. Selecciona tu repositorio
5. Haz clic en «Deploy»
**Funciones:**
- Despliegues automáticos con git push
- Certificados SSL gratuitos
- CDN global
- Nivel gratuito generoso
- Cero configuración para la mayoría de frameworks
**Coste:** Gratis para proyectos personales
**Ideal para:** Astro, sitios estáticos, apps React
**Configuración:**
1. Visita [pages.cloudflare.com](https://pages.cloudflare.com)
2. Regístrate o inicia sesión
3. «Create a project» → «Connect to Git»
4. Selecciona tu repositorio
5. Configura los ajustes de compilación:
- Build command: `npm run build`
- Output directory: `dist`
6. Haz clic en «Save and Deploy»
**Funciones:**
- Ancho de banda ilimitado
- SSL gratuito
- Red global rápida
- Analítica excelente
- El nivel gratuito es muy generoso
**Coste:** Gratis para la mayoría de proyectos
Más información: [Crea un blog gratis con Astro y Cloudflare](/es/crear-blog-astro-gratis/). Si superas el nivel gratuito (o quieres entrega de imágenes y vídeo en un edge más barato), [Bunny.net](https://go.bitdoze.com/bunny) es con lo que compararía primero los precios de Cloudflare.
**Ideal para:** Aprender DevOps, control total, apps con base de datos
**Configuración:**
1. Consigue un VPS ([Hetzner](https://go.bitdoze.com/hetzner), [Hostinger](https://go.bitdoze.com/hostinger-vps), [DigitalOcean](https://go.bitdoze.com/do), [Vultr](https://go.bitdoze.com/vultr))
2. Instala Dokploy para despliegues y HTTPS
3. Conecta tu repositorio de GitHub
4. Configura la compilación y el despliegue
5. Despliega
_Los precios de VPS subieron en todos los proveedores en 2026 — si estás replanteándote una máquina alquilada, mira [qué cambió y cuándo gana un mini PC](/es/subidas-precios-vps/)._
**Funciones:**
- Control total
- Costes predecibles
- Puede ejecutar bases de datos, cron jobs, etc.
- Sin limitaciones de plataforma
- Genial para apps en producción
**Coste:** 5-20 $/mes por VPS. Una máquina de 2 vCPU / 4 GB es de sobra para empezar; la computación pesada ocurre en las APIs de los modelos, no en tu servidor.
Más información: [configuración de VPS para agentes de codificación con IA](/es/vps-configuracion-codificacion-ia/) y [Despliega TanStack Start en tu VPS con Dokploy](/tanstack-start-dokploy-deploy/).
### Configura tu dominio
Tras desplegar, apunta tu dominio personalizado a tu hosting:
**Para Vercel:**
1. Ve a Project Settings → Domains
2. Añade tu dominio
3. Sigue las instrucciones de configuración DNS
4. Espera a la propagación DNS (5-30 minutos)
**Para Cloudflare Pages:**
1. Ve a Custom Domains
2. Añade tu dominio
3. Cloudflare gestiona el DNS automáticamente si usas nameservers de Cloudflare
**Para autoalojado:**
1. Añade un registro A apuntando a la IP de tu VPS
2. Configura SSL con Let's Encrypt (Dokploy lo hace automáticamente)
3. Configura tu dominio en Dokploy
### Verifica el despliegue
Tras el despliegue, comprueba que todo funciona. No mires solo la página de inicio:
- El sitio carga en tu dominio
- Todas las páginas son accesibles
- Las imágenes cargan correctamente
- Los formularios funcionan (si aplica)
- Los enlaces no están rotos
- El diseño responsive en móvil funciona
- El certificado SSL está activo (https)
Y desde la terminal, para tener algo objetivo:
```bash
curl -sS -o /dev/null -w "%{http_code}\n" https://yourdomain.com/
# 200
curl -sSI https://yourdomain.com/ | head -1
# HTTP/2 200
# Certificate expiry and issuer
echo | openssl s_client -connect yourdomain.com:443 -servername yourdomain.com 2>/dev/null | openssl x509 -noout -dates -issuer
```
Si el navegador muestra un candado pero curl devuelve 000, tu TLS está bien y tu DNS o firewall no. Revisa primero el registro A.
### Reversión: qué hacer cuando el despliegue se rompe
Este es el paso que los principiantes se saltan, y es el que te salva a las 23:00. Asegúrate de conocer el camino de reversión *antes* de necesitarlo.
```bash
# Revert the bad commit without rewriting history
git revert --no-edit
git push origin main
```
Luego, por plataforma:
- Vercel: Deployments → elige el último bueno → Promote to Production. Instantáneo, sin recompilación.
- Cloudflare Pages: Deployments → selecciona el despliegue anterior → Rollback.
- Dokploy: Deployments → elige el commit anterior → Redeploy.
- Base de datos: las reversiones no deshacen migraciones. Si el commit malo cambió el esquema, restaurar el código anterior puede no ser suficiente.
Esa última línea es la verdadera trampa. El código de la app vuelve atrás en segundos; una columna borrada no. Antes de dejar que un agente ejecute migraciones contra producción, haz un volcado. Lo que nos lleva a las copias de seguridad.
## Paso 11: Monitoriza tu aplicación tras el lanzamiento
Una vez desplegado, la monitorización te ayuda a detectar problemas antes de que los usuarios se quejen. Necesitas dos cosas: confirmación de que el sitio está arriba, y visibilidad de lo que pasa cuando no lo está.
### Opciones de monitorización de aplicaciones
**Uptime Kuma (autoalojado, gratis)**
Comprueba si tu sitio es realmente accesible:
- Instálalo en tu servidor o en un VPS aparte
- Configura comprobaciones cada 60 segundos
- Recibe notificaciones por email, Slack, Discord, etc.
- Consulta el historial de estado y el porcentaje de uptime
**Tutorial:** [Guía en vídeo de Uptime Kuma](https://www.youtube.com/watch?v=T7izljcBFeE&t=769s)
**Alternativas alojadas:**
- [UptimeRobot](https://uptimerobot.com/) - nivel gratuito: 50 monitores
- [Pingdom](https://www.pingdom.com/) - de pago, fiable
- [Better Uptime](https://betterstack.com/better-uptime) - UI bonita, nivel gratuito
**Si te autoalojas:**
Monitoriza los recursos del servidor (CPU, RAM, disco) para enterarte del disco lleno antes que la base de datos:
- **Beszel** - ligero, genial para un solo VPS
- **Netdata** - métricas en tiempo real, dashboards bonitos
- **Prometheus + Grafana** - estándar del sector, más pesado
- **Glances** - monitorización simple en terminal
Más información: [monitorización autoalojada con Beszel y Uptime Kuma](/es/beszel-uptime-kuma/) y la [guía de monitorización de servidores](/sever-monitoring/) más amplia.
**Sentry (recomendado)**
Captura errores y excepciones de JavaScript, incluidos los que ningún usuario se molesta en reportar:
**Configuración:**
```bash
npm install @sentry/browser
# Add to your main.js/index.js
import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: "your-sentry-dsn",
environment: "production",
});
```
**Funciones:**
- Notificaciones de errores en tiempo real
- Stack traces con contexto
- Seguimiento del impacto en usuarios
- Monitorización de rendimiento
- Nivel gratuito: 5.000 errores/mes
**Opciones respetuosas con la privacidad:**
- **Plausible** - simple, centrada en privacidad, sin cookies
- **Fathom** - similar a Plausible, ligera
- **Umami** - autoalojada, open source
**Funciones a seguir:**
- Vistas de página
- Fuentes de referencia
- Páginas populares
- Ubicaciones de usuarios (a nivel país)
- Tasa de rebote
Sáltate Google Analytics si te importan el rendimiento y la privacidad. Hay opciones más ligeras.
### Configura alertas
Configura notificaciones para problemas críticos:
**Alertas esenciales:**
- El sitio está caído (monitor de uptime)
- Despliegue fallido (plataforma de hosting)
- Pico de errores de JavaScript (Sentry)
- Recursos del servidor altos (monitorización de servidor)
- Trabajo de copia de seguridad fallido (si ejecutas uno)
**Dónde enviar alertas:**
- Email (siempre)
- Slack/Discord (para equipos)
- SMS (solo problemas críticos)
- PagerDuty (escenarios de guardia)
### Comprobaciones de salud regulares
Semanal o mensualmente, revisa manualmente:
- Porcentaje de uptime (debería ser >99 %)
- Tasa de errores (debería ser baja y estable)
- Tiempos de carga de página (deberían ser rápidos)
- Despliegues fallidos (investiga las causas)
- Actualizaciones de seguridad de tu framework y dependencias
## Paso 12: Sigue lanzando funciones sin romper lo que funciona
Tu proyecto está en vivo. Ahora iterarás y mejorarás. Pero hazlo con cuidado para no romper lo que funciona.
### Trabaja siempre en una rama
Nunca commitees directamente a `main` cuando tu sitio está en vivo:
```bash
# Create a new feature branch
git checkout -b feature/add-dark-mode
# Make your changes and test locally
# Commit to the branch
git add -A
git commit -m "Add dark mode toggle"
# Push the branch
git push origin feature/add-dark-mode
```
Luego crea una Pull Request en GitHub, revisa el diff tú mismo y haz merge desde ahí. El diff del PR es el último lugar donde puedes detectar un cambio malo a bajo coste.
### Prueba en local primero
Antes de desplegar nuevas funciones:
1. **Ejecuta el servidor de desarrollo** - `npm run dev`
2. **Prueba la nueva función** a fondo
3. **Comprueba que las funciones existentes** siguen funcionando
4. **Prueba en tamaños** de móvil
5. **Ejecuta la compilación** - `npm run build`
6. **Corrige los errores** que aparezcan
7. **Previsualiza la compilación** - `npm run preview`
Solo después de que todas estas comprobaciones pasen deberías desplegar.
### Usa entornos de staging
Para proyectos serios, ten un sitio de staging:
**Configuración:**
1. Crea una rama separada (p. ej., `staging`)
2. Despliégala en una URL diferente (p. ej., `staging.yourdomain.com`)
3. Prueba las funciones nuevas primero en staging
4. Haz merge a `main` solo tras la verificación
La mayoría de las plataformas de hosting lo hacen fácil:
- Vercel: despliegues de vista previa automáticos para ramas
- Cloudflare Pages: puede desplegar varias ramas
- Autoalojado: despliega una segunda app Dokploy apuntando a la rama `staging`
### Mantén las funciones pequeñas
¿Recuerdas el paso 7? Esto aplica para siempre:
**Malo:**
```
Add user authentication, profile pages, and social sharing all at once
```
**Bien:**
```
Step 1: Add user registration form with email/password
Step 2: Add login functionality
Step 3: Add password reset flow
Step 4: Add email verification
```
Los cambios pequeños son más fáciles de probar, depurar y revertir si hace falta.
### Haz copia de seguridad de todo lo que no puedas recrear
La forma más común en que los principiantes pierden trabajo real no es un mal despliegue, es una base de datos sin volcado. Dos reglas:
- Vuelca antes de las migraciones. `pg_dump "$DATABASE_URL" -Fc -f backup-$(date +%F).dump` antes de cualquier cambio de esquema, lo ejecute un agente o no.
- Saca el volcado de la máquina. Una copia de seguridad en el mismo VPS que la base de datos no es una copia de seguridad. Súbela a almacenamiento de objetos compatible con S3 de forma programada y prueba una restauración al menos una vez.
Si quieres que un asistente maneje pasos de despliegue repetitivos de forma segura, el patrón de [dejar que un asistente de IA despliegue apps Docker](/es/skill-despliegue-docker-ia/) vale la pena copiarlo: la skill guarda los pasos, el agente los ejecuta y tú revisas el diff.
### Documenta las funciones nuevas
Actualiza tu `AGENTS.md` al añadir patrones nuevos:
```markdown
## Recent Additions
### Dark Mode (Added 2026-09-01)
- Theme toggle in header
- Saved to localStorage
- CSS variables in `theme.css`
- Usage: Add `dark:` prefix to Tailwind classes
### User Authentication (Added 2026-09-08)
- Using Clerk for auth
- Protected routes in `src/middleware/auth.ts`
- User object available in `Astro.locals.user`
```
Esto ayuda a la IA (y a tu yo futuro) a entender el contexto completo del proyecto.
## Errores comunes cuando aprendes a programar con IA
### Error 1: Abrumar a la IA
**Síntoma:** La IA genera código con errores o no cumple los requisitos
**Solución:** Divide las tareas en piezas más pequeñas. Si la IA tiene dificultades, tu petición es demasiado grande.
### Error 2: Confiar ciegamente en la salida de la IA
**Síntoma:** Acumular deuda técnica, o un agujero de seguridad que nunca ves
**Solución:** Revisa todo el código, haz preguntas, consigue segundas opiniones. Especialmente en cualquier cosa que toque autenticación, dinero o datos de usuarios.
### Error 3: No probar en local
**Síntoma:** Los despliegues fallan o aparecen errores en producción
**Solución:** Ejecuta siempre `npm run dev` y `npm run build` en local primero.
### Error 4: Quemar tus créditos de IA
**Síntoma:** Tu saldo de Copilot Pro de 10 $ desaparece el día 8 del mes y el modo agente deja de funcionar
**Solución:** El gasto en créditos es gasto en tokens. Mantén las ediciones pequeñas en completados, acota las sesiones de agente a una función, empieza una conversación nueva cuando el contexto se haga largo, y revisa tu saldo restante semanalmente. Si el precio plano te conviene más que la medición, una suscripción de 10 $ como OpenCode Go elimina el techo.
### Error 5: Dar a un agente acceso de shell que no le darías a un becario
**Síntoma:** El agente borra un archivo, reescribe un módulo que funcionaba, o ejecuta una migración que no pediste
**Solución:** Trata al agente como a un contratista nuevo con tus credenciales. Trabaja en una rama, mantén `.env` fuera del repo, no des a un agente credenciales de base de datos de producción mientras experimentas, y lee el diff antes de hacer merge de nada.
### Error 6: Commitear secretos
**Síntoma:** Una clave API aparece en un repo público y es capturada en minutos
**Solución:** `.gitignore` para `.env` antes de tu primer commit. Verifica con `git check-ignore -v .env`. Si una clave se filtra, rótala primero y limpia el historial después; reescribir el historial no la desfiltra.
### Error 7: Programar contra una API deprecada
**Síntoma:** El enfoque de cada tutorial falla, o el código compila y la función no funciona
**Solución:** Los datos de entrenamiento del modelo tienen fecha de corte, y los frameworks se movieron mucho en 2025 y 2026. Para eso está Context7 MCP. Cuando algo se comporte raro, pide la documentación actual en lugar de un arreglo.
### Error 8: Demasiadas dependencias
**Síntoma:** El proyecto se vuelve lento, hinchado, o se rompe al actualizar
**Solución:** Añade librerías solo cuando sean necesarias. Pregunta al agente «¿qué me compra esta dependencia frente a hacerlo en 20 líneas?» y no aceptes «es la opción estándar».
### Error 9: Sin disciplina de control de versiones
**Síntoma:** Código perdido, no está claro qué cambió, difícil revertir
**Solución:** Haz commit a menudo con mensajes descriptivos. Usa ramas para las funciones. Nunca dejes que un agente haga veinte cambios entre commits.
### Error 10: Tratar el despliegue como la línea de meta
**Síntoma:** Una caída de la que te enteras por un amigo, y sin forma de revertir
**Solución:** La monitorización, las copias de seguridad y una reversión ensayada son parte de construir la función, no un añadido posterior. Los pasos 10, 11 y 12 de arriba son el mínimo.
## Ejemplo de éxito real: un principiante construyó esto con IA
Déjame compartir mi experiencia para mostrar lo que es posible.
### El proyecto: SmoothieBlenderGuide.com
Reconstruí mi sitio de afiliados [SmoothieBlenderGuide.com](https://www.smoothieblenderguide.com/) desde cero usando IA.
**Punto de partida:**
- 40 artículos en WordPress
- Rendimiento lento (tiempos de carga de 3-4 segundos)
- Hosting de 15 $/mes
- Información de productos desactualizada
**Objetivo:**
- Migrar a Astro por velocidad
- Actualizar todos los datos de productos desde Amazon
- Mejorar la calidad de los artículos
- Reducir los costes de hosting a 0 $
**Herramientas usadas:**
- Factory.ai Droid CLI (asignación de tokens gratuita el primer mes)
- Bright Data MCP (para datos de Amazon)
- Claude Sonnet 4.6 (para la redacción de artículos)
**Proceso:**
1. Pedí a la IA que creara la arquitectura del proyecto
2. Configuré Astro con Tailwind CSS
3. Usé Bright Data MCP para obtener datos actuales de Amazon
4. Reescribí los artículos con información actualizada
5. Creé tablas comparativas a partir de datos de reseñas
6. Generé imágenes optimizadas
7. Desplegué en Cloudflare Pages
**Resultados:**
- **40 artículos completados** en unas 3 horas de trabajo real
- **Coste total:** menos de 2 $ (principalmente tokens de IA)
- **Hosting:** 0 $ (gratis en Cloudflare Pages)
- **Tiempos de carga:** menos de 1 segundo (desde 3-4 segundos)
- **Mejor contenido:** más detallado, con datos actuales
**Conclusión clave:** Con IA y el enfoque adecuado, puedes construir proyectos de calidad profesional siendo principiante. Lo que lo hizo funcionar no fue un modelo listo; fue AGENTS.md manteniendo las reglas de contenido, una tarea acotada cada vez, y revisar la salida antes de publicarla.
Lee el caso completo: [Cómo construir sitios web de afiliados con IA y productos de Amazon](/ai-affiliate-websites-amazon/)
## Tu plan de acción de 30 días para aprender a programar con IA
¿Listo para empezar? Este es el plan que yo seguiría, en el orden que evita semanas perdidas.
### Días 1-2 (aproximadamente una hora en total)
- [ ] Crea una cuenta de GitHub y añade una clave SSH
- [ ] Instala Node.js (LTS) y verifica con `node -v`
- [ ] Regístrate en un asistente de IA (Copilot Free, Amp Code Free o FreeBuff para empezar)
- [ ] Decide qué quieres construir (¿blog, portafolio, app?)
### Semana 1: Consigue algo en vivo
- [ ] Elige tu stack (Astro para sitios, TanStack Start para apps)
- [ ] Crea tu primer repositorio con un `.gitignore`
- [ ] Inicializa el proyecto con ayuda de la IA
- [ ] Escribe `AGENTS.md` y una carpeta `docs/` corta
- [ ] Haz push de tu primer commit
- [ ] Despliega la estructura vacía en Cloudflare Pages o Vercel
Esa última casilla importa más de lo que parece. Desplegar una página «hola» aburrida en la semana uno significa que cada despliegue posterior es un evento normal, no uno aterrador.
### Semana 2: Construye una función real
- [ ] Divide tu función en pasos y planifica la estructura con IA
- [ ] Constrúyela un paso cada vez, verificando cada paso
- [ ] Ejecuta `npm run build` antes de cada commit
- [ ] Consigue que una segunda IA revise el código
- [ ] Despliégala y haz clic en ella desde tu teléfono
### Semanas 3-4: Haz que sobreviva al contacto con la realidad
- [ ] Añade un servidor MCP (Context7 primero)
- [ ] Configura un monitor de uptime y un rastreador de errores
- [ ] Escribe tus pasos de reversión y prueba uno
- [ ] Añade una copia de seguridad de todo lo que no puedas recrear
- [ ] Lleva un registro `LEARNING.md` de lo que realmente entendiste este mes
## Conclusión: empieza a programar con IA hoy
Programar con IA en 2026 va menos de velocidad de tecleo y más de criterio. Puedes empezar a construir proyectos reales de inmediato, aprender haciendo e iterar sin atascarte en sintaxis o errores oscuros. Lo que no puedes saltarte es la verificación: el agente escribe código, tú eres dueño del resultado.
**Los principios clave:**
1. **Elige el stack adecuado** para lo que estás construyendo
2. **Usa control de versiones** desde el primer día, con `.env` ignorado antes que cualquier otra cosa
3. **Escoge un buen asistente de codificación con IA** (empieza gratis, mejora cuando vayas en serio)
4. **Documenta tu proyecto** con `AGENTS.md` y `docs/`
5. **Añade servidores MCP** estratégicamente (2-3, no 20)
6. **Construye incrementalmente** - funciones pequeñas y enfocadas, verificadas una a una
7. **Revisa cada línea** - haz vibe coding con los prototipos, revisa el camino de producción
8. **Consigue segundas opiniones** de diferentes modelos de IA
9. **Despliega pronto y a menudo** para que los despliegues dejen de dar miedo
10. **Monitoriza y respalda** lo que lanzas, y conoce tu reversión
11. **Itera con cuidado** sin romper lo que funciona
La barrera de entrada nunca ha sido más baja. No necesitas un título en informática ni meses de estudio. Con la IA como tu compañera de programación y esta guía como hoja de ruta, puedes empezar a construir esta noche.
**¿Qué construirás primero?**
Aquí están tus próximos pasos:
1. **Regístrate en un asistente de IA** - [Droid CLI](https://go.bitdoze.com/droid-cli) (tokens gratis el primer mes), [FreeBuff](https://go.bitdoze.com/freebuff) o [GitHub Copilot Pro](https://github.com/github-copilot/signup) (10 $/mes)
2. **Elige tu primer proyecto** - un blog, un portafolio o una pequeña app web
3. **Sigue la guía de configuración** - elige Astro o TanStack Start según lo que construyas
4. **Despliega algo esta semana** - una estructura vacía cuenta. No lo pienses demasiado.
## Preguntas frecuentes: programar con IA para principiantes
Para un prototipo, no. Puedes describir lo que quieres y desplegar algo funcional sin leer la mayor parte del código.
Para cualquier cosa que pretendas mantener en funcionamiento, sí, y cuanto más mejor. Las tres cosas que realmente te requieren son decidir qué construir, verificar que funciona, y arreglarlo cuando se rompe a las 2 de la madrugada. Un agente puede hacer gran parte de lo del medio, pero no puede asumir el resultado por ti.
Camino realista: construye con IA desde el primer día, y dedica 30 minutos al día a entender lo que escribió. Estarás leyendo tu propio código en un par de semanas, que es mucho más de lo que el enfoque antiguo te daba en el primer mes.
No hay un ganador único, pero sí un default sensato:
- Gratis y suficiente para aprender: FreeBuff (agente CLI y web gratuito, financiado con anuncios de texto) o Copilot Free (2.000 completados y 50 solicitudes de chat al mes, más una pequeña asignación de AI Credits). Amp Free era la tercera opción; está en pausa.
- 10 $/mes, la integración de editor más ajustada: GitHub Copilot Pro. 15 $ al mes en AI Credits a tarifas por token (10 $ base + 5 $ flex), completados ilimitados, CLI, modo agente.
- 10 $/mes, plano y predecible: OpenCode Go. Más de dos docenas de modelos detrás de una clave compatible con OpenAI, 5 $ el primer mes.
Si no estás seguro, empieza en Copilot Free y mejora después de una semana construyendo de verdad. La herramienta que uses importa mucho menos que el bucle: pide un cambio pequeño, ejecútalo, lee el diff, repite.
Puede generar el código de una app completa, y para cosas pequeñas (una landing, una herramienta interna, un script) a menudo eso es lo mismo.
El problema es que «generado» y «funciona» son estados diferentes. Los agentes producen regularmente código que se ejecuta, parece correcto, y se rompe silenciosamente en casos límite: un campo de entrada vacío, una red lenta, un segundo usuario, una zona horaria. Tampoco pueden conocer tus restricciones (techo de coste, cumplimiento, lo que tus usuarios hacen realmente).
Así que la respuesta honesta: sí para el alcance que puedes verificar, no para el que no puedes. Por eso todo flujo de trabajo serio de codificación con IA termina con un paso de revisión, un paso de monitorización y un plan de reversión.
Cronograma aproximado, en el orden en que las cosas suelen hacer clic:
- Día 1: una página desplegada que construiste con prompts
- Semanas 1-2: puedes leer el código que generaste y cambiarlo
- Mes 1: una función real, de extremo a extremo, en producción
- Mes 3: puedes depurar algo en lo que la IA se equivocó sin ayuda
- Mes 6+: las decisiones de arquitectura dejan de ser adivinanzas
La variable no es la inteligencia, es cuánto insistes en entender. La gente que acepta cada diff sin leerlo se estanca rápido. La gente que pregunta «¿por qué esto y no aquello?» crece rápidamente.
Depende enteramente de cómo la uses, y ambos modos de fallo son reales.
- Malo: aceptar diffs sin leerlos. Lanzas cosas, aprendes poco, y chocas contra un muro la primera vez que algo sutil se rompe.
- Malo: negarte a usarla y escribir boilerplate a mano durante dos meses. Aprenderás sintaxis y abandonarás de aburrimiento.
- Bueno: úsala para construir, luego interrógala. «Explica esto línea por línea.» «¿Por qué este enfoque?» «¿Qué se rompe si la entrada está vacía?» Trátala como a una desarrolladora senior sentada a tu lado, no como una máquina expendedora.
La habilidad que más importa en 2026 no es teclear sintaxis rápido. Es leer código críticamente, saber qué probar, y ser honesto sobre lo que no entiendes. La IA hace esa habilidad más valiosa, no menos.
## Recursos relacionados
Continúa tu aprendizaje con estas guías:
- [Las mejores herramientas y agentes de codificación con IA en 2026](/es/herramientas-codificacion-ia/) - Comparativa completa de cada opción seria
- [Crea un blog gratis con Astro y Cloudflare](/es/crear-blog-astro-gratis/) - Tutorial completo de Astro
- [Despliega TanStack Start en tu VPS](/tanstack-start-dokploy-deploy/) - Guía de autoalojamiento
- [Guía completa de GitHub Copilot Pro](/github-copilot-complete-guide/) - La mejor configuración de codificación con IA por 10 $
- [Alternativas a GitHub Copilot más baratas](/es/alternativas-github-copilot-2026/) - Lo que te cuesta el cambio a facturación por créditos
- [Análisis de OpenCode Go](/es/opencode-go-plan/) - 18 modelos por 10 $/mes
- [Amp Code Free, agente de codificación con IA](/amp-code-free-ai-coding-agent/) - Alternativa gratuita
- [Introducción a MCP para principiantes](/es/introduccion-mcp-principiantes/) - Entiende primero el protocolo
- [Configuración de VPS para agentes de codificación con IA](/es/vps-configuracion-codificacion-ia/) - Ejecuta tu agente en un servidor
- [Monitorización autoalojada con Beszel y Uptime Kuma](/es/beszel-uptime-kuma/) - Vigila lo que lanzas
- [Construye sitios web de afiliados con IA](/ai-affiliate-websites-amazon/) - Caso de estudio de un proyecto real
Tú + IA es un multiplicador real, siempre que sigas siendo quien verifica. Ahora ve a desplegar algo. 🚀