Skills de diseño para Claude Code, Codex y tu agente.

Arte generativo con p5.js: partículas con semilla, campos de flujo y parámetros ajustables.

Necesita: p5.js

• Images & Generative Art
• Arte generativo
• En OpenDesign

Aplica los colores de marca y la tipografía oficial de Anthropic a cualquier artefacto. Solo marca Anthropic.

• Brand & Design Systems
• En OpenDesign

Carteles originales y piezas visuales estáticas entregadas como PNG o PDF.

• Images & Generative Art
• PNG / PDF
• En OpenDesign

Establece una dirección visual distintiva, tipografía y diseño para interfaces web nuevas o existentes.

• Web & UI
• Código de UI
• En OpenDesign

GIF animados que cumplen los límites de tamaño y dimensión de Slack.

• Motion & Video
• GIF
• En OpenDesign

Aplica o genera temas de color y tipografía para páginas, diapositivas y documentos.

• Brand & Design Systems
• En OpenDesign

Artefactos HTML interactivos con múltiples componentes usando React, Tailwind y shadcn/ui.

• Web & UI
• HTML
• En OpenDesign

Consultoría de diseño de producto que propone un sistema de diseño completo: estética, tipografía, color, layout y movimiento.

• Brand & Design Systems
• Sistema de diseño
• En OpenDesign

Produce HTML/CSS de calidad de producción desde una dirección de diseño acordada.

• Web & UI
• HTML

QA con ojo de diseñador de una página construida: inconsistencias, espaciado, jerarquía, patrones descuidados; luego los corrige.

• Design Review & Accessibility
• Informe de revisión
• En OpenDesign

Genera varias variantes de diseño en paralelo y abre una tabla de comparación para retroalimentación.

• Web & UI
• Código de UI

Convierte una descripción o fuente Mermaid en un archivo Excalidraw editable más SVG y PNG renderizados.

Necesita: Excalidraw

• Diagrams & Data Visualization
• Diagram

Auditoría de diseño visual de apps iOS en hardware real.

• Mobile Apps
• Informe de revisión

Revisa un plan de diseño verificando completitud y riesgos de experiencia antes de la implementación.

• Design Review & Accessibility
• Informe de revisión
• En OpenDesign

Banners para redes sociales, anuncios, héroes de sitios web e impresión.

• Images & Generative Art
• Image

Voz de marca, identidad visual, marcos de mensajería y consistencia de marca.

• Brand & Design Systems

Identidad de marca, design tokens, estilo de UI, generación de logotipos y programas de identidad corporativa.

Necesita: Servicio de generación de imágenes (Gemini, Atlas Cloud o MuAPI)

• Brand & Design Systems

Tokens de diseño de tres niveles, especificaciones de componentes y generación de diapositivas.

• Brand & Design Systems
• Sistema de diseño

Presentaciones HTML estratégicas con Chart.js, tokens de diseño y layouts responsivos.

Requiere: Chart.js

• Presentations
• Diapositivas HTML
• En OpenDesign

Estilos UI accesibles con shadcn/ui, Tailwind CSS y visuales basados en canvas.

Requiere: shadcn/ui, Tailwind CSS

• Web & UI
• Código de UI

Inteligencia de diseño UI/UX para web, móvil y escritorio: layout, color, tipografía y reglas de UX.

• Web & UI
• Código de UI
• En OpenDesign

Añade, busca, corrige, estiliza y compone componentes shadcn en un proyecto.

Requiere: shadcn/ui

• Web & UI
• Código de UI

Construye interfaces de usuario accesibles, responsivas y de calidad de producción.

• Web & UI
• Código de UI

Tableros premium de guías de marca, sistemas de logo y presentaciones de identidad mediante generación de imágenes.

Requiere: Servicio de generación de imágenes

• Brand & Design Systems
• Image
• En OpenDesign

Diseño frontend anti-slop para páginas de inicio, portfolios y rediseños.

• Web & UI
• Código de UI
• En OpenDesign

