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

Pon a prueba la interfaz existente con datos extremos realistas y un interruptor de comparación solo para desarrollo; informa de los fallos antes de corregirlos.

Código fuente del componente, datos de demostración existentes y límites de los campos; una aplicación en ejecución y un navegador para la verificación visual.

• Pruebas de estrés de la interfaz
• Fixtures de casos límite
• Informe de revisión

Diagnostica fotogramas perdidos en animaciones web: coste de renderizado, contención del hilo principal, actualizaciones de React por fotograma y variables de CSS heredadas.

Código de la animación y una interacción reproducible; perfilado del navegador y un dispositivo real de destino para verificar el rendimiento.

• Animación web
• Rendimiento de fotogramas
• Revisión diagnóstica

Recrea una captura de pantalla proporcionada en la app existente, y después renderiza con el viewport de referencia y corrige las diferencias visibles.

Aporta una imagen de referencia legible, su viewport objetivo, acceso al proyecto y los recursos disponibles. Se necesita renderizado en el navegador para verificar la coincidencia visual. No se requiere cuenta de UIZZE ni conexión con MCP.

• De captura a código
• Coincidencia con la referencia
• Implementación de UI

Enruta las solicitudes de vídeo al flujo de trabajo adecuado, retoma proyectos existentes y coordina la composición, los medios, la vista previa y el renderizado de HTML.

La CLI requiere Node.js 22+ y FFmpeg. Empieza con las skills básicas; los flujos de creación se instalan bajo demanda. Los servicios multimedia y el renderizado en la nube pueden añadir requisitos.

• HTML a vídeo
• Enrutamiento de flujos de trabajo
• Producción de vídeo

Explica ideas técnicas mediante mecanismos isométricos elaborados en SVG e interacción basada en un modelo.

El kit requiere Node.js 20.10+ y Chrome o Chromium para las comprobaciones. La CLI de skills tiene su propio requisito de Node; el README indica 22.20+ para la CLI 1.7.1.

• SVG isométrico
• Explicaciones técnicas
• Figuras interactivas

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
• Código de UI

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.

• Motion & Video
• Código de UI

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.

• Web & UI
• Código de UI

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

• Web & UI
• 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.

• Web & UI

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

Mantén cada hallazgo de accesibilidad vinculado al elemento afectado, la corrección propuesta y el resultado de la verificación.

Python para las herramientas incluidas, acceso al código fuente y un navegador o configuración de tecnología de asistencia para la validación en contexto.

• Accesibilidad
• Revisión de diseño
• Frontend

Planifica una presentación académica en torno a su argumento, su evidencia y los títulos de sus diapositivas; otra herramienta crea el archivo PPTX.

Requiere una skill PPTX independiente. La entrada enumera markitdown, PptxGenJS, LibreOffice y Poppler como dependencias relacionadas con la implementación.

• Presentaciones
• Investigación académica
• PowerPoint

Escribe scripts ExtendScript para crear y editar documentos, ilustraciones y exportaciones de Illustrator.

Adobe Illustrator CC o posterior; los scripts generados se ejecutan en su entorno ExtendScript.

• Diseño vectorial
• Automatización
• Illustrator

Agrupa observaciones de investigación en temas conservando su vínculo con la evidencia original.

Usa un agente que pueda leer las transcripciones o notas proporcionadas. Aporta los ID de los participantes y la pregunta de diseño; la skill sintetiza evidencia existente en lugar de realizar entrevistas.

• Investigación UX
• Síntesis

Dale a una transición un propósito claro y un perfil de movimiento que respalde el cambio de estado de la interfaz.

Indica los estados anterior y posterior de la interfaz, el disparador y los dispositivos de destino. Usa una vista previa ejecutable para comprobar la temporización, la interrupción y el comportamiento con movimiento reducido.

• Movimiento de interfaz
• Guía de diseño

Empieza por los objetos y las restricciones reales del producto antes de elegir un tratamiento visual.

Un agente capaz de leer archivos del proyecto; compatibilidad con renderizado para las comprobaciones visuales. UIZZE MCP de pago es opcional.

