---
title: "Rediseñé mi sitio web con Claude en 2 días: el método, el prompt y las skills que usé"
url: "https://diegodigital.com/redisene-mi-sitio-web-con-claude/"
type: "post"
published: "2026-10-14T07:04:41-06:00"
modified: "2026-10-14T07:08:43-06:00"
author: "Diego"
---

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](https://crocoblock.com/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](https://claude.com/product/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](https://diegodigital.com/capacitaciones/) o [armá tu programa a la medida](https://diegodigital.com/capacitaciones/arma-tu-programa/).