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

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
• Rapport de revue

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.

• UX et recherche

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.

• UX et recherche
• Code UI

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

• UX et recherche
• 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.

• UX et recherche

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