• Diseño de interfaces
• Revisión de diseño

Crea gráficos con AntV G2 v5 usando sus marcas, codificaciones, escalas e interacciones.

Requiere @antv/g2 v5 o el bundle de navegador documentado. La consulta opcional de referencias usa el servicio de contexto externo AntV.

• Data Visualization
• Gráficos
• JavaScript

Visualiza datos de red con AntV G6 v5, incluidos diseños de grafos y exploración interactiva.

Una aplicación que use @antv/g6 v5, un contenedor de grafo en el navegador y acceso a la red si se necesita el servicio de recuperación de referencias documentado. Verifica las API con la versión instalada.

• Visualización de grafos
• Redes
• AntV

Crea un editor de diagramas de nodos y aristas con AntV X6, que incluya conexiones, comportamiento de edición y los plugins necesarios.

Usa la API documentada de @antv/x6 v3, con un lienzo en el navegador y los plugins necesarios. Obtener referencias adicionales requiere acceso a la red. Comprueba los ejemplos con la versión que tengas instalada.

• Editores de diagramas
• Interfaces de nodos
• AntV

Crea un video explicativo original, respaldado por fuentes, con narración y un lenguaje visual deliberadamente coherente.

Requiere el proyecto Remotion/Node suministrado, scripts auxiliares de Python, capacidad de renderizado y una vía de TTS adecuada. Los valores predeterminados documentados para chino e inglés usan motores de voz distintos; la construcción con varios agentes forma parte del flujo descrito.

• Gráficos animados
• Video
• Remotion

Compón un conjunto coordinado de imágenes de ficha de tienda de apps a partir de capturas de pantalla, textos y recursos visuales.

Requiere el editor de Next.js incluido, un entorno compatible de Node y gestor de paquetes, y un navegador. La exportación PNG usa html-to-image; las capturas de origen, las fuentes y otros recursos necesitan los derechos de uso adecuados.

• Marketing de apps
• Capturas de pantalla
• Localización

Revisa interfaces de plataformas Apple según la guía de diseño y accesibilidad específica de cada plataforma.

Python 3 para el verificador, que solo usa la biblioteca estándar; las Human Interface Guidelines (HIG) de Apple vigentes; y acceso a un dispositivo o simulador para comprobar el comportamiento.

• UI nativa
• Accesibilidad
• Revisión de diseño

Planifica y genera ilustraciones que expliquen ideas clave en los puntos relevantes de un artículo.

Un backend de generación raster disponible y los archivos de referencia y configuración de la Skill; el acceso al backend y su costo son aparte.

• Ilustración editorial
• Diseño de contenido

Planifica qué enseña cada viñeta antes de generar las páginas del cómic.

Un backend de imágenes disponible; Bun o un entorno Bun basado en npx para el script de combinación de PDF incluido.

• Cómics
• Diseño educativo
• Narrativa

Genera una portada de artículo en torno a una idea central, con una composición y un estilo visual definidos.

Un backend de imágenes raster disponible y las referencias de configuración y dirección de arte del Skill.

• Diseño editorial
• Imágenes de portada

Usa un flujo de diseño basado en archivos para prototipos, conceptos de presentación y sistemas visuales reutilizables.

Un agente capaz de trabajar con archivos y la metodología, las guías integradas, los documentos de referencia y los scripts del repositorio. Las rutas de exportación e importación tienen sus propios requisitos previos.

• Prototipado
• Sistemas de diseño
• Presentaciones

Mantén las relaciones, las etiquetas y las rutas de los conectores explícitas en un archivo vectorial inspeccionable.

Un entorno de texto/código para SVG; Bun o Bun mediante npx para el script de conversión PNG incluido.

• Diagramas
• SVG
• Diseño de información

Ejecuta trabajos de generación y edición de imágenes con proveedores compatibles, incluidos flujos por lotes.

Bun o un entorno Bun basado en npx, adaptadores de proveedor completos y credenciales o inicio de sesión para la ruta compatible elegida.

• Generación de imágenes
• Flujos por lotes
• Recursos visuales

