Un CMS para sitios web de Claude Code: la capa que faltaba

Un CMS para sitios web de Claude Code: la capa que faltaba

He lanzado quizás una docena de sitios con Claude Code a estas alturas. Páginas de marketing, una landing page SaaS, un par de one-pagers para agencias. Cada uno lucía lo suficientemente bien como para que un cliente pagara con gusto varios miles de dólares por él. Y cada uno tenía el mismo defecto fatal en el momento en que imaginaba entregarlo realmente: el cliente no podía cambiar ni una palabra sin llamarme.

Ese es el secreto sucio que nadie cuenta en los videos de demostración. Un CMS para Claude Code no es un complemento agradable para estos sitios — es lo que determina si un hermoso sitio web generado por IA es un producto real o una captura de pantalla que publicaste en Twitter para conseguir likes. El problema de diseño se resolvió en algún momento de 2025. El problema del "¿y ahora qué?" no.

Así que cuando encontré el tutorial de Jack — es un emprendedor serial en el mundo de las startups de IA — abordando exactamente esta brecha, presté atención. Su enfoque fue directo: aproximadamente el 99% de los sitios web generados por Claude son inutilizables en producción porque no tienen una capa de gestión de contenido. Un cliente que necesita corregir un error tipográfico en el titular principal tiene dos opciones. Obtener las credenciales crudas del repositorio (aterrador) o enviar un mensaje al desarrollador (un cuello de botella que mata tus márgenes). Ninguna escala más allá de un puñado de clientes.

Su solución es construir un CMS encima del sitio estático — una capa de edición controlada que permite a personas no técnicas cambiar texto, intercambiar imágenes, agregar páginas y ajustar el SEO, sin tocar código ni poder romper el diseño. Quiero recorrer cómo encaja realmente este stack, cuánto cuesta en planes gratuitos, y — porque he usado cada pieza de este stack en producción — exactamente dónde la realidad de la "versión 1" diverge del video de highlights. Al final sabrás si vale la pena construirlo para tu propio trabajo con clientes o si es mejor recurrir a una herramienta lista para usar.

Pero primero, la parte que la mayoría de la gente entiende mal sobre por qué esto importa.

Por qué un sitio web hermoso de Claude Code no vale nada sin un CMS

Esta es una escena que he vivido más de una vez. Entregas un sitio espectacular. El cliente está encantado. Dos semanas después: "Oye, ¿puedes cambiar el número de teléfono en el footer y actualizar los precios del segundo nivel? ¡Perdona la molestia!"

Ese mensaje te cuesta. No por los cinco minutos que toma la edición — por el cambio de contexto, el redespliegue, el "ya que estás ahí, ¿podrías también..." que sigue. Multiplícalo por diez clientes y habrás reconstruido exactamente la trampa freelance sobre la que escribí en cómo la clonación de sitios web con IA genera ingresos recurrentes: estás intercambiando tiempo por dinero en una cinta de correr que nunca acelera.

La respuesta convencional es "simplemente usa WordPress" o "constrúyelo en Webflow". Ambas funcionan. Ambas también desechan toda la razón por la que usaste Claude Code en primer lugar — el diseño personalizado y afinado a mano que no se parece a todas las demás plantillas en internet. En el instante en que viertes un diseño generado por Claude en un tema de WordPress, has lijado lo que lo hacía especial.

Lo que preserva el enfoque de Jack es el código personalizado y la editabilidad. El sitio sigue siendo un conjunto estático de archivos ultrarrápidos. El CMS se ubica junto a él como un panel de control separado que sabe qué partes de la página son editables y escribe los cambios a través de un pipeline controlado. El cliente obtiene un login que solo expone objetivos de edición seguros — el texto del titular, el número del precio, el espacio de la imagen — nunca el HTML estructural que mantiene unido el diseño.

Jack llama al objetivo "inmutable a la destrucción del cliente pero aún editable". Esa frase se me quedó grabada porque nombra el requisito real del producto. Los clientes deberían poder hacer todo lo que necesitan y nada que rompa el sitio. Ese es todo el juego.

Y el mecanismo que lo hace posible es un stack de cuatro servicios gratuitos o casi gratuitos conectados entre sí. Permíteme desglosar cada uno, porque la arquitectura es la parte interesante — no el marketing.

