--- title: Cómo diseñar páginas web con Claude y 4 herramientas url: https://stephanobrooke.ai/biblioteca/disena-paginas-web-con-claude-skills-y-playwright/ description: Haz que Claude diseñe páginas web menos genéricas con skills de animación y diseño más Playwright para revisar su trabajo. author: Stephano Brooke lang: es-MX --- // paso a paso · palabra clave: web # Diseña páginas web con Claude skills, Impeccable y Playwright **9 min** de lectura por **[Stephano Brooke](https://stephanobrooke.ai/sobre-mi/)** actualizado **octubre 2026** 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: **Prompt 01** ``` Voy a diseñar una página web contigo. Quiero instalar, una por una, estas 4 piezas: la skill de animaciones de Emil Kowalski, la skill Impeccable de Paul Bakaus, la skill Taste y el servidor MCP de Playwright de Microsoft. Para cada una dime primero el comando exacto de instalación, de dónde viene y qué hace, y espera mi 'listo' antes de pasar a la siguiente. Antes de instalar algo, muéstrame el repositorio y confirma que es el oficial. ``` **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: **Prompt 02** ``` Dime qué skills tengo instaladas ahora, de dónde vino cada una y para qué sirve. Si falta alguna de estas 3 (animaciones de Emil Kowalski, Impeccable, Taste), dime por qué no se instaló y cómo corregirlo. ``` 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. **Prompt 03** ``` Usa Playwright para abrir https://example.com, dime qué ves en la página y confirma que puedes tomar una captura de pantalla. Si algo falla, dime qué instalar. ``` 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: **Prompt 04** ``` Diseña una página web de una sola pantalla larga para [tu negocio o proyecto]. Mi cliente ideal es [quién]. Lo que quiero que haga quien entre es [escribirme, comprar, agendar]. Tono: [cercano, profesional, divertido]. Colores: [los que quieras o 'propón tú una paleta']. Usa las skills de diseño que instalamos (animaciones, Impeccable y Taste). Evita el aspecto genérico de plantilla. Escribe el código en esta carpeta y, cuando termines, ábrela con Playwright, revísala en pantalla de computadora y de celular, y corrige lo que no se vea bien. ``` **Prompt 05** ``` Abre la página con Playwright y revísala como si fueras un cliente nuevo: qué entendiste en los primeros 5 segundos, qué se ve cortado o desalineado, qué texto cuesta leer y qué botón no se nota. Hazme una lista y corrige lo que sea urgente. ``` **Prompt 06** ``` Usa los comandos de Impeccable para revisar esta página: audit (qué está mal), polish (arreglos finos) y critique (qué cambiarías primero). Aplica solo lo que mejore la claridad y dime qué cambió. ``` **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. **Bonus 01** ``` Reescribe los textos de mi página para que cada sección responda: qué hago, para quién y qué sigue. Usa frases cortas, sin palabras rebuscadas. Muéstrame el antes y el después. ``` **Bonus 02** ``` Revisa la página en un tamaño de celular con Playwright. Lista lo que se ve apretado, cortado o difícil de tocar, y corrígelo. ``` **Bonus 03** ``` Revisa qué hace que mi página pese o cargue lento (imágenes, fuentes, animaciones) y propón cambios que no afecten el diseño. Explícamelos antes de aplicarlos. ``` **Bonus 04** ``` Revisa mi página: contraste de colores, tamaño de texto, textos alternativos de imágenes y orden de lectura. Dame una lista y corrige lo que se pueda. ``` **Bonus 05** ``` Escribe el título, la descripción y los encabezados de mi página pensando en lo que escribiría un cliente en Google: [qué busca]. No inventes datos sobre mi negocio. ``` **Bonus 06** ``` Hazme dos versiones del inicio de mi página, una sobria y otra más atrevida, con la misma información. Ábrelas con Playwright y dime cuál comunica mejor y por qué. ``` **Bonus 07** ``` Haz una lista de revisión antes de publicar mi página: enlaces que funcionan, formulario de contacto, aviso de privacidad, datos de contacto y título de la pestaña. ``` **Bonus 08** ``` Explícame, para alguien que no programa, las opciones más simples para publicar esta página y conectar mi dominio (por ejemplo Cloudflare Pages o Netlify). Dime qué cuesta y qué necesito, sin hacerlo todavía. ``` ## 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](https://stephanobrooke.ai/paginas-web-y-seo/). Y si quieres ver otros conectores para Claude, tienes la guía de [4 conectores MCP para Claude](https://stephanobrooke.ai/biblioteca/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. [descargar PDF →](https://stephanobrooke.ai/pdf/Guia_WEB_StephanoBrooke.pdf) ## Preguntas frecuentes **P:** ¿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. **P:** ¿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. **P:** ¿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. **P:** ¿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. **P:** ¿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. ## Guías relacionadas [Crea una skill de Claude para humanizar tus textosHaz que Claude evite los patrones que delatan a una IA y guarda el método como una skill. Los 3 prompts, paso a paso.](https://stephanobrooke.ai/biblioteca/crea-una-skill-de-claude-para-humanizar-tus-textos/) [Instagram Agent Skill: 13 skills de Claude para Instagram13 skills gratis para Claude que preparan tu Instagram: reels, captions, plan semanal y perfil. Instalación, prompts y qué NO hacen.](https://stephanobrooke.ai/biblioteca/instagram-agent-skill-13-skills-de-claude-para-instagram/) [8 prompts de ChatGPT para armar tu marca y sitio webChatGPT arma tu marca completa y tu sitio web en una sola tarde. 8 prompts en cadena, listos para copiar y pegar.](https://stephanobrooke.ai/biblioteca/8-prompts-chatgpt-armar-marca-y-sitio-web/) // quién escribe **[Stephano Brooke](https://stephanobrooke.ai/sobre-mi/)**, consultor de automatización con IA para negocios. Lo siguen 300 mil personas en Instagram, donde comparte IA aplicada en español, y automatiza procesos para negocios en México como agencias aduanales, transportistas y despachos de arquitectos. ## ¿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. [Quiero automatizar mi negocio →](https://stephanobrooke.ai/consultoria/#formulario) ## ¿Te sirvió esta guía? Cada semana mando 1 correo de 2 minutos con lo nuevo que estoy probando en IA. Gratis, sin spam.