Convierte contenido en una infografía con un diseño de comparación, jerarquía, proceso o visión general adecuado al material.

Un backend de imágenes rasterizadas disponible, además de referencias de diseño, estilo y configuración.

• Infografías
• Diseño de información

Genera diapositivas ilustradas y ensambla una presentación basada en imágenes para compartir; los objetos individuales de cada diapositiva no son editables.

Un backend de generación de imágenes raster y Bun o Bun mediante npx para los scripts de ensamblaje de PPTX/PDF.

• Presentaciones
• Diseño editorial

Crea una serie de tarjetas de imagen de Xiaohongshu visualmente coherente, con una idea principal por tarjeta.

Un backend de imágenes rasterizadas disponible con soporte adecuado de referencias, además de referencias de configuración y de diseño de tarjetas.

• Gráficos para redes sociales
• Diseño de contenido
• Tarjetas de imagen

Convierte material fuente en un artículo HTML legible con tipografía, maquetación e ilustraciones editoriales.

La compilación documentada usa Node/npm, Vite, React, TypeScript y Reacticle. La extracción de documentos y la salida opcional a PDF pueden requerir herramientas adicionales; las imágenes generadas necesitan un backend disponible por separado.

• Diseño editorial
• HTML
• Formato largo

Analiza las agrupaciones de tarjetas de los participantes para proponer categorías de navegación e identificar elementos ambiguos.

Aporta los resultados completos del card sorting, incluidas las ubicaciones y etiquetas de cada participante y el método del estudio. La skill analiza la evidencia proporcionada; el reclutamiento y la recopilación de datos son tareas aparte.

• Investigación UX
• Síntesis

Planifica una prueba de primer clic para comprobar si las personas pueden identificar por dónde empezar una tarea.

Proporciona la pantalla o el prototipo, el objetivo del usuario y los criterios de reclutamiento. La skill crea un plan de prueba; realizar las sesiones y recopilar los clics requiere una configuración de estudio aparte.

• UX
• Guía de diseño

Convierte material de origen en diapositivas ilustradas y ensambla un PPTX con contenido de diapositivas basado en imágenes, no editable de forma individual.

Python 3, un backend de generación de imágenes disponible y los scripts de ensamblaje y registro de estado del repositorio. Los documentos de flujo de trabajo a los que se hace referencia son necesarios para la ejecución real.

• Presentaciones
• Generación de imágenes

Convierte un color de marca en un conjunto utilizable de roles de interfaz y combinaciones de primer plano y fondo.

Aporta los colores de marca, los roles de la interfaz y los objetivos de accesibilidad. Usa estados reales de los componentes y una herramienta de comprobación de contraste para evaluar las combinaciones de color propuestas.

• Diseño del color
• Guía de diseño

Haz que un componente pueda implementarse explicando su comportamiento con tanto cuidado como su apariencia.

Indica el propósito del componente, sus variantes visuales y la plataforma de destino. El resultado es una especificación para implementar y probar, no un componente implementado.

• Sistemas de diseño
• Especificaciones

Diseña lo que dice el sistema, lo que espera recibir y cómo se recupera cuando ambas cosas no coinciden.

Aporta las tareas compatibles, las restricciones del canal y los requisitos de confirmación. Los flujos de voz también requieren pruebas con dispositivos y reconocimiento de voz; un diálogo escrito por sí solo no permite establecer la calidad del reconocimiento.

• UX
• Guía de diseño

Traduce la jerarquía de la interfaz a superficies oscuras en lugar de invertir sus colores.

Parte de una paleta existente en modo claro, ejemplos de componentes y recursos multimedia. Usa una interfaz renderizada para comprobar el contraste en modo oscuro, el cambio de tema y el tratamiento de las imágenes.

• Diseño del color
• Guía de diseño

Genera diseños de diapositivas alternativos a partir de una sola fuente de contenido y usa después el editor local para previsualizarlos y exportarlos.

Requiere Node.js 20+, npm y el generador incluido con el skill. Usa su servicio local de vista previa para las funciones de edición y exportación; un servidor estático genérico no ofrece esas API.

