jamesonedge/interactive-mockup

Maquette interactive

Explorez de véritables alternatives, laissez l'utilisateur choisir, puis faites fonctionner le choix dans un navigateur — sans le redessiner silencieusement.

Quand l'utiliser

• « Maquette », « prototype », « montre-moi des directions », « rends ça cliquable ».
• Une revue de design a produit un cahier des charges et l'utilisateur veut le ressentir.
• Écrans vierges où l'architecture de l'information est encore ouverte.

Quand ne pas l'utiliser

• Critique uniquement, sans construction — utilisez un workflow de revue de design.
• Implémentation de production dans le framework réel de l'application.
• Un simple changement de padding, de couleur ou de copie.
• Tout ce qui nécessite des données utilisateur réelles ou de production. Les prototypes utilisent uniquement des données synthétiques.

Entrées

• La tâche et ses contraintes (plateforme, viewport, jetons si disponibles).
• Des données synthétiques représentatives. Étiquetez-les comme synthétiques dans l'interface utilisateur. Ne collez jamais de données de production ou personnelles.
• Optionnel : une revue de design ou un cahier des charges à respecter.
• Optionnel : une direction que l'utilisateur a déjà choisie. Si c'est le cas, sautez la divergence et passez directement à l'étape 3.

Workflow

1. Diverger : deux ou trois briefs de direction

Rédigez un brief par direction en utilisant templates/direction-brief.md. Chaque direction partage les mêmes contraintes, données et tâche. Elles doivent différer par leur architecture de l'information ou leur modèle d'interaction — par exemple liste d'abord vs mode focus vs tableau — et pas seulement par leur palette de couleurs.

• Si votre environnement d'exécution prend en charge des workers véritablement indépendants (sous-agents ou sessions séparées), générez les directions indépendamment et mentionnez-le.
• Sinon, générez-les en série et étiquetez-les : « Directions produites en série par un seul agent. »

Construisez chacune comme un fichier HTML statique et auto-contenu à partir de templates/direction.html. Statique signifie une mise en page et des états représentatifs ; les interactions ne sont pas encore requises.

2. Comparer et laisser l'utilisateur choisir

Créez une page de comparaison à partir de templates/comparison.html qui lie chaque direction et énonce les compromis significatifs (ce que chacune optimise, ce qu'elle sacrifie, à qui elle convient). Arrêtez-vous et demandez à l'utilisateur de choisir. Ne construisez pas la version interactive avant qu'il ait choisi, sauf s'il délègue explicitement le choix.

3. Greffe stricte : construire le prototype interactif

Suivez references/graft-rules.md. En résumé :

1. Lisez le code source HTML de la direction choisie.
2. Préservez sa structure de balisage, son CSS et ses décisions visuelles.
3. Espacez les noms de toutes les nouvelles classes ou ID qui pourraient entrer en conflit.
4. Ajoutez des interactions fonctionnelles avec du JavaScript vanilla.
5. Enregistrez chaque modification dans un registre en utilisant templates/change-ledger.md. Tout ce qui n'est pas un ajout pur nécessite une justification.

Pas de redessin silencieux. Si la direction choisie présente un défaut, enregistrez-le dans le registre et demandez avant de le modifier.

4. Contrôle qualité

Vérifiez le prototype par rapport à references/prototype-quality.md : hors ligne, meta viewport, responsive, clavier, focus visible, mouvement réduit, états vides/chargement/erreur, aucune action primaire morte, données synthétiques étiquetées.

Valeurs par défaut

• Un seul fichier .html auto-contenu par artefact : CSS et JS en ligne, pas de CDN, pas de polices web, pas d'images externes (utilisez du SVG en ligne ou du CSS).
• Pile de polices système.
• Fonctionne depuis file:// sans serveur.
• Ne publiez, déployez ou téléchargez jamais automatiquement.

Sorties

<output-dir>/
├── directions/
│   ├── a-<nom>.html
│   ├── b-<nom>.html
│   └── c-<nom>.html   (optionnel)
├── comparison.html
├── prototype.html
└── change-ledger.md

Honnêteté

Un prototype démontre l'interaction et la mise en page. Il n'est pas une preuve de faisabilité native, de performance, de conformité d'accessibilité ou de préparation à la production. Mentionnez-le dans la remise.

Avis de licence

L'avis suivant accompagne cette compétence autonome et ses fichiers de support.

Licence MIT

Copyright (c) 2026 jamesonedge

L'autorisation est accordée, à titre gratuit, à toute personne obtenant une copie
 de ce logiciel et des fichiers de documentation associés (le "Logiciel"), de traiter
 dans le Logiciel sans restriction, y compris sans limitation les droits
 d'utiliser, de copier, de modifier, de fusionner, de publier, de distribuer, de sous-licencier, et/ou de vendre
 des copies du Logiciel, et d'autoriser les personnes à qui le Logiciel est
 fourni à le faire, sous réserve des conditions suivantes :

L'avis de copyright ci-dessus et cet avis d'autorisation doivent être inclus dans toutes
 les copies ou parties substantielles du Logiciel.

LE LOGICIEL EST FOURNI "TEL QUEL", SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU
 IMPLICITE, Y COMPRIS MAIS SANS S'Y LIMITER LES GARANTIES DE QUALITÉ MARCHANDE,
 D'ADÉQUATION À UN USAGE PARTICULIER ET D'ABSENCE DE CONTREFAÇON. EN AUCUN CAS LES
 AUTEURS OU TITULAIRES DU COPYRIGHT NE POURRONT ÊTRE TENUS RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGE OU AUTRE
 RESPONSABILITÉ, QUE CE SOIT DANS LE CADRE D'UNE ACTION CONTRACTUELLE, DÉLICTUELLE OU AUTRE, DÉCOULANT DE,
 OU EN LIEN AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE
 LOGICIEL.