Saltar al contenido principal

Cómo monto una web de agencia con Claude Code (mi stack real)

7 min de lectura
Monitor en una sala oscura mostrando código de programación

No escribes la web. La diriges. Esa es la idea que lo cambia todo. La trampa de principiante es pensar que tienes que teclear cada línea: no. Tú decides la arquitectura y las reglas; Claude Code pica el código a tu ritmo. Con la documentación bien hecha, una persona produce como un estudio pequeño. Este es el stack exacto con el que lo hago y el método para que no se te desmorone a mitad de camino.

¿Qué stack uso para montar una web con Claude Code?

Cuatro piezas, ni una más para empezar: Next.js, Tailwind, Supabase y Vercel. Es la combinación con la que están hechas webs como las de OpenAI o Notion, todo open source o con plan gratuito, y encaja perfecto con el flujo de dirigir a la IA.

  • Next.js — la base. El framework de React con el que se construye prácticamente todo el frontend serio hoy. Open source.
  • Tailwind — el diseño. Das estilo desde el propio código, sin pelearte con hojas de CSS sueltas.
  • Supabase — los datos. PostgreSQL de verdad, con sistema de login (Auth) ya incluido.
  • Vercel — la publicación. Conectas GitHub y en segundos la web está online.

Tú eres el arquitecto; la IA es el equipo que escribe el código. Esa es la única jerarquía que importa.

¿Cuánto cuesta este stack de verdad?

Casi todo es gratis para empezar, pero hay un «casi» que conviene decir de frente: la herramienta que te acelera, Claude Code, es de pago desde el día uno.

| Herramienta | Gratis para empezar | Empiezas a pagar cuando… | | --- | --- | --- | | Next.js | Siempre. Open source. | Nunca. | | Tailwind | Siempre. Open source. | Nunca. | | Supabase | Plan gratis: aguanta un proyecto entero. | Mucho tráfico o mucha base de datos. | | Vercel | Plan hobby: perfecto para arrancar. | Uso comercial o tráfico alto. | | Claude Code | No es gratis. | Desde el día uno (cuenta Claude de pago). |

El stack no cuesta nada para arrancar; la aceleración sí. Honestidad por delante: para un negocio pequeño los planes gratis de Supabase y Vercel sobran de largo, pero tenlo claro antes de prometer.

¿Cuál es el método para que la IA no se desmorone?

Documentación primero, fase a fase. Una sesión = una fase. El error de principiante es pedirle todo de golpe a la IA: el contexto se ensucia, se inventa cosas y el resultado se cae. El método que funciona es justo el contrario: divides el proyecto en fases pequeñas y le das una por sesión.

  1. Escribes el CLAUDE.md — un documento que le da contexto permanente: stack, reglas y arquitectura.
  2. Claude Code lo lee y ejecuta — empieza cada sesión leyendo ese contexto antes de tocar una línea.
  3. Verificas abriendo archivos — no te fíes del resumen. Abre 1 o 2 archivos clave y comprueba que existe lo que dice.
  4. /clear y a la siguiente fase — limpias el contexto entre fases. Memoria fresca, mejores resultados.

La regla de oro: Claude Code suele sobrevender lo que ha hecho en sus resúmenes. Da igual lo convincente que suene. Abre los archivos y verifica. Confía en el código, no en el resumen.

¿Cómo lo conecto todo, paso a paso?

De terminal vacía a web online, en orden.

0. Instala Claude Code

# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash

# alternativa con npm (necesita Node 18+)
npm install -g @anthropic-ai/claude-code

Necesitas una cuenta Claude de pago (Pro, Max, Team…). El plan gratis no incluye Claude Code.

1. Crea el proyecto y el cerebro

npx create-next-app@latest mi-web   # elige TypeScript + Tailwind
cd mi-web
claude                              # abre Claude Code
> /init                            # genera un CLAUDE.md base; lo afinas tú

2. Conecta Supabase

npm install @supabase/supabase-js
# 1) Crea un proyecto en supabase.com y copia URL + anon key
# 2) En .env.local (NUNCA lo subas a Git):
NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

3. Publica en Vercel

Sube el repo a GitHub, entra en vercel.com, importa el repo, pega las mismas variables de entorno y pulsa Deploy. En segundos tienes una URL pública.

4. Itera por fases

Hero, formularios, blog, panel de admin… una fase por sesión, /clear entre cada una, verifica siempre.

¿Cómo es un CLAUDE.md que funciona?

Cuanto más claras las reglas, menos se desvía la IA. Este es el esqueleto que uso. Lo guardas en la raíz del proyecto: es lo primero que Claude Code lee en cada sesión.

# CLAUDE.md — Contexto del proyecto

## Qué construimos
Web profesional para [cliente/marca]. Calidad de agencia.

## Stack (no cambiar sin avisar)
- Next.js (App Router) + TypeScript
- Tailwind CSS
- Supabase (PostgreSQL + Auth)
- Deploy en Vercel

## Reglas inviolables
- TypeScript estricto. Nada de "any".
- Mobile-first. Accesible (contraste AA mínimo).
- Seguridad: nunca subir .env a Git. Validar datos en el servidor.
- Sin librerías de UI prefabricadas: componentes propios.
- Diseño dark, limpio, estilo Linear/Raycast.

## Cómo trabajamos
- 1 sesión = 1 fase. /clear entre fases.
- Antes de tocar código, lee este archivo entero.
- Al terminar, lista los archivos que has creado o cambiado.

Conclusión: tres verdades sin humo

Para que no te vendan moto, tres cosas que casi nadie te cuenta:

  1. La IA acelera, no regala. Claude Code multiplica tu velocidad, pero es de pago y no decide por ti. Sin saber qué quieres construir, no sirve de nada. La cabeza la pones tú.
  2. Los planes gratis tienen techo. Supabase y Vercel son gratis para arrancar; cuando crecen el tráfico, los correos o los datos, toca pagar. Para empezar te sobra, pero tenlo claro.
  3. Verifica, no creas. La IA sobrevende su trabajo. Abre los archivos, comprueba que existe lo que dice haber hecho, prueba la web. El «ya está listo» no es ley hasta que lo ves tú.

Esto no es la única forma de hacer webs —hay mil stacks y mil caminos—, pero si empiezas, es de los más sencillos y sólidos. Ahora te toca a ti.

¿Necesitas una web o una automatización a medida? Calcula tu presupuesto orientativo o escríbeme directamente.

Calcula tu presupuesto →