• Presentaciones
• Diapositivas HTML
• PPTX

Elige el gráfico que haga comprensible la comparación, no el que parezca más elaborado.

Aporta los datos reales, las definiciones de los campos, la pregunta del lector y las restricciones de visualización. La skill orienta el diseño del gráfico; la validación de los datos y la implementación del gráfico son tareas distintas.

• Data Visualization
• Guía de diseño

Da a las decisiones visuales nombres y relaciones que los componentes puedan reutilizar.

Aporta los valores visuales existentes, ejemplos de componentes y restricciones de nomenclatura. La skill define los nombres de los tokens y sus relaciones; la herramienta de exportación y la integración con el framework requieren una configuración aparte.

• Sistemas de diseño
• Especificaciones

Captura las experiencias que se desarrollan entre sesiones en lugar de intentar reconstruirlas en una sola entrevista.

Aporta el objetivo de la investigación, los criterios de los participantes, el periodo de tiempo y las herramientas de registro viables. El resultado es un plan de estudio; el reclutamiento, los seguimientos y la recogida de datos de los participantes aún deben llevarse a cabo.

• Investigación UX
• Planificación de estudios

Establece primero la captura de pantalla deseada y úsala como objetivo de la implementación.

Necesita una imagen objetivo, o acceso a generación de imágenes si no se proporciona ninguna. Los requisitos detallados de herramientas dependen del flujo de trabajo de referencia seleccionado y no se pudieron establecer solo a partir de la entrada.

• Iteración visual
• Diseño de juegos
• Prototipado

Comparte la perspectiva de un usuario manteniendo la evidencia directa separada de la interpretación.

Un agente que pueda leer tus notas de investigación, un usuario o segmento definido y la decisión de diseño que el mapa debe orientar.

• Investigación UX
• Síntesis

Haz que los fallos expliquen qué ha ocurrido y den a las personas una salida sin perder su trabajo.

Un agente que pueda leer los flujos afectados, los casos de fallo conocidos y las acciones de recuperación que tu producto admite realmente.

• UX
• Guía de diseño

Asigna los componentes publicados de Figma a sus componentes de código equivalentes con Code Connect.

Figma MCP conectado, acceso a los componentes publicados y al código base, además de derecho vigente a Code Connect y permisos de edición.

• Figma
• Sistemas de diseño
• Traspaso a desarrollo

Documenta las rutas del repositorio, los componentes y las convenciones que un agente debe usar para implementar diseños de Figma.

Conexión con Figma MCP y acceso al código base de destino; el formato de reglas de destino depende del host de programación.

• Figma
• Sistemas de diseño
• Reglas para agentes

Crea una pantalla de Figma editable que siga conectada a su sistema de diseño.

Figma MCP conectado, acceso al archivo de destino, un sistema de diseño publicado y el Skill complementario figma-use para las operaciones en el lienzo.

• Figma
• Diseño de UI
• Sistemas de diseño

Crea una biblioteca reutilizable de Figma, empezando por los tokens de diseño y añadiendo después los componentes.

Figma MCP con acceso a archivos editables, acceso al repositorio y la Skill complementaria figma-use junto con sus referencias auxiliares.

• Figma
• Sistemas de diseño
• Bibliotecas de componentes

Implementa un diseño de Figma usando los componentes y convenciones del repositorio de destino y luego compara el resultado con el diseño.

Figma MCP conectado, acceso al diseño seleccionado y al repositorio de destino, y una vista previa ejecutable para la validación visual.

• Figma
• Diseño frontend
• Traspaso a desarrollo

Especifica el recorrido desde el primer campo hasta un envío correcto, incluidas las correcciones y las visitas posteriores.

Un agente que pueda leer el brief del formulario, los campos obligatorios y las reglas de validación, y las pantallas de formulario existentes.

• UX
• Guía de diseño

Convierte una tarea de modelado con dimensiones en objetos de FreeCAD que se puedan inspeccionar y ajustar.

