Diseño web e interfaces

Aplica uno de los 10 temas listos para usar de color y tipografía a diapositivas, documentos, informes o landing pages, o genera un tema nuevo sobre la marcha.

Convierte un tema en un breve manifiesto de arte generativo y después crea una pieza interactiva con p5.js que incluye navegación por semillas, deslizadores de parámetros y exportación a PNG.

Guía para crear interfaces accesibles y responsivas con shadcn/ui y Tailwind CSS, incluidos el modo oscuro, la personalización de temas y un enfoque de diseño visual basado en canvas.

Localiza la causa de fallos de diseño en tamaños de pantalla concretos: desplazamiento horizontal, desbordamientos, elementos flex que no encogen, sticky que no se fija y problemas con 100vh o las barras del navegador móvil.

Audita páginas y componentes según WCAG 2.2 AA: teclado, foco, contraste, nombres, etiquetas, estructura, formularios, diálogos, cambios dinámicos, zoom y áreas de interacción. Vincula cada hallazgo a un criterio de éxito.

Diseña páginas de destino, portafolios y rediseños con identidad propia: interpreta el encargo, define la intención visual, ajusta tres parámetros y elige un sistema de diseño adecuado antes de pasar una revisión exigente.

Diseña interfaces web, móvil y de escritorio dentro de Penpot mediante su servidor MCP, con comprobaciones del sistema de diseño, reglas de componentes y accesibilidad, y tamaños de plataforma.

Enumera todos los estados que necesita una pantalla o un componente —carga, vacío, error, parcial, deshabilitado, sin conexión, permiso denegado y contenido extremo— y decide qué ve el usuario y qué puede hacer en cada uno.

Revisa el diseño, la adaptación a distintos tamaños de pantalla, la accesibilidad y la coherencia de un sitio en funcionamiento. Corrige el código con cambios mínimos y vuelve a comprobar el resultado.

Aplica los criterios de Emil Kowalski al crear y revisar interfaces: cuándo evitar animaciones, curvas y duración, movimiento con efecto de resorte, clip-path, gestos, rendimiento y accesibilidad, con una tabla obligatoria de antes, después y motivo.

Crea un sistema de tokens de diseño en tres niveles —valores base, semánticos y de componente—, documenta los componentes y genera presentaciones HTML con Chart.js que respeten esos tokens.

Consulta estilos, paletas, combinaciones tipográficas, pautas de UX, gráficos y recomendaciones por tecnología para definir el diseño de tu interfaz antes de desarrollarla.

Implementa temas claro y oscuro con tokens semánticos, preferencia del sistema y cambio manual, sin destellos del tema incorrecto al cargar y con el contraste comprobado en ambos.

Haz que una interfaz admita cualquier idioma sin rediseñarla: catálogos de mensajes, formato adaptado a la configuración regional, diseños que resisten distintas longitudes de texto, compatibilidad con CJK y con escritura de derecha a izquierda, y cambio de idioma con URL adecuadas.

Crea artefactos web complejos y autocontenidos con React, TypeScript, Tailwind CSS y shadcn/ui.

Crea una animación desde cero en el orden correcto: si debe animarse o no, con qué propósito, con qué herramienta, qué propiedades, qué curva y duración, cómo se interrumpe y cómo sale. Escribe el código y se niega a animar lo que no debería moverse.

Somete un componente a pruebas de estrés con los peores datos realistas: nombres largos, correos electrónicos que no se pueden cortar, nombres de una sola letra, campos ausentes, 1,284 miembros, listas vacías. Informa qué se rompió, por qué y la solución para cada caso, y se detiene antes de cambiar nada.

Enseña al agente a diseñar como una agencia premium: tipografías exactas, espaciado, sombras, estructura de tarjetas anidadas y curvas de movimiento que hacen que un sitio se perciba de alta gama, además de una lista de prohibiciones de los valores predeterminados baratos de la IA.

Mejora un sitio web o una app ya existentes hasta alcanzar una calidad premium sin reescribirlos: analiza el stack, audita tipografía, color, layout, estados y contenido en busca de patrones genéricos de IA y, después, aplica correcciones puntuales por orden de prioridad.

Describe un efecto de movimiento con tus propias palabras y obtén su nombre exacto: «lo que rebota cuando se abre un popover» es Pop in, «el desplazamiento elástico de iOS» es Rubber-banding. Útil para dar instrucciones a un diseñador o para pedírselo a una IA.