El stack completo: Claude Code, GitHub, Vercel, MongoDB Atlas, OpenRouter

Quita el pitch y el sistema son cinco componentes, cada uno haciendo un trabajo:

• Claude Code genera el sitio web y, por separado, el propio panel del CMS.
• GitHub almacena el código fuente y te da control de versiones.
• Vercel despliega el sitio en vivo desde GitHub y maneja el hosting.
• MongoDB Atlas almacena todo el contenido editable como la única fuente de verdad.
• OpenRouter enruta el asistente de edición con IA al modelo de lenguaje que elijas.

El flujo funciona así. Claude Code escribe el sitio y lo sube a un repositorio privado de GitHub. Vercel vigila ese repo y despliega lo que esté en la rama principal a una URL en vivo. Hasta aquí es un despliegue estándar de sitio estático — nada novedoso, y algo que he hecho docenas de veces. El CMS es donde se pone interesante. En lugar de que el contenido viva codificado en el HTML, las piezas editables viven como documentos en MongoDB. El sitio publicado lee de esa base de datos (o de un build que extrae de ella), así que cuando un cliente edita los precios en el panel y presiona publicar, el cambio se propaga al sitio en vivo.

El asistente de edición con IA — el cuadro de chat que permite a un cliente decir "haz esta sección más corta y contundente" — funciona a través de OpenRouter. Es una elección inteligente de parte de Jack, y aquí está por qué importa: OpenRouter es una única API que ofrece más de 315 modelos de Anthropic, OpenAI, Google, DeepSeek y otros, todos detrás de un endpoint compatible con OpenAI. Cambias de modelo con un parámetro, sin cambios de código. Para un CMS que vendes a clientes, esa flexibilidad es la diferencia entre estar atado a los precios de un proveedor y poder cambiar a un modelo más barato en cuanto aparezca uno.

Seré honesto sobre una cosa, porque la demo la pasa por alto: conectar estas cinco piezas para que se mantengan sincronizadas es el 20% difícil que consume el 80% del tiempo. El enfoque de "Claude lo construye por ti" es cierto para el camino feliz y optimista en todo lo demás. Llegaremos a eso. Primero, déjame mostrarte cuánto cuesta ejecutarlo, porque ese número me sorprendió.

¿Cuánto cuesta realmente ejecutar este stack?

Ejecutar un CMS de Claude Code para un único sitio de cliente cuesta efectivamente nada en planes gratuitos, más uso de IA por edición que se mide en fracciones de centavo. Aquí está el desglose verificado a junio de 2026.

Claude en sí es el único costo mensual garantizado. El plan Pro cuesta $20/mes (o unos $17/mes si pagas anualmente) y ahora incluye Claude en la web, la app de escritorio, Cowork y Claude Code en tu terminal. Una advertencia importante que los videos omiten: Pro funciona con ventanas de uso rotativas de cinco horas. Alcanza el límite a las 2 PM y tu siguiente ventana se abre alrededor de las 7 PM. Para generación intensiva de sitios sentirás ese muro, y es la razón principal por la que la gente salta al nivel Max.

GitHub es gratis para repos privados. Sin asteriscos para este caso de uso.

El plan Hobby de Vercel es gratis y generoso: 100 GB de ancho de banda, 1 millón de solicitudes edge y 1 millón de invocaciones de funciones serverless al mes, con 4 horas de CPU activa. La trampa que afecta específicamente a las agencias — Hobby es solo para uso no comercial. En el momento en que alojas el sitio de un cliente que paga, deberías estar en Pro a $20/mes por puesto de desarrollador, que te da 1 TB de ancho de banda y facturación por exceso en lugar de una pausa forzada. Para proyectos personales, gratis está genuinamente bien. Para trabajo de clientes, presupuesta los $20.

MongoDB Atlas tiene un cluster gratuito M0 (anteriormente llamado M0, ahora simplemente "Free") con 512 MB de almacenamiento. Para una base de datos de contenido que almacena texto, configuración de diseño e historial de versiones, 512 MB es mucho — cabrán docenas de sitios antes de que importe. Las restricciones reales son los límites de rendimiento: aproximadamente 100 operaciones por segundo y 500 conexiones simultáneas. Bien para un CMS donde las ediciones son acciones humanas ocasionales. No está bien si accidentalmente apuntas el renderizado de páginas de alto tráfico directamente a él sin caché.

