El 12 de octubre abrí Claude con una idea que venía postergando hace meses: rehacer diegodigital.com. El 13 en la noche el sitio nuevo ya estaba publicado.
Antes de que pensés “claro, la IA lo hizo todo”: no. Claude hizo muchísimo trabajo, pero el proyecto salió bien por la forma en que lo trabajamos. En este artículo te cuento el proceso completo, el prompt con el que arranqué y cuáles skills me sirvieron de verdad (y cuáles instalé y casi no usé).
El punto de partida: una vitrina que no vendía
Mi web anterior se veía bien, pero tenía problemas que yo ya no veía de tanto mirarla:
- Los cursos decían “Próximamente” desde hacía meses.
- Había enlaces que no llevaban a ningún lado.
- No tenía ni un testimonio, aunque los tenía guardados.
- Le hablaba a todo el mundo: emprendedores, estudiantes, empresas. O sea, a nadie en particular.
Y lo más importante, que descubrí en el paso 1: le estaba hablando a la persona equivocada.
Paso 1: contexto antes que diseño
No empecé pidiendo “haceme una web bonita”. Le pasé a Claude la carpeta con mis presentaciones de talleres (8 archivos, desde programas para gerencias hasta talleres para ONGs y eventos como WordCamp) y le pedí que analizara qué vendo de verdad.
Este fue mi mensaje, apenas editado:
Armemos un plan para generar un sitio web que destaque, que me ayude a promocionar mis cursos. Ahí hay una carpeta con el tipo de cursos que he vendido u ofrecido en el pasado. Analizalo y haceme una propuesta de sitio web y qué elementos podríamos ir dejando o descartando de la versión anterior de la web.
La respuesta me cambió el enfoque. De 6 programas, 5 estaban pensados para empresas, cooperativas, ONGs o eventos. Mi web le hablaba a emprendedores; mi negocio le vende a equipos.
Además encontró cosas que yo tenía repartidas sin darme cuenta: un método propio que repito en todos los talleres (rol, contexto, tarea y formato), frases que uso siempre y hasta una inconsistencia en las cifras que daba en distintos lugares.
La lección: la IA no puede proponerte algo bueno si no conoce tu negocio. Dale material real (presentaciones, propuestas, correos con clientes) antes de pedirle cualquier diseño.
Paso 2: reglas de marca que la IA pueda leer
Con la propuesta aprobada, armamos un archivo llamado DESIGN.md. Es un documento de texto con las reglas visuales de la marca: colores, tipografías, tamaños, botones y espacios. Lo mismo que le explicarías a un diseñador nuevo el primer día.
Usamos el formato design.md que publicó Google, que tiene un revisor automático: si una regla está mal escrita o se contradice, te avisa.
Y acá pasó algo que no esperaba. Mi manual de marca decía que los botones dorados llevaban texto blanco. Claude midió el contraste y me mostró que daba 2 a 1: el texto casi no se leía, y menos en un celular al sol. Lo cambiamos a texto azul oscuro, que da más de 8 a 1. Llevaba años usando ese botón.
Paso 3: Claude propone, yo decido
Antes de construir nada, Claude me armó una vista previa de la portada. La miré y le dije lo que pensaba: “¿Estás seguro de que este diseño va a destacar? Me parece que se ve muy WordPress”.
Hizo una segunda versión con otra composición, otras tipografías y un encabezado azul con más movimiento. Esa fue la que elegí, y después le seguí pidiendo ajustes: más efectos en el hero (sin romper la usabilidad), un pie de página con mejor concepto y los testimonios en un carrusel que la persona controla.
La lección: tu criterio es la mitad del trabajo. Si algo no te convence, decilo con tus palabras. “Se ve muy plantilla” es una instrucción perfectamente válida.
Paso 4: construir directo en WordPress
Para la construcción usé CrocoBuilder, un constructor para WordPress que se puede manejar desde la IA mediante un MCP (más abajo te explico qué es). Así Claude creaba las páginas, los componentes y los estilos directamente en el sitio, sin que yo copiara y pegara código.
Trabajamos primero en un sitio de pruebas (una copia de la web en un subdominio) y yo revisaba cada página antes de seguir. Cuando todo estuvo bien, lo pasamos al sitio real.
Lo que quedó listo en esos dos días:
- La portada nueva
- Una página para cada programa de capacitación, con su propio formulario
- Un configurador para que cada empresa arme su capacitación a la medida
- El blog con el diseño nuevo
- Contacto, Sobre mí, políticas legales y el aviso de cookies
Qué hizo Claude y qué hice yo
Claude: ordenó la estructura del sitio, escribió el código, propuso los textos, revisó el contraste y cómo se veía en el celular, y encontró errores (enlaces rotos, formularios que enviaban a un correo equivocado).
Yo: definí a quién le vendo, elegí el diseño, puse las fotos y los testimonios reales, revisé cada texto y tomé las decisiones de negocio (por ejemplo, no publicar precios y trabajar todo por propuesta).
No le pido a la IA que piense por mí. Le pido que piense conmigo.
Las skills que usé (y las que no)
Primero, tres términos rápidos:
- Skill: un paquete de instrucciones que le enseña a Claude a hacer una tarea de una forma específica. Se instala una vez y Claude la usa cuando la necesita.
- MCP: una conexión que le permite a Claude operar otra herramienta (en este caso, WordPress) en lugar de solo darte instrucciones.
- Claude Code: la versión de Claude que trabaja con archivos y herramientas en tu computadora. Fue lo que usé para todo el proyecto.
Al inicio instalé 9 skills de diseño y escritura. Siendo honesto, el peso lo hicieron unas pocas:
| Herramienta | Qué hace | ¿La recomiendo? |
|---|---|---|
| Mi skill de marca | Le da a Claude mis colores, logo, tipografías y tono sin explicárselo cada vez | Sí, es la primera que deberías crear (acá está la guía oficial de skills) |
| taste-skill | Evita los diseños genéricos “hechos con IA” y empuja propuestas con más personalidad | Sí, se nota en el resultado |
| design.md (Google) | El formato del archivo de reglas de diseño, con revisor automático | Sí, si vas a construir un sitio o una app |
| MCP de CrocoBuilder | Le permite a Claude construir directamente en WordPress | Sí, si tu sitio está en WordPress |
| Navegador de Claude | Claude abre el sitio, lo revisa y detecta errores visuales | Sí, ahorra muchísimas idas y vueltas |
| ui-ux-pro-max, Impeccable, Humanizer, Stop-slop, Graphify, Understand-Anything y awesome-design-md | Revisión de interfaces, escritura y análisis de proyectos | Las instalé, pero en este proyecto no fueron decisivas |
Mi consejo: no instalés 10 skills porque las viste en un video. Empezá por una skill de tu marca y agregá otras cuando tengas un problema concreto que resolver.
Lo que no salió perfecto
Para que no parezca un comercial:
- Los límites de uso. En un proyecto así de largo me topé varias veces con el límite de mi plan y tuve que esperar para seguir.
- Restos del sitio anterior. Los estilos viejos de Elementor se colaban (por ejemplo, enlaces en rosado) y hubo que limpiarlos uno por uno.
- El caché. El plugin de caché del hosting escondía los cambios y tuvimos que configurarlo aparte.
- Las fotos dependieron de mí. La IA no tiene tus fotos de talleres ni tus testimonios. Sin material real, el sitio se hubiera visto como cualquier otro.
El prompt para empezar tu propio rediseño
Este es el mensaje del paso 1 convertido en plantilla. Cambiá lo que está entre corchetes:
Quiero rediseñar mi sitio web: [URL].
Te adjunto [presentaciones, propuestas o materiales] de lo que vendo hoy.
Antes de proponer cualquier diseño, analizá ese material y decime:
1. Qué vendo realmente y a quién (por tipo de cliente y por servicio).
2. Qué frases, métodos o ideas repito y podrían ser mensajes de marca.
3. Qué de mi sitio actual conviene mantener, mejorar o eliminar, y por qué.
4. Qué inconsistencias encontrás (cifras, nombres de servicios, mensajes).
Con eso, proponeme la estructura del sitio (páginas y secciones) y el mensaje principal de la portada. Todavía no escribas código: primero quiero aprobar la propuesta.Lo que te llevás
Rediseñar un sitio con IA es trabajar por etapas: primero contexto, después reglas, después propuestas que vos aprobás y, al final, la construcción.
Es la misma forma de trabajo que les enseño a los equipos en mis capacitaciones: la IA como copiloto en un proyecto real.
¿Querés que tu equipo aprenda a trabajar así? Mirá los programas de capacitación o armá tu programa a la medida.
