Skills de design pour Claude Code, Codex et votre agent.

Soumettez l'interface existante à des données extrêmes réalistes avec un bouton de comparaison réservé au développement ; rapportez les défaillances avant de les corriger.

Code source du composant, données de démonstration existantes et limites des champs ; une application en cours d'exécution et un navigateur pour la vérification visuelle.

• Tests de résistance de l'interface
• Jeux de données de cas limites
• Rapport de revue

Diagnostiquer les images perdues dans les animations web : coût de rendu, contention du thread principal, mises à jour React à chaque image et variables CSS héritées.

Le code de l’animation et une interaction reproductible ; un profilage dans le navigateur et un véritable appareil cible pour vérifier la performance.

• Animation web
• Performance des images
• Revue de diagnostic

Recréez une capture d’écran fournie dans l’application existante, puis effectuez le rendu au viewport de référence et corrigez les différences visibles.

Fournissez une image de référence lisible, son viewport cible, l’accès au projet et les ressources disponibles. Un rendu dans le navigateur est nécessaire pour vérifier la correspondance visuelle. Aucun compte UIZZE ni aucune connexion MCP n’est requis.

• Capture d’écran vers code
• Reproduction d’une référence
• Implémentation d’interface

Aiguillez les demandes vidéo vers le bon workflow, reprenez les projets existants et coordonnez la composition HTML, les médias, l'aperçu et le rendu.

La CLI nécessite Node.js 22+ et FFmpeg. Commencez par les skills de base ; les workflows de création s'installent à la demande. Les services média et le rendu dans le cloud peuvent ajouter des prérequis.

• HTML vers vidéo
• Routage de workflow
• Production vidéo

Expliquez des idées techniques grâce à des mécanismes isométriques SVG soignés et à une interaction pilotée par un modèle.

Le kit requiert Node.js 20.10+ ainsi que Chrome ou Chromium pour les vérifications. La CLI skills a sa propre exigence Node ; le README indique 22.20+ pour la CLI 1.7.1.

• SVG isométrique
• Explications techniques
• Figures interactives

Art génératif avec p5.js : particules à graine aléatoire, champs de flux et paramètres ajustables.

Nécessite : p5.js

• Images & Art Génératif
• Generative art
• Dans OpenDesign

Applique les couleurs et la typographie officielles de la marque Anthropic à tout artifact. Marque Anthropic uniquement.

• Marque & Design Systems
• Dans OpenDesign

Affiches originales et pièces visuelles statiques livrées en PNG ou PDF.

• Images & Art Génératif
• PNG / PDF
• Dans OpenDesign

Établit une direction visuelle distinctive, une typographie et une mise en page pour des interfaces web nouvelles ou existantes.

• Web & UI
• Code UI
• Dans OpenDesign

GIF animés qui respectent les limites de taille et de dimensions de Slack.

• Motion & Vidéo
• GIF
• Dans OpenDesign

Applique ou génère des thèmes couleur-et-typo pour pages, slides et documents.

• Marque & Design Systems
• Dans OpenDesign

Artifacts HTML interactifs multi-composants avec React, Tailwind et shadcn/ui.

• Web & UI
• HTML
• Dans OpenDesign

Consultation en design produit qui propose un design system complet : esthétique, typographie, couleur, mise en page, motion.

• Marque & Design Systems
• Design system
• Dans OpenDesign

Produit du HTML/CSS de qualité production à partir d'une direction design validée.

• Web & UI
• HTML

QA visuel d'une page construite par un designer : incohérences, espacement, hiérarchie, motifs de négligence ; puis les corrige.

• Design Review & Accessibility
• Rapport de revue
• Dans OpenDesign

Génère plusieurs variantes de design en parallèle et ouvre un tableau de comparaison pour les retours.

• Web & UI
• Code UI

Transforme une description ou une source Mermaid en fichier Excalidraw éditable plus SVG et PNG rendus.

Nécessite : Excalidraw

• Diagrammes et visualisation de données
• Diagram

Audit de design visuel d'applications iOS sur matériel réel.

• Applications mobiles
• Rapport de revue

Évalue un plan de design pour en vérifier la complétude et les risques d'expérience avant la mise en œuvre.

• Design Review & Accessibility
• Rapport de revue
• Dans OpenDesign

Bannières pour réseaux sociaux, publicités, en-têtes de sites web et impression.

• Images & Art Génératif
• Image

Ton de marque, identité visuelle, frameworks de message et cohérence de marque.

• Marque & Design Systems

Identité de marque, design tokens, stylisation UI, génération de logo et programmes d'identité corporate.

Nécessite : service de génération d'images (Gemini, Atlas Cloud ou MuAPI)

• Marque & Design Systems

Tokens de design à trois niveaux, spécifications de composants et génération de slides.

• Marque & Design Systems
• Design system

Présentations HTML stratégiques avec Chart.js, design tokens et mises en page responsives.

Nécessite : Chart.js

• Presentations
• Slides HTML
• Dans OpenDesign

Style d'interface accessible avec shadcn/ui, Tailwind CSS et visuels canvas.

Nécessite : shadcn/ui, Tailwind CSS

• Web & UI
• Code UI

Intelligence de design UI/UX pour web, mobile et desktop : mise en page, couleur, typographie et règles UX.

• Web & UI
• Code UI
• Dans OpenDesign

Ajoute, recherche, corrige, stylise et compose les composants shadcn dans un projet.

Nécessite : shadcn/ui

• Web & UI
• Code UI

Construit des interfaces utilisateur accessibles, responsives et de qualité production.

• Web & UI
• Code UI

Boards de charte graphique premium, systèmes de logos et decks d'identité via génération d'images.

Nécessite : Service de génération d'images

• Marque & Design Systems
• Image
• Dans OpenDesign

Design frontend anti-slop pour landing pages, portfolios et refonte.

• Web & UI
• Code UI
• Dans OpenDesign

Mises en page éditoriales, variété de layouts et mouvement GSAP en un seul skill frontend.

Nécessite : GSAP

• Web & UI
• Code UI

Enseigne le détail haut de gamme d'agence : typographie, espacement, ombres, cartes et mouvement.

• Web & UI

Génère et analyse d'abord une image de design, puis implémente la page correspondante.

Nécessite : Service de génération d'images

• Web & UI
• Code UI

Concepts d'écrans mobiles haute fidélité et flux via génération d'images.

Nécessite : Service de génération d'images

• Applications mobiles
• Image
• Dans OpenDesign

Références de design de sites web section par section via génération d'images.