FreeCAD con su Python incluido; el trabajo con interfaz gráfica usa además PySide incluido, y el trabajo con grafo de escena usa Pivy.

• Diseño 3D
• CAD
• Python

Genera y guarda recursos de imagen mediante un proveedor compatible, usando las credenciales configuradas del proyecto.

Se necesita una clave API de un proveedor compatible y acceso a la red; la disponibilidad de modelos y los costes de uso deben comprobarse por separado.

• Generación de imágenes
• Recursos visuales

Diseña lo que ocurre antes, durante y después de un gesto, no solo la acción final del deslizamiento.

Un agente que pueda leer el brief de interacción, las plataformas de destino y las acciones disponibles mediante botones o menús.

• UX
• Guía de diseño

Prepara prompts de imagen y ejecuta la generación o edición mediante una herramienta de imagen nativa disponible o el flujo local configurado de API.

El modo local de API requiere activar Garden de forma explícita, scripts de Node y credenciales configuradas. El modo nativo depende de la herramienta de imagen del host. El acceso a modelos, los precios y los parámetros compatibles deben comprobarse en ese entorno.

• Generación de imágenes
• Diseño de prompts
• Edición de imágenes

Revisa la usabilidad de la interfaz y documenta la evidencia detrás de cada hallazgo, sin presentar el juicio de un experto como investigación con participantes.

Un agente que pueda inspeccionar la interfaz, un conjunto definido de tareas de usuario y las restricciones relevantes del dominio.

• UX
• Guía de diseño

Elige un tratamiento de foil o una transformación de imagen completa según el ángulo antes de construir la tarjeta.

Requiere generación de imágenes, Python, Blender y un entorno web para el visor entregado. La fuente menciona la instalación local de dependencias durante el pipeline.

• Diseño 3D
• Tarjetas coleccionables
• Blender

Crea un cortometraje a partir de una dirección de arte, no de una secuencia de transiciones de diapositivas. Huashu Art Motion combina escenas dibujadas con código, sprites de personajes y revisión del movimiento en un flujo de renderizado local.

El renderizado local requiere uv, FFmpeg y Playwright Chromium. Proporciona fotogramas de personajes existentes o usa un flujo de generación de imágenes aparte para sprites de aspecto humano; el audio y las fuentes tipográficas necesitan sus propios recursos y permisos.

• Animación artística
• Canvas
• Cortometrajes

Crea una skill de diseño reutilizable a partir de referencias visuales, reglas de diseño y tokens.

Requiere acceso a archivos, herramientas adecuadas para inspeccionar referencias, Node para validate.mjs y revisión en navegador para tener confianza visual. La disponibilidad de herramientas afecta a la fidelidad de la extracción.

• Sistemas de diseño
• Creación de Skills
• Tokens de diseño

Da a los iconos un sistema coherente de construcción y nomenclatura en lugar de reunir símbolos sin relación.

Un agente que pueda inspeccionar iconos representativos, sus tamaños previstos y los formatos de diseño y código requeridos.

• Sistemas de diseño
• Especificaciones

Da a las ilustraciones encargadas o recurrentes un lenguaje visual compartido y una función clara en la interfaz.

Un agente que pueda inspeccionar referencias visuales, colores del producto y las pantallas y tamaños donde aparecerán las ilustraciones.

• UX
• Guía de diseño

Convierte diapositivas visuales en una presentación estructurada en lugar de colocar capturas de pantalla detrás de texto editable.

Requiere la CLI editppt, capacidades adecuadas de generación de imágenes y ejecución multiagente para procesos de varias páginas. PaddleOCR es una ayuda opcional configurada; las sugerencias sin conexión tienen un perfil de calidad distinto.

• Presentaciones
• PowerPoint
• Reconstrucción

Decide dónde encaja cada información antes de decidir qué aspecto tendrá la navegación.

Necesita contenido del producto y evidencia de las tareas de los usuarios; la fuente no exige ninguna aplicación de diseño concreta.

• Estrategia UX
• Estructura de contenido

Convierte los objetivos de investigación en preguntas que invitan a aportar evidencia en lugar de sugerir una respuesta.

