83.3K+Descargar
Ir a la guía de uso
ui-ux-pro-maxpor nextlevelbuilder

UI UX Pro Max Skill.

Un skill de Claude Code y Codex para diseño UI: inteligencia de diseño UI/UX para web, móvil y escritorio: layout, color, tipografía y reglas UX.

  • Web y UI
  • Código UI
Descargar OpenDesignVer guía de uso
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 15.922 caracteres en total

01 Qué hace

Qué Hace el Skill ui-ux-pro-max en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

UI/UX Pro Max es un skill de inteligencia de diseño consultable para interfaces web, móviles y de escritorio. Consulta 79 estilos (50 activos), 192 paletas de producto con perfiles de razonamiento, 74 combinaciones tipográficas, 119 pautas de UX, 105 iconos, 17 presets de GSAP, 25 tipos de gráficos y 22 stacks tecnológicos. Úselo para diseñar páginas, elegir color y tipografía, revisar la UI en cuanto a accesibilidad y consistencia, implementar navegación y animación, o mejorar la usabilidad.

Detecta automáticamente el stack a partir de package.json, pubspec.yaml o xcodeproj y genera un sistema de diseño con persistencia opcional para recuperación entre sesiones. Tres controles de diseño (varianza, movimiento, densidad) ajustan el resultado. El skill ofrece búsquedas específicas por dominio para UX, color, tipografía, iconos, GSAP y orientación de implementación según el stack.

Qué produce

  • Sistema de diseño con patrón, estilo, colores, tipografía, efectos y antipatrones en formato ASCII, markdown o JSON
  • design-system/project-slug/pages/page-name.md para anulaciones específicas de página cuando se pasa --page
  • Resultados específicos por dominio (pautas de UX, paletas de color, combinaciones tipográficas, iconos, presets de GSAP, recomendaciones de gráficos, orientación de implementación según el stack)
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Analizar Requisitos

    Extraiga el tipo de producto (SaaS, e-commerce, dashboard), el público objetivo, palabras clave de estilo (playful, minimal, dark mode) y detecte el stack a partir de package.json, pubspec.yaml, xcodeproj o app.json.

  2. 02
    Generar Sistema de Diseño

    Ejecute search.py con --design-system para páginas o proyectos nuevos.

  3. 03
    Persistir Como Master Más Anulaciones

    Agregue --persist y --output-dir apuntando a la raíz del proyecto para escribir design-system/project-slug/MASTER.md. Las anulaciones específicas de página van en pages/page-name.md.

  4. 04
    Complementar con Búsquedas por Dominio

    Consulte un solo dominio (ux, color, typography, icons, gsap, chart, landing, google-fonts) con 2-5 términos significativos y una restricción.

  5. 05
    Directrices de consulta de stack

    Use --stack con el stack detectado (react, nextjs, vue, swiftui, flutter, etc.) para obtener orientación específica de la implementación.

  6. 06
    Revisar las reglas previas a la entrega

    Antes de entregar la UI de la app, lea references/pro-rules.md y siga su Lista de comprobación previa a la entrega (Pre-Delivery Checklist) canónica, que abarca la disciplina de iconos, la retroalimentación de interacción, el contraste en modo claro/oscuro, el diseño de área segura y la accesibilidad para UI de apps nativas/móviles.

02 Encuentra tu caso de uso

Cuándo Usar el Skill ui-ux-pro-max

Usa el skill ui-ux-pro-max en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. Ajuste y límites abajo están tomados del archivo propio del skill.

Buen caso de uso

  • Diseñar páginas nuevas o crear y refactorizar componentes de UI
  • Elegir color, tipografía, espaciado o sistemas de layout
  • Revisar la UI en cuanto a UX, accesibilidad o consistencia
  • Implementar navegación, animación o comportamiento responsivo
  • Mejorar la calidad percibida y la usabilidad de una interfaz

Conozca los límites

  • Lógica de backend pura, diseño de API o de base de datos
  • Trabajo de rendimiento no visual, infraestructura o DevOps
  • Scripts no visuales, salvo que la tarea cambie el aspecto, la sensación, el movimiento o la interacción de algo

Qué proporcionar

  • Tipo de producto y audienciaSaaS, e-commerce, portafolio, dashboard, entretenimiento, herramienta o productividad, además del grupo de edad y el contexto de uso (desplazamiento, ocio, trabajo)
  • Palabras clave de estiloDivertido, vibrante, minimalista, modo oscuro, centrado en el contenido, inmersivo u otros adjetivos que describan la dirección visual deseada
  • Nombre del proyecto para la persistenciaPase -p "Project Name" a --design-system para nombrar el subdirectorio del sistema de diseño y el archivo MASTER.md
  • Diales de diseño (opcional)Tres controles deslizantes del 1 al 10: --variance (de centrado a audaz/asimétrico), --motion (de sutil a coreografía compleja), --density (de espacioso a denso/escala de espaciado tipo dashboard)

03 Dentro del skill

