💻 Développement

wireframe-advisor

Conseille sur la création de wireframes et mockups pour apps et sites.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- wireframe-advisor --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } wireframe-advisor -Launch"

🚀 Déjà installé ?

claude "/wireframe-advisor"

Ou tapez /wireframe-advisor dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

wireframemaquettemockupprototypeFigmaUI layoutcomment structurer ma pagedisposition

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/wireframe-advisor ~/.claude/skills/

Source : dev-skills/wireframe-advisor

📖 Manuel

Wireframe Advisor

Workflow

  1. Comprendre le contexte : identifier le type d'app ou de site (SaaS, e-commerce, landing page, dashboard, app mobile), l'audience cible, la plateforme principale (web desktop, mobile-first, PWA), les contraintes techniques, et les objectifs business prioritaires.
  2. Information Architecture : définir la hiérarchie du contenu (ce qui est primaire, secondaire, tertiaire), structurer la navigation (flat vs. deep), créer un sitemap ou une carte de navigation, et valider la logique avec un card sorting si nécessaire.
  3. Choix du layout pattern : sélectionner le pattern adapté — F-pattern ou Z-pattern pour les pages de contenu, dashboard grid pour les outils analytiques, hero + sections pour les landing pages, catalogue + filtre pour l'e-commerce, sidebar + main pour les SaaS.
  4. Wireframe low-fidelity : esquisser la structure en blocs (no style, no couleur) — définir les zones majeures, la navigation, le contenu principal et les CTAs, pour valider rapidement la logique sans se perdre dans les détails visuels.
  5. Wireframe high-fidelity : affiner avec les composants réels du design system, le spacing précis (grilles 8px), la typographie représentative, les vraies tailles d'images, et le comportement responsive (breakpoints mobile/tablet/desktop).
  6. Patterns UX courants : intégrer et documenter les états essentiels — onboarding (empty state avec CTA), états vides (illustrations + message + action), états d'erreur (messages clairs + récupération), états de chargement (skeleton screens), résultats de recherche (filtres, pagination, sorting).
  7. Prototypage interactif : connecter les frames pour simuler les flows principaux, ajouter les transitions et micro-interactions clés, et préparer un prototype testable pour les sessions de user testing.
  8. Handoff développeur : annoter le wireframe (spacing, comportements, logique conditionnelle), exporter les specs (Figma Dev Mode, Zeplin), préparer les assets, et documenter les règles responsive et les cas limites.

Règles