delight
Transforma interfaces con micro-interacciones encantadoras
Las interfaces funcionales a menudo se sienten frías y mecánicas. Esta habilidad agrega momentos estratégicos de alegría y personalidad que hacen sonreír a los usuarios mientras mantiene la usabilidad.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“delight”。 Agrega deleite a un estado de éxito de carga de archivos
预期结果:
Una animación suave de escala (1.05x) con una marca de verificación que se dibuja sola durante 400ms, seguida de una breve explosión de confeti para la primera carga del día. Incluye texto alentador: '¡Tu archivo está listo!' con un brillo verde sutil en el ícono del archivo.
正在使用“delight”。 Crea mensajes de carga juguetones para una herramienta de gestión de proyectos
预期结果:
Recopila contexto sobre las operaciones reales de tu producto, luego escribe mensajes específicos como 'Sincronizando con las últimas actualizaciones de tu equipo...' y 'Preparando tu resumen del proyecto...' en lugar de relleno genérico como 'Reuniendo píxeles' que se siente como contenido basura de IA.
安全审计
安全All static analysis findings are false positives. The file contains CSS code examples and copy writing guidance for UI design, not executable code. Backticks in the file denote markdown code blocks for CSS and text examples, not shell command execution. No cryptographic functions, system calls, or network operations are present. This is a design guideline document safe for publication.
质量评分
你能构建什么
Mejora de Dashboard SaaS
Agrega animaciones de éxito sutiles y texto alentador a flujos de trabajo de sincronización de datos y generación de informes
Aplicación Móvil de Consumo
Implementa estados de carga juguetones, celebraciones de logros y mensajes de error con personalidad
Flujo de Pago de Comercio Electrónico
Reduce el abandono del carrito con indicadores de progreso alentadores y momentos de finalización satisfactorios
试试这些提示
Audita mi flujo de pago e identifica 3 momentos específicos donde el deleite podría reducir el abandono. Enfócate en estados de éxito y períodos de carga.
Mi marca es profesional pero cálida (startup fintech). Sugiere 5 micro-interacciones que se sientan sofisticadas sin ser frías. Incluye ejemplos de implementación CSS.
Reescribe estos 10 mensajes de error para que sean empáticos y útiles mientras mantienes la confianza del usuario. Nuestra audiencia son pequeños dueños de negocios, el tono debe ser cálido pero no loco.
Ejecuta el Protocolo Completo de Recopilación de Contexto para mi proyecto. Luego crea una estrategia integral de deleite que cubra estados de carga, momentos de éxito, estados vacíos y huevos de pascua. Prioriza por impacto y esfuerzo de implementación.
最佳实践
- Mantén los momentos de deleite bajo 1 segundo para evitar bloquear el flujo del usuario
- Coincide la intensidad del deleite con el contexto (sutil para herramientas profesionales, juguetón para aplicaciones de consumo)
- Haz que el deleite sea omitible y respeta la configuración de accesibilidad de movimiento reducido
避免
- Usar el deleite para ocultar o distraer de fundamentos UX pobres
- Forzar a los usuarios a través de animaciones encantadoras sin opciones de omitir
- Texto genérico generado por IA como 'Reuniendo píxeles' que se siente inauténtico