El problema
Le pides una web a una IA y sale lo mismo que a todo el mundo: la misma letra, un degradado morado, tres tarjetas iguales y todo centrado. El cliente lo nota en dos segundos y piensa «esto lo hizo una máquina». No es que la IA no sepa diseñar: le faltan criterio y piezas buenas. Esta guía le da las dos cosas.
Qué necesitas
- Claude Code, que viene con los planes de pago de Claude (Pro o superior). Es el modo en el que Claude crea los archivos de tu web en tu computadora y los prueba.
- Node.js (gratis, en nodejs.org), solo si vas a instalar las piezas del paso 3.
- Una carpeta vacía para tu web. Abre Claude Code dentro de ella.
Paso 1 · Dale criterio: la skill oficial de diseño
Una «skill» es un archivo de instrucciones que Claude lee antes de trabajar. La de diseño la publica Anthropic, la empresa que hace Claude: le enseña a elegir letras con carácter, a ordenar la página por importancia, a dejar aire y a no abusar de sombras ni animaciones.
Dentro de Claude Code escribe:
/plugin install frontend-design@claude-plugins-official
Después escribe /plugin y confirma que aparece activada.
Paso 2 · Pídela bien: el brief que cambia el resultado
El 80 % de una web genérica sale de un pedido genérico. «Hazme una web bonita» da una web como todas. Copia este brief y llena lo que está entre corchetes:
Necesito una página web para [tu negocio y qué vendes]. Es para [quién es tu cliente: edad, ciudad, qué le preocupa]. Lo único que quiero que haga el visitante es [reservar una cita / escribir por WhatsApp / comprar]. Secciones: [inicio, el problema que resuelvo, cómo lo resuelvo, testimonios, precios, preguntas frecuentes, contacto]. Usa la skill frontend-design. Estilo: [sobrio y premium / cercano y alegre / técnico y serio]. Colores: [los de mi marca en código, por ejemplo #D4A020] o propónme 2 opciones. Usa mis textos reales, no relleno. Tiene que verse perfecta en el celular. Antes de empezar, hazme todas las preguntas que necesites.
Paso 3 · Si quieres subir otro nivel
Hay más piezas de terceros que le dan a Claude estilos y controles de calidad. Instálalas solo desde sus repositorios originales y revisa qué pide cada una:
- 21st.dev: una librería de componentes interactivos, como tablas de precios o encabezados con movimiento, que Claude busca y adapta a tu web. Necesita registrarte y crear una clave. Esa clave no se comparte con nadie.
- Impeccable: comandos para que Claude critique su propio diseño como un director de arte, detecte problemas de contraste y lo pula antes de publicar.
- Taste: estilos concretos, por ejemplo minimalista o premium de estudio. Elige uno solo por proyecto.
- Emil Kowalski: reglas para animar con propósito y no llenar la página de movimiento porque sí.
Estas piezas cambian seguido: lee las instrucciones vigentes en la página de cada una antes de instalarlas.
Prompts para mejorar lo que ya tienes
Esta es mi web actual: [enlace o captura]. Dime en 5 puntos qué la hace ver genérica: letra, espacios, orden, botones o fotos. Después rediséñala con la skill frontend-design, conservando mis textos, mis colores y mi logo.
Mejora solo la sección de [inicio / precios / testimonios]. Dame 3 versiones distintas, explícame en una línea qué cambia en cada una y aplica la que yo elija.
Lo que más falla
- Pedir por estilo sin contar el negocio: «moderna y limpia» no dice nada. Di a quién le vendes.
- Llenar la página de animaciones porque se puede: una o dos bien puestas valen más que veinte.
- Publicar sin probar en el celular, sin probar el formulario ni los enlaces.
- Copiar la web de otro: inspírate en ella, pero no la clones.
Cuándo ya necesitas que te la hagan
Si tu web tiene que agendar citas, cobrar, conectarse con tu WhatsApp o con tu sistema de facturación, ya no es solo diseño: es un sistema. Ahí conviene que te la arme alguien que conecte todo y la deje funcionando.