uiux-ops
Mejorar UI/UX con directrices de diseño
Los proyectos de diseño UI/UX a menudo carecen de estándares consistentes y procesos claros, lo que conduce a experiencias de usuario fragmentadas y brechas de accesibilidad. Esta habilidad proporciona procedimientos operativos completos y listas de verificación para optimizar los flujos de trabajo de diseño, garantizar la consistencia y mantener el cumplimiento de accesibilidad en todos los proyectos.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「uiux-ops」。 How do I design a form with good error handling?
預期結果:
- **Mejores prácticas para manejo de errores:**
- 1. **Validación en tiempo real**: Valida los campos mientras los usuarios escriben, no solo al enviar.
- 2. **Mensajes de error específicos**: Indica exactamente qué está mal y cómo corregirlo. Evita mensajes genéricos como 'Entrada inválida'.
- 3. **Distinción visual**: Usa color, iconos y posicionamiento para identificar claramente los campos con error.
- 4. **Descripciones accesibles**: Vincula los mensajes de error a los campos de entrada usando aria-describedby para lectores de pantalla.
- 5. **Gestión del foco**: Mueve el foco al primer campo con error cuando la validación falla.
正在使用「uiux-ops」。 What makes a good color palette for a design system?
預期結果:
- **Estructura de paleta de colores:**
- 1. **Colores primarios**: 2-3 colores principales de marca para acciones primarias y elementos clave de la interfaz.
- 2. **Colores semánticos**: Colores de éxito (verde), advertencia (amarillo), error (rojo) e información (azul) para retroalimentación del sistema.
- 3. **Colores neutros**: Paleta de escala de grises para texto, fondos y bordes con múltiples tonalidades.
- 4. **Requisitos de contraste**: Asegura una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande.
- 5. **Documentación**: Documenta cada color con valores hex, valores RGB y directrices de uso.
安全審計
安全All 14 static findings evaluated as false positives. Scanner flagged legitimate JSON metadata fields (URLs, hashes, timestamps), markdown code formatting (backticks for file references), and typical text entropy patterns. This skill contains only documentation and operational guidelines for UI/UX design with no executable code, network calls, or external command execution.
品質評分
你能建構什麼
Establecimiento de estándares de diseño para un nuevo producto
Un gerente de producto necesita definir patrones UI consistentes y principios de diseño antes de que comience el desarrollo. La habilidad proporciona directrices para crear un sistema de diseño con componentes reutilizables, paletas de colores y reglas tipográficas.
Auditoría de interfaces existentes para accesibilidad
Un desarrollador quiere asegurar que su aplicación cumple con los requisitos de accesibilidad. La habilidad proporciona listas de verificación y directrices basadas en WCAG para identificar y corregir problemas de accesibilidad en las interfaces actuales.
Mejora de patrones de interacción de usuario
Un diseñador quiere mejorar la satisfacción del usuario añadiendo mejores mecanismos de retroalimentación y manejo de errores. La habilidad proporciona principios de diseño de interacción para crear experiencias de usuario intuitivas.
試試這些提示
¿Cuáles son los principios centrales del diseño centrado en el usuario para aplicaciones web? Incluye orientación sobre consistencia, accesibilidad y diseño adaptativo.
Ayúdame a crear un sistema de diseño para una aplicación SaaS. Incluye orientación sobre la estructura de la biblioteca de componentes, definición de paleta de colores, reglas tipográficas y convenciones de espaciado.
Proporciona una lista de verificación completa para auditar interfaces web contra las directrices WCAG 2.1 AA. Incluye elementos específicos para contraste de color, navegación por teclado, soporte para lectores de pantalla y gestión del foco.
Explica las mejores prácticas para manejar interacciones de usuario incluyendo retroalimentación visual para acciones, diseño de mensajes de estado de carga y micro-interacciones. Proporciona ejemplos de cada patrón.
最佳實務
- Seguir principios de diseño centrado en el usuario centrándose primero en las metas y tareas del usuario
- Mantener la consistencia en todas las pantallas usando un sistema de diseño documentado
- Validar la accesibilidad temprano y a menudo usando las directrices WCAG como base
避免
- Usar diferentes patrones de interacción para acciones similares en diferentes pantallas
- Ocultar información importante detrás de estados de hover o acordeones
- Depender únicamente del color para transmitir información sin señales adicionales