Compétence Équipe de Conception
Cette compétence fournit des connaissances structurées en conception, organisées par spécialité. Au lieu de conseils de conception génériques, elle charge le bon matériel de référence pour chaque tâche — la portée s'adapte en fonction de ce que vous construisez.
Commandes du Plugin
Cette compétence fait partie du plugin naksha. Pour des workflows ciblés, utilisez ces commandes :
| Commande | Utilisation |
|---|---|
/design <tâche> | Workflow de conception complet avec assemblage d'équipe |
/design-reel <tâche> [--url <page>] | Enregistrer l'équipe de conception en action — transformer une session /design en vidéo partageable (9:16 + 16:9) |
/design-review <fichier ou capture> | Auditer un design existant — accepte les fichiers HTML, URLs Figma, captures d'écran (critique IA visuelle), ou serveurs de prévisualisation |
/design-system | Générer ou extraire des jetons de conception |
/figma <URL> | Convertir un design Figma en code de production |
/figma-create <tâche> | Créer des designs directement dans Figma (pages, composants, styles) |
/ux-audit <brief> | Auditer un fichier Figma par rapport à un brief de conception |
/design-handoff | Générer des documents de passation pour développeurs (jetons, spécifications, API de composants) |
/figma-responsive | Générer des variantes mobile/tablette à partir d'un frame Figma desktop |
/figma-sync | Détecter les écarts entre les designs Figma et l'implémentation du code |
/design-present | Générer une présentation HTML à partir d'écrans Figma |
/brand-kit | Générer un kit de marque complet à partir de couleurs et d'ambiances |
/component-docs | Générer automatiquement la documentation des composants à partir de Figma |
/figma-prototype | Créer des connexions interactives de prototype dans Figma |
/site-to-figma | Capturer un site web en direct et le recréer dans Figma |
/ab-variants | Générer des variantes de design pour tests A/B à partir d'un écran Figma |
/design-sprint | Méthodologie de sprint design guidée en 5 phases |
/social-content <tâche> | Concevoir du contenu visuel pour les médias sociaux (publications, stories, reels, carrousels) |
/social-campaign <brief> | Planifier une campagne sur les médias sociaux avec stratégie, calendrier et légendes |
/social-analytics <type> | Créer des tableaux de bord, rapports ou cadres de tests A/B pour l'analyse des médias sociaux |
/design-framework <fw> [fichier] | Convertir une sortie de design HTML en composants React, Vue, Svelte, Next.js ou Astro |
/email-template <type> pour <marque> | Générer un modèle d'e-mail HTML prêt pour la production (styles en ligne, mise en page tableau, responsive) |
/email-campaign <type> pour <produit> | Planifier et construire une séquence de campagne multi-e-mails complète |
/email-audit <e-mail ou HTML> | Audit complet — problèmes techniques de rendu (Phase 1) et critique de la copie/stratégie (Phase 2) |
/design-template <catégorie> | Modèle web prêt pour la production depuis la galerie : landing-page, dashboard, pricing, auth, blog, ecommerce, portfolio, docs, saas, onboarding |
/chart-design <description> | Concevoir un graphique ou une visualisation de données — sélectionne le type de graphique, applique des palettes de couleurs accessibles, produit du HTML/CSS/JS |
/dashboard-layout <description> | Construire une mise en page de tableau de bord complète — cartes KPI, graphiques, barre de filtres, tableau de données, barre latérale, responsive |
/data-viz-audit <graphique ou description> | Auditer un graphique pour la sélection du type, la palette accessible, les annotations et les anti-patrons. Phase 2 conditionnelle : audit de l'adéquation de la mise en page du tableau de bord |
/design-tutorial [parcours] | Visite guidée interactive — démarrage rapide, ui, figma, social, e-mail, data-viz, ou complet (visite de 30 min) |
/figma-component-library <description> | Générer une bibliothèque de composants Figma complète — atomes, molécules, organismes avec variantes, auto-layout, propriétés de composants |
/pdf-report <sujet> pour <marque> | Générer une mise en page de rapport multi-pages prête pour l'impression avec pages nommées, en-têtes/pieds de page courants, système typographique et sortie CSS @page |
/print-layout <artefact> pour <marque> | Concevoir un artefact d'impression unique (carte de visite, certificat, brochure, facture) avec fond perdu, zone de sécurité, documentation des couleurs CMJN et HTML/CSS prêt pour l'impression |
/print-audit <mise en page ou description> | Auditer une mise en page imprimée pour le fond perdu, la zone de sécurité, le mode couleur CMJN, l'incorporation de polices et les règles de saut de page. Phase 2 conditionnelle : vérifie la cohérence de la marque |
/lint-design [nodeId] | Scanner un fichier Figma pour des problèmes de qualité de conception — couleurs orphelines, violations d'espacement, tailles de police non standard, auto-layout manquant, styles détachés |
/design-critique [nodeId] | Examen heuristique UX des écrans Figma selon les 10 heuristiques de Nielsen + audit de conception visuelle |
/design-score | Score de qualité de conception quantitatif de 0 à 100 couvrant l'accessibilité, la utilisabilité, la qualité visuelle et la conformité des jetons |
/design-qa <fichier> | Assurance qualité visuelle sur une implémentation HTML/CSS — points de rupture responsives, conformité des jetons, états interactifs, qualité des animations |
/accessibility-audit <fichier> | Audit complet WCAG AA — rapports de contraste, navigation au clavier, HTML sémantique, ARIA, cibles tactiles |
| Mémoire & Pipelines | |
/naksha-init | Configurer la mémoire du projet — stocke les couleurs de la marque, la police, le framework, le format de jeton dans .naksha/project.json |
/naksha-status | Afficher le contexte actuel du projet et les 10 dernières décisions de conception depuis .naksha/memory.md |
/naksha-doctor | Exécuter toutes les vérifications de qualité naksha et rapporter l'état de santé du plugin — validation structurelle, cohérence des métadonnées, test de bon fonctionnement comportemental, garde de l'héritage de la marque |
/naksha-help | Référence rapide pour toutes les commandes — parcourir par catégorie ou rechercher une commande spécifique |
/pipeline <action> | Exécuter un pipeline de conception en plusieurs étapes : run <nom>, list les pipelines disponibles, show <nom> pour prévisualiser les étapes |
| Vision & Intelligence | |
/design-compare <url1> <url2> | Capturer deux sites en direct via Playwright, analyse de conception côte à côte : mise en page, typographie, couleur, modèles UX |
/competitive-audit <url> | Capturer un site concurrent, extraire les modèles de design system, produire des recommandations notées "À Voler" |
| Volet UI Conversationnelle | |
/design-chatbot [type] [plateforme] [brief] | Concevoir l'interface utilisateur d'un chatbot/assistant : flux de dialogue, spécification des bulles, réponses rapides, états d'erreur, accessibilité |
/design-voice-ui [type] [plateforme] [écran] | Concevoir une interface vocale : flux de mot de réveil, motifs de confirmation, spécification des earcons, mise en page d'écran hybride |
| Volet Spatial & AR | |
/design-spatial [type-app] [plateforme] [brief] | Concevoir une interface utilisateur d'informatique spatiale pour visionOS/WebXR : sélection de fenêtre, hiérarchie de profondeur, ornements, typographie |
/design-ar-overlay [cas-d'usage] [plateforme] | Concevoir une superposition AR : stratégie d'ancrage, états de suivi mondial, cartes d'instructions, superpositions de confirmation |
| Volet Conformité | |
/design-gdpr [produit] [juridiction] [catégories] | Concevoir des flux de consentement RGPD/CCPA : bannières de cookies, centre de contrôle de la vie privée, interface utilisateur de demande de suppression de données |
| `/design-compliance --regulation <hipaa | pci |
L'Équipe
Direction
| Rôle | Responsabilité | Référence |
|---|---|---|
| Design Manager | Analyse la tâche, assemble l'équipe, orchestre le flux de travail, assure la livraison | Ce fichier (SKILL.md) |
| Directeur de Création | Définit la vision visuelle et conceptuelle, l'ambiance, le ton et la direction créative | Ce fichier (ci-dessous) |
Créateurs Principaux
| Rôle | Expertise | Quand activer | Référence |
|---|---|---|---|
| Designer Produit | UX de bout en bout, impact métier, cadrage des fonctionnalités, résultats utilisateur | Fonctionnalités produit complètes, conception orientée métier, flux de bout en bout | references/product-designer.md |
| Designer UX | Parcours utilisateur, wireframes, architecture de l'information, prototypes | Flux complexes, processus en plusieurs étapes, navigation, analyse des tâches utilisateur | references/ux-designer.md |
| Designer UI | Esthétique visuelle, typographie, couleur, mise en page, éléments interactifs | Toute tâche nécessitant un aspect soigné — presque toutes les tâches visuelles | references/ui-designer.md |
| Chercheur UX | Informations sur le comportement des utilisateurs, heuristiques d'utilisabilité, audit d'accessibilité | Lorsque les hypothèses sur les utilisateurs nécessitent une validation, ou que l'accessibilité est importante | references/ux-researcher.md |
| Concepteur de Contenu | Texte d'interface, microcopie, rédaction UX, ton de voix, hiérarchie du contenu | Toute interface utilisateur avec du texte — étiquettes, messages d'erreur, états vides, CTA, intégration | references/content-designer.md |
| Responsable du Design System | Jetons, composants, thèmes, mode sombre, cohérence entre les sorties | Travail multi-composants, cohérence de marque, thèmes, modèles réutilisables | references/design-system-lead.md |
| Motion Designer | Animations, transitions, micro-interactions, narration visuelle | Interfaces utilisateur interactives, présentations, intégration, changements d'état, moments de plaisir | references/motion-designer.md |
| Spécialiste Framework | React/Tailwind, Vue/UnoCSS, Svelte 5, Next.js App Router, modèles Astro | Lorsque l'utilisateur spécifie --framework, une sortie de framework est demandée, ou conversion de HTML en composants | references/framework-specialist.md |
Spécialistes Médias Sociaux
| Rôle | Expertise | Quand activer | Référence |
|---|---|---|---|
| Designer Médias Sociaux | Visuels de plateforme, Stories/Reels/Publications, carrousels, créations publicitaires, zones de sécurité | Contenu visuel pour plateformes sociales, conception de créations publicitaires | references/social-media-designer.md |
| Stratège Médias Sociaux | Campagnes, calendriers de contenu, ciblage d'audience, stratégie de plateforme | Planification de campagne, stratégie de contenu, cadence de publication | references/social-media-strategist.md |
| Rédacteur Médias Sociaux | Légendes, accroches, CTA, hashtags, optimisation de la bio, voix de plateforme | Copie sociale, rédaction de légendes, création de fils de discussion | references/social-media-copywriter.md |
| Spécialiste Croissance/Analytique | KPI, tableaux de bord, tests A/B, entonnoirs, suivi des conversions | Analyses sociales, suivi des performances, conception d'expériences | references/growth-analytics-specialist.md |
Spécialistes Email
| Rôle | Expertise | Quand activer | Référence |
|---|---|---|---|
| Designer Email | Email HTML (styles en ligne, mise en page tableau, boutons VML), responsive, mode sombre, rendu multi-client | Tout modèle d'email HTML, conception visuelle d'email, délivrabilité | references/email-designer.md |
| Rédacteur Email | Lignes d'objet, texte de prévisualisation, copie du corps, CTA, séquences, stratégie de tests A/B, conformité CAN-SPAM | Copie d'email, lignes d'objet, séquences de campagne, flux de bienvenue | references/email-copywriter.md |
Spécialistes Visualisation de Données
| Rôle | Expertise | Quand activer | Référence |
|---|---|---|---|
| Designer DataViz | Sélection de type de graphique, palettes de couleurs accessibles, annotations, Chart.js/D3/Recharts, ARIA pour graphiques | Toute tâche de graphique, diagramme ou visualisation de données | references/data-viz-designer.md |
| Architecte de Tableaux de Bord | Modèles de mise en page de tableau de bord, conception de cartes KPI, hiérarchie de l'information, barres de filtres, tableaux de données, responsive | Mise en page de tableau de bord, pages de mesures, panneaux d'administration, vues de rapports | references/dashboard-architect.md |
Outils Transversaux
| Ressource | Objectif | Référence |
|---|---|---|
| Workflow Figma | Design vers code, outils Figma MCP, Code Connect | references/figma-workflow.md |
| Créateur Figma | Créer des designs dans Figma — pages, composants, styles, wireframes | references/figma-creation.md |
| Déploiement | Serveur de prévisualisation, Firebase Hosting, optimisation | references/deployment.md |
Agents Spécialistes
| Agent | Objectif | Quand déléguer | Référence |
|---|---|---|---|
| Auditeur d'Accessibilité | Audit de conformité WCAG AA avec corrections de code spécifiques | Après avoir construit toute interface utilisateur destinée aux utilisateurs, ou lorsque l'utilisateur pose une question sur l'accessibilité | agents/accessibility-auditor.md |
| QA Design | Assurance qualité visuelle à 3 points de rupture, conformité des jetons, états d'interaction | Après avoir construit des pages/composants, pour vérifier la qualité de production | agents/design-qa.md |
| Créateur Figma | Construire des pages, frames, composants, styles dans Figma via Desktop Bridge | Lorsque la tâche nécessite la création de designs dans Figma | agents/figma-creator.md |
| Critique Design | Examen heuristique UX — les 10 de Nielsen, audit visuel, états d'interaction | Lorsque l'utilisateur souhaite un retour sur le design, ou avant de présenter les designs | agents/design-critique.md |
| Lint Design | Scanner les fichiers Figma pour les couleurs orphelines, les espacements non standard, le faible contraste | Lors de l'audit de la qualité des fichiers Figma, ou avant la passation | agents/design-lint.md |
| extracteur-de-jetons-de-conception | Lit les configurations CSS/SCSS/Tailwind, extrait et catégorise les jetons, produit dans les formats CSS vars/Tailwind/Style Dictionary | ||
| critique-de-conception | Critique UX en 3 passes : heuristiques Nielsen (notées par sévérité) + vérification ponctuelle d'accessibilité + audit de qualité du contenu |
Spécialistes du Volet Frontière
| Rôle | Expertise | Quand activer | Référence |
|---|---|---|---|
| Designer Conversationnel | UI de chatbot, conception de flux de dialogue, principes VUI, systèmes de personnalité, conception multimodale | UI de chatbot/assistant, interfaces vocales, flux de dialogue, widgets de chat, assistants virtuels | references/conversational-designer.md |
| Designer Spatial | HIG de visionOS/Vision Pro, WebXR, couches de profondeur, entrée par regard/geste, typographie spatiale, ancrage AR | Applications Vision Pro, UI visionOS, expériences WebXR, superpositions AR, informatique spatiale, UI immersive | references/spatial-designer.md |
| Designer Conformité | UX de consentement RGPD/CCPA, UI de soins de santé HIPAA, formulaires de paiement PCI, conformité d'accessibilité ADA/Section 508 | Flux de consentement, bannières de cookies, champs PHI, conformité des formulaires de paiement, audits d'accessibilité, industries réglementées | references/compliance-designer.md |
Design Manager : Orchestration des Tâches
Vous êtes le Design Manager. Pour chaque tâche de conception, suivez ce processus :
Étape 0 — Charger les Paramètres Utilisateur
Lisez ${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md s'il existe. Extrayez toutes les préférences configurées :
- Valeurs par défaut de la marque :
brand_color,accent_colo...