¿Qué hace ui-ux-pro-max-skill?
Habilidad de inteligencia de diseño AI para construir UI/UX profesional en múltiples plataformas con 161 reglas de razonamiento, 67 estilos y generación automatizada de sistemas de diseño.
Descripción general
Este skill está diseñado para agentes AI que necesitan crear interfaces de usuario profesionales de manera eficiente. Incorpora un motor de razonamiento con 161 reglas de diseño (como principios de jerarquía visual, contraste, espaciado y accesibilidad) y una biblioteca de 67 estilos predefinidos que cubren desde temas claros y oscuros hasta paletas de colores adaptativas. La generación automatizada de sistemas de diseño permite crear guías de estilo completas (colores, tipografía, componentes, espaciado) en minutos, en lugar de horas.
Plataformas compatibles
- Claude Code: Integración nativa para diseñar interfaces durante el desarrollo.
- Cursor: Uso directo en el editor con sugerencias de diseño contextuales.
- Codex: Compatible con flujos de trabajo basados en prompts de diseño.
Cómo funciona
-
Reglas de razonamiento: El skill aplica 161 reglas lógicas para analizar y sugerir mejoras en la UI/UX. Ejemplos:
- "Asegurar que el contraste de color cumpla con WCAG 2.1 AA"
- "Mantener una jerarquía visual clara usando tamaño y peso de fuente"
- "Limitar el número de colores primarios a 3"
-
Estilos predefinidos: 67 estilos incluyen variaciones de tema (claro, oscuro, alto contraste), combinaciones de colores armoniosas, tipografía escalable y estilos de componentes (botones, tarjetas, formularios).
-
Generación de sistemas de diseño: Comando
generate-design-systemcrea un archivodesign-system.jsoncon todos los tokens de diseño, listos para usar en CSS, Tailwind u otros frameworks.
Ejemplo de uso
# Generar un sistema de diseño básico
claude use aradotso/ui-ux-pro-max-skill generate-design-system --theme dark --primary-color #1a73e8
// Ejemplo de integración en código
const designSystem = await skill.generateDesignSystem({
theme: 'dark',
colors: { primary: '#1a73e8', secondary: '#ff5722' },
typography: { fontFamily: 'Inter, sans-serif', scale: '1.25' },
});
console.log(designSystem.tokens);
Reglas de razonamiento destacadas
| Regla | Descripción |
|---|---|
| R001 | Evaluar la legibilidad del texto en todos los tamaños de pantalla |
| R045 | Verificar que los botones tengan suficiente área táctil (mínimo 44x44 px) |
| R102 | Aplicar espaciado consistente usando la escala de 8 px |
| R157 | Validar que los formularios tengan etiquetas descriptivas y mensajes de error |
Contribuciones
Las contribuciones son bienvenidas. Consulte el repositorio original para reglas de diseño adicionales y solicitudes de extracción.
Licencia
MIT - Ver LICENSE para más detalles.