Nécessite : Service de génération d'images

• Web & UI
• Image
• Dans OpenDesign

Interfaces brutalistes fusionnant typographie suisse et esthétique terminal.

• Web & UI
• Code UI

Interfaces propres, monochromes, de style éditorial.

• Web & UI
• Code UI

Audite un site web ou une application existant et le rehausse à une qualité visuelle premium.

• Design Review & Accessibility
• Code UI

Rédige un DESIGN.md pour Google Stitch en mettant l'accent sur la distinction visuelle.

Nécessite : Google Stitch

• Marque & Design Systems
• DESIGN.md

Un skill pour concevoir, critiquer, auditer, polir, animer et affiner les interfaces.

• Design Review & Accessibility
• Code UI
• Dans OpenDesign

Transforme du texte, des notes ou un article en vidéo explicative sans visage avec des visuels de scène inventés.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Importe les assets Figma, tokens de marque et storyboards dans une composition HyperFrames.

Nécessite : HyperFrames, Figma

• Motion & Vidéo
• Video

Crée ou modifie une vidéo HyperFrames multi-scènes personnalisée lorsqu'aucun modèle ne convient.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Règles d'animation, blueprints de scènes, transitions et adaptateurs runtime pour HyperFrames.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Direction créative pour les vidéos HyperFrames : palette, typographie, composition, voix off, rythme.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Punch-ins, zooms, recadrages, mouvements Ken Burns et keyframes 2D/3D pour HyperFrames.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Motion graphics courts orientés design : typographie cinétique, compteurs de statistiques, stings de logo, bandeaux tiers inférieurs.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Transforme une URL de produit, un script ou un brief en vidéo de lancement ou de promotion produit.

Nécessite : HyperFrames

• Motion & Vidéo
• Video

Diaporamas HyperFrames interactifs avec fragments, branchements et mode présentateur.

Nécessite : HyperFrames

• Presentations
• Slides HTML

Présentations de développeur avec Markdown, composants Vue, coloration syntaxique et animation.

Nécessite : Slidev

• Presentations
• Slides HTML

Interfaces conformes WCAG 2.2 avec accessibilité mobile et prise en charge des technologies d'assistance.

• Design Review & Accessibility
• Code UI

Entretien d'identité de marque d'abord, puis génération et itération d'une landing page via Stitch.

Nécessite : Google Stitch

• Web & UI
• Code UI

Systèmes de design évolutifs : tokens, infrastructure de thématisation, architecture de composants.

• Marque & Design Systems
• Design system

Microinteractions, mouvement, transitions et motifs de retour utilisateur.

• Motion & Vidéo
• Code UI

Tableaux de bord KPI : sélection des indicateurs, choix des graphiques, mise en page et modèles temps réel.

• Diagrammes et visualisation de données
• Dashboard

Interface Android native avec Material Design 3 et Jetpack Compose.

• Applications mobiles
• Code UI

Interface iOS native conforme aux Human Interface Guidelines d'Apple avec SwiftUI.

• Applications mobiles
• Code UI

Valide et répare les decks PPTX éditables pour la géométrie, l'accessibilité et l'intégrité du package.

• Presentations
• PPTX

Analyse un PPTX de référence pour extraire le thème, la typographie, le rythme de mise en page et les diagnostics.

• Presentations
• Rapport de revue

Rédige des spécifications JSON à coordonnées explicites pour des présentations PPTX modifiables.

• Presentations
• PPTX

Sélectionne et place des icônes, images, SVG et infographies approuvés dans une présentation PPTX.

• Presentations
• PPTX

Styles React Native, navigation et animations Reanimated.

Nécessite : React Native

• Applications mobiles
• Code UI

Mises en page responsives avec requêtes de conteneur, typographie fluide, CSS Grid et points de rupture mobile-first.

• Web & UI
• Code UI

Teste les applications web avec les lecteurs d'écran VoiceOver, NVDA et JAWS.

• Design Review & Accessibility
• Rapport de revue

Design systems avec Tailwind CSS v4 : tokens, bibliothèques de composants, modèles responsives.

Nécessite : Tailwind CSS

• Marque & Design Systems
• Design system

Typographie, théorie des couleurs, systèmes d'espacement et iconographie pour une cohérence visuelle.

• Marque & Design Systems

Audits WCAG 2.2 avec tests automatisés, vérifications manuelles et conseils de remédiation.

• Design Review & Accessibility
• Rapport de revue

Motifs de composants React, Vue et Svelte réutilisables et stratégies de composition.

• Web & UI
• Code UI

Crée et modifie des fichiers de diagrammes draw.io (.drawio, .drawio.svg, .drawio.png).

Nécessite : draw.io

• Diagrammes et visualisation de données
• Diagram

Génère des diagrammes et des cartes mentales Excalidraw à partir de langage naturel.

Nécessite : Excalidraw

• Diagrammes et visualisation de données
• Diagram

Parallaxe, sections fixes, défilement horizontal et animations de texte au défilement.

Nécessite : GSAP

• Motion & Vidéo
• Code UI

Design UI/UX professionnel, composants et systèmes de design dans Penpot via les outils MCP.

Nécessite : Penpot MCP

• Web & UI
• Fichier de design

Conception de rapports Power BI : choix de graphiques, mise en page, lisibilité, accessibilité.

Nécessite : Power BI

• Diagrammes et visualisation de données
• Dashboard

Inspecte visuellement un site web en cours d'exécution et localise et corrige les problèmes de mise en page.

• Design Review & Accessibility
• Rapport de revue

Construit une animation de zéro en décidant dans l'ordre de l'objectif, de l'outil, des propriétés, de la courbe et de la durée.

• Motion & Vidéo
• Code UI

Gestes, ressorts et transitions pour React Native et Expo.

Requis : React Native / Expo

• Applications mobiles
• Code UI

Glossaire inversé qui transforme une description floue de mouvement en son terme exact.

• Motion & Vidéo

Les gestes, le mouvement physique et la hiérarchie spatiale d'Apple traduits pour le web.

• Web & UI
• Code UI

La philosophie d'Emil Kowalski sur le polissage UI, la conception de composants et les décisions d'animation.

• Web & UI
• Dans OpenDesign

Trouve les endroits d'une UI qui devraient s'animer, avec suggestions de paramètres, et rejette le reste.

• Motion & Vidéo
• Rapport de revue

Audite le code de mouvement existant et produit des plans d'implémentation autonomes et priorisés.

• Design Review & Accessibility
• Rapport de revue

