Skills de diseño para agentes de IA: sitios sin cara de IA
Instala las skills de Emil Kowalski, Impeccable y Taste, y conecta los MCP de Figma y Playwright para que Claude Code, Codex o Cursor diseñe, construya, pruebe y revise por su cuenta.
18 de septiembre de 2026 · cauhi.com/es/learn/design-skills
Tutorial · IA agéntica · 20 min
Skills de diseño para agentes de IA: sitios sin cara de IA
Instala las skills de Emil Kowalski, Impeccable y Taste, y conecta los MCP de Figma y Playwright para que Claude Code, Codex o Cursor diseñe, construya, pruebe y revise por su cuenta.
Empezar tutorial
Todos los sitios hechos con IA se parecen: fuente Inter en todo, degradado de morado a azul, tarjetas dentro de tarjetas, un ícono en un cuadradito sobre cada título. Pasa porque los modelos aprendieron de las mismas plantillas. Esta guía instala tres skills de diseño que le enseñan gusto a tu agente, y dos servidores MCP que le permiten leer tu Figma y abrir su propio sitio en un navegador para probarlo y sacar capturas. Todo funciona en Claude Code, Codex y Cursor, y todo es open source o tiene plan gratis.
Antes de empezar
- Un agente de código: Claude Code, Codex o Cursor.
- Node.js 18 o más nuevo, para
npx. Compruébalo connode --version. - Una carpeta de proyecto abierta en la terminal. Las skills se instalan por proyecto, salvo que pidas instalación global.
- Una cuenta de Figma, si quieres usar el MCP de Figma. El servidor remoto funciona en todos los planes, incluido el gratis.
Skill y MCP, en palabras simples
Una skill es un manual. Es una carpeta con un archivo SKILL.md escrito por alguien con experiencia, que le dice al agente qué hacer y qué evitar. El agente lo lee cuando tu pedido encaja con él, o cuando llamas a la skill por su nombre. Sin servidor, sin clave de API.
Un MCP es una herramienta. Es un pequeño servidor que le da al agente manos nuevas: leer un archivo de Figma, abrir un navegador, hacer clic, sacar una captura. La skill dice cómo hacerlo bien; el MCP deja que el agente lo haga.
Skills de Emil Kowalski: animación y acabado
Emil Kowalski es design engineer en el equipo Web de Linear, antes estuvo en el equipo de diseño de Vercel y creó Sonner y Vaul, las librerías React de toasts y de cajones. Sus skills son lo que él corrige cuando revisa una interfaz: por ejemplo, el agente usa ease-in en una animación de entrada cuando lo correcto es ease-out, o un borde sólido donde iría una sombra semitransparente.
La principal es emil-design-eng (sobre todo animación, con consejos de diseño). El paquete trae otras, como animate, review-animations, improve-animations, apple-design, prototype, mobile-native y pick-ui-library.
En la carpeta del proyecto, ejecuta:
npx skills@latest add emilkowalski/skillsEl instalador lista las skills del paquete y pregunta cuáles quieres y para qué agentes. Para saltarte la pregunta de los agentes e instalar directo en Claude Code, Codex y Cursor:
npx skills@latest add emilkowalski/skills -a claude-code -a codex -a cursorAgrega -g para instalar en todos tus proyectos. Reinicia el agente después de instalar.
Primer uso. En un proyecto que ya tenga alguna animación, pide: "Usa la skill review-animations y revisa las animaciones de esta página." Para crear una desde cero: "Usa la skill animate para animar la apertura de este modal."
Impeccable: un vocabulario de diseño para tu agente
Impeccable es de Paul Bakaus, creador de jQuery UI, que pasó por Chrome DevTools, AMP y Web Stories en Google. Es una sola skill con 24 comandos que se convierten en un vocabulario compartido entre tú y el agente, y 61 reglas que detectan los vicios de los sitios hechos con IA sin usar ningún modelo: Inter en todo, degradados de morado a azul, tarjetas dentro de tarjetas, texto gris sobre fondo de color, el ícono en un cuadradito sobre cada título.
Desde la raíz del proyecto, ejecuta:
npx impeccable installEl instalador detecta los agentes que tienes (Claude Code, Codex, Cursor y otros), te deja ajustar la lista y pregunta si instalar en el proyecto o de forma global. Para decidirlo de antemano, usa --providers=claude,codex,cursor y --scope=project. También ofrece instalar un hook que ejecuta el detector cada vez que el agente edita un archivo de interfaz. Reinicia el agente después.
Luego, dentro del agente, ejecuta esto una vez por proyecto:
/impeccable initinit revisa el proyecto, pregunta solo lo que falta (público, objetivo, tono de voz) y lo guarda en un PRODUCT.md que leen todos los demás comandos. En Codex la skill se llama con $impeccable en lugar de /impeccable (por ejemplo $impeccable init), y hay que abrir /hooks y aprobar el hook del proyecto después de instalar.
Los comandos que más vas a usar:
/impeccable critiquehace una revisión de UX: jerarquía, claridad, impacto./impeccable auditejecuta los chequeos técnicos: accesibilidad, rendimiento, responsive./impeccable polishes la pasada final antes de publicar./impeccable boldery/impeccable quietervuelven el diseño más audaz o más sobrio./impeccable typesety/impeccable layoutcorrigen fuentes, espaciado y ritmo.
También puedes escribir en lenguaje natural: /impeccable rehaz esta sección hero. Y sin ningún agente, npx impeccable detect src/ (o una URL) lista los problemas de tu interfaz.
En Claude Code también puedes instalarlo como plugin: /plugin marketplace add pbakaus/impeccable, y luego instalarlo desde la lista de /plugin.
Taste: buen gusto desde el primer prompt
Taste Skill, de Leon Lin, se describe como una skill que le da buen gusto a tu IA y evita que genere lo genérico de siempre. Lee tu pedido, deduce el lenguaje visual y ajusta tres perillas de 1 a 10 al inicio del archivo: DESIGN_VARIANCE (cuánto se arriesga el layout), MOTION_INTENSITY (cuánta animación) y VISUAL_DENSITY (cuánta información por pantalla).
Instálala:
npx skills add Leonxlnx/taste-skillEl paquete trae varias skills; el instalador pregunta cuáles quieres. Para instalar solo la principal:
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"El mismo -a claude-code -a codex -a cursor del paso 1 funciona aquí. Otras skills del paquete que vale la pena conocer: gpt-taste (reglas más estrictas, pensadas para GPT y Codex), redesign-existing-projects (para mejorar un sitio que ya existe) y estilos listos como minimalist-ui, high-end-visual-design e industrial-brutalist-ui.
Primer uso. "Usa la skill design-taste-frontend y crea la landing page de una panadería artesanal." Compárala con lo que hacía tu agente antes.
Cuidado con las copias. Hay repositorios con nombres parecidos. El original es github.com/Leonxlnx/taste-skill, con el sitio tasteskill.dev.
Figma MCP: tu agente lee el diseño
El MCP oficial de Figma le permite al agente leer un frame (componentes, variables, layout) y convertirlo en código, y también escribir de vuelta en Figma. Usa el servidor remoto: funciona en todos los planes, incluido el gratis, y no necesita la app de escritorio. El servidor de escritorio requiere un asiento Dev o Full en un plan de pago.
Claude Code. Figma recomienda el plugin oficial:
claude plugin install figma@claude-plugins-officialReinicia Claude Code, escribe /plugin, ve a la pestaña Installed, elige figma, pulsa Enter para autenticar y haz clic en Allow access en el navegador. ¿Prefieres configurarlo a mano? Ejecuta claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp, abre /mcp, elige figma y Authenticate.
Codex. En la app de Codex, haz clic en Plugins arriba a la izquierda, luego en el + junto a Figma, en Install Figma, y autoriza. Desde la línea de comandos:
codex mcp add figma --url https://mcp.figma.com/mcpCursor. En el chat del agente, escribe:
/add-plugin figmaHaz clic en Add Plugin, abre Cursor Settings → Tools & MCP y haz clic en Connect junto a Figma.
Primer uso. En Figma, haz clic derecho sobre un frame, elige Copy link to selection y pégalo en tu prompt: "Implementa este diseño: (enlace)". El agente toma el frame del enlace.
Figma avisa que escribir en el canvas será una función de pago por uso; por ahora es gratis durante la beta.
Playwright MCP: tu agente abre y captura su propio sitio
El Playwright MCP, de Microsoft, le da al agente un navegador de verdad. Abre una página, la redimensiona a móvil o escritorio, hace clic, lee los errores de la consola y guarda capturas. Eso cierra el ciclo: el agente ve lo que construyó y lo corrige, en lugar de que tú lo revises todo.
Claude Code:
claude mcp add playwright npx @playwright/mcp@latestCodex:
codex mcp add playwright npx "@playwright/mcp@latest"Cursor. Abre Cursor Settings → MCP → Add new MCP Server, ponle un nombre, elige el tipo command y usa npx @playwright/mcp@latest. El README del proyecto también tiene un botón que lo instala directo en Cursor.
Por defecto el navegador se abre en una ventana visible, así ves al agente trabajar. Para ocultarla, agrega --headless al comando.
Primer uso. Con tu sitio corriendo: "Abre http://localhost:3000 con Playwright, saca una captura a 1440 px y otra a 390 px, y dime qué está roto."
Un prompt que usa las cinco herramientas a la vez (cambia el enlace por el de tu frame):
Lee el frame de Figma en este enlace: https://www.figma.com/design/...
Construye esa landing page en este proyecto, siguiendo el diseño.
Usa la skill design-taste-frontend para tipografía, espaciado y layout,
y emil-design-eng para las animaciones.
Después abre la página con Playwright a 1440 px y 390 px de ancho,
saca una captura de cada una y revisa la consola.
Ejecuta /impeccable audit y /impeccable polish, corrige lo que aparezca
y muéstrame las capturas finales.
En Codex, cambia /impeccable por $impeccable. ¿Sin Figma? Quita la primera línea y describe la página con palabras; Taste se encarga de la dirección visual.
Problemas comunes
npx: command not found. Falta Node.js. Instala la versión LTS desde nodejs.org y abre una terminal nueva.- La skill no aparece. Reinicia el agente. Revisa que instalaste para el agente correcto (
-a) y en el alcance correcto: por defecto queda en la carpeta del proyecto, así que abre el agente en esa carpeta, o reinstala con-g.npx skills listmuestra lo instalado. - Codex no ejecuta el hook de Impeccable. Abre
/hooksy aprueba el hook del proyecto. Después de unnpx impeccable updatepuede que tengas que aprobarlo otra vez. - Figma no autentica, o el plugin no se instala. Tu organización puede bloquear plugins; pide ayuda a tu administrador o usa el comando manual
claude mcp add/codex mcp add. - El agente no encuentra el frame. Usa Copy link to selection sobre un frame concreto, no el enlace del archivo entero.
- El navegador de Playwright no abre. Revisa que tengas Node 18+. En una máquina sin pantalla, usa
--headless. Para usar otro navegador,--browseracepta chrome, firefox, webkit o msedge.
Las herramientas de esta guía: emilkowalski/skills (MIT), de Emil Kowalski; pbakaus/impeccable (Apache-2.0), de Paul Bakaus; Leonxlnx/taste-skill (MIT), de Leon Lin; el servidor MCP de Figma, de Figma; y Playwright MCP (Apache-2.0), de Microsoft. Las skills se instalan con skills, de Vercel Labs. Comandos verificados el 18 de septiembre de 2026.
Un correo por novedad
Cuando publico algo nuevo sobre IA y agentes, recibes un correo. Sin spam, y puedes darte de baja con un clic.
Las interacciones no están disponibles en este momento. El artículo sigue disponible.
Comentarios
Comentarios
Las interacciones no están disponibles en este momento. El artículo sigue disponible.
Privacidad de los comentariosNormas para comentar