Sistemas de diseño, trabajo con componentes y acabado visual.
137 skills en esta categoría
Guía para un diseño visual distintivo e intencionado al construir o rehacer una UI. Ayuda con la dirección estética, la tipografía y las decisiones que no se leen como valores por defecto.
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño.
Aprende a construir con IA, desde cero.
Conocimiento y utilidades para crear GIFs animados optimizados para Slack: restricciones, herramientas de validación y conceptos de animación. Úsalo cuando pidan un GIF animado para Slack.
Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática.
Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas.
Kit para dar estilo a artefactos con un tema: diapositivas, documentos, informes o landing pages. Trae 10 temas predefinidos de colores y fuentes, y puede generar uno nuevo sobre la marcha.
Guía para un diseño visual distintivo e intencional al crear o rediseñar una UI: dirección estética, tipografía y decisiones que no parezcan defaults templados.
Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con contexto del proyecto y documentación.
Arquitectura de tokens en tres capas (primitivo→semántico→componente), especificaciones de componentes y generación de slides. Para tokens de diseño, diseño sistemático y presentaciones conformes a marca.
Crea interfaces bonitas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, logos (55 estilos, Gemini AI), CIP (50 deliverables), presentaciones HTML, banners (22 estilos), iconos SVG e imágenes para redes sociales.
Crea presentaciones HTML estratégicas con Chart.js, tokens de diseño, layouts responsivos, fórmulas de copywriting y estrategias de diapositivas contextuales.
Diseña banners para redes sociales, anuncios, heroes de sitios web, assets creativos e impresión, con múltiples opciones de dirección de arte y visuales generados por IA.
Inteligencia de diseño UI/UX para web y móvil: base de datos local consultable con estilos, paletas de color, tipografías, tipos de producto, guías UX, iconos, presets GSAP y gráficos, en 22 stacks.
Voz de marca, identidad visual, frameworks de mensajería, gestión de activos y consistencia de marca. Úsalo para contenido de marca, tono de voz, activos de marketing y cumplimiento de la marca.
Mejora sitios y apps existentes a calidad premium: audita el diseño actual, detecta patrones genéricos de IA y aplica estándares de alto nivel sin romper la funcionalidad. Funciona con cualquier framework CSS o CSS vanilla.
La skill v1 original de taste, conservada para proyectos que dependen de su comportamiento exacto; el default actual es `design-taste-frontend` (v2 experimental), una reescritura sustancial.
Interfaces de estilo editorial minimalista: paleta monocromática cálida, contraste tipográfico, bento grids planos y pasteles apagados, sin gradientes ni sombras pesadas.
Skill de sistema de diseño semántico para Google Stitch. Genera DESIGN.md que imponen estándares de UI premium anti-genéricos: tipografía, color, layouts asimétricos, micro-movimiento perpetuo y rendimiento.
Skill de generación de imágenes para conceptos premium de pantallas de apps móviles (iOS, Android, cross-platform), con mockups de teléfono, jerarquía limpia y consistencia multi-pantalla. Solo genera imágenes, no código.'
Skill de dirección de imagen frontend de alta gama para generar referencias de diseño web premium: una imagen horizontal por sección, con variedad de composición, fondos, CTAs y escalas de hero, y una paleta consistente en todo el sitio.
Skill anti-slop para frontend: landing pages, portafolios y rediseños. El agente lee el brief, infiere la dirección de diseño correcta y evita interfaces que parezcan plantillas genéricas.
Skill de generación de imágenes premium para brand-kits: boards de guías de marca, sistemas de logo, decks de identidad y presentaciones de mundo visual de alta gama.
Interfaces crudas que fusionan tipografía suiza impresa con estética de terminal militar: cuadrículas rígidas, tipografía extrema y degradación analógica, para dashboards, portfolios o sitios editoriales tipo plano desclasificado.
Ingeniero de UX/UI y motion GSAP de élite: impone aleatoriedad real tipo Python, estructura AIDA estricta, tipografía editorial ancha, bento grids sin huecos, ScrollTriggers avanzados y espaciado masivo entre secciones.
Enseña a la IA a diseñar como una agencia de alta gama: define fuentes, espaciados, sombras, estructura de tarjetas y animaciones exactas, bloqueando los defaults que hacen ver un diseño de IA barato o genérico.
Skill de imagen-a-código para sitios web: genera imágenes de diseño por sección, las analiza a fondo y luego implementa el frontend fiel a ellas, evitando UI genérica y clichés de IA.
Úsalo para diseñar, rediseñar, criticar, auditar, pulir, clarificar, endurecer, optimizar, adaptar, animar, colorizar o mejorar cualquier interfaz frontend. No sirve para tareas de solo backend o sin UI.
Para planificar, mapear o reestructurar la jerarquía de páginas de un sitio, la navegación, la estructura de URLs o el enlazado interno.
Para crear, generar, editar u optimizar imágenes de marketing: heroes de blog, gráficos sociales, mockups de producto, banners de perfil o assets de marca.
Motion graphic corto donde el movimiento es el mensaje: tipografía cinética, count-up, chart, logo sting, lower-third o mapa animado; sin narración, exporta a MP4 u overlay transparente.
Convierte una pista de música (archivo de audio, video del que extraer el audio, o una pista generada a partir de un mood) en un video sincronizado al beat: lyric video, slideshow o promo cinético.
Crea una slideshow de HyperFrames —presentación, pitch deck o deck interactivo— con slides, fragmentos, ramificación y modo presentador; también convierte una página existente en un deck navegable, no en un MP4.
Técnica de estilo propio de HyperFrames: un cursor macOS de tamaño exagerado que entra desde fuera de cuadro, apunta con la punta, hace click para ignitar la siguiente acción y sale físicamente.
Dirección creativa no animada para vídeos HyperFrames: manejo de specs de diseño (frame.md / design.md), paletas, tipografía, narración, beats, audio-reactive y composición.
El catálogo de técnicas: cinco SEAMS con velocidad emparejada más las dos técnicas dentro de escena (waterfall entry y nudge curve), con sus parámetros de blur, escala Z y ritmo de cascada.
Añade subtítulos o captions a un vídeo de un solo sujeto hablando a cámara sin editar el metraje, usando el catálogo de 35 identidades visuales.
Doctrina de overlay para captions embebidos: el modelo drop/rail/embed y la regla de que los captions son un overlay compuesto sobre el film, nunca una banda inferior reservada.
Importa contenido de Figma a una composición de HyperFrames: assets renderizados, tokens de marca, componentes, secciones de storyboard reconstruidas como movimiento y shaders.
GATEWAY — cárgalo primero antes de componer cualquier animación o video en HyperFrames; es la ley de movimiento que hace que un video multi-escena se sienta como UN solo movimiento de cámara continuo.
Punto de entrada obligatorio para crear, editar, animar o renderizar video, animaciones o motion graphics con HyperFrames, así como para inspeccionar, validar o publicar proyectos existentes.
Todo el conocimiento de animación de HyperFrames: reglas atómicas, blueprints multi-fase, transiciones, técnicas de motion-design y siete adaptadores de runtime (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU).
Empaqueta un video de talking-head/entrevista/podcast existente con tarjetas gráficas superpuestas (títulos, lower-thirds, callouts, citas, PiP) sincronizadas con la transcripción, en 16:9, 9:16 o 4:5; el clip se reproduce intacto debajo.
Implementa layouts responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first.
Diseñador de landing pages centrado en marca: hace una entrevista de identidad visual y luego genera e itera la página con Stitch, entregando HTML listo para desplegar.
Domina patrones de componentes en React, Vue y Svelte: CSS-in-JS, estrategias de composición y arquitectura de componentes reutilizables para design systems.
Domina las Human Interface Guidelines de iOS y los patrones de SwiftUI para construir apps nativas. Úsalo al diseñar interfaces iOS, implementar vistas SwiftUI o seguir los principios de diseño de Apple.
Diseña e implementa microinteracciones, motion design, transiciones y patrones de feedback al usuario para pulir interacciones de UI y estados de carga.
Construye sistemas de diseño escalables con Tailwind CSS v4, tokens de diseño, librerías de componentes y patrones responsivos.
Construye sistemas de diseño escalables con tokens de diseño, infraestructura de theming y patrones de arquitectura de componentes.
Domina estilos, navegación y animaciones con Reanimated en React Native para desarrollo móvil multiplataforma con experiencia nativa.
Domina Material Design 3 (Material You) y Jetpack Compose para construir apps Android nativas, modernas y adaptativas, integradas con el ecosistema Android.
Aplica principios de tipografía, teoría del color, sistemas de espaciado e iconografía para crear diseños visuales coherentes, útil al definir design tokens, guías de estilo o mejorar la jerarquía visual.
Úsalo al hacer cambios de UI/frontend guiados por contexto visual: selecciones de elementos, anotaciones o capturas de pantalla junto con la solicitud de cambio.
Revisa código de UI según las Web Interface Guidelines. Úsalo al pedir 'review my UI', 'check accessibility', 'audit design', 'review UX' o 'check my site against best practices'.
El enfoque de Apple al diseño de interfaces y al movimiento fluido y físico, traducido a la web: gestos, springs, materiales, tipografía y accesibilidad.
Audita el código de animación y motion de un repo como un asesor senior, y genera planes de implementación autocontenidos para que otros los ejecuten; solo lectura, no aplica los cambios.
Construye varias versiones genuinamente distintas de una pieza de UI descrita, mostradas en un picker visual para navegarlas en vivo y promover la elegida. Solo se activa si se invoca explícitamente.
Elige la librería correcta para una tarea frontend a partir de una lista curada y opinionada: números, inputs OTP, gráficos, command menus, virtualización, drag and drop, toasts, estado, estilos y más.
Glosario de búsqueda inversa que convierte una descripción vaga de una animación web en su término exacto ("el efecto rebote al abrir un popover" → Pop in)."El scroll tipo goma iOS" → Rubber-banding.
Busca en un código o interfaz lugares que no animan pero deberían, y rechaza todo lo que no debería animarse. Es de solo lectura: propone movimiento con valores exactos, no lo implementa.
Encapsula la filosofía de Emil Kowalski sobre el pulido de UI, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
Construye una animación desde cero, tomando las decisiones en el orden que determina si se siente bien: si debe animarse, con qué propósito, qué herramienta, propiedades, curva y duración, cómo se interrumpe y cómo sale.
Diseñador con HTML para prototipos de alta fidelidad, slides, animaciones y visualizaciones; siempre muestra tres direcciones iniciales antes de ejecutar. No sirve para apps web de producción con backend.
Extrae un sistema de diseño completo (DESIGN.md) directamente del código fuente frontend —React, Vue, Svelte, Angular, HTML/CSS— analizando componentes, hojas de estilo, configs de Tailwind y tokens de diseño.
Genera pantallas nuevas desde texto o imágenes, edita pantallas existentes con prompts y tokens de diseño, y crea variantes usando Stitch MCP.
Gestiona design systems en Stitch usando herramientas MCP: recupera assets, crea/actualiza design systems y los aplica a pantallas.
Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos.
Skill de sistema de diseño semántico para Google Stitch que genera archivos DESIGN.md con estándares premium anti-genéricos: tipografía estricta, color calibrado, layouts asimétricos y micro-movimiento perpetuo.
Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.
Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md.
Convierte ideas vagas de UI en prompts pulidos y optimizados para Stitch: añade especificidad, palabras clave de UI/UX, contexto de sistema de diseño y estructura la salida.
Conocimiento sobre animaciones de mapas en Remotion, con técnicas para mapa estático, Mapbox, MapLibre, MapTiler y CesiumJS.
Principios de design engineering para pulir interfaces: úsalo al construir UI, revisar frontend o trabajar animaciones, sombras, bordes, tipografía, iconos y microinteracciones. Incluye modos de revisión rápida y completa.
Framework (OSS) para construir y mantener un design system en una app Expo: tokens de tema, estructura de componentes reutilizables con variant/size/state, y reglas para extraer vistas repetidas.
Genera y edita imágenes con Google Gemini 3 Pro Image (Nano Banana Pro): texto a imagen, edición, distintas proporciones y salida en alta resolución (2K/4K).
Crea logos con generación de imágenes por IA: define estilo/formato, genera variaciones, itera con feedback, recorta, quita el fondo y exporta como SVG.
Crea banners con generación de imágenes por IA: discute formato/estilo, genera variaciones, itera con feedback del usuario y recorta a la proporción objetivo.
Genera imágenes, videos, assets 3D y audio con Higgsfield AI, con modelos por defecto según la tarea y soporte para Marketing Studio y Virality Predictor.
Genera imágenes de producto y marca de calidad profesional mediante el mejorador de prompts product-photoshoot de Higgsfield sobre GPT Image 2.
Entrena un Soul Character, un modelo personalizado de la cara de una persona que Higgsfield usa para generar imágenes y videos fieles a su identidad.
Crea thumbnails de YouTube y portadas de video verticales de alto CTR con el CLI de Higgsfield: concepto veraz, identidades y logos preservados, render principal con Nano Banana Pro y ediciones quirúrgicas con Seedream.
Genera tarjetas de imagen de producto para marketplace con Higgsfield: imagen principal, imágenes secundarias y módulos de contenido estilo A+.
Crea y extiende sistemas de identidad visual completos con el CLI de Higgsfield: paletas, logos SVG, tipografía, mockups, packaging, señalética, merch, posters, decks y brandbooks PPTX/PDF editables.
Genera y edita imágenes con el modelo GPT Image 1.5 de OpenAI, con soporte para texto-a-imagen y edición con máscara opcional.
Genera y edita imágenes con Nano Banana 2 (Gemini 3.1 Flash Image Preview) de Google, para iteración rápida y control de aspect-ratio y resolución de 512px a 4K.
Genera y edita imágenes con Nano Banana Pro de Google (Gemini 3 Pro Image), en texto-a-imagen o edición de imagen a imagen, con resolución 1K, 2K o 4K.
Renderiza diagramas Mermaid como SVG y PNG usando la librería Beautiful Mermaid. Úsalo cuando el usuario pida renderizar un diagrama Mermaid.
Extrae primitivos de diseño de un sitio web público y genera archivos de tokens iniciales para tu proyecto.
Genera imágenes con Flux 2 Klein (la variante rápida y destilada de Flux 2 de Black Forest Labs) en RunComfy, con los patrones de prompting documentados del modelo para lograr mejores resultados que un prompting ingenuo.
Edita imágenes con Flux 1 Kontext Pro de Black Forest Labs en RunComfy, con los patrones de prompting documentados del modelo para lograr resultados más precisos que un prompting ingenuo.
Genera video a partir de texto con Wan 2.7 (el modelo insignia de Wan-AI) en RunComfy, con lip-sync por audio, multi-referencia y guía sobre cuándo usar HappyHorse, Seedance, Kling o LTX 2 en su lugar.
Crea videos de avatar IA, talking-head y lip-sync en RunComfy con el CLI `runcomfy`, eligiendo entre OmniHuman, Wan 2-7, HappyHorse 1.0 y Seedance v2 Pro según la intención del usuario.
Sustituye una cara o personaje en vídeo o imágenes vía CLI `runcomfy`, eligiendo entre Wan 2-2 Animate, GPT Image 2 Edit, Nano Banana Edit, Flux Kontext y Kling Motion Control según la intención.
Anima cualquier imagen fija en RunComfy: un router inteligente que elige el modelo i2v adecuado (HappyHorse, Wan 2.7 con audio_url, o Seedance 2.0 Pro) según lo que pida el usuario.
Outpainting de imágenes en RunComfy vía el CLI `runcomfy`: extiende el lienzo, cambia el aspect ratio y rellena lo que la cámara no captó, preservando el contenido original.
Mostrando los primeros 96 de 137. Ver todo.
