¿Qué hace esta skill?

Transforma descripciones textuales en ilustraciones vectoriales de alta calidad. Esta skill genera código SVG optimizado para tus diseños UX/UI, respetando paletas de marca y garantizando accesibilidad.

Empty States
Crea ilustraciones atractivas para bandejas vacías o estados sin datos.
Onboarding y Hero
Diseña ilustraciones impactantes para pantallas de bienvenida o landing pages.
Estados de Éxito y Error
Comunica feedback visual claro y amigable con ilustraciones específicas.
Componentes React
Genera ilustraciones integradas en componentes HTML/CSS o React interactivos.

Ejemplos de uso

🎯 Empty State de Bandeja
Necesito una ilustración para un empty state de una bandeja de entrada sin mensajes. Estilo flat design, paleta de marca: azul #2563EB y gris #64748B sobre fondo blanco. Que sea accesible y soporte modo oscuro.
🚀 Hero Illustration SaaS
Crea una hero illustration para una landing page de software SaaS. Estilo minimalista y moderno, usando colores pastel. Plataforma web, sin fondo.
⚠️ Estado de Error 404
Genera una ilustración para un error 404. Estilo doodle a mano alzada, en tonos rojos y naranjas. Debe incluir un título accesible.
⚛️ Icono en React
Diseña un icono vectorial de un gráfico de barras para un dashboard. Estilo geométrico, colores corporativos verde y negro. Entrégame el resultado como un componente React.

Características

SVG Limpio y Escalable Produce código vectorial optimizado con viewBox responsivo, listo para producción.
Estilos Personalizables Adapta el arte a flat design, line art, isométrico, hand-drawn o estilos SaaS modernos.
Accesibilidad Integrada Incluye atributos title y description, y advierte sobre problemas de contraste de color.
Soporte para Modo Oscuro Genera variantes de la ilustración adaptadas a prefers-color-scheme: dark.
Respeto a la Marca Utiliza paletas de colores específicas y design systems sobre las decisiones automáticas.

Preguntas frecuentes

Genera código SVG limpio y listo para producción. Opcionalmente, puede devolver componentes HTML/CSS o React si se requiere interactividad o integración frontend.
Sí, si proporcionas una paleta de colores o colores de marca, la skill los priorizará sobre cualquier selección automática y verificará el contraste.
Por defecto, se añaden atributos de accesibilidad como title y description. Además, se advierte si la paleta solicitada genera combinaciones de bajo contraste.
No, esta skill está estrictamente enfocada en gráficos vectoriales (SVG). No contempla la generación de imágenes raster ni ASCII art.
Ilustraciones Vectoriales UX/UI a Medida

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