Cómo rediseñé un sitio web en minutos con Claude Opus

Hace dos semanas, me senté en mi escritorio a las 11 de la noche con un problema. Un cliente necesitaba que todo su sitio web se convirtiera de un tema claro básico a un diseño oscuro pulido, que se creara una página de servicios completamente nueva desde cero, y una auditoría SEO completa con todas las correcciones desplegadas — todo antes de una reunión el lunes por la mañana. El yo de antes habría pasado toda la noche en vela, luchando con CSS, escribiendo HTML, ejecutando Lighthouse y parcheando meta tags manualmente uno por uno.

En su lugar, abrí Claude Code, escribí tres prompts y me fui a dormir.

Cuando desperté, el sitio estaba en producción. Tema oscuro con ratios de contraste perfectos. Una página de servicios que coincidía con el lenguaje de diseño existente hasta en el espaciado. Meta tags, sitemap, robots.txt, favicon, tarjetas Open Graph — todo en su lugar. La transformación completa le tomó a Claude unos doce minutos de tiempo de procesamiento activo. ¿Mi participación total? Quizás noventa segundos escribiendo.

Esa noche cambió mi forma de pensar sobre los flujos de trabajo en desarrollo web. No porque la IA hiciera algo mágico, sino porque expuso cuánto de lo que llamamos "desarrollo web" es en realidad toma de decisiones repetitiva que un agente bien instruido puede manejar sin ti.

Aquí te cuento exactamente cómo configuré esto, qué pasó durante el proceso y las partes que me sorprendieron — incluyendo lo único que Claude hizo mal y que casi se me pasa por alto.

El problema que nadie admite sobre el mantenimiento de sitios web

He aquí un secreto sucio que la mayoría de los desarrolladores no dicen en voz alta: mantener un sitio web es aburrido. ¿Construir uno? Eso es emocionante. Elegir el stack, diseñar la arquitectura, escribir los primeros componentes. Pero seis meses después, cuando el cliente te pide cambiar de modo claro a modo oscuro, agregar una página y "arreglar lo del SEO" — ese es el trabajo que nadie quiere hacer.

No es trabajo difícil. Esa es la parte frustrante. Convertir un tema claro a oscuro es principalmente ajustar colores de fondo, colores de texto, colores de borde y asegurarte de que los ratios de contraste sigan siendo accesibles. Crear una nueva página que coincida con el diseño existente es copiar la estructura, cambiar el contenido, actualizar la navegación. Ejecutar una auditoría SEO significa revisar las mismas veinte cosas cada vez — meta descriptions, jerarquía de encabezados, alt tags, sitemap, robots.txt.

Cada tarea toma quizás una o dos horas. Pero apiladas juntas, se comen un día entero. Y ese día está lleno de decisiones que no requieren creatividad — requieren consistencia. "¿Este gris oscuro tiene suficiente contraste contra ese gris ligeramente más oscuro?" "¿Actualicé la navegación en ambas páginas?" "¿Es correcta la URL canónica?"

Este es precisamente el tipo de trabajo para el que están hechos los agentes de IA. No las decisiones arquitectónicas creativas. No la lógica de negocio compleja. El trabajo de ejecución consistente que sigue patrones y que los humanos hacen en piloto automático de todos modos — excepto que los humanos cometen errores en piloto automático y la IA no se cansa.

Llevaba meses usando Claude Code para generación de contenido y asistencia con código. Pero no había intentado usarlo como un agente completo de modificación de sitios web hasta que descubrí dos skills que lo cambiaron todo. Y hay una diferencia crítica entre usar Claude como chatbot y usarlo como agente — te lo explico cuando lleguemos a la sección de configuración.

Lo que Claude Opus 4.6 realmente hace diferente

Antes de recorrer el rediseño, necesito aclarar algo que me confundió al principio. Claude Opus 4.6 no es simplemente un chatbot más inteligente. Cuando cambias del modo Chat al modo Code en Claude Desktop, estás cambiando fundamentalmente el modelo de interacción. En modo Chat, Claude te da respuestas. En modo Code, Claude ejecuta acciones.

