¿Qué hace esta skill?

Esta skill convierte a Claude en un diseñador UX/UI experto en gamificación. Rediseña tu app de hábitos con un esquema oscuro (70% negro, 30% blanco) e integra sistemas de avatares, experiencia y minijuegos para maximizar la retención del usuario.

Modo Oscuro Inmersivo
Aplica una paleta de colores 70% negro y 30% matices blancos para una experiencia visual elegante y sin fatiga visual.
Sistema de Avatares
Diseña mecánicas de recompensa con ropa, habilidades y experiencia para avatares que evolucionan al completar hábitos.
Minijuegos Mentales
Integra minijuegos con imágenes que recopilan patrones de usuario para mantener el engagement y la retención.
Economía Virtual
Implementa un sistema de dinero virtual que los usuarios ganen al mantener sus rutinas, fomentando la constancia.

Ejemplos de uso

🎯 Rediseño de pantalla de inicio
Rediseña la pantalla de inicio de mi app de hábitos. Quiero una animación de bienvenida para el avatar del personaje y la paleta 70% negro y 30% blanco.
🛍️ Sistema de recompensas y ropa
Diseña el sistema de gamificación donde el avatar recibe ropa y experiencia al completar hábitos. Genera el CSS para la tienda virtual.
🧩 Integración de minijuegos
Necesito integrar minijuegos mentales con imágenes en las secciones de hábitos. ¿Cómo estructuro la UI para esto?
🎬 Animaciones y transiciones
Especifica las transiciones animadas entre pantallas y los efectos parallax para asegurar un desplazamiento visual inmersivo.

Características

Paleta Estricta Modo Oscuro Especificaciones precisas de colores (70% negro, 30% blanco) para fondos y pantallas de inicio.
Microinteracciones y Parallax Animaciones detalladas de transición entre pantallas y efectos visuales dinámicos al entrar a cada sección.
Código Agnóstico y CSS Puro Genera componentes y CSS listos para implementar, adaptables a cualquier framework (React, Flutter, etc.).
Estructura de Hábitos Mejorada Rediseño de secciones con espacio para descripción resumida, beneficios inferiores y integración lúdica.
Contexto de Personalidad Maquetas visuales textuales que refuerzan el estereotipo visual y la coherencia de marca de tu app.

Preguntas frecuentes

No, el código generado es agnóstico y se basa en CSS puro y componentes lógicos para que puedas adaptarlo fácilmente a React, Flutter, Unity u otros.
La skill aplica una paleta estricta de 70% negro para el fondo y un 30% de matices blancos para detalles y la pantalla de inicio.
Sí, la skill está diseñada para integrar minijuegos mentales con imágenes que recopilan patrones del usuario para mejorar la retención.
Puedes integrar estilos de avatares, ropa, habilidades, experiencia (XP), dinero virtual y mecánicas de recompensa al completar hábitos.
Diseño UX/UI Gamificado para Apps de Hábitos

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.