Communitygithub.com

Ezra-Y/design-tools-index

Compétence Claude Code — index catégorisé d'outils de design (animation, couleur, prototypage, transfert, design-to-code, UI, etc.).

Qu'est-ce que design-tools-index ?

Cette compétence fournit un index structuré et bilingue d'outils de conception destiné aux utilisateurs de l'agent Claude Code. Elle organise les outils les plus populaires en 36 catégories distinctes (telles que l'animation, la couleur, le prototypage, le transfert de conception, le design-to-code, l'UI, le wireframing, etc.), chaque catégorie étant accompagnée de 2 à 3 recommandations phares et d'un lien vers un fichier de référence détaillé dans le dossier `references/`. Le référentiel principal est issu de la liste «Awesome-Design-Tools», garantissant ainsi des ressources éprouvées. Son principal avantage est de permettre aux développeurs et designers de trouver rapidement l'outil adéquat sans devoir naviguer manuellement entre de nombreux sites Web. Elle est particulièrement utile dans un contexte de développement assisté par IA, où la sélection rapide d'un outil de conception peut faire gagner un temps précieux et fluidifier le processus créatif, tout en offrant une vision claire de l'écosystème des outils de design.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add Ezra-Y/design-tools-index
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Index d'outils de conception

Navigation parmi les outils de conception classés par usage : chaque entrée contient un lien externe + une brève description, pour une sélection rapide. Les 12 catégories les plus fréquentes ci-dessous présentent chacune 2 à 3 outils emblématiques, avec un lien vers la liste complète dans references/ ; les 24 autres catégories se trouvent dans la section « Plus de catégories » en fin de document. Ouvrez le fichier de référence correspondant selon vos besoins. Les entrées sont issues de Awesome-Design-Tools.

Outils d'animation

Créez des animations et interactions fluides pour les interfaces et produits (micro-interactions, transitions, motion).

  • Lottie — parse les animations After Effects exportées en JSON et les affiche nativement sur mobile et web.
  • GSAP — une suite d'outils pour des animations HTML5 scriptées et haute performance dans tous les navigateurs principaux.
  • After Effects — l'application de graphisme animé, effets visuels et composition d'Adobe. → Liste complète (Haiku, Flare, Kite, Keyshape, etc.) dans references/prototyping-and-animation.md

Palette de couleurs

Générez ou choisissez des schémas de couleurs et palettes.

  • Coolors — le générateur de palettes ultra-rapide.
  • Adobe Color — créez des schémas avec la roue chromatique ou parcourez les combinaisons de la communauté.
  • Color Hunt — des milliers de palettes tendance sélectionnées à la main pour l'inspiration. → Liste complète (Khroma, Paletton, Sip, Pigment, etc.) dans references/color.md

Dégradés

Générez des dégradés CSS ou d'arrière-plan.

  • UI Gradients — une collection choisie de magnifiques dégradés de couleurs.
  • CSS Gradient — un générateur de dégradé CSS gratuit pour des arrière-plans colorés.
  • Web Gradients — 180 dégradés linéaires gratuits utilisables comme fonds de contenu. → Liste complète (Grabient, CoolHue, Gradienta, etc.) dans references/color.md

Prototypage

Créez des prototypes interactifs haute-fidélité.

  • Framer — concevez visuellement des prototypes interactifs réalistes.
  • InVision — plateforme de prototypage, collaboration et flux de travail.
  • ProtoPie — assemblez des interactions haute-fidélité et des prototypes assistés par capteurs en quelques minutes. → Liste complète (Marvel, Origami, Principle, Axure, UXPin, etc.) dans references/prototyping-and-animation.md

Transfert de conception (Design Handoff)

Transmettez aux développeurs les spécifications, notes, images et extraits de code.

  • Zeplin — transférez des designs et guides de style avec des spécifications précises, des ressources et des extraits de code.
  • Avocode — ouvrez des designs sans outils de conception ; cliquez sur les calques pour obtenir le code.
  • InVision Inspect — préparez les designs pour le développement. → Liste complète (Sympli, Sketch Measure, Flawless App, Specctr, etc.) dans references/handoff-and-code.md

Design to Code

Convertissez des maquettes en code exécutable ou sites web.

  • Webflow — créez des sites responsives dans le navigateur, puis hébergez ou exportez le code.
  • Anima — un plugin Sketch / application web qui convertit les designs Sketch en HTML.
  • Supernova Studio — convertissez des designs Sketch en code Android, iOS ou React Native. → Liste complète (PaintCode, Pinegrow, Tilda, Draftbit, etc.) dans references/handoff-and-code.md