Esa distinción importa. Cuando le pedí a Claude que convirtiera el tema de mi sitio web, no me dio sugerencias de CSS diciendo "prueba cambiar estos valores". Abrió los archivos HTML y CSS reales en mi repositorio Git, analizó el esquema de colores existente, mapeó cada token de color a su equivalente en modo oscuro, hizo los cambios y me mostró un diff de lo que modificó.

El agente trabaja directamente con tu sistema de archivos a través de un directorio de trabajo — una carpeta local vinculada a un repositorio Git. Cada cambio que Claude hace ocurre en archivos reales que puedes revisar, confirmar o revertir. Piénsalo menos como hablar con una IA y más como programar en pareja con un desarrollador junior extremadamente rápido que nunca se distrae.

Hay una pieza más en la arquitectura que hace esto poderoso: los skills. Los skills son capacidades modulares que extienden lo que Claude puede hacer. Son como plugins, pero más inteligentes — cada skill viene con sus propias instrucciones especializadas y flujos de trabajo.

Para el proyecto de rediseño del sitio web, usé dos skills:

El Skill de Diseño Front-end — un skill oficial mantenido por Anthropic con más de 100,000 instalaciones en el momento en que grabé esto. Le da a Claude conocimiento profundo de sistemas de diseño, teoría del color, estándares de accesibilidad y patrones de diseño responsivo. Cuando le dije a Claude que convirtiera a un tema oscuro "con contraste perfecto", el skill es lo que le permitió entender lo que "contraste perfecto" realmente significa en términos de ratios WCAG AA.

El Skill de Auditoría SEO — un skill comunitario con unas 19,000 instalaciones. Este convierte a Claude en un analizador SEO integral que puede rastrear tu sitio, identificar problemas según las mejores prácticas actuales y luego implementar las correcciones.

La combinación de estos dos skills con las capacidades nativas de edición de código de Claude es lo que hace que el flujo de trabajo se sienta casi absurdamente eficiente. Pero configurarlo bien importa — si te saltas un paso, pasarás más tiempo depurando la configuración de lo que habrías tardado haciendo el trabajo manualmente.

Aquí te explico exactamente cómo ponerlo en marcha desde cero.

Configurando Claude como tu agente web — paso a paso

Paso 1: Ten un sitio web en un repositorio Git.

Suena obvio, pero el detalle clave es que Claude necesita acceso al sistema de archivos a través de un repositorio Git. Si tu sitio está en una plataforma gestionada como Squarespace o Wix sin acceso a Git, este flujo de trabajo no funcionará. Necesitas archivos HTML, CSS y JavaScript reales en un repositorio.

Para mi demo, usé GitPage para crear rápidamente un sitio web de prueba. El proceso fue simple — elegí una plantilla de diseño, ingresé datos de ejemplo del negocio (nombre, email, descripciones básicas de servicios) y lo desplegué. En cinco minutos tenía un sitio en producción con su código fuente en un repositorio Git.

Consejo profesional: Si estás probando esto por primera vez, no uses un sitio en producción. Crea un proyecto desechable. Querrás la libertad de experimentar sin preocuparte por romper algo que importa.

Paso 2: Instala Claude Desktop y cambia al modo Code.

Descarga Claude Desktop desde el sitio web de Anthropic — está disponible para Mac y Windows. Después de la instalación, estarás por defecto en modo Chat. Cambia al modo Code usando el interruptor en la interfaz. Este es el paso que la mayoría de la gente se salta. El modo Chat te dará consejos sobre cómo rediseñar tu sitio web. El modo Code lo hará realmente.

Una vez en modo Code, establece tu directorio de trabajo en la copia local de tu repositorio Git. Así es como Claude sabe qué archivos leer y modificar. El directorio de trabajo es el ancla para todo lo que sigue.

Paso 3: Entiende el archivo claude.md.

Dentro de tu directorio de trabajo, encontrarás (o crearás) un archivo claude.md. Piensa en esto como el manual de instrucciones que le entregas a Claude sobre tu proyecto específico. Contiene información sobre la estructura del proyecto, convenciones y cualquier regla especial que Claude deba seguir.

