Diseño web con Claude que no parece plantilla

Lo que te llevas

Los archivos

La regla

El gusto se instala, no se pide

"El gusto sale de las skills que instalas y de las referencias que das, no de pedirlo por favor."

"Hazme un sitio bonito" da el mismo sitio que a todos. Lo que cambia el resultado es lo que Claude sabe de diseño (las skills) y a qué se tiene que parecer (tus referencias).

Pruébalo hoy, sin instalar nada: elige 2 sitios que te gusten y escribe en una línea qué sientes al verlos ("limpio y caro", "cálido y cercano"). Esas dos ligas y esa línea son lo que más mejora el resultado, con o sin skills.

La configuración

Las herramientas y el orden

1. Instala las skills de diseño. Emil Kowalski Design e Impeccable le enseñan a Claude composición, tipografía, espacios y animación modernos. Desde la raíz de tu proyecto:
   npx skills@latest add emilkowalski/skills --skill emil-design-eng -a claude-code npx impeccable install --providers=claude --scope=projectCopiar
   Quedan en .claude/skills/. Fuentes: emilkowalski/skills, pbakaus/impeccable.
2. Agrega la skill de gusto, la que hace la diferencia. Le deja a Claude tomar estructura y sensación de sitios reales de alto nivel en vez de inventar composiciones sosas.
   npx skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -a claude-codeCopiar
   Si dice "No matching skills found", cópiala directo de GitHub:
   git clone --depth 1 https://github.com/Leonxlnx/taste-skill /tmp/taste-skill cp -R /tmp/taste-skill/skills/taste-skill .claude/skills/design-taste-frontendCopiar
   Fuente: Leonxlnx/taste-skill.
3. Conecta las herramientas para construir y probar. Figma MCP para el diseño y Playwright para que Claude abra el sitio en un navegador real, tome capturas y arregle lo que esté roto antes de que lo veas.
   claude mcp add --scope project playwright npx @playwright/mcp@latest claude mcp add --scope project --transport http figma https://mcp.figma.com/mcpCopiar
   Abre Claude Code en la carpeta (claude), aprueba los servidores del proyecto y escribe /mcp para entrar a Figma. Fuentes: microsoft/playwright-mcp, figma/mcp-server-guide.
4. Dale un brief de director creativo. No le digas "hazme un sitio". Dile para quién es, qué se tiene que sentir, a qué se parece, qué secciones lleva y tu marca. El brief está abajo.
5. Ajusta como diseñador. La primera vuelta da el 80%. Pide cosas concretas, no sensaciones: números de espacio, un botón en vez de dos, capturas de antes y después.

Los archivos

Copia o descarga

Lee instalar.sh antes de correrlo, como cualquier script de internet.

Cuando se ve genérico

Arreglos rápidos

Cuídalo

Tu información

Las skills y los servidores se instalan solo en la carpeta de tu proyecto. Figma te pide iniciar sesión con tu cuenta; no pegues contraseñas ni llaves en el chat ni en el brief.