Parent : [[INDEX-WEB-UIUX]]

Chrome outil pro — niveau Figma / Linear

Problème

Un « éditeur » avec sidebar marketing + cards = slop IA. Un outil pro a une densité, des modes, des raccourcis — le contenu (site annoté) est le héros.

Solution — Layout canonique

┌──┬──────────────────────────────────────┬──┐
│T │         VIEWPORT (site + overlay)     │P │
│O │                                       │R │
│O │                                       │O │
│L │                                       │P │
│S │                                       │S │
└──┴──────────────────────────────────────┴──┘
     [status: saved · 3 comments · V browse]

• Tools (gauche, 48px) : icônes seules + tooltip + raccourci
• Viewport (centre) : 100% focus visuel
• Properties (droite, 280px, collapsible) : contexte sélection
• Pas de hero. Pas de gradient marketing.

Modes outil (toggle exclusif)

Implémenter PAT-136 : skip shortcuts si input/textarea/contenteditable focused.

Tokens outil pro (pas landing)

:root {
  --tool-bg: oklch(0.16 0.01 260);
  --tool-surface: oklch(0.20 0.012 260);
  --tool-border: oklch(0.28 0.01 260);
  --tool-text: oklch(0.92 0.01 260);
  --tool-muted: oklch(0.65 0.02 260);
  --tool-accent: oklch(0.72 0.14 250);
  --tool-radius: 6px;          /* pas 16px marketing */
  --tool-toolbar-w: 48px;
  --tool-panel-w: 280px;
  --tool-font: "Geist", "IBM Plex Sans", system-ui;
}

Micro-interactions obligatoires

• Save indicator : Saving… → Saved → fade (pas spinner permanent)
• Sélection : outline 2px accent + handles 8px (pas shadow-lg card)
• Hover tool : tooltip 150ms delay, raccourci affiché
• Empty viewport : URL input centré minimal (PAT WEB-120)

Exemple incorrect

• Sidebar 240px avec logo énorme + 6 cards settings
• Toolbar en haut avec gradient + 4 CTA colorés
• Inter + purple gradient (ANT-WEB-001/002)

Gate

Avant ship outil : PAT-152 refs + PAT-143 + screenshot comparé à 1 ref Mobbin.

Source

• Excellence design-tool — 2026-06-09

Liens connexes

• [[KNOW-PAT-136-ProjectBeta-editor-ux-patterns|KNOW-PAT-136]]
• [[KNOW-PAT-144|KNOW-PAT-144]]