Icônes

Bibliothèques et outils d'icônes.

  • Feather Icons — icônes sur une grille 24x24 mettant l'accent sur la simplicité, la cohérence et la lisibilité.
  • Font Awesome — la collection d'icônes open source la plus populaire du web, avec sa boîte à outils.
  • Material Design Icons — icônes Material Design gratuites grâce aux contributions open source. → Liste complète (Flaticon, Icons8, Simple Icons, SVGRepo, etc.) dans references/graphic-assets.md

Polices

eRessources, gestion et association de polices.

  • Google Fonts — rendre le web plus beau et plus ouvert grâce à une typographie remarquable.
  • Adobe Fonts — des milliers de polices magnifiques par Adobe.
  • FontPair — vous aide à associer les polices Google entre elles. → Liste complète (DaFont, FontBase, Font Squirrel, RightFont, etc.) dans references/graphic-assets.md

Illustrations

Bibliothèques et générateurs d'illustrations.

  • unDraw — une collection de magnifiques images SVG.
  • Blush — créez, mélangez et personnalisez des illustrations par des artistes du monde entier.
  • Humaaans — une bibliothèque gratuite pour mélanger et assortir des illustrations de personnes. → Liste complète (ManyPixels, Open Doodles, Blobmaker, IRA Design, etc.) dans references/graphic-assets.md

Maquettes (Mockups)

Présentation de produits/appareils en situation.

  • Smartmockups — créez des maquettes de produits en quelques clics.
  • Artboard Studio — application de design graphique en ligne axée sur les maquettes de produits.
  • Rotato — maquettes 3D animées pour designs d'applications. → Liste complète (Device Shots, Mockup World, Mockuuups, Threed, etc.) dans references/mockup.md

Conception d'interface utilisateur (UI)

Outils de design d'interface et de visuel.

  • Figma — design et prototypage dans le navigateur avec collaboration en temps réel.
  • Sketch — une boîte à outils de conception conçue pour Mac.
  • Adobe XD — concevez, prototypage et partagez l'expérience utilisateur pour le web, mobile et vocal. → Liste complète (Photoshop, Illustrator, Affinity, Inkscape, Photopea, etc.) dans references/ui-and-wireframe.md

Wireframing

Maquettes basse-fidélité et schémas structurels.

  • Balsamiq Cloud — croquis d'interface utilisateur sans effort avec collaboration.
  • Wireframe.cc — un outil de wireframing simple qui ne vous gêne pas.
  • Whimsical Wireframes — wireframing instantané avec une riche bibliothèque d'éléments. → Liste complète (Pidoco, Gliffy, Layoutit, BLOKK, etc.) dans references/ui-and-wireframe.md

Plus de catégories (lire les references selon les besoins)

Les catégories suivantes ne figurent pas dans la sélection de la page d'accueil. Lorsque vous rencontrez un besoin correspondant, ouvrez directement le fichier de référence ; chaque fichier est organisé par catégorie en haut de page.

  • Outils d'accessibilité (vérification WCAG, contraste, simulation de daltonisme) → references/accessibility.md
  • Recherche utilisateur / Architecture de l'information / Parcours utilisateur / Surveillance de l'expérience (recrutement d'entretiens, tri par cartes, sitemaps, diagrammes de flux, heatmaps, analyse de traces) → references/user-research-and-ia.md
  • Collaboration / Retour sur design / Contrôle de version du design (collaboration d'équipe, annotation et révision, Git pour fichiers de design) → references/collaboration-feedback-vcs.md
  • Systèmes de design / Outils de développement / Débogage visuel / No-code (documentation de bibliothèques de composants, navigateurs de développement, inspection web, création sans code) → references/design-systems-and-dev.md
  • Médias (banques d'images gratuites / vidéos / sons / logiciels de capture d'écran) → references/media-assets.md
  • Création / Inspiration / Apprentissage (sites d'inspiration, cours de design, logos, design pour réseaux sociaux, croquis, pixel art) → references/creation-and-inspiration.md
  • Modélisation 3D / Réalité augmentée → references/3d-and-ar.md

Un répertoire complet des ressources de design « awesome » est disponible sur https://github.com/sindresorhus/awesome

Skills associés

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community