Layouts editoriales, variedad de composición y movimiento GSAP en un solo skill frontend.

Requiere: GSAP

• Web & UI
• Código de UI

Enseña detalle de agencia de alto nivel: tipografía, espaciado, sombras, tarjetas y movimiento.

• Web & UI

Genera y analiza primero una imagen de diseño, luego implementa la página correspondiente.

Requiere: Servicio de generación de imágenes

• Web & UI
• Código de UI

Conceptos de pantallas móviles de alta fidelidad y flujos mediante generación de imágenes.

Requiere: Servicio de generación de imágenes

• Mobile Apps
• Image
• En OpenDesign

Referencias de diseño web sección por sección mediante generación de imágenes.

Requiere: Servicio de generación de imágenes

• Web & UI
• Image
• En OpenDesign

Interfaces brutalistas que fusionan tipografía suiza con estética de terminal.

• Web & UI
• Código de UI

Interfaces limpias, monocromáticas y de estilo editorial.

• Web & UI
• Código de UI

Audita un sitio web o aplicación existente y lo mejora a calidad visual premium.

• Design Review & Accessibility
• Informe de revisión

Escribe un DESIGN.md para Google Stitch con énfasis en la distinción visual.

Necesita: Google Stitch

• Brand & Design Systems
• DESIGN.md

Una skill para diseñar, criticar, auditar, pulir, animar y refinar interfaces.

• Design Review & Accessibility
• Código de UI
• En OpenDesign

Convierte texto, notas o un artículo en un video explicativo sin rostro con visuales de escena inventados.

Necesita: HyperFrames

• Motion & Video
• Video

Importa activos de Figma, tokens de marca y storyboards en una composición HyperFrames.

Necesita: HyperFrames, Figma

• Motion & Video
• Video

Crea o edita un video HyperFrames personalizado de múltiples escenas cuando ninguna plantilla se ajusta.

Necesita: HyperFrames

• Motion & Video
• Video

Reglas de animación, esquemas de escenas, transiciones y adaptadores de ejecución para HyperFrames.

Necesita: HyperFrames

• Motion & Video
• Video

Dirección creativa para videos HyperFrames: paleta, tipografía, composición, voz en off, ritmo.

Necesita: HyperFrames

• Motion & Video
• Video

Acercamientos, zooms, reencuadres, movimientos Ken Burns y keyframes 2D/3D para HyperFrames.

Necesita: HyperFrames

• Motion & Video
• Video

Motion graphics cortos orientados al diseño: tipografía cinética, conteo de estadísticas, stings de logo, lower thirds.

Necesita: HyperFrames

• Motion & Video
• Video

Convierte una URL de producto, guion o briefing en un video de lanzamiento o promoción de producto.

Necesita: HyperFrames

• Motion & Video
• Video

Presentaciones interactivas HyperFrames con fragmentos, ramificación y modo presentador.

Necesita: HyperFrames

• Presentations
• Diapositivas HTML

Presentaciones para desarrolladores con Markdown, componentes Vue, resaltado de código y animación.

Needs: Slidev

• Presentations
• Diapositivas HTML

Interfaces compatibles con WCAG 2.2 con accesibilidad móvil y soporte de tecnologías de asistencia.

• Design Review & Accessibility
• Código de UI

Entrevista de identidad de marca primero, luego genera e itera una landing page a través de Stitch.

Necesita: Google Stitch

• Web & UI
• Código de UI

Sistemas de diseño escalables: tokens, infraestructura de tematización, arquitectura de componentes.

• Brand & Design Systems
• Sistema de diseño

Microinteracciones, movimiento, transiciones y patrones de retroalimentación al usuario.

• UX e investigación

Dashboards de KPI: selección de métricas, elección de gráficos, maquetación y patrones en tiempo real.

• Diagrams & Data Visualization
• Dashboard

UI nativa de Android con Material Design 3 y Jetpack Compose.

• Mobile Apps
• Código de UI

UI nativa de iOS siguiendo las Human Interface Guidelines de Apple con SwiftUI.

