Rehíce toda mi web con IA en una semana 🔥

Te cuento algo: hasta hace dos semanas, mi presencia en internet era un collage. Mi sitio rojo.me tenía un estilo (uno de los templates que venían levemente modificado), la tienda donde vendo mis cursos en vivo un diseño aún peor, el newsletter que recibes todas las semanas otro más, y cada banner de mis redes sociales los había hecho a mano con cariño, pero todos cons diseños distintos y escasas habilidades de diseño. Funcionaba, pero no estaba integrado bajo una misma marca y diseños. Y yo que vengo del mundo del marketing sufría al verlo pero no hacía nada al respecto.

Así que entre el 4 y el 11 de octubre me lancé a rehacerlo todo con IA: la web, el diseño del Resumen Resumido, la tienda de cursos, páginas nuevas, la portada de mi comunidad y hasta unas mini apps gratuitas online. 🚀

Y no, no escribí código. Lo que sí hice fue decidir, revisar y corregir, muchas veces. En este post te muestro cómo lo hicimos, qué herramientas usé y qué aprendí, para que puedas aplicarlo en tus propios proyectos aunque nunca vayas a hacer una web.

🧰 Primero, las herramientas (en simple)

Antes de contarte el proceso, te presento al equipo. Si alguna te suena a chino, no te preocupes: te explico para qué sirve cada una.

→ Claude Design: ahí armé Órbita, el sistema de diseño de mi marca Rodrigo Rojo ®. Es como el libro de recetas visual: colores, letras, íconos y reglas de qué va con qué.
→ Claude Code: el agente que construye. No es un chat: trabaja dentro de un computador, crea los archivos, los prueba, saca capturas y corrige. Yo le explico qué quiero y reviso lo que hace.
→ Claude Cowork: mi espacio de trabajo con Claude en el escritorio. Ahí vive el «kit» de Órbita que usan las demás conversaciones.
→ Ghost: la plataforma donde viven rojo.me y el newsletter. Piensa en un WordPress, pero que además de blog, está hecho para escribir y mandar newsletters.
→ Shopify: es mi plataforma de e-commerce favorita, donde tengo mi tienda de cursos, donde cada alumno paga y se registra en mis cursos en vivo.
→ Una copia local: una copia de mi web que vive en mi computador, con mis posts reales, para probar todo sin romper el sitio de verdad. Es como ensayar una receta en tu cocina antes de cocinar para invitados.
→ GitHub: guarda cada versión de lo que hicimos, como el historial de cambios de un Google Docs. Si algo sale mal, se vuelve atrás. Yo no sé usarlo, pero mis agentes lo hacen por mí.

🎨 Paso 1: el libro de recetas antes de cocinar

Lo primero que hice, antes de tocar una sola página, fue que armé Órbita en Claude Design: le pasé mis colores, presentaciones, diseños que me gustaban, entre otras cosas y nos pusimos a investigar e iterar. Llegamos mi nuevo logotipo (la doble R que ves al inicio de la página), a una paleta de colores a la que bautizamos con nombres de flores chilenas (un rojo que se llama copihue, un amarillo llamado amancay y un naranjo quintral, entre otros), una tipografía, íconos, unos dibujos que se repiten (un sol con cumbres, un planeta rojo, una constelación de puntitos) y dos modos: el modo oscuro que bautizamos Luna, y un modo claro al que llamamos Sol, para tener para documentos, web y otras aplicaciones.

Es una mezcla entre synthwave, retrofuturismo, y algunos elementos del neo-brutalismo. Estuve HARTO rato pidiendo cambios, dando imagenes de inspiración, ajustes, investigando, hasta que fuimos encontrando algo que me representaba.

Te lo digo de una: esto fue lo más importante de todo el proyecto. Si le pides cosas a la IA sin reglas, cada pieza sale con un estilo distinto y terminas con otro collage, solo que más rápido. Con un sistema, la IA tiene reglas claras que seguir, por ejemplo:

