proyectos→redisenar-web-claude-code

Rediseñar una web con Claude y Claude Code

Un Proyecto, varios chats, una sola fuente de verdad.

Cómo rediseñé con Claude mi web, prácticamente sin tocar desde 2014, en unos diez días: un Proyecto, un chat para cada tarea y un documento vivo que lo mantiene todo unido.

Retro TV showing jonathanseo's website
Estado: en curso Tipo: Desarrollo web Stack:
  • ChatGPT
  • Claude
  • Claude Code
  • Claude in Chrome
  • Gemini
  • PHP
  • WordPress

El punto de partida

Mi web apenas había cambiado desde 2014. Ya sabes: «en casa del herrero, cuchillo de palo». Seguía haciendo SEO, campañas para el mercado italiano y mucho desarrollo web. Los clientes no dejaban de llegar, y entre tanto trabajo me olvidé de mi propia web internacional, que acabó tremendamente anticuada.

Mientras tanto, mi trabajo y mis intereses habían tomado otro rumbo: empecé a programar en Python, y luego vinieron la IA, el machine learning, el deep learning, la ciencia de datos… Hice un montón de proyectos, algunos para clientes, pero nunca los había enseñado. En octubre de 2026 decidí presentarme a un puesto de desarrollo de IA que me hacía especial ilusión, y de repente necesitaba un sitio donde mostrar lo que sé hacer. ¡Había llegado la hora de lucirse! Pero antes la web necesitaba un rediseño que llevaba años esperando, y una limpieza a fondo (y dolorosa) de contenidos de hace más de doce años. Y tenía unos diez días.

Claude y yo empezamos por acordar unos principios y valores que guiaran todo el proyecto, unos cuantos lemas y una historia de fondo:

Algo que en estos años ha quedado cada vez más claro: no se trata de delegarlo todo en la IA. Es una interacción que acelera el trabajo, pero que nunca debería sacar a la persona del circuito (human in the loop).

La configuración

Todo vivía en un único Proyecto de Claude, «Jonathanseo.com». Sus instrucciones recogían lo esencial que cada chat necesitaba saber:

La memoria del Proyecto añadía los datos que salían una y otra vez, como la forma de describir mis títulos en inglés.

Luego llegó la pieza más útil: un documento vivo, el Redesign Overview, conectado a todos los chats a través del conector de Docs. Recoge cada decisión, la estructura de la web, lo que está hecho y lo que queda pendiente. Cada chat lo lee antes de empezar y lo actualiza al terminar, así que ningún chat trabaja con información desactualizada.

Un chat para cada tarea

En lugar de una conversación interminable, le di a cada tarea grande su propio chat dentro del Proyecto:

  1. Posicionamiento y diseño. Este chat fue el que lo empezó todo, desde el nuevo posicionamiento hasta los textos de la cabecera, el estilo y la sección de contacto. También creó el documento de resumen.
  2. Limpieza de contenidos. Le pasé 16 meses de datos de Search Console, una exportación de backlinks y el sitemap. La regla: las páginas con backlinks reales reciben una redirección 301, y las que no tienen ni impresiones ni backlinks, un 410. Doce años de actualizaciones de viajes se convirtieron en una nueva cronología: en la versión en español, la sección Dónde estoy.
  3. Reescritura de páginas. Cada vez que una página necesitaba más atención, tenía su propio chat. Así nacieron la página Sobre mí y la sección de Servicios de la home, además de un plan para reescribir mi antigua página de SEO en Italia.
  4. Proyectos. La sección de Proyectos es una gran novedad de la nueva web, y cada proyecto está escrito a partir del código real que tengo en mi portátil (o en un servidor de producción). Claude Code lee el código y redacta un resumen en un archivo .md, y a partir de ahí escribimos la página.

Cada chat se mantuvo centrado en lo suyo, y ninguno tuvo que cargar con toda la historia. El documento de resumen lo mantenía todo unido. Aunque, lo reconozco, a veces las cosas se mezclan y un chat acaba haciendo el trabajo de otro (como programar una sección mientras todavía estamos hablando de ella).

Las herramientas de alrededor

Los chats se encargaron de pensar y escribir. Otras herramientas hicieron el resto:

¡Y echa un vistazo a las páginas 404 y 410! Estoy muy orgulloso de ellas. 🙂

Lo que salió

Un nuevo tema de WordPress con un diseño nuevo, construido en torno a un nuevo posicionamiento: SEO y desarrollo de IA. Para todo lo demás, echa un vistazo por la web. Puede que cuando leas esto siga siendo un trabajo en curso, pero en casa del herrero, por fin, el cuchillo ya es de acero.

contacto

Hablemos.

¿Necesitas ayuda con algo? ¿Buscas un profesional de confianza que crea en el karma*?

Cuéntamelo aquí, o escríbeme un email. Respondo en dos días laborables.

* es decir: primero el valor y la integridad; la recompensa llega después.