Claude puede diseñarte una web profesional: las 3 cosas que tienes que instalarle (guía 2026)

Claude puede diseñarte una página web con acabado de agencia, pero no tal y como viene. Hay que instalarle tres cosas. Aquí tienes cuáles, el comando exacto de cada una y cómo usarlas paso a paso, aunque no hayas programado nunca.

📅 Actualizado: octubre 2026 · ⏱️ Lectura aproximada: 14 minutos

La respuesta corta:

• Sin ayuda, Claude diseña la web más repetida de internet: tipografía Inter, degradados morados y tres iconos en columna. No es un fallo, es cómo funcionan todas las IAs.
• Lo 1 — Las skills de diseño de Emil Kowalski y de Impeccable: le enseñan a elegir letras, espacios y animaciones, y detectan los vicios típicos de la IA.
• Lo 2 — La skill Taste: le da criterio para que la web parezca de agencia y no de plantilla.
• Lo 3 — Conectarle Figma y Playwright: con Figma convierte tus diseños en una web de verdad; con Playwright abre la web, la prueba como un cliente y arregla los fallos.
• Las skills y Playwright son gratis y de código abierto. Lo que no es gratis es Claude Code: necesita como mínimo el plan Pro (20 $/mes). Figma tiene plan gratuito, pero con 20 usos al mes de la conexión con Claude.

Revisado el 9 de octubre de 2026. Comandos comprobados en los repositorios oficiales de cada herramienta y en la documentación de Claude Code. Son proyectos que se actualizan a menudo: si un comando falla, abre el enlace de su repositorio y copia el que aparezca allí.

¿Vienes del vídeo? Los comandos, aquí

Si has comentado CLAUDE en el reel, esto es lo que te prometí. Abre Claude Code en la carpeta de tu web y pega este mensaje tal cual. Claude instala las cinco herramientas una a una y te avisa si falta algo:

Cuando termine, cierra Claude Code y vuelve a abrirlo para que cargue todo. El resto de la guía te explica qué hace cada herramienta y cómo sacarle partido.

Por dónde empezar según tu caso

Mi recomendación: si solo vas a instalar una, que sea Impeccable. Es la que más cambia el resultado con menos esfuerzo.

Unirme al canal de WhatsApp →

Por qué Claude, sin ayuda, te hace la misma web que a todos

Pídele a Claude "una landing moderna para mi negocio" y te saldrá esto: titular centrado, subtítulo gris, botón oscuro, tres iconos en tres columnas y un degradado morado de fondo. La misma web que ya existe miles de veces.

Lo explica la propia Anthropic, la empresa que hace Claude: los modelos eligen la opción más probable según lo que han visto, y en internet lo que más abunda son los diseños seguros. Lo llaman convergencia distribucional, y ponen como ejemplo justo eso: la tipografía Inter y los degradados morados sobre blanco. Su solución son las skills: instrucciones que Claude carga solo cuando las necesita y que le dan decisiones concretas de diseño. Leer el artículo de Anthropic

Las tres cosas de esta guía son exactamente eso: skills y conexiones que le dan a Claude el criterio que no trae de serie.

Una aclaración antes de seguir: estas herramientas mejoran cómo diseña Claude. Pero si tú no le dices qué web quieres, para quién y qué tiene que hacer el visitante, seguirá rellenando huecos con lo más repetido. El método para dárselo lo tienes en 🖼️Cómo diseñar tu web con IA sin que parezca hecha con IA: 3 pasos con prompts (guía 2026). Las dos guías se complementan: aquella es el qué, esta es el con qué.

Antes de empezar: qué necesitas

1. Una suscripción de pago de Claude. Claude Code no entra en el plan gratuito. El más barato que lo incluye es Pro: 20 $ al mes, o 17 $/mes si pagas el año entero (200 $). Ver precios oficiales
2. Claude Code instalado (abajo tienes el comando).
3. Node.js, versión 18 o superior. Lo necesitan los instaladores de las skills y Playwright. Si no sabes si lo tienes, pregúntaselo a Claude Code: lo comprueba él.
4. Una carpeta para tu web, aunque esté vacía. Por ejemplo, mi-web en el escritorio.
5. Opcional: una cuenta de Figma, solo si ya diseñas ahí o quieres hacerlo.

Instalar Claude Code

Abre la terminal (en Windows, busca "PowerShell" en el menú de inicio) y pega el comando de tu sistema. Son los oficiales de la documentación de Claude Code:

Windows (PowerShell):

irm https://claude.ai/install.ps1 | iex

Mac o Linux:

curl -fsSL https://claude.ai/install.sh | bash