Construit plusieurs versions réellement différentes d'un élément d'interface derrière un sélecteur visuel en direct.

• Web & UI
• Code UI

Examine le code d'animation pour le timing, l'interaction et la finition selon un standard de qualité élevé.

• Design Review & Accessibility
• Rapport de revue
• Dans OpenDesign

Transitions de page au rendu natif avec l'API View Transition de React.

Requis : React

• Motion & Vidéo
• Code UI

Slides HTML riches en animations depuis zéro ou converties depuis des fichiers PowerPoint (PPT).

• Presentations
• Slides HTML
• Dans OpenDesign

Génère des interfaces de terminal interactives à partir de spécifications JSON avec Ink.

Nécessite : Ink

• Web & UI
• UI terminal

Génère ou modifie des images matricielles : illustrations, photos, textures, sprites, maquettes.

Nécessite : Service de génération d'images

• Images & Art Génératif
• Image
• Dans OpenDesign

Présentations PPT HTML horizontales monofichier dans un style magazine ou suisse, avec vue présentateur et synchronisation.

• Presentations
• Slides HTML
• Dans OpenDesign

Définit ou applique les chartes graphiques pour tout produit : couleur, typo, logo et ton.

• Marque & Design Systems

Capture l'identité de marque une fois via un assistant en 10 questions pour les documents et decks ultérieurs.

• Marque & Design Systems
• Design system

Convertit un deck Markdown en slides brandées.

• Presentations
• Slides HTML

Tokens de design, documentation des composants, calculs responsives et transfert développeur.

• Marque & Design Systems
• Design system

Personas data-driven, cartes de parcours, cadres de tests d'utilisabilité et synthèse de recherche.

• UX et recherche
• Document de recherche

Prototypes HTML haute fidélité, slides, animation et visualisations ; démarre à partir de trois ébauches.

• Web & UI
• HTML

Audit WCAG 2.1 AA d'un design ou d'une page : contraste, clavier, zones tactiles.

• Design Review & Accessibility
• Rapport de revue

Retours structurés sur l'utilisabilité, la hiérarchie et la cohérence d'un design.

• Design Review & Accessibility
• Rapport de revue

Spécifications de transfert développeur à partir d'un design : mise en page, tokens, états des composants, breakpoints.

• Marque & Design Systems
• Spécification de livraison

Audite, documente ou étend un design system existant.

• Marque & Design Systems
• Design system

Synthétise les entretiens, questionnaires et notes de tests en thèmes et recommandations.

• UX et recherche
• Document de recherche

Planifie, conduit et synthétise les entretiens utilisateurs, questionnaires et tests d'utilisabilité.

• UX et recherche
• Document de recherche

Rédige ou révise le contenu UX : microcopy, messages d'erreur, états vides, CTA.

• UX et recherche

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

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

GSAP dans Vue, Svelte et autres frameworks non-React : cycle de vie, portée, nettoyage.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Performance GSAP : transforms, éviter le layout thrash, will-change, batching.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Plugins GSAP : ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG et physique.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

GSAP dans React et Next.js avec le hook useGSAP, refs, contexte et nettoyage.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Animation synchronisée au scroll avec ScrollTrigger : épinglage, scrub, déclencheurs, parallaxe.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Timelines GSAP : paramètre position, imbrication et contrôle de lecture.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Helpers gsap.utils : clamp, mapRange, interpolate, snap, wrap, pipe.

Nécessite : GSAP

• Motion & Vidéo
• Code UI
• Dans OpenDesign

Palettes de couleurs et associations de polices prêtes pour les présentations, destinées aux tâches PPT et de design.

• Marque & Design Systems

Un système visuel cohérent pour les slides PPT à partir de recettes de rayon et d'espacement.

• Presentations

Transforme des photos de personnes, d'animaux, d'objets ou de logos en quatre stickers GIF légendés.

• Motion & Vidéo
• GIF
• Dans OpenDesign

Génère, édite et lit des présentations PowerPoint (PPTX) éditables.

• Presentations
• PPTX
• Dans OpenDesign

Shaders GLSL : ray marching, SDFs, fluides, particules, visuels procéduraux.

Nécessite : GLSL / WebGL

• Images & Art Génératif
• Generative art
• Dans OpenDesign

Implémente des slides PowerPoint uniques avec PptxGenJS.

Nécessite : PptxGenJS

• Presentations
• PPTX

Corrige rapidement le code UI médiocre en réparant l'espacement, la hiérarchie, la typographie et les petits problèmes de mise en page.

• Design Review & Accessibility
• Code UI

Crée ou met à jour un DESIGN.md à partir d'un dépôt de produit existant ou d'un site web public.

• Marque & Design Systems
• DESIGN.md

Audite et corrige les erreurs ARIA, clavier, focus, contraste et formulaires.

• Design Review & Accessibility
• Rapport de revue

Détecte et corrige les animations CSS/JS saccadées et le mouvement synchronisé au scroll.

• Motion & Vidéo
• Rapport de revue

Audite une surface produit par rapport à ses propres preuves de conception et rédige des plans d'implémentation.

• Design Review & Accessibility
• Rapport de revue

Analyse les projets Stitch et rédige un DESIGN.md sémantique.

Nécessite : Google Stitch

• Marque & Design Systems
• DESIGN.md
• Dans OpenDesign

Reformule les idées d'interface vagues en prompts polis et optimisés pour Stitch.

Nécessite : Google Stitch

• Web & UI
• Dans OpenDesign

Convertit les designs Stitch en tableaux de bord React + Vite avec TanStack Query.

Nécessite : Google Stitch

• Web & UI
• Code UI

Vidéos de présentation de projets Stitch avec transitions et zooms Remotion.

Nécessite : Google Stitch, Remotion

• Motion & Vidéo
• Video
• Dans OpenDesign

Intégration et personnalisation des composants shadcn/ui : découverte, installation, bonnes pratiques.

Nécessite : shadcn/ui

• Web & UI
• Code UI
• Dans OpenDesign

Convertit le code frontend en design Stitch via HTML statique et extraction du design system.

Nécessite : Google Stitch

• Web & UI
• Fichier de design

Extrait un DESIGN.md complet à partir du code source frontend dans n'importe quel framework.

• Marque & Design Systems
• DESIGN.md

Extrait des snapshots HTML statiques autonomes avec CSS et images intégrés.

• Web & UI
• HTML

Génère, modifie et décline des écrans dans Stitch à partir de texte ou d'images de référence.

Nécessite : Google Stitch

