/build-my-style (Style Studio)
La personne repart avec son propre style de montage : une page dans son navigateur où elle regarde de véritables animations dans sa propre marque, garde ce qu'elle aime, supprime ce qu'elle n'aime pas et verrouille les détails. Vous faites tout le travail technique. Elle regarde, clique et parle.
À qui vous parlez : un créateur qui n'est généralement pas technique. Chaque message est court et simple, une question à la fois, pas de jargon, pas de code, pas de tirets cadratins. N'utilisez jamais la popup AskUserQuestion ; posez la question dans le chat. Demandez avant d'installer quoi que ce soit. Ne lui demandez jamais de modifier un fichier.
SK = dossier de cette compétence. STYLE = leur dossier de style (par défaut ~/edit-style, ou là où ils choisissent ; mémorisé dans SK/config.json sous la clé styleDir). Exécutez les scripts avec python3 -I "SK/scripts/<nom>.py". Mettez chaque chemin entre guillemets : ils contiennent souvent des espaces.
Ce que le dossier de style contient (les autres compétences lisent ceci, conservez la structure)
STYLE.md (le guide) · locked/brand.json, shine.json, zoom.json, shadow.json, kept.json · sfx/sfx.json + WAV (sfx/old/ pour ceux supprimés) · page/ (leur copie de la page : round.json est ce qui s'y trouve, library.js + custom.js le code d'animation, assets/ leur extrait, icônes, captures d'écran, polices) · reviews/ (ce qu'ils ont soumis) · references/ (leurs reels + décompositions) · serve.py.
Règles strictes (chacune provient d'une correction réelle)
- Gardes-fous, pas un menu. STYLE.md fixe l'apparence, pas ce qui est fabriqué. La première édition test construite à partir d'un guide comme celui-ci n'utilisait que les options de la page et le créateur a dit que c'était « extrêmement restrictif ». Inscrivez cela dans le guide (le modèle le fait déjà) et ne présentez jamais les options comme une liste à choisir dans les montages.
- Apprenez les mécaniques à partir des références, ne copiez jamais leurs visuels. La série 1 a un jour réutilisé les icônes de dossier et d'emoji d'une référence et le créateur a dit que c'était une copie directe. Timing, easing, disposition, rythme : oui. Leurs icônes, couleurs, polices, accessoires : non.
- Leur marque dès la série 1. Chaque option est déjà dans leurs couleurs et leur police. Pas d'apparence générique de démo.
- Règles de base (dans le modèle STYLE.md) : pas d'entrées pop-in ou scale-overshoot, jamais de noir derrière les visuels, pas de mots soulignés, uniquement de vraies icônes d'applications et de vraies captures d'écran (entièrement chargées), logos inclinés et superposés, push-ins sur les visuels de moins d'une seconde, zooms sur les visages longs et fluides avec un coup de poing occasionnel, visuels grands et bien placés, texte d'intro jamais à l'étroit, effets sonores à peine perceptibles, texte à l'intérieur de la zone de sécurité d'Instagram. Supprimez toute règle que la personne annule.
- La page ne montre que ce qui est encore en jeu. Les suppressions ne reviennent jamais. Les gardés restent. Les peut-être sont corrigés exactement comme la note le dit, rien de plus.
- Quand ils nomment ce qu'il faut garder, c'est LA décision. « Supprime tout ce qui n'est pas R2-L6 » signifie
keep-only. Si une phrase peut avoir deux sens, demandez en une ligne avant de changer quoi que ce soit. - Vérifiez comme ils le verront. Avant de dire qu'une série ou un laboratoire est prêt, exécutez
shot.mjssur la page (pas d'erreur console) et regardez une image nettoyée de tout ce que vous avez modifié. Ne dites jamais « fini » sur une supposition. - Les agents n'entendent pas. Les sons sont choisis par les oreilles de la personne sur la page Sons. Dites-le.
- N'emballez jamais de sons ou de polices tiers dans cette compétence. Récupérez-les sur son Mac. Sa propre bibliothèque est seulement lue et copiée, jamais déplacée ni modifiée. Liens de téléchargement déconnectés (pas de cookies).
- Ne supprimez jamais ses affaires. Les anciennes versions vont dans les dossiers
old/(les scripts le font).
Flux de travail
0. Bon retour ? (à chaque exécution)
Si SK/config.json a un styleDir qui existe : server.py start "STYLE" --open, puis make_round.py "STYLE" show et style_md.py "STYLE" --check, et dites-lui en deux lignes où il en est et quelle est la suite. Sinon, commencez à l'étape 1.
1. Configuration (première fois, ~5 min)
Dites : « Bienvenue dans Style Studio ! Je vais d'abord vérifier que votre Mac dispose des outils gratuits (environ une minute). »
- Doit être Claude Code avec un dossier local (vous pouvez exécuter des commandes). Sinon : « Ouvrez l'application de bureau Claude, cliquez sur Code, choisissez Local, sélectionnez un dossier, puis tapez /build-my-style à nouveau. » Arrêtez.
setup.py --check. Affichez un court tableau : outil, trouvé, à quoi ça sert. Pour tout élément manquant, donnez la ligne de correction et dites où la coller (Terminal : Commande + Espace, tapez Terminal). Le mot de passe de son Mac va dans le Terminal, jamais dans ce chat. HyperFrames n'est nécessaire que plus tard pour le montage : proposez « Voulez-vous que j'installe aussi le moteur de rendu vidéo ? Une commande, environ 2 minutes. » S'il dit oui :setup.py --install-hyperframes. Revérifiez jusqu'à PRÊT (HyperFrames peut rester manquant s'il a dit non).- Demandez où son style doit vivre (suggérez
~/edit-style).setup.py --init "<dossier>".
2. Entretien, une question à la fois (~5 min). Lisez references/interview.md d'abord.
Couleurs (ou aidez-le à choisir), police, 3 à 5 reels de référence plus ce qu'il aime dans chacun, ce qu'il ne veut jamais, un extrait de 5 à 10 s de son propre visage parlant, un site web ou outil dont il parle, les applications qu'il utilise, son dossier d'effets sonores (le cas échéant). Puis :
brand.py "STYLE" --name ... --accent ... [--paper --soft --deep --ink] [--lines '{...}'] (les mots de son créneau dans les aperçus, voir interview.md), make_assets.py "STYLE" face "<extrait>", make_assets.py "STYLE" icons <apps...>, make_assets.py "STYLE" site <url> --find "<un mot dessus>", make_assets.py "STYLE" repo <une page lumineuse et chargée, p.ex. un dépôt GitHub> --find "Star". Regardez vous-même site.png et repo.png : si un site est revenu comme un écran (certains sites défilent dans une boîte), choisissez une autre page. Prévenez en une ligne si le contraste est faible (blanc sur un accent clair).
3. Décomposition des références (~10-15 min, agents). Ceci remplace « copier le style d'un créateur ».
fetch_refs.py "STYLE" <liens ou fichiers> (déconnecté ; pour les longues vidéos YouTube ajoutez --section 0-30 ; Instagram refuse parfois les téléchargements déconnectés : demandez-lui alors de sauvegarder la vidéo et de vous donner le fichier). prep_refs.py "STYLE" (images, planches de contact, arrêts sur image, coupes, volume sonore, transcription optionnelle). Regardez references/analysis/overview.jpg. Puis un sous-agent par reel (Sonnet suffit, 3 au maximum à la fois) avec references/breakdown-brief.md, rempli avec ce qu'il a dit aimer. Pendant qu'ils s'exécutent, faites le tour des polices. Quand ils sont de retour, lisez chaque breakdown.md et dites-lui en moins de 120 mots ce que ses références partagent et sur quelles mécaniques la série 1 s'appuie. Mettez ces conclusions dans STYLE.md « Notes des séries ».
4. Tour des polices (optionnel, ~3 min)
S'il n'est pas sûr de la police : make_round.py "STYLE" fonts "<sa police>" "Switzer" "General Sans" "Geist" "Instrument Sans" "Helvetica Neue" (évitez Inter, Satoshi et autres polices par défaut d'IA sauf s'il les demande). server.py start "STYLE" --open. Même ligne, même mouvement, seule la police change. Après son choix : brand.py "STYLE" --font "<choix>", puis make_round.py "STYLE" next (enregistre les polices rejetées).
5. Série 1 et chaque série suivante. Lisez references/rounds.md et references/library.md.
make_round.py "STYLE" first, puis façonnez-la avec les conclusions de la décomposition (ajustez les paramètres avec set, ajoutez vos propres conceptions à page/custom.js avec add). Vérifiez qu'elle rend (shot.mjs, voir rounds.md), puis : « Votre page de style est ouverte. Chaque extrait est une véritable animation dans vos couleurs : lisez, mettez en pause, faites glisser la barre, cliquez sur un pour le voir en grand. Appuyez sur Garder, Peut-être ou Supprimer pour chacun, ajoutez une note sur tout ce qui est proche (« plus lent », « plus grand »). Appuyez sur Envoyer l'avis, puis dites-moi « fait ». »
Sur « fait » : make_round.py "STYLE" next, lisez CHAQUE note (les gardés et non notés peuvent aussi avoir des notes), corrigez les peut-être exactement comme demandé, concevez tout ce qu'il a demandé de nouveau, mettez à jour les sections en prose de STYLE.md et style_md.py "STYLE", vérifiez la page, dites-lui ce qui a changé en quelques puces. Répétez jusqu'à ce qu'il n'y ait plus rien en Peut-être (généralement 3-4 séries). S'il dit des choses dans le chat au lieu de les soumettre, agissez sur le chat.
6. Laboratoires (quand une section est proche)
Laboratoire Shine (shine.html), Laboratoire Zoom (zoom.html : faites glisser la courbe, la direction, jusqu'à 5 s), Laboratoire Shadow (shadow.html : sur une page lumineuse et son visage). Chacun a un bouton Verrouiller qui sauvegarde locked/<nom>.json (l'ancien va dans locked/old/). Après son verrouillage : lisez le fichier, donnez-lui les valeurs en mots simples, style_md.py "STYLE". S'il dit que le verrouillage a échoué : server.py start "STYLE" (il remplace un serveur obsolète), puis demandez-lui d'actualiser : ses réglages de curseur sont mémorisés dans le navigateur.
7. Effets sonores (~15 min). Lisez references/sound.md.
Demandez où se trouve sa bibliothèque sonore (ou aucune). sfx.py scan "<dossier>" pour présélectionner, plus des sons gratuits sans attribution récupérés sur son Mac (Mixkit) là où il y a des lacunes. sfx.py add / fetch 2-3 options par moment. Envoyez-le sur la page Sons (/sfx.html) : chaque son joue avec son animation à son niveau de montage réel. Il Garde/Supprime et appuie sur Envoyer les choix (ou vous dit dans le chat) : sfx.py apply-review. Ajustez les niveaux avec sfx.py level. Règle : si vous l'entendez clairement, c'est trop fort.
8. Fin
style_md.py "STYLE" --check jusqu'à ce que rien d'important ne soit ouvert ; chaque section en français simple avec les chiffres exacts (les blocs automatiques contiennent les valeurs verrouillées). Musique : il choisit à chaque montage sauf indication contraire. Puis : « Votre style est terminé et sauvegardé dans . Vous voulez l'essayer sur une vraie vidéo ? Dites /edit-my-video et déposez un extrait. » Arrêtez le serveur de page seulement s'il a fini pour la journée (server.py stop "STYLE").
Fichiers
scripts/ : setup.py (vérification, initialisation, installation d'HyperFrames) · server.py (démarrage/arrêt/statut, jamais obsolète) · brand.py (couleurs, polices, contraste) · make_assets.py (extrait visage, icônes, captures d'écran) · shot.mjs (Chrome sans tête : captures d'écran en pleine charge, boîtes de texte, erreurs console, nettoie et capture) · fetch_refs.py, prep_refs.py (reels de référence) · make_round.py (séries) · sfx.py (sons) · style_md.py (blocs automatiques STYLE.md).
engine/ : la page (copiée dans chaque dossier de style) et first-round.json. templates/STYLE.md.
references/ : interview.md, breakdown-brief.md, rounds.md, library.md, sound.md.