Recopilatorio vivo
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
Por qué hago estas listas
Me flipa descubrir recursos que ayudan a salir de las interfaces hechas con el mismo molde. En una interfaz creada con agentes de código, me interesa el criterio que hay detrás del resultado: qué debe destacar, cómo se lee la página y qué necesita hacer la persona que la usa.
Por eso reúno skills de diseño y recursos de frontend por el problema que ayudan a resolver. Unos orientan la dirección visual; otros sirven para revisar tipografía, espaciado o coherencia. Quiero que puedas comparar esas funciones, comprobar la compatibilidad con tu agente y entender qué decisiones siguen dependiendo de ti.
Las fichas te ayudan a escoger y las reviews explican cada proyecto con más detalle. La información documentada y mi experiencia, cuando la aporto, aparecen diferenciadas. Si conoces un recurso que añada criterio de verdad, dímelo.
Firmado: Dani
Explorar por categorías
Dirección visual
5 recursosRevisión y pulido
4 recursosFichas completas y fuentes
Claude Code /design
Claude Code design workflow
Conectar componentes locales con el flujo de diseño de Claude
Sincroniza componentes y vistas previas locales con un sistema de diseño en claude.ai.
Mejor para: Mantener las interfaces generadas alineadas con una biblioteca de componentes existente.
Por qué está aquí. Conecta la biblioteca visual del proyecto con el trabajo de diseño en Claude, para reutilizar sus componentes.
Su límite. La ficha documenta un flujo ligado a claude.ai. No hay evidencia suficiente aquí para etiquetarlo también como compatible con Codex.
Conecta una biblioteca de diseño con Claude para que reutilice componentes y vistas previas del proyecto. Evita empezar cada interfaz desde cero, pero el flujo documentado depende de las funciones de Anthropic y no demuestra compatibilidad directa con Codex.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Claude Code · Documentado en la ficha El flujo descrito usa /design-sync para sincronizar componentes y previews con un proyecto de sistema de diseño.
Codex · Sin verificar No se muestra su chip. Esto no equivale a afirmar que cualquier adaptación sea imposible.
Requisitos recogidos Sesión en claude.ai y proyecto de tipo design_system. La ficha señala un máximo de 256 archivos por operación de escritura.
Coste real y licenciaRecurso, agente y gastos adicionales
Licencia y acceso Herramienta propietaria de Anthropic según la ficha existente.
Coste del agente Depende del plan con acceso a la función. La disponibilidad y los planes deben comprobarse antes de publicar una recomendación de compra.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo de uso Compartir los componentes HTML de botones y tarjetas con sus previews para que las siguientes interfaces partan de la misma biblioteca.
Alternativa sencilla Mantener los componentes y las reglas visuales en el repositorio y pasarlos como contexto al agente. Requiere un traspaso manual; no reproduce la sincronización con claude.ai.
Fuentes y revisiónQué está documentado y qué se ha probado
Última revisión de la ficha · 20 ago 2026 Se conserva la información del recopilatorio y su guía. Este mockup no presenta una instalación nueva ni una comprobación de planes.
Datos del recursoFicha editorial migrada y enlaces
UI UX Pro Max Skill
Skill
Fuentes revisadas: 19 sep 2026
Generar interfaces con dirección de arte automatizada: estilos, paletas, tipografías y patrones de conversión para más de 22 stacks
Base de datos con 79 estilos UI, 192 paletas y patrones de conversión que convierte a tu asistente de código en director de arte multiplataforma.
Por qué está aquí. Convierte cualquier agente de código en un asistente con criterio de diseño: 192 reglas por sector, 79 estilos buscables, 74 parejas tipográficas y generación automática de sistemas de diseño completos antes de escribir código.
Su límite. Sin integración MCP: funciona como skill instalado en el directorio del asistente, no como servidor al que conectar herramientas externas. La versión gratuita no genera activos visuales reales ni publica precio de la premium.
Sirve para que tu agente de IA (Claude Code, Cursor, Windsurf y otros) sepa elegir colores, tipografías, patrones de landing page y antipatrones antes de generar código de interfaz. En vez de pedirle "hazme una landing" y cruzar los dedos, le das criterio de diseño adaptado al sector.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. Funciona con más de 20 asistentes: Claude Code, Cursor, Windsurf, Kiro, GitHub Copilot, Codex CLI, Gemini CLI, Warp, Augment y otros. Soporta 22 stacks técnicos (React, Next.js, Vue, Svelte, Flutter, SwiftUI, Tailwind, etc.). Requiere Python 3.x y Node.js/npm para instalar el CLI.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. Versión básica gratuita bajo licencia MIT. Versión premium con identidad de marca, generación de activos visuales con IA y soporte dedicado; precio no publicado en la web oficial a fecha de revisión (septiembre de 2026).
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Instala el CLI con npm install -g ui-ux-pro-max-cli, ejecuta uipro init --ai claude en tu proyecto y pide "Build a landing page for my SaaS product". El skill genera un sistema de diseño completo (paleta, tipografía, patrón, antipatrones) antes de que el agente escriba código.
Alternativa. Para inyectar referencias visuales reales en vez de reglas abstractas, Refero usa capturas web vía MCP. Para componentes prefabricados, los kits UI convencionales (shadcn/ui, Tailwind UI) resuelven sin skill intermedio.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Revisado a partir del README del repositorio y la web oficial (uupm.cc) en septiembre de 2026. Sin prueba propia ejecutada; conclusiones basadas en la documentación pública.
Datos del recursoFicha editorial migrada y enlaces
- Sustituye a: Buscar referencias de diseño manualmente en Dribbble o Behance y traducirlas a código
- Despliegue: CLI
- Plataformas: Claude Code, Windsurf, Cursor
- Compatibilidad: Requiere Python 3.x instalado localmente para el script de búsqueda interno
- Ojo con: El tier gratuito no incluye generación de identidad de marca ni tokens de diseño enterprise; esas funciones requieren el tier premium
Frontend Design de Anthropic
Skill
Generar interfaces web con identidad visual propia en lugar del look genérico de IA
Skill que convierte a Claude Code en director de arte: planifica paleta, tipografía y composición antes de escribir código, evitando la estética genérica de IA.
Por qué está aquí. Skill oficial de Anthropic para dar dirección de arte a agentes de código. Gratuito, compatible con Claude Code, Claude.ai y la API de Claude (y con Codex y Cursor según el estándar Agent Skills). Obliga al agente a planificar paleta, tipografía y composición antes de escribir código.
Su límite. No genera diseño original ni sustituye un sistema de diseño propio. El resultado depende del brief, las referencias y el modelo. La licencia es propietaria (Anthropic Commercial Terms), no open source.
Un archivo de instrucciones que le enseña a tu agente de código a pensar en el diseño visual antes de ponerse a escribir CSS. Planifica colores, tipografía y composición para que el resultado no parezca un template genérico.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. Claude Code, Claude.ai, API de Claude y, según el estándar Agent Skills, también Codex y Cursor. Requiere un agente compatible con SKILL.md.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. Gratuito. El skill no tiene coste, pero el uso del agente (Claude Code, API) tiene su propia tarificación según el plan contratado.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. En Claude Code, registra el repositorio con /plugin marketplace add anthropics/skills e instala con /plugin install example-skills@anthropic-agent-skills. También disponible en Claude.ai (planes de pago) y vía la API. Pide al agente crear una landing y el skill activa la planificación visual.
Alternativa. Prompts manuales de estilo, UI UX Pro Max Skill (tercero) o la funcionalidad nativa Claude Code /design (propietaria, producto distinto).
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Review publicada en Marketing Ultra (septiembre 2026), basada en documentación oficial y README del repositorio. No incluye prueba local ejecutada.
Datos del recursoFicha editorial migrada y enlaces
- Sustituye a: Plantillas CSS por defecto y prompts manuales de estilo para agentes de código
- Despliegue: CLI
- Plataformas: Claude Code
- Ojo con: Necesita un brief con contexto real del proyecto; sin información sobre el producto o su público, las decisiones de diseño seguirán siendo genéricas
Taste Skill
Skill
Evitar que los agentes de código generen interfaces genéricas aplicando reglas de composición, tipografía y diseño visual
Paquete de reglas de diseño que enseña a los agentes de código a generar interfaces con criterio visual en lugar de plantillas genéricas.
Por qué está aquí. Convierte tres decisiones habituales de diseño, variedad, movimiento y densidad, en controles explícitos que un agente compatible con SKILL.md puede seguir.
Su límite. La versión 2 predeterminada sigue etiquetada como experimental y no existe una prueba independiente aportada que demuestre mejores resultados o adopción real.
En cristiano: sirve para decirle a un agente de código cuánto debe arriesgar con la composición, cuánto puede animar y cuánta información debe meter en cada pantalla.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. La documentación declara soporte para herramientas que admiten archivos SKILL.md y cita Codex, Claude Code, Cursor, Gemini CLI, v0, Lovable y OpenCode.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. Taste Skill es código abierto con licencia MIT. Los posibles costes del agente, la suscripción o la API utilizada quedan fuera de la herramienta.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Puede orientar una landing B2B con variedad moderada, movimiento contenido y densidad suficiente para explicar la oferta sin convertirla en un panel de mando.
Alternativa. La alternativa verificada es revisar manualmente cada interfaz generada y pedir las correcciones de jerarquía, espacio y animación una por una.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Fuentes oficiales revisadas el 23 de septiembre de 2026. La compatibilidad es declarada por el proyecto y no equivale a una prueba local.
Datos del recursoFicha editorial migrada y enlaces
- Sustituye a: Revisión manual de UI tras cada generación con IA
- Despliegue: CLI
- Plataformas: Claude Code, Cursor, Codex, Gemini CLI, v0, Lovable, OpenCode
- Ojo con: La v2 actual es experimental; el ruleset puede cambiar antes de la versión estable 1.0.0
Stitch Design Skills
Skill
Un conjunto de skills para recuperar las reglas visuales de un proyecto y llevar diseños de Stitch a código y componentes.
Por qué está aquí. Permite convertir las reglas visuales de un frontal existente en un DESIGN.md reutilizable y conecta ese documento con otros flujos de diseño y construcción del ecosistema Stitch.
Su límite. El README exige Stitch MCP configurado y en ejecución para el paquete. La licencia del repositorio no elimina los requisitos de acceso ni garantiza soporte oficial.
En cristiano: lee cómo está diseñada tu web y prepara una chuleta con sus colores, letras y componentes para que el agente no improvise el aspecto de cada pantalla.
Compatibilidad e instalaciónQué necesitas y qué cambia en cada agente
Compatibilidad. El README enumera Codex, Antigravity, Gemini CLI, Claude Code, Cursor y OpenCode. OpenCode necesita instalación manual y adaptación de algunos nombres.
Coste real y licenciaRecurso, agente y gastos adicionales
Coste. El código del repositorio usa licencia Apache-2.0. No se ha verificado una tarifa única en euros para Stitch, los agentes o los servicios externos necesarios.
Ejemplo y alternativaCuándo compensa y qué otra vía tienes
Ejemplo. Analizar la carpeta /src y generar .stitch/DESIGN.md con colores, tipografías y componentes detectados.
Alternativa. La ficha no acredita un sustituto directo. Taste Skill y Frontend Design de Anthropic son recursos relacionados para controlar el criterio visual, no equivalentes verificados.
Fuentes y revisiónQué está documentado y qué se ha probado
Revisión. Documentación y estructura del repositorio comprobadas el 27 de septiembre de 2026; no se atribuyen pruebas personales ni resultados de producción.
Repositorio oficial ↗Documentación oficial de Stitch MCP ↗Configuración de Stitch MCP ↗
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: Codex, Claude Code, Cursor, Antigravity, Gemini CLI, OpenCode
- Compatibilidad: README enumera Codex, Antigravity, Gemini CLI, Claude Code, Cursor y OpenCode (instalación manual); incluye pasos específicos por plataforma. No prometer todos los flujos sin MCP configurado.
- Ojo con: No es solo un MCP: hay SKILL.md reales, pero muchas operaciones de generación requieren Stitch MCP y acceso al servicio. extract-design-md puede trabajar leyendo código sin compilar ni renderizar. El README declara que no es un producto con soporte oficial de Google. Una review del paquete; no separar design-md, react-components, stitch-loop o remotion en entidades duplicadas. Nombres y rutas cambiaron respecto a publicaciones de enero/febrero; usar estructura actual de plugins.
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.