Communitygithub.com

Design Pro

Achemine le travail de design et de front-end vers le playbook expert approprié à partir d'une bibliothèque groupée de 328 playbooks. Utilisez-le pour toute tâche d'UI, design visuel, interaction, animation, typographie, couleur, accessibilité, mise en page ou rédaction ; pour les pages d'atterrissage et les constructions design-engineering ; pour la recherche utilisateur, les personas, les cartes de parcours, les tests d'utilisabilité, les systèmes de design, les tokens, la critique et la remise ; pour Three.js et les scènes 3D, les démos de mouvement, les présentations vidéo et les illustrations SVG ; ainsi que pour l'architecture de jeu, le combat et les VFX.

Qu'est-ce que Design Pro ?

Design Pro est un agent de routage intelligent qui agit comme une couche d'orchestration au-dessus de 328 playbooks de design spécialisés provenant de sept collections open source. Il évite le problème des agents génériques en décidant si la requête concerne la construction d'une interface UI (chemin A — obligatoire via le pipeline `orchestrate.md` avec son moteur anti-générique `tastemaker`) ou d'autres travaux de design comme la critique, la recherche ou les scènes 3D (chemin B — via un tableau de bord par domaine). Pour les constructions UI, il exécute un pipeline complet qui garantit un résultat distinctif et non générique, incluant une vérification finale « anti-slop ». Pour les autres cas, il classe la requête parmi cinq domaines (ui-craft pour le polissage visuel, web-build pour les pages web, process pour la recherche et les systèmes de design, motion-3d pour l'animation et WebGL, games pour l'architecture de jeu) et ne lit que les playbooks pertinents. Le système inclut des indices de routage pour éviter les erreurs courantes comme confondre une critique d'interface avec une demande de construction, ou acheminer une page marketing directement vers des playbooks individuels sans passer par l'orchestrateur. Chaque playbook conserve sa licence MIT d'origine et son attribution, et les fichiers de support (scripts, références) sont stockés dans des dossiers nommés `<playbook>.files/`.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/purebilliontech/design-pro/tree/main/skills/design-pro

Demander à votre IA préférée

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

Documentation

Que fait Design Pro ?

Une couche de routage sur 328 playbooks de design provenant de sept collections publiées, avec un pipeline orchestré pour les constructions UI par-dessus. Chaque playbook est un fichier de référence autonome. Ne lisez que ceux que la tâche nécessite — ne chargez jamais la bibliothèque entière.

Première bifurcation : s'agit-il d'une construction UI ?

Avant de classifier, décidez dans lequel des deux chemins se trouve la requête. Bien faire cette distinction est ce qui sépare un résultat distinctif d'un résultat générique.

Chemin A — Construire / concevoir / améliorer une surface UI (une page, un écran, un composant, une page d'atterrissage, un site marketing, une vue d'application ou un tableau de bord — et vous allez effectivement produire ou modifier quelque chose) :

→ Lisez references/process/orchestrate.md et suivez-le. C'est le pipeline obligatoire. Il intègre le moteur anti-générique groupé (tastemaker) comme colonne vertébrale, achemine les autres domaines à son service et applique une dernière barrière anti-déchets. Ne remettez pas une construction UI directement à un seul playbook — c'est le chemin du standard téléphonique passif qui produit « n'importe quelle IA aurait pu construire ça ».

Chemin B — tout le reste (critique sans modification, recherche et stratégie, une scène Three.js / shader pure, une démo de mouvement, un système de jeu, une illustration SVG, « quel playbook couvre X ») :

→ Utilisez le tableau de bord ci-dessous.

Tableau de bord (Chemin B)

  1. Classez la requête dans l'un des cinq domaines ci-dessous.
  2. Lisez le INDEX.md de ce domaine. Il liste chaque playbook du domaine avec sa description de déclencheur complète.
  3. Lisez le ou les deux playbooks correspondants. Suivez-les tels qu'écrits — ils sont l'expertise ; ce fichier n'est que le tableau de bord.
  4. Si rien ne correspond, dites-le et procédez selon votre propre jugement plutôt que de forcer une correspondance inadaptée.

