Cómo empezar a programar con IA: guía para principiantes 2026

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.

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:

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:

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 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, y las compilaciones cortas importan doblemente: iteras más cada tarde, y el hosting estático sigue siendo barato.

¿Por qué Astro?

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. 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.

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?

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. Si prefieres montar Postgres por tu cuenta, crea una app de tareas con TanStack Start y 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?

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:

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.

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
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:

# Generate a new SSH key
ssh-keygen -t ed25519 -C "[email protected]"

# 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.

Verifica tu configuración SSH

Antes de crear nada, confirma que la autenticación funciona:

ssh -T [email protected]

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:

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:

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 [email protected]:your-username/my-first-ai-project.git
git push -u origin main

Verifica:

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 <url> 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. 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.

Qué cambió realmente:

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. Y cuando 10 $ dejen de ser suficientes, aquí tienes alternativas a GitHub Copilot más baratas con las cuentas de coste reales.

IDE recomendado: Zed. 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.

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ó

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

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. Si prefieres un agente centrado en terminal que configures tú mismo, la guía de configuración del agente Pi 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.

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:

mkdir docs

Archivos de documentación esenciales

1. Documentación del framework

Si usas Astro, crea docs/astro.md:

# 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:

# 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:

# 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:

# 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

touch AGENTS.md

Qué incluir

Aquí tienes una plantilla basada en mis proyectos en producción:

# 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. El mismo patrón es lo que permite a un asistente desplegar apps Docker desde un solo mensaje.

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 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 y la propia plataforma Bright Data. Si prefieres búsqueda web, fetch y un navegador headless detrás de una sola clave sin la pila de proxies, 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

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 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

[mcp_servers.context7]
command = "npx"
args = ["-y", "@upstash/context7-mcp@latest"]

[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest", "--headless"]

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "brightdata-mcp": {
      "command": "npx",
      "args": ["-y", "@brightdata/mcp"],
      "env": {
        "API_TOKEN": "your_brightdata_token"
      }
    }
  }
}

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--headless"]
    }
  }
}

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:

No te pases

Para una lista completa de servidores MCP disponibles, visita 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:

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:

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»:

# 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;
---
<h1>{title}</h1>
```

## 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:

# 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 cubre las trampas de nomenclatura.

Dónde comprar dominios:

• Namecheap - 1-15 $/año
• Cloudflare - precios a coste
• Porkbun - precios bajos, buen servicio

Elige un .com si está disponible, o .dev para proyectos tecnológicos.

Opciones de despliegue

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:

Y desde la terminal, para tener algo objetivo:

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.

# Revert the bad commit without rewriting history
git revert --no-edit <bad-commit-sha>
git push origin main

Luego, por plataforma:

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

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",
});

Configura alertas

Configura notificaciones para problemas críticos:

Alertas esenciales:

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:

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:

# 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:

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:

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 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:

## 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 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

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?

Preguntas frecuentes: programar con IA para principiantes

Recursos relacionados

Continúa tu aprendizaje con estas guías:

Tú + IA es un multiplicador real, siempre que sigas siendo quien verifica. Ahora ve a desplegar algo. 🚀