Cuando termine, cierra la terminal, ábrela de nuevo, entra en la carpeta de tu web y arranca Claude Code:

cd Desktop/mi-web
claude

La primera vez te pedirá iniciar sesión con tu cuenta de Claude en el navegador. A partir de ahí ya puedes hablarle en español, como en un chat.

💡 Si no quieres usar la terminal: Claude Code también funciona dentro de la app de escritorio de Claude y en el editor VS Code. La terminal sigue siendo la forma más directa de instalar las herramientas de esta guía.

Lo 1: las skills de diseño de Emil Kowalski e Impeccable

Son las dos colecciones de skills de diseño más usadas en GitHub para esto. Hacen cosas distintas y se complementan.

Skills de Emil Kowalski: el detalle y las animaciones

Qué es: 14 skills gratuitas (licencia MIT) de Emil Kowalski, diseñador e ingeniero que creó la librería de notificaciones Sonner. Según su repositorio, recogen sus años de experiencia en empresas de producto. La mayoría se centra en animación y en los detalles que hacen que una interfaz se sienta cuidada.

Las más útiles para una web de negocio:

• emil-design-eng: la principal. Animación y consejos generales de diseño.
• find-animation-opportunities: te dice dónde una animación ayudaría y, sobre todo, dónde no animar.
• review-animations: revisa las animaciones que ya tienes con sus reglas.
• break-ui: pone tu web a prueba con datos extremos: nombres muy largos, listas vacías, cifras enormes. Así ves si algo se rompe antes de que lo vea un cliente.
• mobile-native: pequeños arreglos para que la web se sienta como una app en el móvil.

Instalación:

npx skills@latest add emilkowalski/skills

Este comando usa el instalador de skills de Vercel (skills.sh), que funciona con Claude Code y con otros asistentes de programación. Si te pregunta en qué asistente instalarlas, elige Claude Code.

Prompt para usarla:

Usa las skills de Emil Kowalski para revisar mi web.
1. Con find-animation-opportunities, dime dónde una animación sutil ayudaría al visitante y dónde sobra movimiento.
2. Con break-ui, prueba los textos más largos, las listas vacías y los números grandes, y dime qué se rompe.
No cambies nada todavía: dame primero la lista ordenada por importancia.

Resultado esperado: una lista corta de mejoras concretas ("el botón de reservar no da respuesta al pulsarlo", "el nombre del servicio largo rompe la tarjeta en móvil").

Error habitual: pedirle "anima la web". Acabarás con todo moviéndose. Las animaciones buenas casi no se notan: el botón que responde, el menú que entra suave. Pide primero dónde, no cuánto.

Impeccable: lo que más cambia el resultado

Qué es: un lenguaje de diseño para asistentes de IA creado por Paul Bakaus (licencia Apache 2.0), construido sobre la skill de diseño oficial de Anthropic. Trae 24 comandos y 59 reglas automáticas que detectan los fallos típicos de las webs hechas con IA.

Lo que detecta y evita, según su repositorio:

• Tipografías gastadas como Inter, Arial o las del sistema.
• Degradados de morado a azul.
• Tarjetas metidas dentro de otras tarjetas.
• Texto gris sobre fondos de color.
• Negro y gris puros en vez de neutros con un toque de color.
• Animaciones con rebote o efecto elástico.
• El icono en un cuadrado redondeado encima de cada título.

Instalación (desde la carpeta de tu web):

npx impeccable install

También se puede instalar como plugin dentro de Claude Code con /plugin marketplace add pbakaus/impeccable y después eligiéndolo en /plugin. El autor recomienda el comando de arriba.

Los comandos que vas a usar más: todos se escriben como /impeccable + el comando.

Si usas mucho uno, /impeccable pin audit te crea el atajo /audit. La lista completa de los 24 comandos está en su repositorio.

Prompt para empezar:

/impeccable critique

Contexto: es la web de [tu negocio] para [tu cliente ideal]. La acción principal que quiero es [reservar / pedir presupuesto / escribir por WhatsApp].
Ordena los problemas de más a menos grave para ese objetivo, no por estética.

Prompt de seguimiento:

Arregla los 3 primeros problemas de la lista. Después ejecuta /impeccable audit y dime qué reglas siguen fallando.

Error habitual: encadenar bolder, quieter, colorize y polish sin mirar el resultado entre uno y otro. Cada comando cambia cosas. Uno, miras, decides, siguiente.

Lo 2: la skill Taste para que no parezca una plantilla

Qué es: un conjunto de skills gratuitas (licencia MIT) que empujan a la IA hacia un diseño más deliberado en composición, tipografía, movimiento y espacios. La principal se llama design-taste-frontend.