• Mobile Apps
• Código de UI

Valida y repara decks PPTX editables en cuanto a geometría, accesibilidad e integridad del paquete.

• Presentations
• PPTX

Analiza un PPTX de referencia para extraer tema, tipografía, ritmo de maquetación y diagnósticos.

• Presentations
• Informe de revisión

Redacta especificaciones JSON con coordenadas explícitas para decks PPTX editables.

• Presentations
• PPTX

Selecciona y coloca iconos, imágenes, SVG e infografías aprobados en un deck PPTX.

• Presentations
• PPTX

Estilos de React Native, navegación y animaciones con Reanimated.

Necesita: React Native

• Mobile Apps
• Código de UI

Maquetaciones responsivas con container queries, tipografía fluida, CSS Grid y breakpoints mobile-first.

• Web & UI
• Código de UI

Prueba aplicaciones web con los lectores de pantalla VoiceOver, NVDA y JAWS.

• Design Review & Accessibility
• Informe de revisión

Sistemas de diseño con Tailwind CSS v4: tokens, librerías de componentes, patrones responsivos.

Requiere: Tailwind CSS

• Brand & Design Systems
• Sistema de diseño

Tipografía, teoría del color, sistemas de espaciado e iconografía para visuales cohesivos.

• Brand & Design Systems

Auditorías WCAG 2.2 con pruebas automatizadas, verificaciones manuales y orientación de corrección.

• Design Review & Accessibility
• Informe de revisión

Patrones de componentes reutilizables en React, Vue y Svelte y estrategias de composición.

• Web & UI
• Código de UI

Crea y edita archivos de diagramas draw.io (.drawio, .drawio.svg, .drawio.png).

Requiere: draw.io

• Diagrams & Data Visualization
• Diagram

Genera diagramas y mapas mentales en Excalidraw desde lenguaje natural.

Necesita: Excalidraw

• Diagrams & Data Visualization
• Diagram

Parallax, secciones ancladas, scroll horizontal y animaciones de scroll de texto.

Requiere: GSAP

• Motion & Video
• Código de UI

Diseño profesional de UI/UX, componentes y sistemas de diseño en Penpot mediante herramientas MCP.

Requiere: Penpot MCP

• Web & UI
• Archivo de diseño

Diseño de reportes Power BI: selección de gráficos, layout, legibilidad, accesibilidad.

Requiere: Power BI

• Diagrams & Data Visualization
• Dashboard

Inspecciona visualmente un sitio web en ejecución y localiza y corrige problemas de diseño.

• Design Review & Accessibility
• Informe de revisión

Construye una animación desde cero, decidiendo en orden el propósito, herramienta, propiedades, curva y duración.

• Motion & Video
• Código de UI

Gestos, resortes y transiciones para React Native y Expo.

Requiere: React Native / Expo

• Mobile Apps
• Código de UI

Glosario de búsqueda inversa que convierte una descripción vaga de movimiento en su término exacto.

• Motion & Video

Los gestos, el movimiento físico y la jerarquía espacial de Apple traducidos para la web.

• UX e investigación
• Código de UI

La filosofía de Emil Kowalski sobre refinamiento de UI, diseño de componentes y decisiones de animación.

• UX e investigación
• En OpenDesign

Encuentra lugares en una UI que deberían animarse, con sugerencias de parámetros, y rechaza el resto.

• Motion & Video
• Informe de revisión

Audita código de movimiento existente y produce planes de implementación priorizados y autocontenidos.

• Design Review & Accessibility
• Informe de revisión

Construye varias versiones genuinamente diferentes de un elemento de interfaz detrás de un selector visual interactivo.

• Web & UI
• Código de UI

Revisa código de animación en cuanto a temporización, interacción y acabado según un estándar alto de calidad.

• Design Review & Accessibility
• Informe de revisión
• En OpenDesign

Transiciones de página con sensación nativa usando la View Transition API de React.

Requiere: React

• Motion & Video
• Código de UI

