Que fait mochi-redesign ?
Un processus de refonte guidé. Il n'applique pas un style fixe. Il applique un processus fixe : comprendre la personne, trouver un concept, construire un petit système de design, placer tout ce qui est important sur le premier écran sous forme de cartes, déplacer les détails dans des popups riches et des pages dédiées, rédiger un copy honnête, et vérifier chaque modification à des tailles d'écran réelles avant de la montrer.
Il a été distillé à partir d'un portfolio réel qui est passé d'un simple template
à une colonne à un site de style bento après plusieurs rounds de retours du propriétaire.
Les leçons de ces rounds (ce qui a fonctionné, ce qui a été rejeté, ce qui a cassé) sont
codées ci-dessous et dans references/.
La sortie ne doit jamais ressembler au site dont est issue cette compétence. Même discipline, identité différente : nouveau concept, nouvelles polices, nouvelles couleurs, nouveau détail signature. Si vous vous surprenez à utiliser un trait de pinceau souci, un mascotte ou une grille bento parce que « c'est ce que fait la compétence », arrêtez-vous et revenez à la Phase 1.
Comment l'exécuter
Les arguments sont un texte libre optionnel, par ex. /mochi-redesign client/ ou
/mochi-redesign seulement la page d'accueil, garder le blog tel quel.
Suivez les phases dans l'ordre. Chaque phase se termine par un point de contrôle : montrez le résultat au propriétaire (captures d'écran, pas des descriptions) et attendez sa réaction avant de continuer. Les refontes échouent lorsque plusieurs décisions non examinées s'accumulent.
| Phase | À lire d'abord | Point de contrôle |
|---|---|---|
| 0. Réception et audit | references/01-intake-audit.md | Le propriétaire confirme objectifs, public, périmètre, ce qui ne doit pas changer |
| 1. Concept et système | references/02-concept-system.md | Le propriétaire choisit une direction ; les tokens sont écrits |
| 2. Vérité du contenu | references/03-content.md | Le propriétaire approuve les affirmations (pas de sur-vente) |
| 3. Premier écran | references/04-layout.md | Tient sur un écran d'ordinateur portable à chaque taille cible |
| 4. Couche de détail | references/05-interaction.md | Les popups défilent à l'intérieur, verrouillent la page, aucun décalage de mise en page |
| 5. Pages secondaires | references/06-content-pages.md | Les listes et pages de lecture correspondent au système |
| 6. Médias (optionnel) | references/07-media.md | Vraies démonstrations, compressées, lecture uniquement dans le champ de vision |
| 7. Polissage et QA | references/08-qa.md | Le test de débordement passe, les deux thèmes, mobile, lint, build |
| 8. Remise | references/09-feedback-and-handoff.md | Diff propre, document de design mis à jour, le propriétaire décide de valider |
references/10-anti-patterns.md est la liste des erreurs commises la première fois.
Lisez-la une fois avant la Phase 1 et à nouveau avant la Phase 7.
Non-négociables
- Regardez avant de modifier. Lisez le code existant, exécutez le site, faites des captures d'écran aux tailles cibles. Ne refaites jamais le design à partir du seul code.
- Une identité par site. Le concept vient du sujet (ce que la personne ou le produit est vraiment), pas d'une tendance ou de l'origine de cette compétence.
- Tout ce qui est important sur le premier écran. Les visiteurs doivent voir qui, quoi, et une preuve (meilleur travail) sans défilement. Les détails sont à un clic, pas cinq écrans plus bas.
- Copy honnête. Aucune affirmation que le propriétaire ne peut pas défendre en entretien. Préférez « a pratiqué », « a fait », « là où ça convient » à « chaque », « toujours », « tout ». Montrez des preuves (chiffres, produits livrés) au lieu d'adjectifs.
- Vérifiez aux tailles, pas dans votre tête. Chaque modification visuelle est suivie
du test de débordement (
scripts/clip-check.mjs) et d'au moins une capture d'écran. Ne signalez jamais « fait » à partir d'un changement que vous n'avez pas regardé. - Petites étapes réversibles. Modifiez une chose, montrez-la, écoutez. Si le propriétaire rejette quelque chose deux fois, arrêtez de deviner : proposez 2–3 options concrètes avec des aperçus et laissez-le choisir. S'il demande d'annuler, restaurez exactement la version précédente, pas une reconstruction « assez proche ».
- Ne cassez pas ce qui est en ligne. Gardez les anciennes routes fonctionnelles, ne touchez pas aux pages non concernées, ne reformatez pas les fichiers que vous n'avez pas besoin de modifier (le changement de format masque le vrai diff), ne validez ni ne poussez sans y être invité.
- Accessibilité minimale. Accessible au clavier, focus visible, vrais boutons
et liens, respect de
prefers-reduced-motion, contraste vérifié dans les deux thèmes, rien d'important transmis uniquement par le survol.
À quoi ressemble « fait »
- Un premier écran qui tient sur un ordinateur portable (1280×720 à 1920×1080) sans contenu coupé, sans défilement horizontal, et avec un point focal clair.
- Un petit système de design écrit (tokens, typographie, coins, règles de mouvement) que chaque nouveau composant utilise.
- Des cartes qui ouvrent un détail riche (dialogues ou pages) au lieu d'un long défilement.
- Un copy approuvé ligne par ligne par le propriétaire.
- Des pages secondaires (listes, articles, études de cas) qui ressemblent au même site.
- Un document de design dans le dépôt (
DESIGN.mdou similaire) décrivant le système et les décisions, afin que la personne suivante (ou l'agent) maintienne la cohérence.
Fichiers de cette compétence
SKILL.md ce fichier : workflow, points de contrôle, règles
references/01-intake-audit.md questions à poser, comment auditer le site actuel
references/02-concept-system.md trouver un concept ; tokens, typographie, détail signature
references/03-content.md rédiger un copy véridique, scannable, mis en évidence
references/04-layout.md mise en page bento du premier écran et recettes de cartes
references/05-interaction.md dialogues, survol, mouvement, petits plaisirs
references/06-content-pages.md pages blog/liste/lecture qui gardent le visiteur engagé
references/07-media.md enregistrer démonstrations et bandes-annonces du travail réel
references/08-qa.md matrice de viewport, test de débordement, thèmes, accessibilité
references/09-feedback-and-handoff.md itérer avec le propriétaire ; finir proprement
references/10-anti-patterns.md ce qui a mal tourné la première fois, et la correction
scripts/clip-check.mjs script CDP : cartes coupées, débordement, pliage
scripts/shots.mjs script CDP : captures par viewport et thème
templates/ extraits agnostiques (React + Tailwind)