Série : Automatiser Power BI avec Claude AI — Épisode 3/12 Temps de lecture : 11 min Public cible : BI Engineers, Product Managers Data, UX Designers, Responsables Data
TL;DR : Concevoir directement dans Figma ou dans Power BI coûte cher en itérations : 34 feedbacks utilisateur × 30 min de correction = 17 heures de travail mécanique. En générant d’abord une maquette React interactive avec Claude (3 heures au lieu de 2 jours), on valide le design avant de construire. Gain net mesuré sur le projet client : 15 heures de développement évitées, soit -70 % sur la phase de conception.
Pourquoi ne pas concevoir directement dans Power BI ?
Concevoir directement dans Power BI Desktop revient à confondre deux activités distinctes : la conception et la réalisation. Chaque itération de design coûte alors du temps de développement. Un feedback utilisateur — “je voudrais voir ce KPI en haut plutôt qu’en bas” — se traduit par 20 minutes de manipulations dans Power BI Desktop, un rechargement, une vérification.
Quand on démarre un projet Power BI, le réflexe naturel est d’ouvrir Power BI Desktop, de connecter les données, et de commencer à poser des visuels sur une page vierge. C’est une erreur.
Multipliez par 34 annotations de feedback (c’est le nombre qu’on a reçu sur ce projet), et c’est une semaine de travail.
Notre approche : concevoir d’abord dans React, construire ensuite dans Power BI.
Pourquoi React plutôt que Figma pour maquetter un dashboard ?
La question mérite d’être posée. Pourquoi pas Figma ? Pourquoi pas PowerPoint ? Pourquoi pas un outil de wireframing classique comme Balsamiq ?
Trois raisons :
1. Claude est meilleur en code qu’en design graphique.
Claude produit du code React propre, structuré, fonctionnel. Il ne “dessine” pas — il programme. Une maquette React est donc dans son registre naturel.
2. Une maquette React est interactive.
Contrairement à Figma ou PowerPoint, une maquette React peut être cliquable, filtrable, animée. On peut simuler la navigation entre pages, l’état actif des boutons, les transitions. L’utilisateur qui teste la maquette a une expérience proche du produit final.
3. Une maquette React est partageable sans installation.
Via Claude Artifacts (claude.ai), la maquette tourne dans le navigateur. Pas de licence Figma, pas de plugin Power BI, pas d’accès aux données. N’importe qui peut l’ouvrir depuis un lien.
4. Il n’existe pas de MCP connu pour de l’écriture sur Figma
Voilà c’est dit
Quels inputs fournir à Claude pour générer une maquette de qualité ?
Pour générer une maquette de qualité, Claude a besoin de matière structurée. Voici les 4 types d’inputs que nous avons fournis sur le projet client.
Les User Stories
plain textUS-001 : En tant que Direction Infra, je veux voir les KPIs consolidés de tous les projets afin d'avoir une vision globale en temps réel. US-002 : En tant que Responsable Infra Local, je veux filtrer les projets par pays et par statut afin de suivre mon périmètre géographique. [...]
La charte graphique le client
Couleurs principales, typographie, logos.
Les KPIs et segments
Le document de cadrage automatisé avec Claude est également essentiel pour que Claude Desktop sache comment calculer les KPis métiers, et leur contexte, leur valeur dans le storytelling, leur importance,…
Comment itérer efficacement avec Claude sur une maquette ?
On n’a pas obtenu la maquette finale en un seul prompt. On a itéré en 3 versions principales.
Version 1 : structure de base
Prompt initial :
> “Génère une maquette React d’un dashboard Power BI pour un suivi de projets d’infrastructure. Voici les User Stories […] et les KPIs […]. La charte graphique est […].”
Résultat : Une page Vue d’ensemble avec les KPIs principaux, un tableau de projets, une sidebar de navigation. Fonctionnel, mais générique. Le design ressemble à n’importe quel dashboard.
Version 2 : intégration des feedbacks
Prompt :
> “Voici 34 annotations de l’utilisateur sur la version 1 [liste]. Intègre-les. En particulier : [3 priorités clés].”
Résultat : Le design se personnalise. Les couleurs du client apparaissent. Les boutons d’alerte sont positionnés correctement. La hiérarchie visuelle s’améliore. Mais la page Achats manque encore de cohérence avec la maquette PDF du client.
Version 3 : pages secondaires et cohérence
Prompt :
> “Ajoute les pages Achats, Conformité et Projets. Assure la cohérence du design avec la version 2. Pour la page Achats, voici la maquette de référence [PDF joint].”
Résultat : La maquette complète. 7 pages, navigation fonctionnelle, états actifs des boutons, responsive mobile.
Que contient la maquette React finale ?
La maquette finale livrée au client comprend 7 pages interactives avec navigation complète.
Page Vue d’ensemble
- 4 KPI scorecard (Projets actifs, Montant AO total, Contractualisé, Économies %)
- Carte géographique des projets par pays
- Tableau top 5 projets avec indicateurs d’avancement
- Alertes dépassement budget (rouge si > 110 %)
- Filtres : Pays, Statut, Période
Page Projets
- Liste complète avec filtres avancés
- Vue détail au clic : fiche projet complète
- Timeline d’avancement
- Indicateurs : RAG (Rouge/Ambre/Vert)
Page Achats
- Scorecard : AO lancés, Contractualisés, Économies
- Donut chart : répartition par fournisseur
- Histogramme : historique 5 ans
- Table détaillée : tous les contrats avec statuts
Page Conformité
- 3 catégories : Assurances, Juridique, Autorisations
- Indicateurs de complétion par projet
- Alertes documents manquants ou expirés
Navigation
- Sidebar fixe avec icônes + labels
- Bouton actif mis en évidence (couleur du client)
- Breadcrumb sur chaque page
- Bouton retour toujours visible
Comment la maquette alimente-t-elle la spec technique ?
En parallèle de la maquette visuelle, Claude a généré un document de spécification technique de environ 500 lignes suivant la structure Plan / Ship / Analyze :
PLAN — Le “quoi” et le “pour qui”
- 6 User Stories avec critères d’acceptation
- 27 Acceptance Criteria en format Gherkin
- Matrice des rôles et permissions
- Dictionnaire des KPIs (définition, formule, source)
Exemple d’Acceptance Criterion Gherkin :
gherkinScenario: Affichage des KPIs Vue d'ensemble Given l'utilisateur est connecté avec le rôle "Direction Infra" And les données sont chargées pour Mars 2025 When il accède à la page Vue d'ensemble Then il voit "34 projets actifs" And il voit "64 022 kEUR" pour le montant AO total And il voit "26,84 %" pour les économies générées
SHIP — Le “comment” et le “combien”
- 16 Scope Items MVP estimés à 5 jours
- 3 Scope Items Post-MVP estimés à 3 jours
- 13 tables de données sources
- 27 mesures DAX identifiées avec leur formule cible
- 7 pages avec description des visuels
- 2 systèmes de bookmarks
ANALYZE — Le “est-ce que c’est bon ?”
- 12 critères de conformité pondérés
- Scoring : MVP >= 75 % / Production >= 90 %
- Méthode de scoring automatisable
Combien d’heures la maquette fait-elle économiser ?
Concrètement, 3 heures de travail sur la maquette React ont évité 15 heures de corrections dans Power BI.
Scénario sans maquette :
1. On commence à construire Power BI
2. Le client voit le premier rendu après 2 jours de développement
3. Il donne 34 feedbacks
4. On modifie — chaque feedback = 20 à 45 minutes de manipulation
5. Total corrections : 34 × 30 min = 17 heures supplémentaires
Scénario avec maquette React :
1. On construit la maquette en 3 heures
2. Le client la teste le lendemain sur un lien partagé
3. Il donne 34 feedbacks
4. On itère sur la maquette React — chaque feedback = 2 à 5 minutes de modification Claude
5. Total corrections maquette : 34 × 3 min = 1h42
6. On commence Power BI avec un design validé, sans surprise
Gain net : ~15 heures de développement évitées. Sur un MVP estimé à 5 jours, c’est 37,5 % du temps de build.
Quelles sont les limites de cette approche ?
La maquette React n’est pas une démonstration parfaite. Quatre limitations importantes :
Les données réelles. La maquette utilise des données hardcodées. Les vrais volumes, les vraies distributions de données — c’est Power BI qui les gère.
Le comportement des filtres cross-page. Le cross-filtering entre pages (cliquer sur un pays en page Vue d’ensemble pour filtrer tous les autres rapports) ne fonctionne pas dans React de la même façon que dans Power BI.
La performance avec gros volumes. Power BI gère des millions de lignes avec le moteur VertiPaq. React avec des données hardcodées ne teste pas cette dimension.
Les limites RLS (Row Level Security). La maquette montre le design pour tous les rôles. La vraie implémentation RLS — avec des lignes masquées selon le rôle — est invisible dans la maquette.
Ces limites sont connues et acceptées. La maquette valide le design et l’UX. Elle ne valide pas la performance ni la sécurité.
Quel est le ROI d’une maquette genAI avant Power BI ?
La maquette genAI n’est pas un gadget. C’est un investissement mesurable :
1 heure de maquette = 3 à 5 heures de développement économisées.
Cette règle tient pour n’importe quel projet BI — pas seulement Power BI. Le principe vaut pour Tableau, Qlik, Looker, Metabase.
La nouveauté avec Claude : le coût de production d’une maquette interactive est passé de 2 jours (Figma + développeur front) à 3 heures (BI Engineer + Claude). Le ROI est évident.
Outils utilisés :
- Claude Sonnet (claude.ai) — génération et itération de la maquette
- Claude Artifacts — rendu en temps réel dans le navigateur
- Lien public Claude — partage avec le client sans installation
Coût estimé : 3 heures de travail humain + quelques dizaines de milliers de tokens Claude.
FAQ — Maquette Power BI avec l’IA
Faut-il savoir coder en React pour utiliser cette approche ?
Non. Claude génère le code React complet. Le BI Engineer fournit les User Stories, les KPIs et la charte graphique. Aucune compétence front-end n’est requise.
Combien de temps prend la génération d’une maquette avec Claude ?
3 heures en moyenne pour un dashboard de 7 pages, incluant 3 itérations de feedback. C’est 70 % plus rapide qu’une maquette Figma classique.
La maquette React est-elle réutilisable pour d’autres projets ?
Oui. La structure (header, sidebar, navigation, scorecards) est un template adaptable. Seuls les KPIs, la charte graphique et les données changent d’un projet à l’autre.
Peut-on utiliser Figma au lieu de React ?
Oui, mais avec un ROI inférieur. Figma nécessite une licence, n’est pas interactif (les filtres ne fonctionnent pas), et n’est pas partageable via un simple lien sans compte. Claude est plus efficace en code qu’en design statique.