Diapositivas HTML ricas en animación desde cero o convertidas desde archivos PowerPoint (PPT).

• Presentations
• Diapositivas HTML
• En OpenDesign

Renderiza especificaciones JSON en interfaces de terminal interactivas con Ink.

Necesita: Ink

• Web & UI
• UI de terminal

Genera o edita imágenes rasterizadas: ilustraciones, fotos, texturas, sprites, maquetas.

Requiere: Servicio de generación de imágenes

• Images & Generative Art
• Image
• En OpenDesign

Presentaciones PPT HTML horizontales de un solo archivo en estilo revista o suizo, con vista de presentador y sincronización.

• Presentations
• Diapositivas HTML
• En OpenDesign

Define o aplica guías de marca para cualquier producto: color, tipografía, logo y voz.

• Brand & Design Systems

Captura la identidad de marca una vez mediante un asistente de 10 preguntas para posteriores documentos y decks.

• Brand & Design Systems
• Sistema de diseño

Convierte un deck Markdown en diapositivas con marca.

• Presentations
• Diapositivas HTML

Tokens de diseño, documentación de componentes, cálculos responsivos y entrega a desarrolladores.

• Brand & Design Systems
• Sistema de diseño

Personas basadas en datos, mapas de recorrido, marcos de pruebas de usabilidad y síntesis de investigación.

• UX e investigación
• Documento de investigación

Prototipos HTML de alta fidelidad, diapositivas, animación y visualizaciones; comienza desde tres borradores.

• Web & UI
• HTML

Auditoría WCAG 2.1 AA de un diseño o página: contraste, teclado, objetivos táctiles.

• Design Review & Accessibility
• Informe de revisión

Retroalimentación de diseño estructurada sobre usabilidad, jerarquía y consistencia.

• Design Review & Accessibility
• Informe de revisión

Especificaciones de entrega al desarrollador desde un diseño: layout, tokens, estados de componentes, breakpoints.

• Brand & Design Systems
• Especificación de entrega

Audita, documenta o extiende un sistema de diseño existente.

• Brand & Design Systems
• Sistema de diseño

Sintetiza entrevistas, encuestas y notas de pruebas en temas y recomendaciones.

• UX e investigación
• Documento de investigación

Planifica, conduce y sintetiza entrevistas de usuario, encuestas y pruebas de usabilidad.

• UX e investigación
• Documento de investigación

Escribe o revisa textos UX: microcopy, mensajes de error, estados vacíos, CTAs.

• UX e investigación

API principal de GSAP: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

GSAP en Vue, Svelte y otros frameworks no-React: ciclo de vida, alcance, limpieza.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Rendimiento de GSAP: transformaciones, evitar layout thrash, will-change, batching.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Plugins de GSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG y física.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

GSAP en React y Next.js con el hook useGSAP, refs, contexto y limpieza.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Animación vinculada al scroll con ScrollTrigger: pinning, scrub, triggers, parallax.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Timelines de GSAP: parámetro de posición, anidación y control de reproducción.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Utilidades de gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

Requiere: GSAP

• Motion & Video
• Código de UI
• En OpenDesign

Paletas de color y combinaciones tipográficas listas para presentaciones, para tareas de PPT y diseño.

• Brand & Design Systems

Un sistema visual consistente para diapositivas PPT desde recetas de radio y espaciado.

• Presentations

Convierte fotos de personas, mascotas, objetos o logotipos en cuatro stickers GIF con subtítulos.

• Motion & Video
• GIF
• En OpenDesign

Genera, edita y lee presentaciones de PowerPoint (PPTX) editables.

• Presentations
• PPTX
• En OpenDesign

Shaders GLSL: ray marching, SDFs, fluidos, partículas, visuales procedurales.

Necesita: GLSL / WebGL

• Images & Generative Art
• Arte generativo
• En OpenDesign

Implementa diapositivas individuales de PowerPoint con PptxGenJS.

Necesita: PptxGenJS

• Presentations
• PPTX

Limpia rápidamente el código de UI corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de maquetación.

