La guía que te prometí en el video: cómo hacer que Claude diseñe páginas web menos genéricas, instalándole encima 3 skills de diseño y conectándolo a Playwright para que revise su propio trabajo en un navegador.
Incluye los prompts para cada paso, cómo describir tu página y la parte honesta: qué sí logra y qué no.
1. Lo que necesitas
Claude Code, la herramienta de Claude que trabaja desde la terminal y puede crear y editar archivos de un proyecto. Las skills de esta guía se instalan ahí. Necesitas un plan de Claude que lo incluya; revisa qué incluye el tuyo.
Node.js instalado (trae el comando npx, con el que se instalan las skills y Playwright).
Una carpeta vacía para tu proyecto de página web.
Una idea clara de tu página: a qué te dedicas, a quién le hablas y qué quieres que haga quien entre (escribirte, comprar, agendar).
Paciencia con la terminal: no tienes que saber programar, pero sí copiar y pegar comandos. El prompt 01 hace que Claude te guíe.
2. La idea en 30 segundos
Por defecto, Claude diseña páginas genéricas. La diferencia no está en lo que le escribes, sino en lo que le instalas encima. Son 4 piezas:
Una skill de animaciones de Emil Kowalski: le enseña a Claude su forma de pensar el movimiento, los tiempos y las transiciones para que la página se sienta real y no de plantilla.
Impeccable (de Paul Bakaus): 23 comandos que corrigen tipografía, contraste, estructura y espaciado, cada uno con una sola instrucción.
La skill Taste: en vez de un diseño genérico, se inspira en un sistema de diseño más cuidado.
Playwright, el servidor MCP de Microsoft: Claude abre la página en un navegador de verdad, la revisa y se corrige si algo no encaja.
Tip: En el video se dice 'Amy Kowalski'. El nombre correcto de quien creó la skill de animaciones es Emil Kowalski.
3. Paso 1: deja que Claude te guíe
Abre Claude Code en tu carpeta vacía (escribe claude en la terminal) y pega esto:
Qué pasa después: Claude te va dando los comandos uno por uno y verifica de dónde viene cada pieza antes de instalarla.
Tip: Las skills son instrucciones que Claude seguirá en tu computadora. Instala solo las que vengan de repositorios que reconozcas y revisa su contenido si tienes dudas.
Tip: Los nombres de los repositorios y comandos cambian. Si el comando de Claude falla, pídele que busque el repositorio actual.
4. Paso 2: las skills de diseño
Estos son los comandos de fondo. Claude los ajusta a tu caso:
Impeccable: se instala con npx skills add pbakaus/impeccable (confirma el comando en su repositorio).
La skill de animaciones de Emil Kowalski: está en su repositorio de GitHub (emilkowalski). Confirma el nombre actual del repositorio antes de instalarla.
Taste: es un proyecto de la comunidad (leonxlnx/taste-skill). Confírmalo en GitHub antes de instalarlo.
Qué pasa después: Claude te enseña la lista de skills y confirma que están las tres.
5. Paso 3: Playwright, para que Claude revise su propio trabajo
Este es el paso que cambia el resultado: Claude no solo construye la página, la abre y la mira.
En la terminal, dentro de tu proyecto, agrega el servidor con: claude mcp add playwright npx @playwright/mcp@latest
Reinicia Claude Code para que cargue el servidor.
Qué pasa después: Se abre un navegador, Claude entra a la página y describe lo que ve. Si lo logra, Playwright quedó conectado.
Tip: Las instrucciones de instalación de Playwright MCP pueden cambiar. Si el comando falla, revisa el repositorio de microsoft/playwright-mcp o pídele a Claude que lo busque.
6. Paso 4: describe la página que quieres
Con las 4 piezas listas, solo describes tu página. Mientras más claro seas, mejor sale:
Qué pasa después: En unos minutos tienes una primera versión que Claude ya revisó en el navegador. Casi siempre hace falta un par de rondas para que quede como la imaginas.
Tip: El primer resultado rara vez es el final. Pide cambios concretos ('hazlo más sobrio', 'cambia el botón por uno más grande') en lugar de pedir 'mejóralo'.
Tip: Guarda tus cambios con control de versiones o una copia de la carpeta antes de pedir rediseños grandes.
7. Prompts bonus
Mismo método, para sacarle más a tu página. Copia el prompt y cambia lo que va entre corchetes.
8. La parte honesta
El video dice que Claude diseña páginas 'mejor que muchas agencias'. Con estas herramientas puedes llegar a un resultado muy bueno, pero no hay garantía. Una agencia o un diseñador también hace estrategia, investigación de tu cliente, textos que convierten y acompañamiento. Esta guía te ayuda a construir una buena base, no a sustituir eso.
Esto no se hace desde el chat normal de Claude: las skills y Playwright se instalan en Claude Code, desde la terminal. Si no quieres usar la terminal, el prompt 04 también funciona en un chat normal, pero sin las 4 piezas el resultado será más genérico.
Las skills son instrucciones de terceros que se ejecutan en tu computadora. Revisa de dónde vienen y no instales nada de repositorios que no reconozcas.
'Taste' y 'Impeccable' son proyectos de la comunidad. Cambian de nombre y de versión. Los comandos de esta guía pueden dejar de funcionar: en ese caso, pide a Claude que busque el repositorio actual.
Una página web de verdad necesita más que diseño: dominio, publicación, aviso de privacidad, formulario que funcione y mantenimiento. El prompt bonus 07 te da la lista.
Playwright abre un navegador. No dejes a Claude navegar con tus sesiones del banco o del correo iniciadas, y no le pidas comprar ni enviar formularios reales.
Los prompts salen de los pasos del video y de cómo funciona cada pieza. Pruébalos primero con un proyecto pequeño.
9. Cómo usarlos
1. Abre Claude Code en una carpeta vacía y pega el prompt 01.
2. Instala las tres skills (prompt 02 para comprobar).
3. Conecta Playwright y pruébalo con el prompt 03.
4. Describe tu página con el prompt 04.
5. Deja que Claude la revise con el prompt 05 y pule con el 06.
6. Repite 2 o 3 rondas pidiendo cambios concretos.
7. Antes de publicar, usa el bonus 07.
Si prefieres que alguien lo haga por ti, mira mi servicio de páginas web y SEO. Y si quieres ver otros conectores para Claude, tienes la guía de 4 conectores MCP para Claude.
Llévate esta guía en PDF
Los pasos, los 6 prompts, los 8 bonus y las advertencias, en un solo archivo. Gratis.
Preguntas frecuentes
¿Puede Claude diseñar una página web?
Sí. Puede escribir el código de una página completa. Con skills de diseño y Playwright suele salir menos genérica, pero casi siempre necesita un par de rondas de ajustes.
¿Necesito saber programar?
No para describir la página, pero sí para usar Claude Code necesitas la terminal: copiar y pegar comandos y tener Node.js instalado. El prompt 01 hace que Claude te guíe.
¿Qué es Impeccable?
Es una skill de diseño de la comunidad, creada por Paul Bakaus, con 23 comandos para corregir tipografía, contraste, estructura, espaciado y más.
¿Qué hace Playwright en este método?
Es el servidor MCP de Microsoft que permite a Claude abrir tu página en un navegador de verdad, revisarla y corregirla.
¿Esto sustituye a una agencia o diseñador?
No hay garantía de que lo haga. Una agencia también hace estrategia, textos, investigación y mantenimiento. Esta guía sirve para construir una buena base propia.
¿Quieres que esto trabaje por ti?
Si tienes un negocio o un proceso que te quita horas cada semana, yo lo automatizo y te lo entrego funcionando. Tú no implementas nada. El diagnóstico ahora es gratis.
¿Te sirvió esta guía?
Cada semana mando 1 correo de 2 minutos con lo nuevo que estoy probando en IA. Gratis, sin spam.