Lire deux playbooks de domaines différents est normal et correct. En lire six est un signe que la requête doit être divisée en étapes.

Les cinq domaines

DomaineLire lorsque le travail porte surIndex
ui-craft (82)Polissage, typographie, systèmes de couleurs, accessibilité, mise en page, texte d'interface, motifs d'interaction, animation et sensation de mouvement, critique visuelle. La couche « est-ce que ça a l'air et se sent bien ».references/ui-craft/INDEX.md
web-build (121)Pages d'atterrissage, sites marketing, design engineering, narration avec scroll et GSAP, transformation de références ou d'enregistrements d'écran en prompts, capture de page, génération d'articles et d'images. La couche « construire la page ».references/web-build/INDEX.md
process (63)Recherche utilisateur, entretiens, personas, JTBD, cartes de parcours, enquêtes, tests d'utilisabilité, gouvernance des systèmes de design, tokens, design ops, spécifications de remise, travail avec les parties prenantes et la négociation. La couche « comment le travail est décidé ».references/process/INDEX.md
motion-3d (36)Scènes Three.js, matériaux, éclairage, eau, rayons divins, visites virtuelles, démos de mouvement, présentations vidéo web et styles d'illustration SVG manuscrits.references/motion-3d/INDEX.md
games (26)Architecture de jeu, boucles de gameplay, systèmes de combat, VFX de compétences, QA de gameplay.references/games/INDEX.md

Indices de routage

Voici les appels qu'il est facile de se tromper :

  • « Améliore l'apparence » / « ça ressemble à de l'IA » — si vous allez effectivement modifier l'UI, c'est Chemin A → references/process/orchestrate.md. S'il s'agit uniquement d'une critique, c'est ui-craft (verbe audit de tastemaker / better-interface).
  • « Passe en revue cette interface » (sans modification) → ui-craft (better-interface donne un rapport classé à travers les six lentilles).
  • Construire une nouvelle page marketing → Chemin A → references/process/orchestrate.md. N'acheminez pas directement vers web-build + ui-craft comme deux moteurs séparés ; l'orchestrateur exécute un seul moteur, ancré et contrôlé.
  • Une animation semble incorrecte mais vous ne pouvez pas dire pourquoi → ui-craft, les playbooks d'animation. Les courbes d'accélération et la durée en sont généralement la cause.
  • « Devrions-nous construire cela du tout » → process, pas ui-craft. La recherche et la stratégie précèdent le travail artisanal.
  • Un design statique qui doit devenir une vidéo → motion-3d.
  • Tout ce qui a un fichier Figma en entrée → web-build (build-design).

Fichiers de support

Certains playbooks sont livrés avec des scripts et du matériel de référence à leurs côtés, dans un dossier frère nommé <playbook>.files/. Lorsqu'un playbook fait référence à ses propres références ou scripts, cherchez là-bas. Les ressources de démonstration (vidéos, captures d'écran, textures) n'ont pas été incluses — si un playbook pointe vers l'un d'eux, traitez-le comme illustratif et continuez.

Provenance

Chaque playbook porte un en-tête indiquant son référentiel source et son auteur. Les sept collections sont sous licence MIT et incluses non modifiées en dehors de cet en-tête :

CollectionAuteurPlaybooks
MengTo/SkillsMeng To178
Owl-Listener/designer-skillsMC Dean111
emilkowalski/skillsEmil Kowalski15
jakubkrehel/skillsJakub Krehel14
ConardLi/garden-skillsConardLi6
codeswithroh/tastemakercodeswithroh2
elayadesign/ai-design-skillsElaya2

Gardez l'attribution intacte lorsque vous citez le contenu d'un playbook dans un travail destiné au client.

Skills associés