Parent : [[INDEX-WEB-UIUX]]
Références produits — outils annotation & design pro
Problème
Sans refs produit métier, l'IA produit un dashboard SaaS générique — pas un outil d'annotation crédible.
Solution — 20 min recherche AVANT wireframe
| Produit | Ce qu'il faut étudier | Pourquoi |
|---|---|---|
| Pastel | Pin sur page live, sidebar thread | Flow annotation directe |
| Marker.io | Widget capture + comment | Overlay non-intrusif |
| Figma comments | Pin + thread + resolve | UX thread minimale |
| Linear | Densité UI, raccourcis, status | Chrome pro sans bruit |
| tldraw / Excalidraw | Modes outil, canvas | Interaction select/draw |
| Vercel toolbar | Minimal chrome dev | Overlay discret |
Noter dans DESIGN.md (section Références) :
## Refs annotation tool
- Pastel: [url] → copier: pin + panel thread à droite
- Linear: [url] → copier: densité toolbar 48px, pas de cards
- Éviter: hero marketing dans l'outil lui-même
Matrice copier / éviter
| Élément | Copier (structure) | Éviter (slop) |
|---|---|---|
| Toolbar | Icônes 20px, groupe vertical | Labels + gradients |
| Comment pin | Dot 12px + ligne optionnelle | Bulle cartoon emoji |
| Panel | 280px, tabs Comments/Info | Cards empilées shadow-lg |
| Save | Texte discret status bar | Modal « Success! » |
Workflow IA
1. Humain : 3 URLs Mobbin + notes copier/éviter
2. DESIGN.md rempli (template DESIGN-tool.md)
3. Prompt : "Implémenter selon PAT-149/150/151 + refs DESIGN.md"
4. Gate PAT-155 avant première demo
Source
- Excellence design-tool — 2026-06-09
Liens connexes
- [[KNOW-PAT-146|KNOW-PAT-146]]
- [[KNOW-PAT-151|KNOW-PAT-151]]