Compétence Esquisse de Prototype
Faites en sorte qu'une application web fonctionnelle ressemble à un dessin à la main, pour que les clients voient qu'il s'agit d'un prototype, et non d'un produit fini. Il s'agit uniquement d'une peau d'apparence. Elle est purement additive et entièrement réversible.
Garde-fous de périmètre (lire d'abord, ne jamais violer)
- Touchez uniquement les points d'entrée de style et
index.html. Ajoutez une feuille de style, collez un bloc SVG, définissez deux attributs. Rien d'autre. - Ne modifiez jamais les composants, templates, fichiers
.ts/.tsx/.jsx/.vue, le routage, l'état, les services ou les tests. - Ne remplacez jamais des composants par des bibliothèques de composants esquissés (par ex. wired-elements) — cela réécrit le balisage. Interdit.
- Ne recolorez et ne déformez jamais les logos, photos, graphiques ou icônes qui doivent rester nets — utilisez la classe d'exclusion volontaire.
- L'annulation doit rester triviale : supprimer les deux attributs
<html>désactive toute la peau.
Comment ça fonctionne (un modèle mental)
- Une feuille de style
assets/sketch-skin.cssdéfinit les 5 styles + la rampe d'esquisse. - Un bloc SVG
assets/sketch-filters.htmldéfinit les filtres de déformation (#sketch-25…#sketch-100). - L'activation se fait par deux attributs sur
<html>:data-sketch="<style>"etdata-sketch-level="<0|25|50|75|100>". - Le rendu provient de : un changement de police manuscrite + des boîtes dessinées à la main (border-radius irrégulier, remplissages plats) + un filtre de déplacement SVG dont la force correspond au niveau d'esquisse. La police porte le texte ; le filtre déforme uniquement la décoration des boîtes (ne brouille jamais le texte).
Démarrage rapide (faites dans cet ordre)
- Confirmez que la demande concerne uniquement la peau. Si l'utilisateur souhaite des changements de comportement/disposition, arrêtez — cela sort du cadre.
- Détectez le framework et trouvez sa feuille de style globale +
index.html(voir le tableau des recettes ci-dessous). - Choisissez un style (tableau dans « Styles ») et un niveau (
0,25,50,75ou100). - Ajoutez le CSS de la peau aux styles globaux du projet :
- Copiez
assets/sketch-skin.cssdans le projet (par ex.src/styles.scss) ou faites un@import. L'import de la police (@import) est déjà dans ce fichier (utilisation en ligne).
- Copiez
- Collez les filtres SVG de
assets/sketch-filters.htmlimmédiatement après la balise d'ouverture<body>dansindex.html. (Obligatoire —filter: url(#sketch-…)ne se résout que si ces définitions sont dans le DOM.) - Activez en modifiant la balise
<html>dansindex.html:<html lang="fr" data-sketch="balsamiq" data-sketch-level="50"> - Vérifiez dans le navigateur. Pour annuler, supprimez les deux attributs
data-sketch*(le CSS/SVG ajoutés peuvent rester dormants — ils ne font rien sans les attributs).
Styles
data-sketch | Rendu | Police | Utilisation pour |
|---|---|---|---|
balsamiq | Maquette filaire greyscale propre, boîtes plates | Balsamiq Sans | Le défaut « ceci est une maquette » |
sharpie | Marqueur noir gras, trait épais | Permanent Marker | Croquis tableau blanc / atelier |
pencil | Graphite léger, traits doux | Gaegu | Brouillon doux « crayon sur papier » |
doodle | Ludique, accents de couleur légers | Short Stack | Concepts amicaux et informels |
blueprint | Encre blanche sur papier bleu | Patrick Hand | Ambiance technique « planche à dessin » |
Niveau d'esquisse
data-sketch-level contrôle le tremblement des traits. Il sélectionne un filtre de déplacement SVG différent :
| Niveau | Effet |
|---|---|
0 | Boîtes dessinées à la main + police, mais traits droits et stables (le plus propre) |
25 | Tremblement subtil |
50 | Clairement dessiné à la main (défaut recommandé) |
75 | Croquis lâche et énergique |
100 | Très brut, « gribouillage » maximal |
Si data-sketch est défini mais que data-sketch-level est omis, la peau utilise par défaut le niveau 50.
Filigrane diagonal (optionnel)
Pour marquer tout l'écran comme brouillon, ajoutez un troisième attribut <html> avec le texte à afficher :
<html data-sketch="balsamiq" data-sketch-level="50" data-sketch-watermark="BROUILLON">
data-sketch-watermark peint un mot écrit à la main, léger et en diagonale, sur la zone d'affichage. C'est une couche fixe et non interactive (pointer-events: none), donc elle ne bloque jamais les clics, ne modifie pas la disposition et reste en place lors des changements de page et de route. N'importe quel texte fonctionne (BROUILLON, PROTOTYPE, CONFIDENTIEL, un nom de client…). Supprimez l'attribut pour le désactiver. Avec la superposition, un champ de texte Filigrane le définit en direct.
Fenêtres modales, popups et navigation SPA
Étant donné que la peau est activée par des attributs sur <html> et stylisée avec des sélecteurs globaux [data-sketch] …, tout ce qui apparaît après l'activation en hérite automatiquement — dialogues, popovers, menus déroulants, infobulles et toasts (y compris ceux montés sur portail), ainsi que chaque écran vers lequel vous naviguez dans une application monopage. Il n'y a rien à câbler par composant ou par route.
Deux éléments maintiennent la cohérence :
- Les listes de sélecteurs couvrent déjà
dialog,[popover],[role="dialog"],[aria-modal="true"],.modal,.popover, les menus, les infobulles et les toasts, ainsi que le::backdropnatif. - Le script de superposition surveille
<body>et réinjecte les filtres SVG si un framework remplace le corps lors d'un changement de route, de sorte que le tremblement ne disparaisse jamais silencieusement. (Avec le modèle d'attributs statiques, collezsketch-filters.htmlune fois après<body>; les frameworks SPA se montent dans une racine enfant et le laissent intact.)
Recettes d'injection par framework
La peau est indépendante du framework. Voici les cibles exactes ; les détails complets se trouvent dans references/implementation.md.
| Stack | Ajouter le CSS à | Coller le SVG dans | Définir les attributs sur |
|---|---|---|---|
| Angular | src/styles.scss (ou styles.css) | src/index.html après <body> | <html> dans src/index.html |
| React / Vite | src/index.css (importé dans main.tsx) | index.html après <body> | <html> dans index.html |
| Vue | src/assets/main.css (importé dans main.ts) | index.html après <body> | <html> dans index.html |
| HTML statique | lier sketch-skin.css dans <head> | index.html après <body> | <html> dans index.html |
Garder des éléments spécifiques nets (exclusion volontaire)
La peau ne modifiera pas le balisage, mais si l'utilisateur demande explicitement de protéger un élément (logo, graphique), le seul changement de balisage autorisé est l'ajout du point d'accroche d'exclusion à cet unique élément :
<img src="logo.svg" class="no-sketch" alt="Logo">
.no-sketch (ou data-no-sketch) supprime le filtre de tremblement et les surcharges de couleur de cet élément. Utilisez avec parcimonie et uniquement sur demande.
Superposition interactive de prévisualisation (optionnelle)
Lorsque l'utilisateur souhaite basculer entre les styles en direct (par ex. montrer un commutateur à un client), utilisez la superposition au lieu des attributs statiques :
- Ajoutez
assets/sketch-skin.cssaux styles globaux (comme dans le Démarrage rapide). - Ajoutez une balise script avant
</body>:<script src="sketch-toggle.js" defer></script> - Terminé. Le script rend un panneau flottant avec OFF + un bouton radio par thème,
un curseur d'esquisse de 0 à 100 %, et un champ de texte pour le filigrane, bascule les attributs
<html>en direct et mémorise le choix danslocalStorage. Il injecte automatiquement les filtres SVG (et les réinjecte si une SPA remplace le corps), donc l'étape 5 du Démarrage rapide (collersketch-filters.html) n'est pas nécessaire.
Cela reste uniquement une peau et non destructif — le script ne fait que définir des attributs. Supprimez la balise pour désactiver. Choisissez ce modèle lorsque la demande est « laissez-moi/au client basculer entre les styles » ; utilisez des attributs statiques pour un rendu fixe et stable pour les captures d'écran.
Galerie de captures d'écran
README.md montre chaque style et l'échelle de 0 à 100 % en utilisant les PNG dans demo/screenshots/. Ces images sont pré-rendues ; l'application de démonstration interactive et le script de capture Playwright qui les génèrent se trouvent dans la source de développement du projet et ne sont pas fournis avec la compétence installée. La compétence elle-même est simplement assets/ + references/ — pas d'étape de construction, pas de dépendances.
Exemples
Exemple 1 — Démo Angular en Balsamiq, esquisse modérée
- Entrée : « Fais en sorte que cette application Angular ressemble à une maquette Balsamiq pour la démo de demain. »
- Actions : ajoutez
sketch-skin.cssàsrc/styles.scss; collez les filtres danssrc/index.html; définissez<html data-sketch="balsamiq" data-sketch-level="50">. - Résultat : l'application s'exécute à l'identique ; s'affiche comme une maquette filaire en niveaux de gris.
Exemple 2 — React, sharpie maximal
- Entrée : « Application React, aspect marqueur blanc complet, très brut. »
- Actions : importez
sketch-skin.cssdansmain.tsx; collez les filtres dansindex.html; définissezdata-sketch="sharpie" data-sketch-level="100".
Exemple 3 — Désactiver
- Entrée : « Reviens à l'interface réelle. »
- Action : supprimez
data-sketchetdata-sketch-levelde<html>. Terminé — aucun autre changement nécessaire.
Dépannage
| Symptôme | Cause | Correctif |
|---|---|---|
| Les boîtes semblent dessinées à la main mais les traits sont parfaitement droits | Filtres SVG absents du DOM, ou niveau 0 | Confirmez que sketch-filters.html est collé après <body> ; définissez le niveau ≥ 25 |
| Rien n'a changé du tout | Attributs manquants ou CSS non chargé | Vérifiez que <html data-sketch="…"> est présent et que sketch-skin.css est dans les styles globaux |
| Le texte semble flou | Filtre appliqué au texte / à tout <body> | N'ajoutez pas filter: au body ou au texte ; la peau filtre uniquement la décoration des boîtes — recopiez sketch-skin.css sans modification |
| Les polices ne sont pas manuscrites | Police hors ligne / Google Fonts bloquée | Hébergez les polices localement — voir assets/fonts/README.md |
| La page semble lente sur les grands tableaux/grilles | Coût de feDisplacementMap sur un grand DOM | Abaissez le niveau, ou limitez la liste des sélecteurs de tremblement (voir references/implementation.md) |
| Un logo est désaturé / tremblant | Aucune exclusion sur cet élément | Ajoutez class="no-sketch" à ce seul élément |
| Les polices d'icônes / icônes SVG ont disparu | Aplatissement agressif | Ajoutez no-sketch au conteneur d'icônes, ou consultez la note sur les icônes dans references/implementation.md |
Fichiers de référence (lire uniquement si nécessaire)
references/styles.md— spécifications exactes de police/palette/trait pour chacun des 5 styles, et comment ajouter un nouveau style.references/implementation.md— mathématiques des filtres SVG, étapes par framework, réglage des sélecteurs, polices hors ligne, performances, détails de réversibilité.