Lo que la hace especial: tiene tres "diales" del 1 al 10 que tú controlas:

• DESIGN_VARIANCE: bajo, composiciones centradas y limpias. Alto, asimétricas y más modernas.
• MOTION_INTENSITY: bajo, solo efectos al pasar el ratón. Alto, movimiento al hacer scroll.
• VISUAL_DENSITY: bajo, mucho aire. Alto, mucha información junta (paneles, dashboards).

Instalación (solo la skill principal):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Si quitas lo de --skill, instala todo el paquete: incluye variantes como redesign-existing-projects (para rediseñar una web que ya tienes), minimalist-ui, high-end-visual-design o industrial-brutalist-ui.

Qué valores poner según tu negocio:

Son puntos de partida, no reglas. Lo bueno de los diales es que puedes probar dos valores y comparar.

Prompt para crear la primera versión:

Prompt de seguimiento:

Haz una segunda versión de la cabecera con DESIGN_VARIANCE [4] y ponlas una al lado de la otra para compararlas. No cambies nada más.

Error habitual: subir los tres diales al máximo "para que impresione". Una clínica con movimiento al hacer scroll y composición rompedora no transmite confianza, transmite que no sabes lo que quieres.

Lo 3: conéctale Figma y Playwright

Las skills le enseñan a diseñar. Estas dos conexiones (en el mundo de Claude se llaman MCP) le dan manos: una para leer tus diseños y otra para usar la web como un cliente.

Figma: de tu diseño a una web de verdad

Qué hace: con la conexión oficial de Figma, le pegas a Claude el enlace de un diseño y lo convierte en código respetando colores, tipografías y espacios, en vez de imaginárselo a partir de una captura.

Instalación (dentro de Claude Code):

/plugin install figma@claude-plugins-official

O desde la terminal, sin abrir Claude Code:

claude plugin install figma@claude-plugins-official

Viene del catálogo oficial de plugins de Anthropic, que Claude Code añade solo la primera vez que lo abres. Ver la guía oficial de Figma

💡 Lo que tienes que saber del plan gratuito: con el plan Starter de Figma (gratis) la conexión permite hasta 20 usos al mes. En los planes de pago, con asiento Dev o Full, sube a 200 al día. Para diseñar una web pequeña, 20 se quedan cortos si vas pantalla a pantalla. Ver los límites oficiales

Prompt para usarlo:

Implementa este diseño de Figma como página web: [pega aquí el enlace del frame]

- Respeta exactamente colores, tipografías y espacios del diseño.
- Si algo no se puede hacer igual en web, dímelo antes de cambiarlo.
- Hazlo adaptable a móvil aunque el diseño sea solo de escritorio, y explícame qué has decidido.

Error habitual: pasarle el enlace del archivo entero. Selecciona el frame (la pantalla concreta) en Figma, copia su enlace y pásale ese. Gastas menos usos y el resultado es más fiel.

¿No tienes Figma? No lo necesitas para empezar. Taste e Impeccable funcionan perfectamente sin él. Figma compensa si ya diseñas ahí o trabajas con un diseñador.

Playwright: Claude prueba tu web como un cliente

Qué hace: Playwright es una herramienta de Microsoft para controlar un navegador. Con su conexión para Claude (gratis, licencia Apache 2.0), Claude abre tu web, hace clic en los botones, rellena los formularios, cambia el tamaño de pantalla y ve lo mismo que vería un cliente. Si algo falla, lo arregla y vuelve a probar.

Instalación (desde la terminal):

claude mcp add playwright npx @playwright/mcp@latest

También está como plugin oficial: /plugin install playwright@claude-plugins-official dentro de Claude Code. Ver el repositorio oficial

Prompt para usarlo:

Resultado esperado: una lista de fallos reales ("el botón de WhatsApp no abre nada", "en móvil el menú tapa el titular") y los arreglos ya comprobados.

Error habitual: pedirle que pruebe "la web" sin decirle qué tiene que hacer un cliente. Dale el recorrido: entrar, ver el servicio, pulsar reservar. Prueba eso primero.

La alternativa oficial de Anthropic

Si prefieres empezar con algo más sencillo, Anthropic tiene su propia skill de diseño en su catálogo oficial, la misma en la que se basa Impeccable:

/plugin install frontend-design@claude-plugins-official

Es más corta y menos exigente. Impeccable va bastante más lejos.

El flujo completo: de "quiero una web" a una web revisada

Las herramientas sueltas ayudan. En orden, son un sistema. Este es el recorrido que te recomiendo:

1. Decide qué web quieres con el brief de 4 piezas de 🖼️Cómo diseñar tu web con IA sin que parezca hecha con IA: 3 pasos con prompts (guía 2026).
2. Primera versión con Taste (o desde Figma si ya tienes el diseño).
3. Crítica y pulido con Impeccable: critique, arreglar lo grave, polish.
4. Detalles con Emil Kowalski: animaciones donde ayudan y break-ui para ver qué se rompe.
5. Prueba final con Playwright: móvil, ordenador, botones y formularios.

Prompt que encadena los pasos 3 a 5:

¿Y cuando la web esté lista?

Claude Code te deja los archivos en tu carpeta. Para publicarla sin complicarte, puedes arrastrar esa carpeta a Netlify Drop y te da una dirección pública. Si tu web tiene formularios, pagos o reservas, pídele a Claude que te explique qué necesitas antes de publicar.

Y para las imágenes, no uses fotos de banco: en la guía del método tienes cómo generar una cabecera propia con Higgsfield dejando hueco para el titular.

¿Quieres que tu web capte clientes y no solo que se vea bien? En IAEmpresa diseñamos sistemas de IA para negocios: web, captación por redes y seguimiento automático de cada contacto. Reserva 15 minutos con Arti.

Caso práctico: Fisio Norte, de plantilla a web propia

Para que veas el recorrido entero. Es un ejemplo ilustrativo, no un cliente real.

El negocio: Fisio Norte es una clínica de fisioterapia de barrio. Su web la hicieron con IA en una tarde: degradado morado, titular "Tu salud, nuestra prioridad" y tres iconos de un corazón, un músculo y un calendario. Nadie reservaba desde ella.

1. Taste. Piden la página de inicio con DESIGN_VARIANCE 4, MOTION_INTENSITY 2 y VISUAL_DENSITY 3: quieren transmitir confianza, no espectáculo. En el brief dejan claro el objetivo: que el visitante reserve su primera valoración.

2. Impeccable. /impeccable critique les devuelve cinco problemas. Los dos más graves: el botón de reservar se pierde entre otros tres botones iguales, y el texto gris claro sobre fondo beige no se lee al sol. Lo arreglan y pasan /impeccable polish.

3. Emil Kowalski. find-animation-opportunities propone solo dos cosas: que el botón de reservar responda al pulsarlo y que el horario aparezca suave al hacer scroll. break-ui encuentra que el servicio "Fisioterapia de suelo pélvico postparto" rompe la tarjeta en móvil.

4. Playwright. Prueba el recorrido "entrar, ver tratamientos, reservar". Encuentra que el botón de WhatsApp del móvil abre un número mal escrito. Lo corrige y lo vuelve a probar.

Resultado: una web sobria que solo podría ser de Fisio Norte, con un único botón de "Reservar valoración" que se ve a la primera y un recorrido de reserva comprobado. Sin haber escrito una línea de código.

Errores frecuentes

• Instalar las cinco cosas y no darle contexto. Las skills mejoran cómo diseña, no adivinan tu negocio. Sin brief, sale una plantilla más bonita, pero plantilla.
• No reiniciar Claude Code después de instalar. Si una skill "no aparece", cierra y vuelve a abrir Claude Code.
• Instalar skills de cualquier repositorio sin mirarlo. Una skill son instrucciones que Claude sigue. Instala solo de fuentes conocidas, como las de esta guía.
• Aplicar todos los comandos de Impeccable seguidos. Uno, miras, decides.
• Subir los diales de Taste al máximo. Más movimiento no es más profesional.
• Pasar a Figma el archivo entero. Gastas los 20 usos gratis enseguida. El enlace del frame, no del archivo.
• Publicar sin probar en móvil. La mayoría de tus clientes te verán ahí. Playwright lo hace por ti en un minuto.
• Dejar que invente opiniones y cifras. Prohíbeselo en el brief. Publicar testimonios inventados es engañar a tus clientes.

Preguntas frecuentes

¿Claude puede diseñar una página web gratis?

Las herramientas de esta guía sí son gratis: las skills de Emil Kowalski, Impeccable, Taste y la conexión de Playwright son de código abierto. Pero Claude Code, que es lo que crea los archivos y prueba la web, necesita como mínimo el plan Pro (20 $ al mes). Con el plan gratuito de Claude puedes pedirle el código de una página y copiarlo tú, pero sin este flujo. Ver precios oficiales

¿Necesito saber programar?

No. Le hablas en español y él escribe el código. Lo que sí necesitas es saber qué quieres: para quién es la web y qué tiene que hacer el visitante. Y perderle el miedo a la terminal para pegar cuatro comandos.