• Web & UI
• Fichier de design

Crée, met à jour et applique des design systems dans Stitch via les outils MCP.

Nécessite : Google Stitch

• Marque & Design Systems
• Design system

Convertit ou synchronise les designs Stitch en composants React + Vite modulaires.

Nécessite : Google Stitch

• Web & UI
• Code UI

Convertit ou synchronise les designs HTML Stitch en composants React Native.

Nécessite : Google Stitch, React Native

• Applications mobiles
• Code UI

Conception d'interface orientée craft pour tableaux de bord, panels admin, outils SaaS et pages de paramètres.

• Web & UI
• Code UI

Principes de design-engineering pour le survol, l'ombre, les bordures, les icônes, la typographie et les micro-interactions.

• Web & UI

Audite et améliore l'accessibilité web selon WCAG 2.2.

• Design Review & Accessibility
• Rapport de revue

Applique les principes du motion design : timing, easing, chorégraphie et fondamentaux de l'animation.

• Motion & Vidéo

Assistant de recherche utilisateur complet : qualitatif et quantitatif, guides et plans.

• UX et recherche
• Document de recherche

Implémente les tokens, composants et mises en page adaptatives de Material Design 3.

• Applications mobiles
• Code UI

Mouvement d'interaction intentionnel, ou évaluation d'animations existantes, selon Kowalski, Krehel et Tompkins.

• Motion & Vidéo

Dénomination des couleurs, théorie, espaces colorimétriques, palettes, rampes, dégradés, conversions et contraste.

• Marque & Design Systems
• Dans OpenDesign

Rend les données sous forme de graphiques en barres, lignes, secteurs, radar, Sankey, cartes mentales et organigrammes via l'API AntV.

Nécessite : AntV API

• Diagrammes et visualisation de données
• Image graphique

Crée des infographies à partir d'un texte donné.

Nécessite : AntV API

• Diagrammes et visualisation de données
• Image

Microcopy centrée utilisateur et accessible : boutons, libellés, erreurs, formulaires, onboarding.

• UX et recherche

Gardez chaque constat d’accessibilité relié à l’élément concerné, au correctif proposé et au résultat de la vérification.

Python pour les outils fournis, accès au code source, et un navigateur ou une technologie d’assistance pour la validation en contexte.

• Accessibilité
• Revue de design
• Frontend

Planifiez une présentation académique autour de son argumentation, de ses preuves et de ses titres de diapositives ; un outil distinct crée le fichier PPTX.

Nécessite un skill PPTX distinct. L'entrée indique markitdown, PptxGenJS, LibreOffice et Poppler comme dépendances liées à la mise en œuvre.

• Présentations
• Recherche académique
• PowerPoint

Écrivez des scripts ExtendScript pour créer et modifier des documents Illustrator, des illustrations et des exports.

Adobe Illustrator CC ou version ultérieure ; les scripts générés s’exécutent dans son environnement ExtendScript.

• Design vectoriel
• Automatisation
• Illustrator

Regroupez les observations de recherche en thèmes tout en préservant leurs liens avec les preuves d'origine.

Utilisez un agent capable de lire les transcriptions ou notes fournies. Fournissez les identifiants des participants et la question de conception ; le skill synthétise des preuves existantes et ne collecte pas d'entretiens.

• UX Research
• Synthèse

Donnez à une transition un objectif clair et un profil de mouvement qui accompagne le changement d’état de l’interface.

Fournissez les états avant et après de l’interface, le déclencheur et les appareils cibles. Utilisez un aperçu fonctionnel pour vérifier le timing, l’interruption et le comportement avec réduction des animations.

• Mouvement d’interface
• Conseils de conception

Partez des objets et des contraintes réels du produit avant de choisir un traitement visuel.

Un agent capable de lire les fichiers du projet ; une prise en charge du rendu pour les vérifications visuelles. UIZZE MCP payant est facultatif.

• Conception d'interface
• Revue de design

Créez des graphiques avec AntV G2 v5 en utilisant ses marks, encodages, échelles et interactions.

Nécessite @antv/g2 v5 ou le bundle navigateur documenté. La récupération facultative de références utilise le service de contexte externe AntV.

• Data Visualization
• Graphiques
• JavaScript

Visualisez des données de réseau avec AntV G6 v5, y compris les dispositions de graphes et l'exploration interactive.

Une application utilisant @antv/g6 v5, un conteneur de graphe dans le navigateur et un accès réseau si le service documenté de récupération de références est nécessaire. Vérifiez les API par rapport à la version installée.

• Visualisation de graphes
• Réseaux
• AntV

Créez un éditeur de diagrammes nœuds-arêtes avec AntV X6, avec connexions, comportement d'édition et plugins requis.

Utilisez l'API @antv/x6 v3 documentée avec un canevas de navigateur et les plugins requis. La récupération de références supplémentaires nécessite un accès réseau. Vérifiez les exemples par rapport à votre version installée.

• Éditeurs de diagrammes
• Interfaces à nœuds
• AntV

Créez une vidéo explicative originale, fondée sur des sources, avec narration et un langage visuel volontairement cohérent.

Nécessite le projet Remotion/Node fourni, des scripts auxiliaires Python, une capacité de rendu et une solution TTS adaptée. Les configurations par défaut documentées pour le chinois et l’anglais utilisent des moteurs vocaux différents ; la construction multi-agents fait partie du flux de travail décrit.

• Motion graphics
• Vidéo
• Remotion

Composez un ensemble coordonné d’images de fiche d’app store à partir de captures d’écran, de légendes et de ressources visuelles.

Nécessite l’éditeur Next.js fourni, un environnement Node/gestionnaire de paquets pris en charge et un navigateur. L’export PNG utilise html-to-image ; les captures sources, les polices et les autres ressources doivent disposer des droits d’usage appropriés.

• Marketing d’application
• Captures d’écran
• Localisation

Évaluez les interfaces des plateformes Apple selon des conseils de conception et d’accessibilité propres à chaque plateforme.

Python 3 pour le vérificateur, qui n’utilise que la bibliothèque standard ; les Human Interface Guidelines (HIG) d’Apple à jour ; et un accès à un appareil ou à un simulateur pour vérifier les comportements.

• Interface native
• Accessibilité
• Revue de conception

Planifiez et générez des illustrations qui expliquent les idées clés aux bons endroits d’un article.

Un backend de génération raster disponible et les fichiers de référence et de configuration de la Skill ; l’accès au backend et son coût sont distincts.

• Illustration éditoriale
• Conception de contenu