Para un proyecto web, tu claude.md podría incluir cosas como:

• Qué framework CSS estás usando
• Variables de color y tokens de diseño
• Convenciones de nombres de archivos
• Flujo de trabajo de despliegue

Este archivo persiste entre sesiones, así que Claude retiene el contexto sobre tu proyecto incluso cuando inicias una nueva conversación. No puedo exagerar cuánta diferencia hace esto — convierte a Claude de un asistente genérico en un miembro del equipo que conoce el proyecto.

Paso 4: Instala los skills.

Los skills se instalan mediante comandos simples en Claude Code. Puedes descubrir los skills disponibles a través del directorio de skills de Claude. Para nuestro flujo de trabajo:

# The front-end design skill
/install-skill frontend-design

# The SEO audit skill
/install-skill seo-audit

La instalación es rápida — generalmente menos de un minuto. Una vez instalados, los skills están disponibles en todos tus proyectos, no solo en el directorio de trabajo actual.

Si has llegado hasta aquí, estás listo para hacer lo que a mí me tomó doce minutos y habría tomado un día completo de forma manual. La siguiente sección es donde se pone divertido.

El rediseño: de tema claro a oscuro en minutos

Empecé con un prompt simple. Nada elaborado. Sin instrucciones complicadas ni descripciones de varios párrafos.

"Convert this website from its current light theme to a modern dark theme with perfect contrast."

Eso es todo. Diecisiete palabras.

Claude se puso a trabajar. Esto es lo que vi suceder en tiempo real:

Primero, escaneó cada archivo HTML y CSS en el repositorio para entender el sistema de diseño existente. Identificó la paleta de colores — los fondos, colores de texto, bordes, acentos, sombras. Mapeó la jerarquía de componentes. Luego empezó a hacer cambios.