→ Un solo toque de rojo por pantalla, para que el botón importante sea lo primero que ves.
→ Titulares que combinan una letra gruesa con una delgada.
→ Botones con esquinas suaves, nunca en forma de cápsula.

El dedicar una tarde completa a armar este sistema de diseño permitió que todo el resto fluyera mucho mejor. Porque ya no era "agrega un botón" sino que la IA sabía perfectamente los tipos de botón que teníamos. Y ahí Claude Design funciona de maravilla.

🛠️ Paso 2: armar el taller

Para poder hacer esto lo primero era tener un lugar dónde hacerlo, y ahí la recomendación principal es NO LO HAGAS EN PRODUCCIÓN. Hazlo en una copia local en tu computador. En mi caso, usé a Notro, un computador que tengo encendido siempre en la casa 24/7 para jugar con IA sin romper nada. Ahí dejé trabajando una sesión de Claude Code y ahí vive la copia local de la web.

Lo mejor es que me podía conectar desde cualquier parte: el notebook, el PC de la casa o el celular. Para eso usé dos cosas: Tailscale, que conecta todos mis equipos en una red privada (es realmente mágico y no necesitas saber nada técnico para instalarlo, de hecho le puedes pedir a tu IA que te guíe), y Remote Control de Claude, que me deja seguir la misma conversación con Claude desde la app de escritorio de cualquier computador y del celular. Más de una revisión la hice desde el celular, entre una charla y otra, y debo confesar que también le pedí un par de cambios directamente desde el baño 🤣

Y acá va un truco que te sirve para cualquier proyecto largo con IA: dejarle las reglas por escrito, en vez de repetirlas en cada conversación.

→ Un archivo de instrucciones con qué es rojo.me, qué ya está decidido y qué nunca se hace sin preguntarme.
→ Skills, que son como manuales que el agente lee cuando los necesita. Usé tres: Órbita para la web, mi forma de escribir y una de comunicación efectiva basada en el método de Neville Medhora.
→ Un documento de estado que se actualiza al terminar cada bloque. Cuando una conversación se hace muy larga, la IA resume su memoria para poder seguir, y con este documento nada se pierde en el camino.

🏠 Paso 3: rojo.me, una casa con un propósito

La primera pregunta no fue de diseño. Fue: ¿para qué existe mi web? La respuesta: para que te suscribas al Resumen Resumido y descubras más sobre mí, es a través de mi newsletter que te enteras de todo lo demás. Desde ahí, cada bloque de la portada te invita a dar un pasito más: leer lo último, ver un video, entrar gratis a la comunidad, conocer los cursos o llevar la IA a tu equipo.

En el camino nos dimos cuenta que para ciertas partes de mi audiencia necesitabamos armar páginas específicas: Empresas para los que quieren saber más sobre mis cursos y talleres para empresas, Sobre mí para el que quiere saber sobre mí, la Caja de Herramientas para el que quiere encontrar las mejores apps de IA, Recursos de IA para el que quiere aprender más de IA y tener un lugar donde partir, Contacto por si alguien quiere contactarme, un flujo bienvenida para quien recién se suscribe al newsletter, una de privacidad basada en la nueva ley chilena de datos personales y una página de error que, en vez de aburrirte, te deja jugar a atrapar estrellas. Y yo solo le fui diciendo qué quería crear, por qué queríamos crearlo y entregarle la información clave para ir armándola.

¿Y qué hice yo? Decidir y corregir. La IA propone rápido, pero el criterio lo pones tú. No hay nada en la página que YO no haya querido incluir, no hay nada que no venga de algún documento, instrucción o materiales que ya tenía armados. La gracia es que yo alimenté a mis agentes para que entendieran bien la cancha donde estábamos jugando.

Pero eso no quita que igual haya que SIEMPRE revisar lo que hacía, por ejemeplo:

→ «ODIO los kicker»: la IA agrega casi siempre estas etiquetitas en mayúscula que se ponen sobre los titulares. Apenas vi que las incluyó le pedí eliminarlas del sistema de diseño, de la web, y mucho más. Se fueron de todo el sitio y quedaron prohibidas.
→ El agente le puso un fondo a unos textos para que se leyeran mejor, y quedó horrible. Le pregunté si había revisado con sus propias reglas o si había innovado sin pensar. El problema de verdad era que había demasiado texto. Lo arreglamos cortando, no decorando.
→ Cuando yo le pasaba un texto mío, le pedía que no lo copiara tal cual: «cuestiónalo con la skill, no seas literal, para eso estás tú». La idea es que yo daba la base, usaba skills que diseñamos previamente para mejorarlos, y hacíamos una pequeña ronda de mejoras hasta llegar a algo mejor.

Antes de publicar también revisamos lo que no se ve. Por ejemplo, la portada «saltaba» mientras cargaba y quedó firme, y la accesibilidad (que la web se pueda usar bien, incluso con lectores de pantalla) quedó en 100 de 100.

🚀 Paso 4: publicar, un paso a la vez

El domingo en la noche pasamos todo desde la copia local a la web de verdad. El agente lo hizo conectándose a Ghost con unas llaves de acceso que creé me indicó que nos pasaba la plataforma, y luego le dije "vamos, empieza a traspasar todo a producción". Y en cosa de minutos mi web se veía hermosa (al menos a mis ojos).

Te confieso algo: el agente me empezó a tirar demasiadas instrucciones al mismo tiempo y le tuve que decir «a ver, más despacio, cerebrito, explica qué estamos haciendo». 😅 Desde ahí fuimos un paso a la vez: subir el diseño, crear las páginas, hacer que las direcciones antiguas lleven a las nuevas y revisar cada cosa antes de seguir. Cuando tocas algo que ya está funcionando, esa calma vale oro.

Esa misma noche aprovechamos de ordenar la casa, le pedí que hiciera una revisión de TODO el contenido: posts, páginas, vistas, etc, y encontró un montón de cosas que fuimos arreglando:

→ Revisamos los links de todos mis posts antiguos: había 388 rotos y quedaron 9, que dejé así a propósito.
→ Los «invítame un café» que iban a Patreon ahora invitan a la comunidad en Skool.
→ El correo del Resumen Resumido se rediseñó con Órbita, con fondo papel y una cabecera nueva.
→ Armamos una bienvenida automática de tres correos para quien se suscribe.

🛒 Paso 5: tienda.rojo.me, donde se compra

La tienda de cursos estaba en un diseño genérico de Shopify que, siendo honesto, era horrible. La regla que definimos fue simple: la página de cada curso es su página de venta (como la de Claude Desbloqueado), y la portada de la tienda es el catálogo con todos los cursos.

Para que Claude pudiera trabajar ahí, lo conecté a Shopify con un «enchufe» que se llama MCP: así el agente puede leer y editar los cursos directamente, sin que yo copie y pegue nada. Lo bueno es que Shopify publicó su MCP para conectar a casi todas las IAs principales (y además de ayudar con el diseño, te puede ayudar con la gestión de la tienda)

Cuando vi la primera versión, la sentí tímida, casi sin color. Le pregunté al agente por qué estábamos restringiendo tanto el rojo, probamos con más color y después le pedí una evaluación seria de si nos habíamos pasado. De ahí salió una regla que ahora uso en todo: más color, pero cada color con intención. Las fechas, las sesiones y el formato quedaron destacados porque con eso decides. Y el horario de cada país lleva su banderita, para que encuentres el tuyo al tiro. 🇨🇱

¿Y lo más loco? Una noche me fui a dormir y le pedí que ordenara todo lo pendiente, avanzara sin esperarme y me anotara lo que quería que revisara. Al despertar tenía casi todo listo y una lista corta de decisiones para mí.

✨ Paso 6: la marca fuera de la web

Con Órbita funcionando, llevarla a otros lugares fue mucho más rápido:

→ Banners para LinkedIn y X que explican qué es el Resumen Resumido. El primer intento se lo devolví con un «le tienes miedo al espacio»: había que agrandar todo, sumar textura y una ruta con un cohete que llega al newsletter.
→ Skool: la comunidad pasó a llamarse «Patrulla Roja - IA en simple», con portada, ícono y descripción nuevos.
→ Las portadas del aula llevan un color por sección, para que encuentres a dónde ir de un vistazo: dorado para la Caja de Herramientas, turquesa para los Workshops.
→ Cada curso tiene su medallón, como el ícono de una app, que se repite en la web, la tienda y el aula.
→ Y también lo llevamos a mis diapositivas, propuestas comerciales e imágenes para redes sociales.

📄 Paso 7: páginas con una misión

Luego tocó crear algunas páginas particulares para distintas cosas que tenía flotando y que ahora podía ordenar y unificar.

El catálogo para empresas (rojo.me/catalogo/). Pensado para mandarlo por WhatsApp, así que lo diseñamos primero para el celular: las tablas se transforman en tarjetas, los logos de las empresas aparecen apenas entras y el formulario de contacto está al final de la misma página, con un botón que te acompaña mientras bajas.

apps.rojo.me. Unas mini apps gratis que funcionan en tu navegador, sin registro, y lo que escribes no sale de tu computador: Formato para LinkedIn (negrita y una vista previa de dónde LinkedIn corta tu post), Carrusel en PDF (de texto a carrusel en un minuto) y un Teleprompter que además graba tu video. Acá le di carta blanca al agente con una sola instrucción: «sorpréndeme». Y lo hizo. 🤯

Un agente revisando a otro. Le pedí a Shelldon, mi agente personal hecho con Hermes, que revisara la Caja de Herramientas, y encontró cosas que se nos habían pasado: ya eran 132 herramientas y no 129, y en un lado decía «10 favoritas» cuando había 11. También me propuso cambiar «Todas probadas» por algo más honesto, y quedó «Elegidas una a una».

⚡ Paso 8: que cargue rápido en tu celular

La última parte fue la menos vistosa, pero importa: que todo cargue rápido en el celular. Para medirlo usé el velocímetro de Google (se llama PageSpeed) y encontramos dos cosas bien curiosas:

→ Las letras de la web se descargaban dos veces por un detalle en cómo estaban conectadas. Arreglado.
→ Cada página cargaba una imagen que solo sirve para imprimir, una textura que hace que el grano se vea bien en un PDF. En la web era peso muerto. La sacamos de los tres sitios y ahora se queda solo en las presentaciones y propuestas, que es donde sirve.

Y una lección que me quedó grabada: otro agente me dijo que la página de un curso sacaba 44 de 100 en velocidad. Antes de arreglar nada, le pedí que lo confirmara. Medido varias veces y simulando un celular de verdad, el número real andaba cerca de 80, y lo que más pesaba eran cosas que pone la propia Shopify. Si hubiéramos arreglado a ciegas, habríamos perdido el tiempo en lo que no era.

🗺️ Tu mapa: lo que aprendí y puedes copiar

Aunque nunca vayas a hacer una web, esto te sirve para cualquier proyecto con IA:

→ Define para qué existe lo que vas a hacer. Una sola meta ordena todas las decisiones.
→ Arma tu libro de recetas primero. Colores, tono y reglas. Si le das reglas a la IA, multiplica la consistencia; si no, multiplica el desorden.
→ Prueba en una copia. Nunca experimentes directo en lo que ya está funcionando.
→ Escribe las reglas una vez. Un documento con lo decidido te ahorra repetirte en cada conversación.
→ Tu criterio es el producto. La IA propone rápido; tú decides qué se queda. Mis mejores momentos fueron un «no, así no» bien explicado.
→ Revisa con tus ojos, en el celular. Ahí es donde te van a ver.
→ Un paso a la vez cuando tocas algo en vivo.
→ Mide antes de arreglar, y si puedes, pon a una IA a revisar lo que hizo otra.

Fue una semana intensa y estoy muy orgulloso de cómo quedó. 🔥