Los objetivos de investigación, los criterios de participantes y las limitaciones de la sesión son los datos principales; no se incluye ningún servicio de grabación ni de reclutamiento.

• Investigación UX
• Entrevistas

Replantea una decisión de producto en torno a lo que una persona intenta lograr.

Requiere investigación de usuarios o hipótesis claramente etiquetadas; no recopila entrevistas por sí mismo.

• Investigación UX
• Estrategia de producto

Conecta los puntos de contacto individuales en la experiencia que una persona realmente atraviesa.

Usa personas, investigación y analítica existentes; no se establece ninguna medición automática del sentimiento.

• Investigación UX
• Mapa de experiencia

Conecta el argumento de la página y sus reglas visuales en torno a una única conversión prevista.

No se requiere un único entorno de ejecución de aplicaciones; los ejemplos de implementación hacen referencia a valores de Tailwind, IntersectionObserver y herramientas de movimiento opcionales.

• Landing pages
• Redacción publicitaria
• Diseño web

Conecta una propuesta de producto real con las secciones de la página antes de generar los componentes.

Un proyecto compatible de React o Next.js con Tailwind; los componentes de UI referenciados y las herramientas opcionales de análisis de marca pueden requerir una configuración aparte.

• Landing pages
• Copywriting
• Frontend

Define columnas, márgenes y comportamiento responsive compartidos para diseños de página relacionados.

No tiene dependencias de ejecución con nombre; requiere restricciones de contenido reales para elegir valores de cuadrícula útiles.

• Diseño de UI
• Diseño responsive

Muestra qué ocurre durante una espera sin engañar a las personas sobre el progreso.

Los tiempos precisos de las operaciones y las capacidades de progreso deben proceder del equipo de producto o de implementación.

• Diseño de interacción
• UX de carga

Prepara la interfaz para las diferencias entre idiomas, no solo para cadenas traducidas.

Requiere texto en los idiomas de destino, fuentes y una revisión lingüística o cultural adecuada; no incluye ninguna plataforma de localización automática.

• Sistemas de diseño
• Localización

Construye y prueba la marca antes de ampliarla a un kit de marca completo.

La fuente describe scripts auxiliares de Python sin dependencias, pero para renderizar imágenes de verdad se necesita un renderizador disponible, como CairoSVG, Inkscape, Chrome u otra opción compatible.

• Branding
• Logo Design
• SVG

Ofrece a ingeniería el comportamiento detrás de una interacción pequeña, no solo una referencia de animación.

No se requiere ninguna biblioteca de movimiento concreta; aun así, es necesario probar en el dispositivo de destino.

• Diseño de interacción
• Entrega de UI

Haz que las decisiones de animación sean reutilizables entre componentes y equipos.

Requiere una implementación de tokens o un equivalente de la plataforma; la fuente no exige ningún framework de animación.

• Sistemas de diseño
• Movimiento

Genera o edita imágenes a través de OpenRouter con imágenes de referencia y un script de Python incluido.

uv, el script de Python incluido y una OPENROUTER_API_KEY con el acceso a modelos y los créditos adecuados.

• Edición de imágenes
• Composición

Convierte una jerarquía de información en controles de navegación reconocibles y en rutas claras entre destinos.

Necesita una jerarquía de información y prioridades de tareas; no se incluye ningún paquete de componentes de navegación.

• Diseño de interacción
• Navegación

Ayuda a los nuevos usuarios a lograr un resultado útil antes de pedirles que aprendan todo el producto.

Requiere definiciones de activación específicas del producto e instrumentación para cualquier medición posterior.

• Diseño de interacción
• Onboarding

Aplica un sistema de marca a una página o presentación HTML, usando reglas de diseño adecuadas al formato elegido.

La extracción de marca a partir de una URL requiere Firecrawl. Los resultados predeterminados evitan dependencias externas de JavaScript, aunque las fuentes tipográficas o las imágenes pueden seguir necesitando su propia disponibilidad y derechos.

• Diseño web
• Presentaciones
• Sistemas de marca