Planifiez ce que chaque case enseigne avant de générer les pages de la bande dessinée.

Un backend d'images disponible ; Bun ou un runtime Bun basé sur npx pour le script de fusion PDF fourni.

• Bandes dessinées
• Conception pédagogique
• Narration

Générez une couverture d’article autour d’une idée centrale, avec une composition et un style visuel définis.

Un moteur d’images matricielles disponible, ainsi que la configuration du Skill et ses références de direction artistique.

• Design éditorial
• Images de couverture

Utilisez un workflow de design basé sur des fichiers pour les prototypes, les concepts de présentation et les systèmes visuels réutilisables.

Un agent capable de manipuler des fichiers, ainsi que la méthodologie du dépôt, ses guides intégrés, ses documents de référence et ses scripts. Les parcours d’export et d’import ont leurs propres prérequis.

• Prototypage
• Design systems
• Présentations

Gardez les relations, les libellés et les tracés des connecteurs explicites dans un fichier vectoriel inspectable.

Un environnement de texte/code pour SVG ; Bun ou Bun via npx pour le script de conversion PNG fourni.

• Diagrammes
• SVG
• Design de l’information

Exécutez des tâches de génération et de modification d'images via des fournisseurs pris en charge, y compris des workflows par lots.

Bun ou un runtime Bun basé sur npx, des adaptateurs de fournisseur complets, ainsi que des identifiants ou une connexion pour la voie prise en charge choisie.

• Génération d'images
• Workflows par lots
• Ressources visuelles

Transformez un contenu en infographie avec une mise en page de comparaison, de hiérarchie, de processus ou de vue d’ensemble adaptée à la matière.

Un moteur d’images matricielles disponible, ainsi que des références de mise en page, de style et de configuration.

• Infographies
• Design de l’information

Générez des diapositives illustrées et assemblez une présentation à base d'images à partager ; les objets individuels des diapositives ne sont pas modifiables.

Un moteur de génération d'images matricielles et Bun, ou Bun via npx, pour les scripts d'assemblage PPTX/PDF.

• Présentations
• Design éditorial

Créez une série de cartes visuelles Xiaohongshu cohérente, avec une idée principale par carte.

Un moteur d’images raster disponible, avec une prise en charge adaptée des références, ainsi que des références de configuration et de mise en page des cartes.

• Visuels pour les réseaux sociaux
• Design de contenu
• Cartes visuelles

Transformez du contenu source en article HTML lisible, avec typographie éditoriale, mise en page et illustrations.

La construction documentée utilise Node/npm, Vite, React, TypeScript et Reacticle. L'extraction de documents et la sortie PDF facultative peuvent nécessiter des outils supplémentaires ; les images générées requièrent un moteur disponible séparément.

• Design éditorial
• HTML
• Format long

Analysez les regroupements de cartes des participants pour proposer des catégories de navigation et repérer les éléments ambigus.

Fournissez les résultats complets du tri de cartes, y compris les placements et libellés de chaque participant, ainsi que la méthode de l'étude. Le skill analyse les éléments fournis ; le recrutement et la collecte des données sont distincts.

• Recherche UX
• Synthèse

Planifiez un test de premier clic pour vérifier si les gens savent par où commencer une tâche.

Fournissez l'écran ou le prototype, l'objectif utilisateur et les critères de recrutement. Le skill crée un plan de test ; la conduite des sessions et la collecte des clics nécessitent une configuration d'étude distincte.

• UX
• Conseils de conception

Transformez vos documents sources en diapositives illustrées et assemblez un PPTX dont le contenu est à base d'images, et non modifiable objet par objet.

Python 3, un moteur de génération d'images disponible, ainsi que les scripts d'assemblage et d'enregistrement d'état du dépôt. Les documents de workflow référencés sont nécessaires pour une exécution réelle.

• Présentations
• Génération d'images

Transformez une couleur de marque en un ensemble exploitable de rôles d'interface et de combinaisons avant-plan/arrière-plan.

Fournissez les couleurs de marque, les rôles d'interface et les objectifs d'accessibilité. Utilisez les états réels des composants et un outil de vérification du contraste pour évaluer les combinaisons de couleurs proposées.

• Design de la couleur
• Conseils de design

Rendez un composant implémentable en expliquant son comportement aussi précisément que son apparence.

Indiquez l’objectif du composant, ses variantes visuelles et la plateforme cible. Le résultat est une spécification destinée à l’implémentation et aux tests, et non un composant implémenté.

• Design systems
• Spécifications

Concevez ce que dit le système, ce qu'il attend en retour et comment il se rétablit lorsque les deux ne correspondent pas.

Fournissez les tâches prises en charge, les contraintes du canal et les exigences de confirmation. Les flux vocaux nécessitent aussi des tests sur appareil et de reconnaissance vocale ; un dialogue écrit seul ne permet pas d'établir la qualité de la reconnaissance.

• UX
• Conseils de conception

Traduisez la hiérarchie de l’interface en surfaces sombres au lieu d’en inverser les couleurs.

Partez d’une palette existante en mode clair, d’exemples de composants et de ressources médias. Utilisez une interface rendue pour vérifier le contraste en mode sombre, le changement de thème et le traitement des images.

• Design des couleurs
• Conseils de design

Générez des mises en page alternatives à partir d’une seule source de contenu, puis utilisez l’éditeur local pour les prévisualiser et les exporter.

Nécessite Node.js 20+, npm et le générateur fourni avec le skill. Utilisez son service d’aperçu local pour les fonctions d’édition/export ; un serveur statique générique ne fournit pas ces API.

• Présentations
• Diapositives HTML
• PPTX

Choisissez le graphique qui rend la comparaison compréhensible, et non celui qui paraît le plus sophistiqué.

Fournissez les données réelles, la définition des champs, la question du lecteur et les contraintes d'affichage. Cette skill guide la conception du graphique ; la validation des données et l'implémentation du graphique restent des tâches distinctes.

• Data Visualization
• Conseils de conception

Donnez aux décisions visuelles des noms et des relations que les composants peuvent réutiliser.

Fournissez les valeurs visuelles existantes, des exemples de composants et les contraintes de nommage. Le skill définit les noms et les relations des tokens ; l'outillage d'export et l'intégration au framework nécessitent une configuration distincte.

• Design systems
• Spécifications

Capturez les expériences qui se déroulent entre les sessions plutôt que d'essayer de les reconstituer lors d'un seul entretien.

