Recopilatorio vivo
Diseño y frontend | Skills para Claude Code, Codex y otros agentes de código
25 recursosOrganizado por uso
Diseño y frontend
Diseño y frontend
9 recursosFichas completas y fuentes
Claude Code /design
Skill / flujo de diseño
Fuentes revisadas: 20 ago 2026
Hace que Claude diseñe siguiendo tu estilo
Claude Code
Skill (/design-sync) que sincroniza tu sistema de diseño local —componentes HTML con previews— con un proyecto en claude.ai, para que Claude respete tu identidad visual al generar interfaces.
Mejor para: Sincronizar una biblioteca de componentes local con un proyecto de sistema de diseño en claude.ai para que Claude genere artefactos coherentes con tu diseño
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
- Sustituye a: Traspaso manual de tokens y componentes de diseño entre código y herramientas de diseño
- Despliegue: CLI
- Plataformas: Claude Code
- Ojo con: Los proyectos deben crearse como tipo design_system (inmutable tras creación); máximo 256 archivos por operación de escritura; requiere login en claude.ai
Impeccable
Skill
Fuentes revisadas: 13 sep 2026
Revisar y afinar interfaces creadas con agentes de código.
Claude CodeCodex
Convierte el diseño frontend en decisiones concretas 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
- Ojo con: Las comprobaciones automáticas no sustituyen la revisión visual ni el criterio de diseño.
UI UX Pro Max Skill
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
Frontend Design de Anthropic
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
Taste Skill
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. Convierte tres decisiones habituales de diseño, variedad, movimiento y densidad, en controles explícitos que un agente compatible con SKILL.md puede seguir.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
Emil Design Engineering (Emil Kowalski Skills)
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
Web Design Guidelines de Vercel
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. Aporta una revisión sistemática del código de interfaces con más de 100 reglas sobre accesibilidad, rendimiento y UX.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
Stitch Design Skills
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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
UI Skills de ibelick
Recurso
Para dar al agente criterios de diseño antes de generar o revisar una interfaz. Permite explorar y descargar skills de ingeniería de diseño mediante una web, una CLI y una conexión MCP.
Por qué está aquí. Para dar al agente criterios de diseño antes de generar o revisar una interfaz. 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.