Una guía frontend con opiniones muy marcadas para landing pages expresivas, portfolios y presentaciones interactivas.

Un proyecto frontend y las librerías de animación que elijas deliberadamente; la guía no exige un único entorno de ejecución.

• Diseño frontend
• Movimiento
• Tipografía

Mantén el texto y los tiempos de los subtítulos en una estructura de datos definida antes de darles estilo en una línea de tiempo de vídeo.

Un proyecto de Remotion, @remotion/captions y los archivos de referencia pertinentes de transcripción, importación y visualización.

• Vídeo
• Subtítulos

Configura un proyecto y una composición de Remotion a partir de un brief de vídeo, con una vista previa disponible durante el desarrollo.

Node.js, Git, instalación de paquetes, Remotion Studio y las referencias relacionadas de composición y diseño.

• Vídeo
• React

Haz que un vídeo sea editable en Studio cambiando la forma en que su código React expone las capas, los tiempos y los controles.

Se necesita una versión de Remotion compatible con las API interactivas documentadas; además, @remotion/paths es necesario para la interpolación de trazados editable descrita.

• Vídeo
• React
• Interacción

Crea mapas animados en Remotion, eligiendo la técnica de mapeo, el proveedor y los datos para la toma prevista.

Remotion más las bibliotecas y los datos de la técnica seleccionada; según la fuente consultada, Mapbox requiere una clave.

• Vídeo
• Mapas

Escribe marcado React que se comporte como una línea de tiempo de vídeo y no como una página web con animación de CSS.

Remotion y paquetes específicos de cada función que coincidan con la versión del proyecto; las referencias enlazadas determinan los requisitos adicionales de multimedia, efectos, tipografías o exportación.

• Vídeo
• React
• Movimiento

Elige una macro para una secuencia de comandos y un script cuando la tarea de modelado requiera lógica.

Rhino 7 o posterior; Rhino 8 es el entorno que recomienda la fuente para el Script Editor unificado.

• Diseño 3D
• CAD
• Automatización

Un recorrido de cámara prerrenderizado controlado con el desplazamiento, no un mundo 3D en vivo.

El flujo documentado usa Higgsfield y una vía de vídeo de Monid, además de ffmpeg/ffprobe y un entorno de navegador. Las cuentas de proveedores, los créditos, las capacidades de los modelos y cualquier ruta opcional de imágenes requieren una verificación actualizada.

• Animación con scroll
• Vídeo
• Páginas de aterrizaje

Diseña la experiencia completa de recuperación de información, incluidas las búsquedas que fallan.

Los servicios de búsqueda y la instrumentación de consultas son externos a esta guía.

• Diseño de interacción
• Búsqueda

Revela el trabajo operativo que hay detrás de lo que ve el cliente.

Requiere evidencia de las partes interesadas y del proceso; no accede por sí solo a los sistemas operativos.

• Estrategia UX
• Diseño de servicios

Escribe shaders de Slang y comprueba cómo se conectan sus entradas, recursos y salidas con el renderizador.

Un entorno de compilación de Slang y de renderizado adecuado para el backend de destino; para afirmar que la integración funciona se necesita validación en el lado del host.

• Shaders
• Gráficos GPU
• Diseño 3D

Elige el espaciado según la relación y el propósito, no mediante ajustes de píxeles aislados.

No se requiere ninguna herramienta de tokens específica; la aplicación depende del sistema de componentes existente.

• Diseño de UI
• Design tokens

Describe qué puede ocurrir a continuación desde cada estado de un componente.

No se requiere ningún paquete state-machine concreto; la implementación real y las pruebas siguen siendo trabajo posterior.

• Diseño de interacción
• Modelado del comportamiento

Permite que una misma biblioteca de componentes cambie de apariencia sin duplicar su estructura.

La implementación usa el sistema de tokens del proyecto o equivalentes de la plataforma; el cambio en tiempo de ejecución debe construirse y probarse.

• Sistemas de diseño
• Temas

Obtén una marca o un icono de servicio ya existente en el formato que necesita tu proyecto.