Fournissez l'objectif de la recherche, les critères de participants, la durée et les outils d'enregistrement réalisables. Le résultat est un plan d'étude ; le recrutement, les points de suivi et la collecte des données auprès des participants restent à réaliser.

• UX Research
• Planification d'étude

Établissez d’abord la capture d’écran souhaitée, puis servez-vous-en comme cible pour l’implémentation.

Nécessite une image cible, ou un accès à la génération d’images si aucune n’est fournie. Les exigences détaillées en outils dépendent du workflow référencé choisi et n’ont pas pu être établies à partir de l’entrée seule.

• Itération visuelle
• Conception de jeu
• Prototypage

Partagez le point de vue d’un utilisateur en distinguant clairement les preuves directes de l’interprétation.

Un agent capable de lire vos notes de recherche, un utilisateur ou segment défini, et la décision de conception que la carte doit éclairer.

• Recherche UX
• Synthèse

Faites en sorte que les échecs expliquent ce qui s’est passé et offrent une issue sans faire perdre le travail déjà fait.

Un agent capable de lire les parcours concernés, les cas d’échec connus et les actions de récupération que votre produit prend réellement en charge.

• UX
• Conseils de conception

Associez les composants Figma publiés à leurs composants de code correspondants avec Code Connect.

Figma MCP connecté, accès aux composants publiés et à la base de code, ainsi qu’un droit Code Connect actuel et des autorisations de modification.

• Figma
• Design systems
• Passation aux développeurs

Documentez les chemins du dépôt, les composants et les conventions qu'un agent doit utiliser pour implémenter les designs Figma.

Connexion Figma MCP et accès à la base de code cible ; le format de règles de destination dépend de l'hôte de codage.

• Figma
• Design systems
• Règles d'agent

Créez un écran Figma modifiable qui reste connecté à son design system.

Figma MCP connecté, accès au fichier cible, un design system publié et le Skill complémentaire figma-use pour les opérations sur le canevas.

• Figma
• Design UI
• Design systems

Construisez une bibliothèque Figma réutilisable, en commençant par les design tokens, puis en ajoutant les composants.

Figma MCP avec accès à un fichier modifiable, accès au dépôt et le Skill complémentaire figma-use ainsi que ses références d’aide.

• Figma
• Design systems
• Bibliothèques de composants

Implémentez un design Figma en utilisant les composants et conventions du dépôt cible, puis comparez le résultat avec le design.

Figma MCP connecté, accès au design sélectionné et au dépôt cible, ainsi qu'un aperçu exécutable pour la validation visuelle.

• Figma
• Design frontend
• Transmission aux développeurs

Définissez le parcours depuis le premier champ jusqu'à une soumission réussie, y compris les corrections et les retours ultérieurs.

Un agent capable de lire le brief du formulaire, les champs obligatoires et les règles de validation, ainsi que les écrans de formulaire existants.

• UX
• Conseils de conception

Transformez une tâche de modélisation cotée en objets FreeCAD inspectables et ajustables.

FreeCAD avec son Python intégré ; le travail sur l'interface utilise en plus PySide fourni, et le travail sur le graphe de scène utilise Pivy.

• Conception 3D
• CAO
• Python

Générez et enregistrez des assets d’image via un fournisseur pris en charge, en utilisant les identifiants configurés du projet.

Une clé API d’un fournisseur pris en charge et un accès réseau ; la disponibilité des modèles et les frais d’utilisation doivent être vérifiés séparément.

• Génération d’images
• Assets visuels

Concevez ce qui se passe avant, pendant et après un geste, pas seulement l'action finale du balayage.

Un agent capable de lire le brief d'interaction, les plateformes cibles et les actions disponibles via des boutons ou des menus.

• UX
• Conseils de conception

Préparez des prompts d’image et lancez la génération ou la retouche via un outil d’image natif disponible ou le workflow API local configuré.

Le mode API local exige l’activation explicite de Garden, des scripts Node et des identifiants configurés. Le mode natif dépend de l’outil d’image de l’hôte. L’accès aux modèles, les tarifs et les paramètres pris en charge doivent être vérifiés dans cet environnement.

• Génération d’images
• Conception de prompts
• Retouche d’images

Évaluez l’utilisabilité d’une interface et documentez les éléments probants de chaque constat, sans présenter un jugement d’expert comme une recherche menée auprès de participants.

Un agent capable d’inspecter l’interface, un ensemble défini de tâches utilisateur et les contraintes métier pertinentes.

• UX
• Conseils de conception

Choisissez un traitement foil ou une transformation de l'image entière selon l'angle de vue avant de construire la carte.

Nécessite la génération d'images, Python, Blender et un environnement d'exécution web pour la visionneuse livrée. La source mentionne l'installation locale de dépendances pendant le pipeline.

• Design 3D
• Cartes à collectionner
• Blender

Construisez un court métrage à partir d’une direction artistique, et non d’une suite de transitions de diapositives. Huashu Art Motion combine scènes dessinées par code, sprites de personnages et revue du mouvement dans un workflow de rendu local.

Le rendu local nécessite uv, FFmpeg et Playwright Chromium. Fournissez des images de personnages existantes ou utilisez un workflow distinct de génération d’images pour les sprites à apparence humaine ; l’audio et les polices exigent leurs propres ressources et autorisations.

• Animation artistique
• Canvas
• Courts métrages

Créez un skill de design réutilisable à partir de références visuelles, de règles de design et de tokens.

Nécessite un accès aux fichiers, des outils adaptés pour inspecter les références, Node pour validate.mjs et une revue dans le navigateur pour s'assurer du rendu visuel. La disponibilité des outils influe sur la fidélité de l'extraction.

• Systèmes de design
• Création de Skills
• Design tokens

Donnez aux icônes un système cohérent de construction et de nommage, au lieu de rassembler des symboles sans lien entre eux.

Un agent capable d’examiner des icônes représentatives, leurs tailles prévues et les formats de design et de code requis.

• Design systems
• Spécifications

Donnez aux illustrations commandées ou récurrentes un langage visuel commun et un rôle clair dans l’interface.

Un agent capable d’examiner des références visuelles, les couleurs du produit, ainsi que les écrans et les tailles où les illustrations apparaîtront.

• UX
• Conseils de design

Convertissez des diapositives visuelles en une présentation structurée, au lieu de placer des captures d'écran derrière du texte modifiable.

Nécessite la CLI editppt, des capacités adaptées de génération d'images et une exécution multi-agents pour les traitements de plusieurs pages. PaddleOCR est une aide facultative à configurer ; les indications hors ligne ont un profil de qualité différent.

