Recopilatorio vivo
Dirección visual | 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
Dirección visual
Dirección visual
5 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.