OpenRouter es puro pago por uso sobre precios de modelos transparentes, con una comisión de plataforma del 5,5% sobre créditos. No hay suscripción. Si el asistente de edición con IA de un cliente ejecuta, digamos, 50 solicitudes de edición al mes contra un modelo de nivel medio, estamos hablando de centavos. OpenRouter también expone modelos gratuitos (limitados a aproximadamente 20 solicitudes/minuto, 200/día) si quieres que el asistente no cueste literalmente nada durante las pruebas.

Súmalo para un despliegue real de cliente: $20 Claude + $20 Vercel Pro + $0 GitHub + $0 MongoDB + unos centavos de OpenRouter = aproximadamente $40/mes para ejecutar un número ilimitado de sitios de clientes a través de un solo panel. Si cobras a los clientes $100–$200/mes por alojamiento y ediciones — el modelo que desglosé en la publicación sobre el modelo de retainer de agencia IA — el margen es obvio. Esa es la llave de ingresos recurrentes escondida dentro de un tutorial de CMS.

Ahora la parte que realmente me importa: cómo construir la cosa.

¿Cómo construyes un CMS sobre un sitio web de Claude Code?

Construyes un CMS de Claude Code generando primero el sitio estático, desplegándolo en Vercel, y luego haciendo que Claude Code genere una aplicación de panel separada que se conecta a MongoDB Atlas para almacenamiento de contenido y OpenRouter para el asistente de edición con IA. Aquí está la secuencia de cinco pasos que Jack demuestra, con mis notas sobre cada uno.

Paso 1: Configura Claude con el plan correcto

Obtén la aplicación de escritorio de Claude y suscríbete al menos al plan Pro ($20/mes) para tener acceso a Claude Code. Si vas a generar múltiples sitios en una sesión, considera seriamente Max — la ventana de cinco horas de Pro te interrumpirá a mitad de construcción, y no hay nada más molesto que esperar tres horas para terminar un diseño.

Paso 2: Roba una dirección de diseño (de la manera correcta)

Este es el paso que separa un sitio que se ve como un sitio de Claude de uno que se ve como el sitio de tu cliente. No aceptes la estética predeterminada de Claude. Busca inspiración real primero.

La estrategia de Jack es navegar por Dribbble, encontrar diseños que coincidan con la vibra que el cliente quiere, y alimentar capturas de pantalla o URLs a Claude para que pueda analizar el lenguaje visual real. Usa una skill de "extractor de plano de diseño" de su comunidad para traducir esa inspiración en un plan de sitio estructurado — sistema de colores, escala tipográfica, disposición de secciones, ritmo de espaciado — antes de que se escriba una sola línea de código.

No necesitas su skill específica para hacer esto. Lo que importa es el principio: dale a Claude una referencia visual concreta más una declaración clara del propósito y la marca del sitio, y obtendrás un resultado que está a kilómetros del genérico predeterminado. He encontrado lo mismo cada vez — la calidad de un diseño generado por Claude es casi enteramente una función de cuán específicos son la referencia y el brief. Brief vago, sitio genérico. Brief preciso con una referencia real, algo por lo que un cliente realmente pagará. Profundizo en esta dinámica en la guía de sistemas de diseño para apps con IA.

En la demo, el ejemplo es un sitio de servicios para una empresa de automatización con IA que vende agentes "Hermes" que reducen los costos operativos de las empresas. Claude produjo un tema profesional cohesivo, textos de marketing reales, múltiples ilustraciones personalizadas de los conceptos de IA y un diseño limpio por secciones — explicaciones del sistema, logos de socios, todo el paquete. Las imágenes personalizadas vinieron a través de una integración API con un generador de imágenes IA asequible (usa uno llamado KIE) en lugar de fotos de stock, lo cual es una gran parte de por qué no se ve como una plantilla.

Paso 3: Construye y refina iterativamente