• Présentations
• PowerPoint
• Reconstruction

Décidez où l'information doit se trouver avant de décider de l'apparence de la navigation.

Il faut le contenu du produit et des données sur les tâches des utilisateurs ; la source n'exige aucune application de conception particulière.

• Stratégie UX
• Structure de contenu

Transformez des objectifs de recherche en questions qui suscitent des faits plutôt qu'elles ne suggèrent une réponse.

Les objectifs de recherche, les critères de participation et les contraintes de séance sont les principales données d'entrée ; aucun service d'enregistrement ni de recrutement n'est fourni.

• Recherche UX
• Entretiens

Recentrez une décision produit sur ce que la personne cherche à accomplir.

Nécessite des recherches utilisateur ou des hypothèses clairement identifiées ; il ne réalise pas lui-même d’entretiens.

• Recherche UX
• Stratégie produit

Reliez les points de contact individuels pour reconstituer l’expérience que vit réellement une personne.

S’appuie sur les personas, la recherche et les analyses existantes ; aucune mesure automatique du ressenti n’est établie.

• Recherche UX
• Cartographie de parcours

Reliez l'argumentaire de la page et ses règles visuelles autour d'une seule conversion visée.

Aucun environnement d'exécution applicatif unique n'est requis ; les exemples d'implémentation font référence à des valeurs Tailwind, à IntersectionObserver et à un outillage d'animation facultatif.

• Landing pages
• Rédaction publicitaire
• Design web

Reliez une vraie proposition de valeur aux sections de la page avant de générer les composants.

Un projet React ou Next.js compatible avec Tailwind ; les composants d’interface référencés et l’outillage facultatif d’analyse de marque peuvent nécessiter une installation séparée.

• Landing pages
• Rédaction
• Frontend

Définissez des colonnes, des marges et un comportement responsive communs pour des mises en page de pages apparentées.

Aucune dépendance d’exécution nommée ; il faut de vraies contraintes de contenu pour choisir des valeurs de grille utiles.

• Design d’interface
• Mise en page responsive

Montrer ce qui se passe pendant une attente sans induire les gens en erreur sur la progression.

Les durées précises des opérations et les capacités de progression doivent être fournies par l’équipe produit ou d’implémentation.

• Design d’interaction
• UX du chargement

Préparez l’interface aux différences de langue, et pas seulement aux chaînes traduites.

Nécessite des textes dans les langues cibles, des polices et une relecture linguistique ou culturelle appropriée ; aucune plateforme de localisation automatique n’est incluse.

• Design systems
• Localisation

Construisez et testez la marque avant de l’étendre à un kit de marque complet.

La source décrit des scripts d’aide Python sans dépendances, mais le rendu d’image réel nécessite un moteur de rendu disponible, tel que CairoSVG, Inkscape, Chrome ou une autre option prise en charge.

• Branding
• Logo Design
• SVG

Donnez aux équipes d'ingénierie le comportement d'une petite interaction, et pas seulement une référence d'animation.

Aucune bibliothèque d'animation particulière n'est requise ; des tests sur l'appareil cible restent nécessaires.

• Design d'interaction
• Transmission UI

Rendez les décisions d'animation réutilisables entre composants et équipes.

Nécessite une implémentation de tokens ou un équivalent sur la plateforme ; la source n'impose aucun framework d'animation.

• Design systems
• Mouvement

Générez ou retouchez des images avec OpenRouter à l’aide d’images de référence et d’un script Python fourni.

uv, le script Python fourni et une clé OPENROUTER_API_KEY disposant de l’accès aux modèles et des crédits nécessaires.

• Retouche d’image
• Composition

Transformez une hiérarchie de l'information en commandes de navigation reconnaissables et en parcours clairs entre les destinations.

Il faut une hiérarchie de l'information et des priorités de tâches ; aucun package de composants de navigation n'est fourni.

• Design d'interaction
• Navigation

Aidez les nouveaux utilisateurs à obtenir un résultat utile avant de leur demander d'apprendre tout le produit.

Nécessite des définitions d'activation propres au produit et une instrumentation pour toute mesure ultérieure.

• Design d'interaction
• Onboarding

Appliquez un système de marque à une page ou à une présentation HTML, avec des règles de mise en page adaptées au format choisi.

L’extraction de marque à partir d’une URL nécessite Firecrawl. Les sorties par défaut évitent les dépendances externes JavaScript, mais les polices ou les images peuvent néanmoins exiger leur propre disponibilité et leurs propres droits.

• Design web
• Présentations
• Systèmes de marque

Un guide frontend très affirmé pour des pages d'atterrissage, portfolios et présentations interactives expressifs.

Un projet frontend et, le cas échéant, des bibliothèques d'animation choisies délibérément ; le guide n'exige aucun environnement d'exécution unique.

• Design frontend
• Mouvement
• Typographie

Conservez le texte et le timing des sous-titres dans une structure de données définie avant de les styliser sur une timeline vidéo.

Un projet Remotion, @remotion/captions et les fichiers de référence de transcription, d’importation et d’affichage pertinents.

• Vidéo
• Sous-titres

Configurez un projet et une composition Remotion à partir d’un brief vidéo, avec un aperçu disponible pendant le développement.

Node.js, Git, installation des paquets, Studio Remotion et les références de composition et de mise en page associées.

• Vidéo
• React

Rendez une vidéo modifiable dans Studio en changeant la façon dont son code source React expose les calques, le timing et les contrôles.

Une version de Remotion compatible avec les API Interactive documentées ; @remotion/paths est en outre nécessaire pour l'interpolation de tracé modifiable décrite.

• Vidéo
• React
• Interaction

Créez des cartes animées dans Remotion en choisissant la technique cartographique, le fournisseur et les données adaptés au plan visé.

Remotion ainsi que les bibliothèques et données de la technique sélectionnée ; selon la source consultée, Mapbox nécessite une clé.

• Vidéo
• Cartes

Écrivez du balisage React qui se comporte comme une timeline vidéo plutôt que comme une page web avec une animation CSS.

Remotion et des packages propres aux fonctionnalités, correspondant à la version du projet ; les références liées déterminent les besoins supplémentaires en médias, effets, polices ou export.

• Vidéo
• React
• Animation

Choisissez une macro pour une séquence de commandes, et un script lorsque la tâche de modélisation exige de la logique.

Rhino 7 ou version ultérieure ; Rhino 8 est l'environnement recommandé par la source pour l'éditeur de scripts unifié.

