Si alguna vez has abierto Elementor con la página en blanco y no sabías qué colores poner, qué tipografía elegir o cuánto espacio dejar entre bloques, este artículo es para ti.
He creado dos skills para Claude que resuelven justo eso. La primera te ayuda a crear un sistema de diseño completo sin saber nada de diseño. La segunda lo lleva a Elementor de forma ordenada, con variables y clases globales. Las dos son gratis y puedes descargarlas al final del artículo.
Qué es una skill de Claude
Una skill es un paquete de instrucciones que le enseña a Claude a hacer una tarea concreta siempre de la misma manera. En lugar de explicarle cada vez cómo quieres que trabaje, se lo explicas una sola vez y Claude lo aplica cuando toca.
Skill 1: Crear un sistema de diseño sin saber diseñar
Un sistema de diseño es el conjunto de reglas visuales de tu web: colores, tipografías, tamaños, espacios, esquinas y cómo se ven los botones, las tarjetas o los formularios. Es lo que hace que una web parezca coherente y profesional en lugar de un collage.
El problema es que, para crearlo, normalmente hay que saber de diseño. Esta skill le da la vuelta: no te pregunta qué estilo te gusta, te enseña opciones y tú eliges.
Cómo funciona
- Contexto. Claude te hace unas pocas preguntas: qué tipo de web es, para quién y cómo quieres que se perciba (cercana, moderna, fiable…). Si le pasas la URL de tu web actual, la analiza.
- Tres direcciones visuales. Te muestra tres propuestas distintas, una al lado de otra, cada una con su paleta, sus tipografías, un titular, un botón y una tarjeta de ejemplo. Eliges una o las combinas («los colores de la A con la tipografía de la C»).
- Ajustes finos. Preguntas cerradas y rápidas: esquinas rectas o redondeadas, diseño aireado o compacto, con sombras o sin ellas, modo oscuro sí o no.
- El sistema completo. Con todo decidido, genera:
- Colores con nombre según su función (primario, texto, fondo, error…), no según su aspecto.
- Tipografías con tamaños fluidos que se adaptan solos al móvil.
- Escala de espacios, radios, bordes, anchos y duración de las animaciones.
- Componentes base: botones, tarjetas, campos de formulario y secciones claras y oscuras.
Además, comprueba el contraste de cada color de texto sobre su fondo para que todo se lea bien y cumpla accesibilidad. Si una combinación no llega al mínimo, la ajusta y te lo dice.
El resultado te lo entrega como documento visual, en variables CSS y en JSON, así que sirve para Elementor, Figma o cualquier otra herramienta.
Skill 2: Diseñar en Elementor con tu sistema de diseño
Tener un sistema de diseño está muy bien, pero si luego en Elementor pones colores y tamaños a mano en cada widget, vuelves al caos. Esta skill hace que Claude maquete en Elementor v4 usando variables y clases globales, conectado a tu web por MCP.
Qué necesitas
Para que Claude pueda trabajar dentro de tu web necesitas dos cosas:
- El plugin Easy MCP instalado en tu WordPress. Es el que conecta tu web con Claude para que pueda leer y editar páginas.
- El MCP de Elementor activado en Elementor. Sin él, Claude puede conectarse a WordPress, pero no puede crear variables, clases ni maquetar con Elementor.
Cómo trabaja
- Revisa lo que ya existe antes de crear nada, para no duplicar variables ni clases.
- Te pregunta qué tipo de trabajo es: desde cero, rediseño completo o rediseño parcial. En un rediseño parcial no toca lo antiguo.
- Te propone las variables y clases nuevas y espera tu confirmación antes de crearlas.
- Todo sale de una variable: colores, tamaños, espacios, radios y transiciones. Nada de valores sueltos.
- Clases con lógica: una clase base y sus variantes (
boton+boton-primario), con nombres que se entienden solo leyéndolos. - DOM ligero: cada contenedor tiene que tener un motivo para existir.
- Accesibilidad: un solo H1 por página, jerarquía de encabezados correcta, contraste revisado y textos alternativos en las imágenes.
- Trabajo seguro: edita una página cada vez, prueba primero en páginas de poco riesgo y revisa el resultado en móvil, tablet y escritorio.
Cómo usarlas juntas
- Descarga las dos skills y añádelas a Claude.
- Pídele a Claude: «Crea un sistema de diseño para mi web» y pásale la URL o cuéntale de qué va tu proyecto.
- Elige entre las opciones visuales que te enseña hasta tener el sistema completo.
- Instala el plugin Easy MCP, activa el MCP de Elementor y conecta tu web con Claude.
- Pídele: «Aplica este sistema de diseño en Elementor y maqueta la portada».
En el vídeo te enseño el proceso completo con un ejemplo real, desde una web abandonada hasta el rediseño en Elementor.
Descarga las skills gratis
Sin registros ni correos: descárgalas y úsalas.