Genera, luego critica con capturas de pantalla. Esto no es negociable. Le das a Claude una captura de lo que produjo y retroalimentación detallada — "el espaciado del hero es demasiado ajustado, la fila de logos de socios necesita más espacio para respirar, el color del CTA compite con el titular" — y lo revisa. La primera pasada nunca es la final. Trata a Claude como un diseñador junior rápido al que estás dirigiendo artísticamente, no como una máquina expendedora.

Paso 4: Alójalo gratis

Claude Code maneja esto casi enteramente a través de la CLI. Crea un repo privado en GitHub, sube el código, conecta Vercel y despliega a una URL en vivo. Lo único que haces manualmente es autenticarte. GitHub es tu almacenamiento de archivos y control de versiones; Vercel refleja lo que hay en el repo al sitio en vivo. Desde el panel de Vercel también puedes comprar o vincular un dominio personalizado. He ejecutado este flujo exacto de despliegue muchas veces — genuinamente es casi un comando una vez que tu autenticación está configurada, y es la parte menos problemática de todo el sistema.

Paso 5: Integra el CMS (la parte realmente difícil)

Aquí es donde Claude genera una segunda aplicación — el panel del CMS — y la conecta al sitio. El panel se conecta a MongoDB Atlas (tu almacén de contenido), usa un token de Vercel para activar despliegues, y enruta el asistente de edición con IA a través de una clave API de OpenRouter. Esta es la pieza que convierte un sitio estático en una plataforma editable, y es la pieza que requiere trabajo real para hacerla bien.

Si has llegado hasta aquí y estás asintiendo, ya estás pensando en esto más seriamente que la mayoría de personas que ven la demo y siguen adelante. La siguiente sección es donde separo lo que genuinamente funciona de lo que aún está en bruto.

Si prefieres que alguien construya y conecte todo este stack por ti — el sitio, el CMS, la configuración multi-tenant — acepto exactamente este tipo de encargos. Puedes ver lo que he construido en fiverr.com/s/EgxYmWD.

Configurando MongoDB Atlas como tu backend de contenido

MongoDB es la elección correcta para esto, y no por accidente. Es una base de datos de documentos — almacena documentos similares a JSON en lugar de filas y columnas rígidas. Eso encaja casi perfectamente con un CMS, donde cada página es realmente solo un árbol de bloques de contenido: un hero con un titular e imagen, una sección de precios con tres niveles, un footer con información de contacto. Almacenas cada página como un documento, cada versión como un snapshot, y las consultas son rápidas.

Configurar el cluster gratuito es genuinamente simple, y estos son los pasos exactos de la demo, que coinciden con lo que verás en la interfaz de Atlas hoy:

1. Crea una cuenta en MongoDB Atlas en la consola cloud.
2. Elige el cluster gratuito M0 — 512 MB de almacenamiento, sin tarjeta de crédito requerida.
3. Nombra el cluster algo obvio como website-cms.
4. Crea un usuario de base de datos con un nombre de usuario y contraseña con los que el CMS se autenticará.
5. Agrega IPs a la lista blanca en Acceso de Red para que tu app pueda conectarse. Para desarrollo puedes permitir todas las IPs temporalmente, pero restringe esto antes de producción.
6. Toma la cadena de conexión del driver y colócala en la configuración del CMS.

Una vez que esa cadena de conexión está en su lugar, el CMS deja de ser un juguete local y se convierte en algo a lo que un cliente puede acceder por internet. Y aquí está el detalle que genuinamente me impresionó en la demo: porque MongoDB es la única fuente de verdad, puedes borrar completamente la caché local y los archivos y el CMS reconstruye su estado desde la base de datos. El contenido no está atrapado en el código. Esa es una verdadera victoria arquitectónica y exactamente cómo un sistema de contenido debería comportarse — la base de datos es el almacén canónico, el código es desechable.

Atlas también te da backups automáticos, distribución global y un cluster gestionado siempre activo, así que no estás cuidando un servidor de base de datos. Para un operador independiente que gestiona sitios de clientes, "nunca tengo que pensar en la infraestructura de la base de datos" vale mucho.

