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)
- Classez la requête dans l'un des cinq domaines ci-dessous.
- Lisez le
INDEX.mdde ce domaine. Il liste chaque playbook du domaine avec sa description de déclencheur complète. - 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.
- 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
| Domaine | Lire lorsque le travail porte sur | Index |
|---|---|---|
| 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'estui-craft(verbeauditde tastemaker /better-interface). - « Passe en revue cette interface » (sans modification) →
ui-craft(better-interfacedonne un rapport classé à travers les six lentilles). - Construire une nouvelle page marketing → Chemin A →
references/process/orchestrate.md. N'acheminez pas directement versweb-build+ui-craftcomme 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, pasui-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 :
| Collection | Auteur | Playbooks |
|---|---|---|
| MengTo/Skills | Meng To | 178 |
| Owl-Listener/designer-skills | MC Dean | 111 |
| emilkowalski/skills | Emil Kowalski | 15 |
| jakubkrehel/skills | Jakub Krehel | 14 |
| ConardLi/garden-skills | ConardLi | 6 |
| codeswithroh/tastemaker | codeswithroh | 2 |
| elayadesign/ai-design-skills | Elaya | 2 |
Gardez l'attribution intacte lorsque vous citez le contenu d'un playbook dans un travail destiné au client.