• Design 3D
• CAO
• Automatisation

Un parcours de caméra pré-rendu, contrôlé par le défilement, et non un monde 3D en temps réel.

Le pipeline documenté utilise Higgsfield et une voie vidéo Monid, ainsi que ffmpeg/ffprobe et un environnement de navigateur. Les comptes fournisseurs, les crédits, les capacités des modèles et toute voie d’image facultative doivent être revérifiés.

• Animation au défilement
• Vidéo
• Pages d’atterrissage

Concevez toute l'expérience de recherche, y compris les recherches qui échouent.

Les services de recherche et l'instrumentation des requêtes sont externes à ce guide.

• Design d'interaction
• Recherche

Révélez le travail opérationnel qui se cache derrière ce que voit le client.

Nécessite des éléments issus des parties prenantes et des processus ; n'accède pas seul aux systèmes opérationnels.

• Stratégie UX
• Design de services

Écrivez des shaders Slang et vérifiez comment leurs entrées, ressources et sorties se connectent au moteur de rendu.

Un environnement de compilation Slang et de rendu adapté au backend cible ; une validation côté hôte est nécessaire pour toute affirmation sur l'intégration.

• Shaders
• Graphisme GPU
• Design 3D

Choisissez l'espacement selon la relation et l'objectif, et non par des ajustements de pixels isolés.

Aucun outil de tokens particulier n'est requis ; l'application dépend du système de composants existant.

• Design d'interface
• Design tokens

Décrivez ce qui peut se produire ensuite à partir de chaque état d’un composant.

Aucun paquet state-machine spécifique n’est requis ; l’implémentation réelle et les tests restent à réaliser en aval.

• Design d’interaction
• Modélisation du comportement

Permettez à une bibliothèque de composants de changer d'apparence sans dupliquer sa structure.

L'implémentation s'appuie sur le système de tokens du projet ou sur des équivalents propres à la plateforme ; le changement de thème à l'exécution doit être développé et testé.

• Design systems
• Thématisation

Récupérez une marque ou une icône de service existante dans la forme dont votre projet a besoin.

Nécessite un accès réseau au registre ou au CDN. Les intégrations React, CLI, Figma et MCP sont facultatives et ne sont pas des prérequis pour une simple récupération d'URL.

• Ressources de marque
• SVG
• Diagrammes cloud

Donnez à un modèle de personnage ou de produit chargé une stratégie définie de lecture et de mélange.

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et loaders supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Choisissez une représentation de la forme avant d'ajouter un traitement de surface ou une animation.

Un projet Three.js et un moteur de rendu fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent du parcours choisi.

• 3D
• Three.js

Relie un geste à l'objet 3D visé en utilisant les coordonnées réelles du canvas et de la caméra.

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Rendez un modèle lisible grâce à un éclairage pensé, plutôt qu'à une luminosité excessive.

Un projet Three.js fonctionnel avec un moteur de rendu ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Adaptez le modèle de shading à la surface, puis inspectez-le sous l'éclairage prévu.

Un projet Three.js et un moteur de rendu fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Traitez les effets d’écran comme un pipeline de rendu ordonné plutôt que comme des filtres indépendants.

Un projet Three.js et un renderer fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent du parcours choisi.

• 3D
• Three.js

Utilisez un comportement personnalisé des vertex ou des pixels lorsque les préréglages de matériaux ne permettent pas d'exprimer l'effet.

Un projet Three.js et un moteur de rendu fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et chargeurs supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Attribuez à chaque image son rôle correct avant de diagnostiquer une surface étirée ou délavée.

Un projet Three.js et un moteur de rendu fonctionnels ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et loaders supplémentaires dépendent de la voie choisie.

• 3D
• Three.js

Créez une hiérarchie lisible à partir d’un petit ensemble de styles de texte documentés.

Nécessite les fichiers de polices réels ou les polices disponibles sur la plateforme pour une validation visuelle pertinente.

• Design d’interface
• Typographie

Déterminez ce que l'étude doit permettre d'apprendre avant de planifier les sessions.

Nécessite un artefact de test utilisable et un accès à des participants ; aucune plateforme de recrutement ni de sessions n'est fournie.

• Recherche UX
• Tests d'utilisabilité

Montrez les chemins qu'un utilisateur peut emprunter pour atteindre un seul objectif.

La source n'exige aucune application de diagrammes ; le format de sortie choisi doit conserver une notation claire.

• Prototypage
• Parcours utilisateur

Donnez aux décisions produit une référence utilisateur cohérente, sans inventer d'histoire client.

Exige de véritables données utilisateur pour des affirmations fondées sur la recherche ; les URL de produit fournies peuvent nécessiter une investigation distincte.

• Recherche UX
• Personas

Planifiez et assemblez une vidéo produit Remotion à partir de captures d'interface, d'instructions de plans et d'une composition minutée.

Nécessite un environnement Remotion/Node, une capture via navigateur et ffmpeg. Certains composants requièrent des paquets liés à Three.js ; l'analyse musicale facultative et l'export Jianying ajoutent des dépendances distinctes. Vérifiez séparément la licence applicable de Remotion.

• Vidéo produit
• Remotion
• Motion design

Choisissez ce qui doit être remarqué en premier, puis faites en sorte que la composition soutienne ce choix.

Nécessite du contenu réel et une revue du rendu ; aucun outil de notation visuelle n’est fourni.

• Design d’interface
• Composition

Établissez une direction visuelle, construisez une interface représentative et relisez-la dans le navigateur avant d'étendre le design.

Nécessite un agent capable de coder et un environnement frontend exécutable dans un navigateur. Certains modèles peuvent utiliser React, Babel, des bibliothèques de graphiques ou d'autres bibliothèques ; la recette dans le navigateur requiert un outil de navigation adapté.

• Design frontend
• Prototypage
• Systèmes de design

Créez des présentations dans le navigateur avec des scènes visuelles rythmées par la narration et une narration facultative ; l’enregistrement est une étape distincte.

Utilise Vite, React, TypeScript et l’outillage Node. La synthèse vocale facultative dépend du fournisseur choisi, des identifiants et de l’adaptateur ; l’enregistrement final nécessite une capture dans le navigateur ou un logiciel d’enregistrement.

• Présentations
• Animation
• Narration

Rendre un écran basse fidélité assez précis pour discuter du comportement et du contenu.

Aucun outil de wireframing particulier n’est requis ; un brief exploitable doit inclure des informations sur le contenu et les états.

• Prototypage
• Wireframes