Recopilatorio vivo
Revisión y pulido | Skills de diseño para Claude Code y Codex
Las skills de diseño para agentes de IA ayudan a definir cómo debe verse y funcionar una interfaz. Aquí puedes comparar recursos para Claude Code, Codex y otros agentes según el trabajo: orientar el diseño de una web, construir una jerarquía visual o revisar una interfaz antes de publicarla. La compatibilidad se indica en cada ficha; no todos los recursos funcionan en los mismos entornos.
UI UX Pro Max aporta recursos para orientar un sistema visual; Impeccable se centra en criterios de diseño y pulido; y Claude Code /design pertenece al flujo de diseño del ecosistema de Claude. Las fichas explican qué aporta cada opción y enlazan a sus reviews para profundizar en requisitos, ejemplos y límites.
Elige según lo que necesita tu proyecto: tipografía, color, composición, frontend o revisión. Si buscas piezas listas para incorporar a una web, consulta también las bibliotecas de componentes UI para crear webs con IA. Una skill que orienta al agente y una biblioteca de componentes cumplen funciones distintas.
9 recursosOrganizado por uso
Revisión y pulido
Revisión y pulido
4 recursosFichas completas y fuentes
Impeccable
Skill
Criterios de diseño para interfaces hechas con agentes
Convierte decisiones de frontend en criterios sobre jerarquía, color, tipografía, interacción y acabado.
Mejor para: Revisar y afinar interfaces creadas con agentes de código.
Por qué está aquí. Convierte criterios de diseño en instrucciones y comprobaciones concretas para que un agente deje de improvisar cada interfaz.
Su límite. Sus reglas detectan patrones conocidos y orientan el acabado, pero no sustituyen el criterio visual ni una revisión humana del resultado.
Es una colección de órdenes de diseño para Claude Code, Codex y otros agentes. Sirve para que dejen de sacar la típica web de IA, revisen sus propios fallos y afinen una interfaz ya hecha. Mejora mucho el resultado, pero funciona mejor cuando le dices exactamente qué quieres y compruebas que ha aplicado las reglas.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Entornos. La reseña recoge compatibilidad con Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, Grok Build, Hermes Agent, OpenCode y otros hosts.
Instalación. Se añade al proyecto con npx impeccable install. Después, /impeccable init define el contexto del producto y /impeccable audit revisa la interfaz.
Coste real y licenciaRecurso, agente y gastos adicionales
Licencia. Apache-2.0 y uso gratuito según la revisión publicada.
Detector. No necesita clave de API ni un modelo de lenguaje. El coste del agente o del modelo que aplique las correcciones va por separado.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo de uso. Revisar una página de campaña creada con un agente y corregir jerarquía, tipografía, color, interacción y patrones visuales genéricos antes de publicarla.
Alternativa sencilla. Para una revisión puntual puedes trabajar con una guía de diseño o con un diseñador. Impeccable aporta más cuando quieres repetir el mismo control dentro del flujo del agente.
Fuentes y revisiónQué está documentado y qué se ha probado
Última revisión de la ficha · 13 sep 2026. La compatibilidad, la instalación y los límites proceden de la reseña publicada y de la documentación del proyecto.
Datos del recursoFicha editorial migrada y enlaces
Emil Design Engineering (Emil Kowalski Skills)
Skill
Inyectar criterios de diseño profesional en agentes de código para que las animaciones, transiciones y componentes UI salgan pulidos de serie
Colección de skills que inyectan los criterios de diseño de Emil Kowalski en tu agente de código para pulir animaciones, componentes y micro-interacciones.
Por qué está aquí. Aporta un criterio concreto para que los agentes decidan cuándo animar, con qué duración y cómo resolver microinteracciones sin añadir movimiento por añadirlo.
Su límite. Codifica la visión prescriptiva de Emil Kowalski, pero no sustituye una auditoría de accesibilidad, una prueba en dispositivos reales ni el juicio de un diseñador senior.
En cristiano: le da a tu asistente de código una chuleta exigente para que botones, menús y transiciones respondan con más sentido y menos fuegos artificiales.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. El README documenta la instalación mediante npx skills@latest add emilkowalski/skills. La evidencia adjunta no acredita destinos concretos del CLI ni una instalación local para esta reseña.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. El repositorio se publica como código abierto con licencia MIT y no documenta un precio de compra. Los costes del asistente de código o de la infraestructura utilizada quedan fuera de la evidencia disponible.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Instalar el paquete y pedir una revisión de un desplegable con una curva ease-in, 400 ms de duración y origen centrado, solicitando una tabla Antes/Después.
Alternativa. Encargar a un diseñador senior una revisión manual de las animaciones y de los detalles de interacción en su contexto real.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Ficha revisada el 25 de septiembre de 2026 a partir del repositorio, la página oficial, el README, el SKILL.md fijado a un commit y los datos de licencia. No se ejecutó una prueba local.
Datos del recursoFicha editorial migrada y enlaces
- Sustituye a: Revisión manual de animaciones y detalles de interacción por un diseñador senior
- Despliegue: CLI
- Plataformas: Claude Code, Codex
- Ojo con: Los skills orientan al agente con reglas concretas (easing, duración < 300 ms, etc.), pero no sustituyen el ojo de un diseñador en casos de interacción complejos
Web Design Guidelines de Vercel
Skill
Auditar interfaces web contra más de 100 reglas de accesibilidad, usabilidad y diseño visual
Skill que audita tu interfaz web contra más de 100 reglas de diseño, accesibilidad y UX, devolviendo hallazgos asociados a fichero y línea.
Por qué está aquí. Aporta una revisión sistemática del código de interfaces con más de 100 reglas sobre accesibilidad, rendimiento y UX.
Su límite. No crea una identidad visual ni acredita cumplimiento legal o WCAG por sí sola.
En cristiano: revisa el código de una web y te señala detalles que pueden fastidiar su uso aunque visualmente parezca terminada.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. Se distribuye mediante la CLI de Skills. La página pública del paquete enumera agentes como Claude Code, Codex y Cursor.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. Es un recurso de código abierto con licencia MIT declarada en el README. No se localizó un archivo LICENSE independiente, y el coste del agente o de su suscripción no forma parte de la skill.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Auditar una landing page antes de lanzar campañas y obtener una lista de problemas de formularios, foco, imágenes, navegación e interacción.
Alternativa. Hacer una revisión manual de UI con un checklist de accesibilidad y UX, especialmente cuando se necesitan pruebas con tecnología asistiva o interpretación humana.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Ficha contrastada el 25 de septiembre de 2026 con el README oficial y la página pública del paquete.
Datos del recursoFicha editorial migrada y enlaces
- Sustituye a: revisión manual de UI con checklist de accesibilidad y UX
- Despliegue: CLI
- Plataformas: Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini, Cline
- Ojo con: Solo revisa código frontend (HTML/CSS/React); no cubre auditorías de rendimiento, SEO ni análisis de sitio completo
UI Skills de ibelick
Skill
Catálogo de skills de ingeniería de diseño que puedes explorar desde la web, una CLI o una conexión MCP.
Por qué está aquí. Permite explorar y descargar skills de ingeniería de diseño mediante una web, una CLI y una conexión MCP.
Su límite. El catálogo reúne recursos de distintos autores y las fuentes verificadas no demuestran una ejecución completa de cada skill en todos los agentes ni certifican el cumplimiento de WCAG.
En cristiano: ayuda a localizar instrucciones de diseño para agentes, pero toca revisar la autoría, el alcance y el resultado de cada recurso.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. La web organiza el catálogo por agentes, entre ellos Claude Code, Cursor, Codex y GitHub Copilot. Esto no demuestra que cada skill se haya probado de principio a fin en todos ellos.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. El repositorio publica el código con licencia MIT. El asistente, las API y otros servicios externos conservan sus propias condiciones y no se ha verificado una tarifa única.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Consultar el catálogo, elegir una skill adecuada para el problema y comprobar su autoría y alcance antes de aplicar cambios.
Alternativa. La ficha verificada no identifica un sustituto directo; el propio catálogo reúne recursos de distintos autores y enfoques.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Revisado el 27 de septiembre de 2026 a partir del repositorio, su README, la licencia y la web oficial.
Datos del recursoFicha editorial migrada y enlaces
- Despliegue: Archivos de skills instalados en el entorno del agente; instalación y ejecución no probadas en esta revisión.
- Plataformas: Claude Code, Codex, Cursor
- Compatibilidad: SKILL.md estándar bajo skills/, instalable/copiar a rutas de Claude Code, Codex y Cursor. Evidencia de formato y soporte del instalador, no prueba específica end-to-end del paquete en cada plataforma.
- Ojo con: El proyecto actual también es directorio/CLI/MCP de skills de terceros: limitar review a skills propios alojados en skills/. No atribuirle los skills de Emil o Anthropic que enlaza el registro. No es un certificador automático de WCAG. No se localizaron discusiones Reddit relevantes independientes en el tiempo de investigación.