Reglas que la skill ui-ux-pro-max da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Accesibilidad primero

    Prioridad 1 (CRÍTICA). Garantice un contraste de 4.5:1, texto alternativo, navegación por teclado y aria-labels. Nunca elimine los anillos de foco ni use botones solo con icono sin etiquetas.

  2. Objetivos táctiles de 44×44px como mínimo

    Prioridad 2 (CRÍTICA). Los elementos táctiles y de interacción deben tener un tamaño mínimo de 44×44px, un espaciado de 8px o más y retroalimentación de carga. Evite depender solo del hover y los cambios de estado instantáneos (0ms).

  3. Reintentar una vez ante resultados vacíos

    Si la búsqueda no devuelve resultados, reintente una vez con una consulta más acotada o un dominio/stack explícito.

  4. Use el modo de búsqueda más pequeño

    Elija --design-system para un proyecto o página nuevo, un --domain explícito para una inquietud puntual o un error de componente, --stack para un stack de implementación conocido.

  5. Nunca Asuma un Stack

    Detecte el stack a partir de package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json o app.json. Si no se puede detectar nada y la orientación de stack importa, pregunte al usuario.

  6. Invoque la Búsqueda por la Ruta Completa

    Ejecute siempre python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" con la ruta completa, no relativa.

  7. No Sobrescriba el Master Sin Autorización

    Si design-system/project-slug/MASTER.md existe, --persist omite la escritura y lo deja intacto a menos que se pase --force.

  8. Consulte el Resultado Semántico Antes del Stack

    Para errores de diseño de texto y componentes compactos, busque primero el resultado semántico de UX (equilibrio de líneas de encabezados huérfanos, ajuste de etiquetas de chips de insignias), luego el stack detectado para la implementación.

04 Ponlo a trabajar

Instalar ui-ux-pro-max en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir ui-ux-pro-max a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Forma genérica de la CLI skills para .claude/skills/ui-ux-pro-max/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Verifique el dominio devuelto, la identidad del primer resultado y su adecuación al producto y plataforma del usuario antes de aplicar los resultados de búsqueda
  • Reintente una vez con una reescritura más acotada o un dominio/stack explícito cuando el resultado esté vacío o fuera de tema.
  • Lea un MASTER.md existente antes de decidir si --force está justificado para regenerarlo
  • Para trabajo de accesibilidad, consulte un resultado observable a la vez usando términos explícitos de resultado de accesibilidad y verifique que el resultado coincida con la interacción específica o el criterio WCAG

En OpenDesign ui-ux-pro-max viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Rama main
Archivo de skill
.claude/skills/ui-ux-pro-max/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 7f69fed
License
MIT De LICENSE.
Estrellas del repositorio
127.450 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio nextlevelbuilder/ui-ux-pro-max-skill, que contiene 7 skills en este catálogo. No es una calificación o recuento de uso para ui-ux-pro-max.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cuándo AplicarÚselo para estructura de UI, diseño visual, interacción, calidad de UX. Omítalo para backend, API, infraestructura.
  2. Categorías de Reglas por Prioridad10 categorías desde Accesibilidad (CRÍTICO) hasta Gráficos (BAJO) con comprobaciones clave y antipatrones
  3. Ejecución de la herramienta de búsquedaInvoque search.py por la ruta completa desde el directorio del skill. Requiere Python 3.x, sin dependencias externas.
  4. Contrato de ConsultaElija el modo de búsqueda más pequeño. Una intención dominante, 2-5 términos, verifique dominio/adecuación, reintente una vez si está vacío.
  5. Paso 1: Analice los Requisitos del UsuarioExtraiga el tipo de producto, la audiencia, las palabras clave de estilo y detecte el stack a partir de package.json o equivalente.
  6. Paso 2: Genere el Sistema de DiseñoUse --design-system para páginas/proyectos nuevos. Agrega coincidencias de producto/estilo/color/landing/tipografía.
  7. Paso 2b: Persista el Sistema de DiseñoAgregue --persist y --output-dir para escribir MASTER.md. El Master existente se omite salvo que se autorice con --force.
  8. Paso 2c: Diales de DiseñoControles deslizantes opcionales del 1 al 10 para varianza, movimiento y densidad, para ajustar la salida de --design-system.
  9. Paso 3: Complemente con Búsquedas DetalladasConsulte los dominios de producto, estilo, color, tipografía, google-fonts, chart, ux, landing, icons, gsap, react, web.
  10. Paso 4: Directrices de stackUse --stack con el stack detectado para obtener orientación específica de implementación. 22 stacks disponibles.
  11. Si una búsqueda devuelve 0 resultadosReintente una vez con una consulta más acotada. Si sigue vacía, recurra a la tabla de prioridades e informe al usuario.
  12. Consejos para mejores resultadosUna intención, de 2 a 5 términos por consulta. Reintente una vez. Use --design-system para casos nuevos, --domain para casos específicos.
La descripción propia del Skill
"Inteligencia de diseño UI/UX para web, móvil y escritorio. Este skill debe usarse al diseñar, construir, revisar o corregir interfaces, incluyendo páginas, componentes, sistemas de diseño, accesibilidad, interacción, layout responsivo, tipografía, color, gráficos e implementación UI específica de stack. Datos locales buscables: 79 estilos buscables (50 activos), 192 paletas de productos y perfiles de razonamiento, 74 pares de fuentes, 119 guías UX, 105 íconos, 17 presets GSAP, 25 tipos de gráficos y 22 stacks."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 15.922 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill ui-ux-pro-max

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué necesita el skill para ejecutarse?

El script de búsqueda requiere Python 3.x sin dependencias externas. Debe invocarse por su ruta completa desde el directorio del skill usando python, python3 o py -3. El README contiene instrucciones de instalación si falta Python.

¿Cómo anulo el sistema de diseño para una página específica?

Pase --page "page-name" al persistir para crear design-system/project-slug/pages/page-name.md. Al construir esa página, el agente lee primero MASTER.md y luego verifica si existe pages/page-name.md. Si existe, sus reglas anulan las de Master. De lo contrario, se usan exclusivamente las reglas de Master.

UI UX Pro Max

Ejecutar ui-ux-pro-max en una Tarea de Diseño UI Real.

El skill ui-ux-pro-max viene incluido en OpenDesign. Descarga la aplicación, selecciona el skill en Plugins → Skills, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max