Una advertencia honesta, porque me ha pasado: el techo de ~100 ops/seg del nivel gratuito M0 está bien para ediciones a ritmo humano pero absolutamente se atascará si lo arquitecturas mal — por ejemplo, consultando la base de datos en cada vista de página pública en lugar de construir páginas estáticas desde ella. Lee contenido en el build o cachea agresivamente. No dejes que el tráfico de visitantes toque M0 directamente. Hazlo mal y tu nivel "gratuito" se convierte silenciosamente en la razón por la que el sitio de un cliente se siente lento.

La arquitectura de dos enlaces: cómo funciona realmente el multi-tenant

Esta es la parte de la construcción de Jack que encontré más ingeniosa, y también la parte donde la honestidad de "versión 1" más importa.

El sistema usa dos puntos de entrada distintos:

• Un enlace de control maestro para ti, el desarrollador o la agencia. Desde aquí gestionas cada sitio de cliente, eliges qué modelo de IA impulsa las ediciones y conectas los backends de hosting y base de datos. Este es tu centro de comando.
• Un enlace de edición orientado al cliente, protegido con contraseña, limitado al sitio de un solo cliente. El cliente inicia sesión y puede editar su contenido y nada más. No puede ver otros clientes, no puede tocar la estructura, no puede romper nada fuera de su sandbox.

Claude genera tanto los sitios individuales de clientes como el CMS maestro, coordinando la autenticación para que cada usuario solo alcance sus páginas asignadas. Los tokens de Vercel controlan el despliegue; las claves de OpenRouter controlan la IA de edición. En teoría esto escala a docenas o cientos de sitios de clientes bajo un solo panel, que es el verdadero desbloqueo comercial — es la misma lógica multi-tenant que hace funcionar el modelo de retainer de agencia IA a escala.

Lo que el cliente puede hacer dentro de su enlace: editar texto y precios, ajustar espaciado y diseño dentro de límites seguros, agregar y modificar imágenes, agregar nuevas páginas (una página de artículo, una página en blanco, lo que sea), previsualizar en escritorio/tablet/móvil con sugerencias de IA para optimización móvil, y ejecutar herramientas SEO que puntúan frases objetivo, sugieren mejoras y permiten editar metadescripciones por página. También hay una bandeja de entrada de formularios que captura leads directamente en el CMS, y un asistente de chat con IA integrado para ayuda con las ediciones. Cada cambio tiene control de versiones, y solo el contenido validado se publica en vivo — lo que protege la estructura y el diseño de la "destrucción del cliente".

Ahora la honestidad. Jack es directo en que esto es versión 1 y básico, y deberías tomarlo en serio. Un CMS multi-tenant con autenticación, aislamiento de datos por inquilino, registros de auditoría, orquestación de despliegues y una capa de edición con IA es un producto de software real — el tipo de cosa para la que las empresas levantan capital. Claude Code puede armar una versión funcional impresionantemente rápido, y la demo prueba que la arquitectura es sólida. Pero "la demo funciona de principio a fin" y "confiaría en esto con los datos de cincuenta clientes que pagan y un límite de autenticación real" son declaraciones diferentes.

Las cosas que yo personalmente reforzaría antes de cobrarle a alguien: el límite de autenticación y aislamiento de inquilinos (un bug aquí significa que un cliente ve los datos de otro — inaceptable), validación de entrada sobre lo que el editor de IA puede escribir de vuelta, y limitación de velocidad para que un solo cliente no pueda agotar tus créditos de OpenRouter o alcanzar el techo de rendimiento de M0 para todos. Nada de esto son razones para no construirlo. Son razones para tratar la versión 1 generada como un punto de partida sólido, no como un producto terminado que le entregas a un cliente el primer día.

Esa distinción — punto de partida sólido versus producto entregable — es todo el punto de ser honesto sobre el software construido con IA. Así que permíteme tomar una posición clara sobre cuándo esta es la decisión correcta.

Cuándo este stack es la elección correcta — y cuándo no

Construye el CMS de Claude Code cuando quieras un diseño totalmente personalizado que ninguna plantilla puede dar, estés gestionando tus propios proyectos o un pequeño conjunto de sitios de clientes, y tengas suficiente criterio de ingeniería para reforzar los límites de autenticación y datos de la versión 1 antes de ir a producción. El techo en calidad de diseño y el costo de hosting casi nulo son imbatibles para este perfil. Esta es la decisión correcta para un desarrollador-operador que dirige una agencia ágil.