¿Qué es una skill de Claude?

Un archivo de instrucciones que Claude carga solo cuando le hace falta. Por ejemplo, la de Impeccable le explica qué tipografías evitar y cómo revisar un diseño. Se instalan una vez y funcionan en todos tus proyectos. Si quieres ver qué más hay, tienes la guía 🤹‍♂️El mercado de los Skills.

¿Qué es un MCP?

Una conexión que le da a Claude acceso a otra herramienta. Las skills le dan conocimiento; los MCP le dan manos. Con el de Figma lee tus diseños; con el de Playwright usa un navegador.

¿Funciona en Windows?

Sí. Claude Code tiene instalador oficial para Windows (PowerShell). La documentación recomienda instalar también Git para Windows, para que Claude Code pueda usar todas sus herramientas. Ver la guía oficial

¿Figma es obligatorio?

No. Es útil si ya diseñas en Figma o trabajas con un diseñador. Si partes de cero, Taste e Impeccable te bastan. Ten en cuenta que en el plan gratuito de Figma la conexión con Claude tiene un límite de 20 usos al mes.

¿Es seguro instalar skills de GitHub?

Las de esta guía son públicas, muy usadas y con licencia abierta. Aun así, la regla general es: instala solo de fuentes que conozcas y, si tienes dudas, pídele a Claude Code que lea el repositorio y te explique qué hace antes de instalarlo.

¿En qué se diferencia esta guía de la de "Tu página web con Claude Code"?

Aquella explica cómo empezar con Claude Code y trucos generales. Esta va de las herramientas concretas que hacen que el diseño suba de nivel. Si nunca has usado Claude Code, empieza por 🌐Tu página web con Claude Code.

¿Puedo usar estas skills con ChatGPT o Codex?

El instalador npx skills funciona con varios asistentes de programación, no solo con Claude Code, y Taste tiene incluso una variante pensada para GPT y Codex (gpt-taste). Los comandos de esta guía están probados para Claude Code.

Conclusión

Claude no diseña mal. Diseña lo más probable. Las tres cosas de esta guía le quitan ese piloto automático: Emil Kowalski e Impeccable le enseñan qué está bien y qué delata a una web hecha con IA, Taste le da criterio, y Figma y Playwright le dan manos para leer tus diseños y probar el resultado como un cliente.

Empieza por lo mínimo: instala Claude Code, añade Impeccable y pásale /impeccable critique a la web que ya tengas. En diez minutos vas a ver la diferencia.

Unirme al canal de WhatsApp →

¿Quieres que tu web capte clientes, no solo que se vea bien?

Una web bonita es el principio. En IAEmpresa diseñamos el sistema completo:

• Qué tiene que ver y hacer tu cliente en cada página.
• Cómo conectar la web con tus redes y tu WhatsApp para que ningún contacto se pierda.
• Qué automatizar del seguimiento comercial.
• Cómo medir si la web trae clientes o solo visitas.

Si tienes un negocio y quieres que tu web trabaje para ti, reserva una llamada de diagnóstico de 15 minutos con Arti.

Reservar diagnóstico de 15 min con Arti →

Sin compromiso. Te diremos con claridad si podemos ayudarte.

Sigue aprendiendo

• 🖼️Cómo diseñar tu web con IA sin que parezca hecha con IA: 3 pasos con prompts (guía 2026)
• 🌐Tu página web con Claude Code
• 🌐7 IAs para crear tu web o tu app sin programar
• 🤹‍♂️El mercado de los Skills

Fuentes revisadas

• Anthropic: Improving frontend design through Skills
• Claude: planes y precios
• Claude Code: guía de inicio rápido
• Claude Code: instalar y gestionar plugins
• emilkowalski/skills (GitHub)
• pbakaus/impeccable (GitHub)
• Leonxlnx/taste-skill (GitHub)
• microsoft/playwright-mcp (GitHub)
• Figma: instalar el servidor MCP remoto
• Figma: límites y acceso del servidor MCP
• anthropics/claude-plugins-official (GitHub)
• skills.sh, el instalador de skills de Vercel

Sobre los enlaces: algunos de los enlaces a herramientas de esta guía son de afiliado. Si te das de alta a través de ellos, IAEmpresa puede recibir una comisión sin coste adicional para ti. No cambia lo que recomendamos: aquí solo hay herramientas que usamos de verdad, y cuando hay una alternativa más barata o gratuita, la decimos.

Autor: Arti, consultor de IA aplicada a negocios en IAEmpresa.

Última revisión: 9 de octubre de 2026.