El fondo pasó de blanco (#FFFFFF) a un carbón profundo (#1a1a2e). El texto pasó de casi negro a un blanco roto (#e0e0e0) que es más fácil para la vista que el blanco puro sobre fondos oscuros — un detalle que la mayoría de los humanos hacen mal en su primer intento. Los colores de acento se ajustaron para mantener la viveza contra el fondo más oscuro. Los componentes de tarjeta recibieron ajustes sutiles de borde para mantener la separación visual sin verse agresivos.

Lo que me impresionó no fueron las elecciones de color — esas son bastante estándar para una conversión a tema oscuro. Lo que me impresionó fue la consistencia. Cada uno de los componentes fue actualizado. Sin elementos huérfanos de color claro. Sin violaciones de contraste. Sin momentos de "ups, me olvidé del footer" que plagan las conversiones manuales.

La conversión completa del tema tomó unos cuatro minutos.

Una cosa que me llamó la atención — Claude preservó el esquema de colores original como propiedades personalizadas de CSS con una clase light-theme, haciendo teóricamente posible agregar un interruptor de tema después. No lo pedí. El skill de diseño front-end aparentemente incluye eso como una buena práctica. ¿Inteligente? Sí. ¿Pedido? No. Es uno de esos momentos en los que te das cuenta de que el agente de IA está aplicando conocimiento que no solicitaste explícitamente, lo cual es tanto poderoso como algo que necesitas vigilar con cuidado.

Agregar una página de servicios sin escribir una sola línea

El siguiente prompt fue igual de directo:

"Create a new Services page that's consistent with the existing design. Update the navigation on both the index and services pages to include the new link."

Aquí es donde el entendimiento de Claude sobre los sistemas de diseño realmente brilla. No creó una página genérica cualquiera. Analizó las páginas existentes — la estructura del encabezado, el diseño del contenido, la escala tipográfica, el ritmo del espaciado, el formato del pie de página — y replicó todo para la nueva página de servicios.

El contenido que generó era tipo placeholder pero sorprendentemente relevante. Como el sitio de prueba estaba posicionado como una agencia de automatización con IA, la página de servicios incluía secciones para automatización de flujos de trabajo con IA, desarrollo de chatbots personalizados, integración de pipelines de datos y consultoría de IA. Cada servicio tenía una descripción, una lista con viñetas de entregables y un botón de llamada a la acción con estilos consistentes con el resto del sitio.

Las actualizaciones de navegación ocurrieron en ambas páginas simultáneamente. El menú del encabezado en la página principal ahora incluía un enlace de "Services". La página de servicios tenía la misma navegación con "Services" resaltado como la página activa. Sin enlaces rotos. Sin estilos que no coincidieran. Sin problemas de "olvidé actualizar la otra página".

Esto tomó unos tres minutos.

Aquí está la parte que me sorprendió. Cuando inspeccioné el HTML, Claude había agregado marcado semántico — elementos <nav> apropiados, atributos aria-current="page" en el ítem de navegación activo, y estructuró el contenido de servicios con una jerarquía de encabezados apropiada (H1 para el título de la página, H2 para cada servicio, H3 para subsecciones). Estos detalles de accesibilidad son cosas que muchos desarrolladores humanos se saltan cuando tienen prisa. El Claude potenciado con skills los incluyó por defecto.

Pero hay algo que quiero ser honesto al respecto. El contenido de los servicios en sí era genérico. Claude no conoce tus servicios reales — hizo suposiciones razonables basadas en el posicionamiento del sitio. Necesitarías reemplazar el contenido placeholder con tus descripciones reales de servicios. Esto no es una limitación de Claude; es una limitación de entrada. La IA no puede escribir descripciones precisas de servicios para un negocio del que no sabe nada. Sin embargo, el trabajo estructural que hace te ahorra la parte tediosa para que puedas concentrarte en el contenido.

La auditoría SEO que encontró lo que yo me perdí

Ahora la parte de la que más dudaba. La auditoría SEO involucra tanto análisis técnico como juicios subjetivos. He ejecutado cientos de auditorías SEO manualmente y con herramientas como Screaming Frog, Ahrefs y Google Search Console. ¿Podría el skill SEO de Claude realmente competir?

El prompt: "Run a full SEO audit on this website."

La auditoría de Claude fue exhaustiva. Produjo un informe estructurado que cubría cada factor SEO on-site importante, organizado por prioridad:

Problemas críticos encontrados:

• Sin archivo robots.txt (los motores de búsqueda no tenían instrucciones de rastreo)
• Sin sitemap XML (los motores de búsqueda no podían descubrir páginas eficientemente)
• Favicon faltante (se ve poco profesional y afecta el reconocimiento de marca en pestañas/marcadores)
• Meta descriptions duplicadas o faltantes en las páginas

Problemas de alta prioridad:

• Tags Open Graph faltantes (malas previsualizaciones al compartir en redes sociales)
• Tags Twitter Card faltantes (mismo problema, específico de Twitter)
• Jerarquía de encabezados incompleta en la página de servicios
• Sin URLs canónicas especificadas

Recomendaciones de prioridad media:

• Mejoras en alt text de imágenes
• Oportunidades de enlaces internos
• Sugerencias de schema markup
• Consejos de optimización de velocidad de página

Lo que me llamó la atención fue la especificidad. La auditoría no solo decía "agrega meta descriptions". Identificaba exactamente qué páginas tenían problemas y cuál era su estado actual. El hallazgo del robots.txt era legítimo — muchos desarrolladores que despliegan sitios simples olvidan este archivo por completo, y puede causar desperdicio de presupuesto de rastreo en sitios más grandes.

Luego di la instrucción que realmente puso a prueba el sistema: "Implement all the recommended SEO fixes."

Claude organizó la implementación en dos fases. La fase uno cubrió los ítems críticos y de alta prioridad: crear robots.txt, generar un sitemap XML, agregar meta descriptions a cada página, implementar tags Open Graph y Twitter Card, agregar una referencia al favicon y corregir la jerarquía de encabezados.

La fase dos manejó los ítems de prioridad media: mejorar alt text, agregar URLs canónicas e implementar schema markup básico.

Cada corrección se implementó directamente en el código fuente. Podía ver los diffs desplazándose mientras Claude modificaba archivo tras archivo. El robots.txt que generó era limpio y estándar:

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

El sitemap incluía todas las páginas con fechas <lastmod> y valores <changefreq> apropiados. Las meta descriptions eran únicas por página y estaban dentro del rango recomendado de 150-160 caracteres. Los tags Open Graph incluían og:title, og:description, og:image y og:url apropiados para cada página.

Tiempo total para la auditoría SEO completa y la implementación: unos cinco minutos.

Lo único que Claude hizo mal

Prometí ser honesto, así que aquí va.

La implementación del favicon fue técnicamente correcta pero prácticamente incompleta. Claude agregó el tag <link rel="icon"> a cada archivo HTML y referenció una ruta favicon.ico. ¿El problema? No creó realmente el archivo de imagen del favicon. Referenció un archivo que no existía.

Este es un tipo sutil pero importante de error que debes vigilar con los agentes de IA. El código era sintácticamente perfecto. El patrón de implementación era correcto. Pero el recurso real faltaba. Si desplegabas esto sin verificar, verías referencias rotas al favicon en la pestaña de red de tu navegador — un error 404 que es fácil de pasar por alto porque los navegadores manejan los favicons faltantes de forma elegante (simplemente no muestran ninguno).

Lo detecté porque me he entrenado para verificar las referencias a recursos después de cualquier proceso automatizado. Lección aprendida: los agentes de IA son excelentes en cambios a nivel de código pero pueden fallar en la frontera entre código y recursos. Siempre verifica que los archivos referenciados realmente existan.

Después de que se lo señalé, Claude inmediatamente generó un favicon SVG simple y actualizó la referencia. Problema resuelto en treinta segundos. Pero no lo habría detectado por sí solo — y esa es una limitación honesta que vale la pena conocer.

Por qué esto cambia las cuentas para los desarrolladores independientes

Déjame ponerle números a esto. Aquí está la comparación de tiempo para exactamente las mismas tareas:

Eso es aproximadamente una aceleración de 30-40x. Y la calidad del resultado fue comparable a lo que yo produciría manualmente — en algunos casos mejor, porque Claude no se saltó los pequeños detalles de accesibilidad que yo podría apurar cuando estoy cansado.

Pero aquí está lo que la mayoría de la gente no ve en estas comparaciones. El tiempo ahorrado no se trata solo de la tarea individual. Se trata de lo que ese tiempo ahorrado te permite hacer.

Cuando un cliente pide un cambio de tema y sabes que tomará tres horas, lo pospones para la semana siguiente. Cuando toma cuatro minutos, lo haces ahora mismo. La diferencia en capacidad de respuesta cambia la relación con el cliente por completo. Pasas de "ya llegaré a eso" a "ya está hecho". Ese cambio en el tiempo de entrega vale más que cualquier funcionalidad individual.

Para desarrolladores independientes y agencias pequeñas, esta es la historia real. No que la IA te haga perezoso — te hace lo suficientemente rápido como para decir sí a trabajo que antes no valía la pena en tiempo invertido.

Lo que haría diferente la próxima vez

Después de ejecutar este flujo de trabajo varias veces, he refinado mi enfoque. Esto es lo que me habría gustado saber desde el principio.

Dale más contexto a Claude desde el inicio. Mis prompts iniciales fueron mínimos, y Claude se desempeñó bien con ellos. Pero cuando empecé a incluir más detalle — "convert to dark theme using the brand colors #1a1a2e for background and #00d4ff for accents" — los resultados fueron aún más cercanos a lo que imaginaba. No pierdes nada siendo específico. La IA no se confunde con los detalles; se vuelve más precisa.

Revisa los diffs, no las páginas. Después de que Claude hace cambios, tu primer instinto es abrir el navegador y mirar el sitio. Resiste ese instinto inicialmente. Mira el diff de Git primero. El diff te muestra exactamente qué cambió, archivo por archivo, línea por línea. La inspección visual puede pasar por alto problemas ocultos (como el archivo de favicon faltante). Los diffs no mienten.

Haz commit entre prompts. Después de cada cambio importante (tema, nueva página, correcciones SEO), confirma los cambios en Git antes de pasar al siguiente prompt. Esto te da puntos limpios de reversión si algo sale mal en un paso posterior. No hice esto al principio y tuve que desenredar cambios cuando quise revertir una modificación específica.

No confíes ciegamente en las auditorías SEO. El skill de SEO de Claude es bueno — genuinamente bueno. Pero el SEO es parcialmente subjetivo y cambia con las actualizaciones del algoritmo de Google. Cruza las recomendaciones con tu propio conocimiento y las mejores prácticas actuales. Estuve de acuerdo con alrededor del 90% de lo que Claude recomendó. El otro 10% eran sugerencias válidas que no aplicaban a mi situación específica.

Mantén actualizado el archivo claude.md. A medida que tu proyecto evoluciona, actualiza el archivo de instrucciones. Dile a Claude sobre las decisiones de diseño que has tomado, las convenciones que quieres mantener, los archivos que no debe tocar. Cuanto más contexto tenga, menos probable será que haga cambios que entren en conflicto con tu visión.

Hacia dónde se dirige esto

Llevo más de dos años construyendo sistemas de IA para clientes a través de mi trabajo en agencia. La trayectoria es clara para mí, aunque la línea de tiempo no lo sea.

Ahora mismo, estamos en la etapa de "la IA como un desarrollador junior realmente rápido". Le das instrucciones claras, las ejecuta con precisión y tú revisas el trabajo. Eso ya es transformador para la productividad. Pero la siguiente fase — donde el agente identifica problemas proactivamente, sugiere mejoras y maneja pipelines de despliegue completos — viene más rápido de lo que la mayoría espera.

El ecosistema de skills es el acelerador clave. Cuando empecé a usar Claude Code, podía editar archivos y ejecutar comandos. Agregar los skills de diseño front-end y SEO esencialmente le dio experiencia especializada sobre sus capacidades generales. A medida que se desarrollen más skills — optimización de rendimiento, hardening de seguridad, integración de analítica, cumplimiento de accesibilidad — el alcance de lo que un solo prompt puede lograr seguirá expandiéndose.

¿Mi predicción? Dentro de un año, el flujo de trabajo estándar para desarrolladores independientes no será "construir el sitio, luego optimizarlo". Será "construir el sitio con un agente de IA que maneja la optimización como un paso incorporado". La separación entre desarrollo y optimización se difuminará hasta que sean el mismo proceso.

Para agencias como la mía, esto significa que podemos tomar más proyectos sin crecer proporcionalmente en personal. Eso no es una amenaza para los desarrolladores — es una liberación del trabajo de mantenimiento que nadie disfruta y todos evitan.

Tu turno

¿El sitio del cliente que mencioné al principio? Salió en producción el lunes por la mañana. Al cliente le encantó el tema oscuro. No notaron las mejoras de SEO — que es exactamente el punto. Un buen SEO es invisible para los usuarios y solo visible para los motores de búsqueda y los dashboards de analítica.

Tres semanas después, el tiempo promedio de carga de página del sitio bajó 0.4 segundos (la limpieza de meta tags redujo redirecciones innecesarias), y empezó a posicionarse para dos palabras clave long-tail para las que no había aparecido antes. Pequeñas victorias, pero medibles. El tipo de victorias que se acumulan con los meses.

Si has estado posponiendo el mantenimiento del sitio web, los rediseños o la limpieza de SEO porque el trabajo se siente tedioso — configura Claude Code con estos dos skills este fin de semana. Elige una página de un proyecto y prueba el flujo de trabajo. Los doce minutos que te tomará te convencerán más rápido que cualquier cosa que pueda escribir aquí.

Y la próxima vez que alguien te pida convertir un tema claro a oscuro, sonreirás en lugar de suspirar.

Trabajemos juntos

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

• Fiverr (builds personalizados e integraciones): 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