Crea interfaces frontend distintivas y de calidad para producción con un alto nivel de diseño. Utiliza esta habilidad cuando el usuario solicite construir componentes web, páginas, artefactos, carteles o aplicaciones (ejemplos incluyen sitios web, páginas de aterrizaje, paneles de control, componentes React, diseños HTML/CSS o al estilizar/embellecer cualquier interfaz web). Genera código creativo y pulido y diseño de UI que evita estéticas genéricas de IA.
Kit de herramientas del sistema de diseño de UI para Diseñador UI Senior que incluye generación de tokens de diseño, documentación de componentes, cálculos de diseño responsivo y herramientas para la entrega a desarrolladores. Úselo para crear sistemas de diseño, mantener la consistencia visual y facilitar la colaboración entre diseño y desarrollo.
Crea arte visual hermoso en documentos .png y .pdf utilizando la filosofía de diseño. Debes usar esta habilidad cuando el usuario solicite crear un póster, una obra de arte, un diseño u otra pieza estática. Crea diseños visuales originales, nunca copiando el trabajo de artistas existentes para evitar violaciones de derechos de autor.
Pensamiento y toma de decisiones de diseño mobile-first para aplicaciones iOS y Android. Interacción táctil, patrones de rendimiento, convenciones de plataforma. Enseña principios, no valores fijos. Úsalo al desarrollar aplicaciones React Native, Flutter o nativas.
Kit de herramientas para estilizar artefactos con un tema. Estos artefactos pueden ser diapositivas, documentos, reportes, páginas de aterrizaje HTML, etc. Hay 10 temas predefinidos con colores/fuentes que puedes aplicar a cualquier artefacto que haya sido creado, o puedes generar un nuevo tema al instante.
Kit de herramientas de investigación y diseño UX para Diseñador/Investigador UX Senior que incluye generación de personas basada en datos, mapeo de viajes, marcos de pruebas de usabilidad y síntesis de investigación. Úselo para investigación de usuarios, creación de personas, mapeo de viajes y validación de diseño.
Experto en la creación de experiencias 3D para la web - Three.js, React Three Fiber, Spline, WebGL y escenas 3D interactivas. Cubre configuradores de productos, portafolios 3D, sitios web inmersivos y aportar profundidad a las experiencias web. Uso recomendado para: sitio web 3D, three.js, WebGL, react three fiber, experiencia 3D.
Crear arte algorítmico utilizando p5.js con aleatoriedad con semilla y exploración interactiva de parámetros. Utilice esto cuando los usuarios soliciten crear arte mediante código, arte generativo, arte algorítmico, campos de flujo o sistemas de partículas. Cree arte algorítmico original en lugar de copiar el trabajo de artistas existentes para evitar violaciones de derechos de autor.
Revisar el código de la interfaz de usuario para el cumplimiento de las Directrices de la Interfaz Web. Usar cuando se solicite "revisar mi UI", "verificar accesibilidad", "auditar diseño", "revisar UX" o "verificar mi sitio contra las mejores prácticas".
Experto en la creación de experiencias inmersivas impulsadas por el desplazamiento - narración parallax, animaciones de desplazamiento, narrativas interactivas y experiencias web cinematográficas. Como las interactivas del NY Times, las páginas de productos de Apple y experiencias web galardonadas. Hace que los sitios web se sientan como experiencias, no solo como páginas. Usar cuando: animación de desplazamiento, parallax, narración con desplazamiento, historia interactiva, sitio web cinematográfico.
Guía completa para crear diagramas de software utilizando la sintaxis de Mermaid. Úsese cuando los usuarios necesiten crear, visualizar o documentar software mediante diagramas que incluyan diagramas de clases (modelado de dominio, diseño orientado a objetos), diagramas de secuencia (flujos de aplicación, interacciones de API, ejecución de código), diagramas de flujo (procesos, algoritmos, recorridos de usuario), diagramas de entidad-relación (esquemas de bases de datos), diagramas de arquitectura C4 (contexto del sistema, contenedores, componentes), diagramas de estados, gráficos git, gráficos de pastel, diagramas de Gantt, o cualquier otro tipo de diagrama. Los desencadenantes incluyen solicitudes para "diagramar", "visualizar", "modelar", "mapear", "mostrar el flujo", o al explicar arquitectura de sistemas, diseño de bases de datos, estructura de código o flujos de usuario/aplicación.
Planifica, crea y optimiza campañas de marketing que incluyen estrategia de contenido, redes sociales, correo electrónico y análisis. Ayuda a desarrollar estrategias de lanzamiento al mercado, mensajes de campaña y medición de rendimiento.
Utilice el servidor MCP de Figma para obtener el contexto de diseño, capturas de pantalla, variables y recursos de Figma, y para traducir nodos de Figma en código de producción. Active cuando una tarea involucre URLs de Figma, IDs de nodos, implementación de diseño a código, o configuración y solución de problemas del MCP de Figma.
Traduce nodos de Figma en código listo para producción con fidelidad visual 1:1 utilizando el flujo de trabajo Figma MCP (contexto de diseño, capturas de pantalla, recursos y traducción de convenciones del proyecto). Se activa cuando el usuario proporciona URLs de Figma o IDs de nodos, o solicita implementar diseños o componentes que deben coincidir con las especificaciones de Figma. Requiere una conexión funcional al servidor Figma MCP.
Especialista en accesibilidad web para cumplimiento de WCAG, implementación de ARIA y diseño inclusivo. Úsese al auditar sitios web en busca de problemas de accesibilidad, implementar estándares WCAG 2.1 AA/AAA, probar con lectores de pantalla o asegurar el cumplimiento de ADA. Experto en HTML semántico, navegación por teclado y compatibilidad con tecnologías asistivas.
Creación de visualizaciones de datos interactivas utilizando d3.js. Esta habilidad debe usarse al crear gráficos personalizados, diagramas de red, visualizaciones geográficas o cualquier visualización de datos compleja basada en SVG que requiera un control detallado sobre los elementos visuales, transiciones o interacciones. Utilice esto para visualizaciones a medida más allá de las bibliotecas estándar de gráficos, ya sea en React, Vue, Svelte, JavaScript puro o cualquier otro entorno.
Conocimientos y utilidades para crear GIFs animados optimizados para Slack. Proporciona restricciones, herramientas de validación y conceptos de animación. Úsese cuando los usuarios soliciten GIFs animados para Slack como "hazme un GIF de X haciendo Y para Slack."
Experto en construir portafolios que realmente consiguen empleos y clientes, no solo mostrando trabajo, sino creando experiencias memorables. Cubre portafolios de desarrolladores, portafolios de diseñadores, portafolios creativos y portafolios que convierten visitantes en oportunidades. Usar cuando: portfolio, sitio web personal, mostrar trabajo, portafolio de desarrollador, portafolio de diseñador.
Usar al trabajar con archivos *.excalidraw o *.excalidraw.json, cuando el usuario menciona diagramas/diagramas de flujo o solicita visualización de arquitectura - delega todas las operaciones de Excalidraw a subagentes para evitar el agotamiento del contexto debido a JSON verboso (archivos individuales: 4k-22k tokens, pueden exceder los límites de lectura)
Generar documentación de arquitectura utilizando diagramas Mermaid del modelo C4. Usar cuando se solicite crear diagramas de arquitectura, documentar la arquitectura del sistema, visualizar la estructura del software, crear diagramas C4 o generar diagramas de contexto/contenedor/componente/despliegue. Los disparadores incluyen "diagrama de arquitectura", "diagrama C4", "contexto del sistema", "diagrama de contenedor", "diagrama de componente", "diagrama de despliegue", "documentar arquitectura", "visualizar arquitectura".
Usar cuando Codex está construyendo o iterando en un juego web (HTML/JS) y necesita un ciclo confiable de desarrollo + pruebas: implementar pequeños cambios, ejecutar un script de prueba basado en Playwright con ráfagas cortas de entrada y pausas intencionales, inspeccionar capturas de pantalla/texto y revisar errores de consola con render_game_to_text.
Usar cuando el usuario solicite generar o editar imágenes a través de la API de Imágenes de OpenAI (por ejemplo: generar imagen, editar/inpaint/máscara, eliminación o reemplazo de fondo, fondo transparente, fotos de productos, arte conceptual, portadas o variantes por lotes); ejecutar la CLI incluida (`scripts/image_gen.py`) y requerir `OPENAI_API_KEY` para llamadas en vivo.
Crea diapositivas profesionales para presentaciones Marp con 7 hermosos temas (predeterminado, minimalista, colorido, oscuro, degradado, tecnológico, empresarial). Úsalo cuando los usuarios soliciten la creación de diapositivas, presentaciones o documentos Marp. Soporta temas personalizados, diseños de imágenes y solicitudes de "haz que se vea bien" con mejoras automáticas de calidad.
Genera memes usando la API memegen.link. Úsalo cuando los usuarios soliciten memes, quieran añadir humor al contenido o necesiten ayudas visuales para redes sociales. Soporta más de 100 plantillas populares con texto y estilo personalizados.