Requiere acceso de red al registro o a la CDN. Las integraciones con React, CLI, Figma y MCP son opcionales y no son requisitos para obtener una URL sencilla.

• Recursos de marca
• SVG
• Diagramas de nube

Dale a un modelo de personaje o de producto ya cargado una estrategia definida de reproducción y mezcla.

Un proyecto de Three.js y un renderer en funcionamiento; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Elige una representación de la forma antes de añadir estilos de superficie o animación.

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la vía elegida.

• 3D
• Three.js

Conecta un gesto con el objeto 3D deseado usando las coordenadas reales del lienzo y de la cámara.

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Haz que un modelo se lea bien con una iluminación pensada, en lugar de un brillo indiscriminado.

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la vía elegida.

• 3D
• Three.js

Ajusta el modelo de sombreado a la superficie y luego inspecciónalo bajo la iluminación prevista.

Un proyecto de Three.js y un renderizador que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Trata los efectos de pantalla como un pipeline de renderizado ordenado y no como filtros independientes.

Un proyecto de Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Usa un comportamiento personalizado de vértices o píxeles cuando los materiales predefinidos no puedan expresar el efecto.

Un proyecto de Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Asigna a cada imagen su rol correcto antes de diagnosticar una superficie estirada o desvaída.

Un proyecto Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

• 3D
• Three.js

Crea una jerarquía legible a partir de un conjunto reducido de estilos de texto documentados.

Requiere los archivos de fuente reales o las fuentes disponibles de la plataforma para una validación visual significativa.

• Diseño de UI
• Tipografía

Decide qué necesita aprender el estudio antes de programar las sesiones.

Requiere un artefacto de prueba utilizable y acceso a participantes; no se incluye ninguna plataforma de reclutamiento ni de sesiones.

• Investigación UX
• Pruebas de usabilidad

Muestra los caminos que un usuario puede seguir para completar un objetivo.

La fuente no exige ninguna aplicación de diagramación; el formato de salida elegido debe conservar una notación clara.

• Prototipado
• Flujos de usuario

Da a las decisiones de producto una referencia de usuario coherente sin inventar la historia de un cliente.

Requiere evidencia genuina de usuarios para afirmaciones basadas en investigación; es posible que las URL de producto proporcionadas requieran una investigación aparte.

• Investigación UX
• Personas

Planifica y monta un video de producto con Remotion a partir de capturas de la interfaz, instrucciones de planos y una composición con tiempos.

Requiere un entorno de Remotion/Node, captura desde el navegador y ffmpeg. Algunos componentes necesitan paquetes relacionados con Three.js; el análisis de música opcional y la exportación a Jianying añaden dependencias aparte. Revisa por tu cuenta la licencia aplicable de Remotion.

• Video de producto
• Remotion
• Diseño de movimiento

Elige qué debe notarse primero y haz que la composición respalde esa elección.

Requiere contenido real y revisión del resultado renderizado; no incluye ninguna herramienta de puntuación visual.

• Diseño de interfaz
• Composición

Establece una dirección visual, crea una interfaz representativa y revísala en el navegador antes de ampliar el diseño.

Requiere un agente capaz de programar y un entorno frontend que se pueda renderizar en el navegador. Algunos patrones pueden usar React, Babel, gráficos u otras bibliotecas; la aceptación en navegador requiere una herramienta de navegador adecuada.

• Diseño frontend
• Prototipado
• Sistemas de diseño

Crea presentaciones en el navegador con escenas visuales temporizadas y narración opcional; la grabación es un paso aparte.

Usa Vite, React, TypeScript y herramientas de Node. La síntesis de voz opcional depende del proveedor elegido, las credenciales y el adaptador; la grabación final requiere captura del navegador o software de grabación.

• Presentaciones
• Movimiento
• Narración

Haz que una pantalla de baja fidelidad sea lo bastante precisa para debatir el comportamiento y el contenido.

No se requiere ninguna herramienta de wireframing concreta; un brief útil debe incluir información sobre el contenido y los estados.

• Prototipado
• Wireframes