• Design Review & Accessibility
• Código de UI

Crea o actualiza un DESIGN.md a partir de un repositorio de producto existente o un sitio web público.

• Brand & Design Systems
• DESIGN.md

Audita y corrige errores de ARIA, teclado, foco, contraste y formularios.

• Design Review & Accessibility
• Informe de revisión

Encuentra y corrige animaciones CSS/JS entrecortadas y movimiento vinculado al scroll.

• Motion & Video
• Informe de revisión

Audita una superficie de producto contra su propia evidencia de diseño y escribe planes de implementación.

• Design Review & Accessibility
• Informe de revisión

Analiza proyectos de Stitch y escribe un DESIGN.md semántico.

Necesita: Google Stitch

• Brand & Design Systems
• DESIGN.md
• En OpenDesign

Reescribe ideas de UI vagas en prompts pulidos y optimizados para Stitch.

Necesita: Google Stitch

• Web & UI
• En OpenDesign

Convierte diseños de Stitch en dashboards React + Vite con TanStack Query.

Necesita: Google Stitch

• Web & UI
• Código de UI

Videos guiados de proyectos Stitch con transiciones y zooms de Remotion.

Necesita: Google Stitch, Remotion

• Motion & Video
• Video
• En OpenDesign

Integración y personalización de componentes shadcn/ui: descubrimiento, instalación, mejores prácticas.

Requiere: shadcn/ui

• Web & UI
• Código de UI
• En OpenDesign

Convierte código frontend en un diseño Stitch mediante HTML estático y extracción del sistema de diseño.

Necesita: Google Stitch

• Web & UI
• Archivo de diseño

Extrae un DESIGN.md completo del código fuente frontend en cualquier framework.

• Brand & Design Systems
• DESIGN.md

Extrae capturas HTML estáticas autocontenidas con CSS e imágenes en línea.

• Web & UI
• HTML

Genera, edita y varía pantallas en Stitch desde texto o imágenes de referencia.

Necesita: Google Stitch

• Web & UI
• Archivo de diseño

Crea, actualiza y aplica design systems en Stitch a través de herramientas MCP.

Necesita: Google Stitch

• Brand & Design Systems
• Sistema de diseño

Convierte o sincroniza diseños de Stitch a componentes modulares React + Vite.

Necesita: Google Stitch

• Web & UI
• Código de UI

Convierte o sincroniza diseños HTML de Stitch a componentes React Native.

Necesita: Google Stitch, React Native

• Mobile Apps
• Código de UI

Diseño de interfaz artesanal para dashboards, paneles de administración, herramientas SaaS y páginas de configuración.

• Web & UI
• Código de UI

Principios de ingeniería de diseño para hover, sombras, bordes, iconos, tipografía y microinteracciones.

• UX e investigación

Audita y mejora la accesibilidad web siguiendo WCAG 2.2.

• Design Review & Accessibility
• Informe de revisión

Aplica principios de motion design: timing, easing, coreografía y fundamentos de animación.

• Motion & Video

Asistente de investigación de usuarios de principio a fin: cualitativa y cuantitativa, guías y planes.

• UX e investigación
• Documento de investigación

Implementa tokens, componentes y diseños adaptativos de Material Design 3.

• Mobile Apps
• Código de UI

Movimiento de interacción intencional, o revisión de animación existente, según Kowalski, Krehel y Tompkins.

• Motion & Video

Nomenclatura de color, teoría, espacios, paletas, rampas, gradientes, conversiones y contraste.

• Brand & Design Systems
• En OpenDesign

Renderiza datos como gráficos de barras, líneas, circular, radar, Sankey, mapas mentales y diagramas de flujo mediante la API de AntV.

Necesita: AntV API

• Diagrams & Data Visualization
• Imagen de gráfico

Crea infografías a partir de un texto dado.

Necesita: AntV API

• Diagrams & Data Visualization
• Image

Microcopia accesible y centrada en el usuario: botones, etiquetas, errores, formularios, onboarding.

• UX e investigación