Recurre a una herramienta lista para usar cuando necesites autenticación multi-tenant probada en batalla desde el día uno, no te sientas cómodo revisando y reforzando código backend generado, o tus clientes necesiten funcionalidades (e-commerce, permisos complejos, registros de auditoría de cumplimiento) que una v1 no tendrá. Un CMS headless maduro o un plan de Webflow existe por una razón. No hay vergüenza en no reinventar la autenticación.

El error del que advertiría — y he visto gente cometerlo — es tratar la demo pulida como lista para producción y saltarse el refuerzo. El software generado por IA se siente terminado porque funciona. Funcionar y ser seguro para ponerlo frente a clientes que pagan no son lo mismo. He cometido versiones de este error yo mismo, entregando algo que funcionaba en la demo y se rompía en cuanto la entrada del mundo real lo golpeaba. La solución es aburrida: revisa el código generado, prueba el límite de autenticación como lo haría un atacante, y cachea agresivamente para que tus planes gratuitos no te traicionen bajo carga.

Aquí está la predicción que estoy dispuesto a hacer. Dentro de un año, "la IA construye tu sitio y le da a tu cliente una forma segura de editarlo" deja de ser un tutorial ingenioso y se convierte en un requisito básico para cualquiera que venda trabajo web generado por IA. El problema de diseño está resuelto. El problema de editabilidad es el nuevo foso. Quien perfeccione la capa de edición controlada — inmutable a la destrucción del cliente, pero totalmente editable — posee los ingresos recurrentes. Las herramientas mostradas aquí son un boceto temprano y honesto de hacia dónde se dirige esto.

Preguntas frecuentes

¿Puede Claude Code construir un CMS?

Sí — Claude Code puede generar tanto un sitio web estático como un panel de CMS separado que se conecta a una base de datos, despliega a través de Vercel y usa un asistente de edición con IA. El CMS generado es una sólida versión 1 funcional que necesita refuerzo de autenticación y aislamiento de datos antes de confiarlo a clientes que pagan. Consulta los pasos de construcción arriba para la secuencia completa.

¿Cuál es la forma más económica de alojar un sitio web de Claude Code?

La ruta más económica lista para producción es GitHub para el repo (gratis), Vercel Pro para hosting comercial ($20/mes) y el cluster gratuito M0 de MongoDB Atlas (512 MB) para contenido. El plan gratuito Hobby de Vercel funciona solo para sitios personales no comerciales.

¿Es suficiente el plan gratuito de MongoDB Atlas para un CMS de sitio web?

Para un CMS de contenido, sí — los 512 MB de almacenamiento del cluster gratuito M0 fácilmente contienen texto, configuración de diseño e historial de versiones para muchos sitios. El límite real es el rendimiento (~100 operaciones por segundo), así que cachea agresivamente y nunca apuntes el renderizado de páginas públicas directamente a M0 bajo tráfico.

¿Qué hace OpenRouter en esta configuración?

OpenRouter es la API única que impulsa el asistente de edición con IA del CMS, ofreciendo más de 300 modelos de Anthropic, OpenAI, Google y otros detrás de un único endpoint compatible con OpenAI. Cambias de modelo con un parámetro, y los precios son transparentes más una comisión de plataforma del 5,5% — sin suscripción. Esa flexibilidad te protege de quedar atado a los costos de un solo proveedor.

¿Por qué los clientes no pueden simplemente editar un sitio web de Claude Code directamente?

Porque el diseño vive en código personalizado, y darle a un cliente no técnico acceso crudo al repositorio significa que una edición incorrecta rompe el diseño. Una capa CMS expone solo objetivos de edición seguros — texto, precios, imágenes, meta tags — mientras mantiene el código estructural bloqueado, para que los clientes puedan cambiar todo lo que necesitan y nada de lo que no deberían.

Trabajemos juntos

¿Quieres construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.

• Fiverr (builds e integraciones personalizadas): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (soluciones empresariales): ramlit.com
• ColorPark (diseño y branding): colorpark.io
• xCyberSecurity (servicios de seguridad): xcybersecurity.io