Créer des Règles de Système de Design

Vue d'ensemble

Cette compétence vous aide à générer des règles de système de design personnalisées adaptées aux besoins spécifiques de votre projet. Ces règles guident les agents de codage IA pour produire du code cohérent et de haute qualité lors de l'implémentation de designs Figma, en veillant à ce que les conventions de votre équipe, les modèles de composants et les décisions architecturales soient automatiquement respectés.

Fichiers de Règles Supportés

Qu'est-ce que les Règles de Système de Design ?

Les règles de système de design sont des instructions au niveau du projet qui codifient les « connaissances non écrites » de votre codebase - le type d'expertise que les développeurs expérimentés connaissent et transmettraient aux nouveaux membres de l'équipe :

• Quelles primitives de mise en page et quels composants utiliser
• Où les fichiers de composants doivent être situés
• Comment les composants doivent être nommés et structurés
• Ce qui ne doit jamais être en dur
• Comment gérer les jetons de design et le style
• Modèles architecturaux spécifiques au projet

Une fois définies, ces règles réduisent considérablement les invites répétitives et garantissent une sortie cohérente sur toutes les tâches d'implémentation Figma.

Conditions Préalables

• Le serveur Figma MCP doit être connecté et accessible
• Accès au codebase du projet pour analyse
• Compréhension des conventions de composants de votre équipe (ou volonté de les établir)

Quand Utiliser Cette Compétence

Utilisez cette compétence quand :

• Vous commencez un nouveau projet qui utilisera des designs Figma
• Vous intégrez un agent de codage IA à un projet existant avec des modèles établis
• Vous standardisez les workflows Figma-vers-code dans votre équipe
• Vous mettez à jour ou affinez les conventions existantes du système de design
• Les utilisateurs demandent explicitement : « créer des règles de système de design », « configurer les directives Figma », « personnaliser les règles pour mon projet »

Flux de Travail Requis

Suivez ces étapes dans l'ordre. Ne sautez pas d'étapes.

Étape 1 : Exécuter l'Outil de Création des Règles de Système de Design

Appelez l'outil create_design_system_rules du serveur Figma MCP pour obtenir l'invite fondatrice et le modèle.

Paramètres :

• clientLanguages : Liste séparée par des virgules des langages utilisés dans le projet (ex. « typescript,javascript », « python », « javascript »)
• clientFrameworks : Framework utilisé (ex. « react », « vue », « svelte », « angular », « unknown »)

Cet outil retourne les conseils et un modèle pour créer des règles de système de design.

Structurez vos règles de système de design en suivant le format de modèle fourni dans la réponse de l'outil.

Étape 2 : Analyser le Codebase

Avant de finaliser les règles, analysez le projet pour comprendre les modèles existants :

Organisation des Composants :

• Où sont situés les composants d'interface utilisateur ? (ex. src/components/, app/ui/, lib/components/)
• Y a-t-il un répertoire dédié au système de design ?
• Comment les composants sont-ils organisés ? (par fonctionnalité, par type, structure plate)

Approche du Style :

• Quel framework ou approche CSS est utilisé ? (Tailwind, CSS Modules, styled-components, etc.)
• Où les jetons de design sont-ils définis ? (variables CSS, fichiers de thème, fichiers de configuration)
• Y a-t-il des jetons de couleur, typographie ou espacement existants ?

Modèles de Composants :

• Quelles conventions de nommage sont utilisées ? (PascalCase, kebab-case, préfixes)
• Comment les propriétés des composants sont-elles généralement structurées ?
• Y a-t-il des modèles de composition courants ?

Décisions Architecturales :

• Comment la gestion d'état est-elle traitée ?
• Quel système de routage est utilisé ?
• Y a-t-il des modèles d'importation spécifiques ou des alias de chemins ?

Étape 3 : Générer des Règles Spécifiques au Projet

En fonction de votre analyse du codebase, créez un ensemble complet de règles. Incluez :

Règles Générales des Composants

- IMPORTANT : Utilisez toujours les composants de `[VOTRE_CHEMIN]` quand possible
- Placez les nouveaux composants d'interface utilisateur dans `[RÉPERTOIRE_COMPOSANTS]`
- Suivez `[CONVENTION_NOMMAGE]` pour les noms de composants
- Les composants doivent exporter comme `[MODÈLE_EXPORT]`

Règles de Style

- Utilisez `[FRAMEWORK_CSS/APPROCHE]` pour le style
- Les jetons de design sont définis dans `[EMPLACEMENT_JETONS]`
- IMPORTANT : Ne codez jamais en dur les couleurs - utilisez toujours les jetons de `[FICHIER_JETONS]`
- Les valeurs d'espacement doivent utiliser l'échelle `[SYSTÈME_ESPACEMENT]`
- La typographie suit l'échelle définie dans `[EMPLACEMENT_TYPOGRAPHIE]`

Règles d'Intégration Figma MCP

## Règles d'Intégration Figma MCP

Ces règles définissent comment traduire les entrées Figma en code pour ce projet et doivent être suivies pour chaque modification pilotée par Figma.

### Flux Requis (ne sautez pas)

1. Exécutez d'abord get_design_context pour récupérer la représentation structurée du/des nœud(s) exact(s)
2. Si la réponse est trop volumineuse ou tronquée, exécutez get_metadata pour obtenir la carte de nœuds de haut niveau, puis ré-récupérez uniquement le/les nœud(s) requis avec get_design_context
3. Exécutez get_screenshot pour une référence visuelle de la variante de nœud en cours d'implémentation
4. Ce n'est qu'après avoir à la fois get_design_context et get_screenshot que vous téléchargez les ressources nécessaires et commencez l'implémentation
5. Traduisez la sortie (généralement React + Tailwind) dans les conventions, styles et framework de ce projet
6. Validez par rapport à Figma pour une parité 1:1 en apparence et comportement avant de marquer comme terminé

### Règles d'Implémentation

- Traitez la sortie Figma MCP (React + Tailwind) comme une représentation du design et du comportement, non pas comme un style de code final
- Remplacez les classes utilitaires Tailwind par `[VOTRE_APPROCHE_STYLE]` le cas échéant
- Réutilisez les composants existants de `[CHEMIN_COMPOSANTS]` au lieu de dupliquer la fonctionnalité
- Utilisez le système de couleurs du projet, l'échelle de typographie et les jetons d'espacement de manière cohérente
- Respectez les modèles de routage, gestion d'état et de récupération de données existants
- Recherchez la parité visuelle 1:1 avec le design Figma
- Validez l'interface utilisateur finale par rapport à la capture d'écran Figma pour l'apparence et le comportement

Règles de Gestion des Ressources

## Gestion des Ressources

- Le serveur Figma MCP fournit un point de terminaison de ressources qui peut servir des ressources image et SVG
- IMPORTANT : Si le serveur Figma MCP retourne une source localhost pour une image ou un SVG, utilisez cette source directement
- IMPORTANT : NE PAS importer/ajouter de nouveaux packages d'icônes - toutes les ressources doivent être dans la charge utile Figma
- IMPORTANT : NE PAS utiliser ou créer de placeholders si une source localhost est fournie
- Stockez les ressources téléchargées dans `[RÉPERTOIRE_RESSOURCES]`

Conventions Spécifiques au Projet

## Conventions Spécifiques au Projet

- [Ajouter tout modèle architectural unique]
- [Ajouter tout besoin d'importation spécial]
- [Ajouter tout besoin de test]
- [Ajouter toute norme d'accessibilité]
- [Ajouter toute considération de performance]

Étape 4 : Enregistrer les Règles dans le Fichier de Règles Approprié

Détectez quel agent de codage IA l'utilisateur utilise et enregistrez les règles générées dans le fichier correspondant :

Si vous ne savez pas quel agent l'utilisateur utilise, vérifiez les fichiers de règles existants dans le projet ou demandez à l'utilisateur.

Pour Cursor, enveloppez les règles avec un frontmatter YAML :

---
description: Règles pour implémenter les designs Figma à l'aide du serveur Figma MCP. Couvre l'organisation des composants, les conventions de style, les jetons de design, la gestion des ressources et le workflow Figma-vers-code requis.
globs: "src/components/**"
alwaysApply: false
---

[Règles générées ici]

Personnalisez le modèle globs pour correspondre aux répertoires où le code dérivé de Figma vivra dans le projet (ex. "src/**/*.tsx" ou ["src/components/**", "src/pages/**"]).

Après l'enregistrement, les règles seront automatiquement chargées par l'agent et appliquées à toutes les tâches d'implémentation Figma.

Étape 5 : Valider et Itérer

Après avoir créé les règles :

1. Testez avec une implémentation simple de composant Figma
2. Vérifiez que l'agent suit correctement les règles
3. Affinez toute règle qui ne fonctionne pas comme prévu
4. Partagez avec les membres de l'équipe pour retour
5. Mettez à jour les règles au fur et à mesure que le projet évolue

Catégories de Règles et Exemples

Règles Essentielles (Toujours Inclure)

Découverte de Composants :

- Les composants d'interface utilisateur sont situés dans `src/components/ui/`
- Les composants de fonctionnalité sont dans `src/components/features/`
- Les primitives de mise en page sont dans `src/components/layout/`

Utilisation des Jetons de Design :

- Les couleurs sont définies comme variables CSS dans `src/styles/tokens.css`
- Ne codez jamais en dur les couleurs hexadécimales - utilisez les jetons `var(--color-*)`
- L'espacement utilise l'échelle de base 4px : `--space-1` (4px), `--space-2` (8px), etc.

Approche du Style :

- Utilisez les classes utilitaires Tailwind pour le style
- Les styles personnalisés vont dans les modules CSS au niveau des composants
- La personnalisation de thème est dans `tailwind.config.js`

Règles Recommandées (Très Utiles)

Modèles de Composants :

- Tous les composants doivent accepter une prop `className` pour la composition
- Les props de variante doivent utiliser les types union : `variant: 'primary' | 'secondary'`
- Les composants d'icône doivent accepter les props `size` et `color`

Conventions d'Importation :

- Utilisez les alias de chemin : `@/components`, `@/styles`, `@/utils`
- Groupez les importations : React, tiers, interne, types
- Pas d'importations relatives au-delà du répertoire parent

Qualité du Code :

- Ajouter des commentaires JSDoc pour les composants exportés
- Inclure PropTypes ou types TypeScript pour toutes les props
- Extraire les nombres magiques vers des constantes nommées

Règles Optionnelles (Spécifiques au Projet)

Accessibilité :

- Tous les éléments interactifs doivent avoir des aria-labels
- Le contraste des couleurs doit respecter les normes WCAG AA
- La navigation au clavier requise pour toutes les interactions

Performance :

- Charger les images avec délai en utilisant le composant `Image` de `@/components/Image`
- Utiliser React.memo pour les composants qui reçoivent des props complexes
- Les icônes doivent être des composants SVG, pas des polices d'icônes

Test :

- Inclure des tests unitaires pour les nouveaux composants dans le répertoire `__tests__/`
- Utiliser les requêtes Testing Library (getByRole, getByLabelText)
- Tester tous les états interactifs et variantes

Exemples

Exemple 1 : Projet React + Tailwind

L'utilisateur dit : « Créer des règles de système de design pour mon projet React »

Actions :

1. Exécutez create_design_system_rules(clientLanguages="typescript,javascript", clientFrameworks="react")
2. Analysez la structure du codebase
3. Générez les règles :

# Règles d'Intégration Figma MCP

## Organisation des Composants

- Les composants d'interface utilisateur sont dans `src/components/ui/`
- Les composants de page sont dans `src/app/`
- Utilisez Tailwind pour le style

## Flux d'Implémentation Figma

1. Exécutez get_design_context pour le nœud
2. Exécutez get_screenshot pour une référence visuelle
3. Mappez les couleurs Figma aux couleurs Tailwind définies dans `tailwind.config.js`
4. Réutilisez les composants de `src/components/ui/` quand possible
5. Validez par rapport à la capture d'écran avant de terminer

## Règles de Style

- IMPORTANT : Utilisez les classes utilitaires Tailwind, pas les styles en ligne
- Les couleurs sont définies dans `tailwind.config.js` theme.colors
- L'espacement utilise l'échelle par défaut de Tailwind
- Les composants personnalisés vont dans `src/components/ui/`

## Règles de Ressources

- IMPORTANT : Utilisez directement les sources localhost du serveur Figma MCP
- Stockez les ressources statiques dans `public/assets/`
- NE PAS installer de nouvelles bibliothèques d'icônes

4. Enregistrez dans le fichier de règles approprié pour l'agent de l'utilisateur
5. Testez avec une implémentation simple de bouton

Résultat : L'agent suit maintenant systématiquement les conventions du projet lors de l'implémentation des designs Figma.

Exemple 2 : Projet Vue + CSS Personnalisé

L'utilisateur dit : « Configurer les règles Figma pour mon application Vue »

Actions :

1. Exécutez create_design_system_rules(clientLanguages="typescript,javascript", clientFrameworks="vue")
2. Découvrez que le projet utilise CSS modules et un système personnalisé de jetons de design
3. Générez les règles :

# Règles d'Intégration Figma MCP

## Organisation des Composants

- Les composants sont dans `src/components/`
- Les composables sont dans `src/composables/`
- Structure Vue SFC : <script setup>, <template>, <style scoped>

## Jetons de Design

- IMPORTANT : Toutes les couleurs définies dans `src/styles/tokens.css` comme variables CSS
- Utilisez `var(--color-primary)`, `var(--color-secondary)`, etc.
- Espacement : `var(--space-xs)` jusqu'à `var(--space-xl)`
- Typographie : `var(--text-sm)` jusqu'à `var(--text-2xl)`

## Flux d'Implémentation Figma

1. Exécutez get_design_context et get_screenshot
2. Traduisez la sortie React en Vue 3 Composition API
3. Mappez les couleurs Figma aux variables CSS dans `src/styles/tokens.css`
4. Utilisez CSS Modules pour les styles de composants
5. Vérifiez les composants existants dans `src/components/` avant d'en créer de nouveaux

## Règles de Style

- Utilisez CSS Modules (fichiers `.module.css`)
- IMPORTANT : Référencez les jetons de design, ne codez jamais en dur les valeurs
- Styles délimités avec CSS modules

4. Enregistrez dans le fichier de règles approprié pour l'agent de l'utilisateur
5. Validez avec un composant de carte

Résultat : L'agent traduit maintenant correctement les designs Figma en composants Vue en utilisant le système de jetons de design du projet.

Exemple 3 : Équipe de Système de Design

L'utilisateur dit : « Générer les règles pour notre bibliothèque de système de design »

Actions :

1. Exécutez create_design_system_rules(clientLanguages="typescript", clientFrameworks="react")
2. Analysez la structure du monorepo avec le package du système de design
3. Générez des règles complètes :

# Règles de Système de Design

## Structure du Dépôt

- Composants du système de design : `packages/design-system/src/components/`
- Documentation : `packages/docs/`
- Jetons de design : `packages/tokens/src/`

## Développement de Composants

- IMPORTANT : Tous les composants doivent être dans `packages/design-system/src/components/`
- Structure de fichier de composant : `ComponentName/index.tsx`, `ComponentName.stories.tsx`, `ComponentName.test.tsx`
- Exportez tous les composants de `packages/design-system/src/index.ts`

## Jetons de Design

- Couleurs : `packages/tokens/src/colors.ts`
- Typographie : `packages/tokens/src/typography.ts`
- Espacement : `packages/tokens/src/spacing.ts`
- IMPORTANT : Ne codez jamais en dur les valeurs - importez du package de jetons

## Exigences de Documentation

- Ajouter une histoire Storybook pour chaque composant
- Inclure JSDoc avec @example
- Documenter toutes les props avec des descriptions
- Ajouter des notes d'accessibilité

## Intégration Figma

1. Obtenez le contexte de design et la capture d'écran de Figma
2. Mappez les jetons Figma aux jetons du système de design
3. Créez ou étendez le composant dans le package du système de design
4. Ajoutez des histoires Storybook montrant toutes les variantes
5. Validez par rapport à la capture d'écran Figma
6. Mettez à jour la documentation

4. Enregistrez dans le fichier de règles approprié et partagez avec l'équipe
5. Ajoutez à la documentation de l'équipe

Résultat : Toute l'équipe suit les modèles cohérents lors de l'ajout de composants de Figma au système de design.

Bonnes Pratiques

Commencer Simple, Itérer

N'essayez pas de capturer chaque règle dès le départ. Commencez par les conventions les plus importantes et ajoutez des règles au fur et à mesure que vous rencontrez des incohérences.

Être Spécifique

Au lieu de : « Utiliser le système de design » Écrivez : « Utilisez toujours les composants Button de src/components/ui/Button.tsx avec la prop variant ('primary' | 'secondary' | 'ghost') »

Rendre les Règles Actionnables

Chaque règle doit dire exactement à l'agent quoi faire, non pas seulement ce qui faut éviter.

Bon : « Les couleurs sont définies dans src/theme/colors.ts - importez et utilisez ces constantes » Mauvais : « Ne codez pas en dur les couleurs »

Utiliser IMPORTANT pour les Règles Critiques

Préfixez les règles qui ne doivent jamais être violées par « IMPORTANT : » pour s'assurer que l'agent les priorise.

- IMPORTANT : Ne jamais exposer les clés API dans le code côté client
- IMPORTANT : Toujours nettoyer l'entrée utilisateur avant de rendre

Documenter le Pourquoi

Quand les règles semblent arbitraires, expliquez le raisonnement :

- Placez tous les récupérations de données dans les composants serveur (réduit la taille du bundle client et améliore les performances)
- Utilisez les importations absolues avec alias `@/` (facilite la refonte et prévient les chemins relatifs cassés)

Problèmes Courants et Solutions

Problème : L'agent ne suit pas les règles

Cause : Les règles peuvent être trop vagues ou pas correctement chargées par l'agent. Solution :

• Rendez les règles plus spécifiques et actionnables
• Vérifiez que les règles sont enregistrées dans le fichier de configuration correct
• Redémarrez votre agent ou IDE pour recharger les règles
• Ajoutez le préfixe « IMPORTANT : » aux règles critiques

Problème : Les règles entrent en conflit les unes avec les autres

Cause : Règles contradictoires ou chevauchantes. Solution :

• Examinez toutes les règles pour détecter les conflits
• Établissez une hiérarchie de priorités claire
• Supprimez les règles redondantes
• Consolidez les règles connexes dans des énoncés uniques et clairs

Problème : Trop de règles augmentent la latence

Cause : Les règles excessives augmentent la taille du contexte et le temps de traitement. Solution :

• Concentrez-vous sur les 20 % de règles qui résolvent 80 % des problèmes de cohérence
• Supprimez les règles trop spécifiques qui s'appliquent rarement
• Combinez les règles connexes
• Utilisez la divulgation progressive (règles de base d'abord, règles avancées dans les fichiers liés)

Problème : Les règles deviennent obsolètes au fur et à mesure que le projet évolue

Cause : Le codebase change mais les règles non. Solution :

• Planifiez des révisions périodiques des règles (mensuelles ou trimestrielles)
• Mettez à jour les règles quand les décisions architecturales changent
• Versionnez vos fichiers de règles
• Documentez les modifications de règles dans les messages de commit

Comprendre les Règles de Système de Design

Les règles de système de design transforment la manière dont les agents de codage IA travaillent avec vos designs Figma :

Avant les règles :

• L'agent fait des suppositions sur la structure des composants
• Approches de style incohérentes entre les implémentations
• Valeurs codées en dur qui ne correspondent pas aux jetons de design
• Composants créés dans des emplacements aléatoires
• Explications répétitives des conventions du projet

Après les règles :

• L'agent suit automatiquement vos conventions
• Structure et style de composants cohérents
• Utilisation appropriée des jetons de design dès le départ
• Composants organisés correctement
• Zéro invites répétitives

Le temps investi dans la création de bonnes règles paie exponentiellement sur chaque tâche d'implémentation Figma.

Ressources Supplémentaires

• Documentation du Serveur Figma MCP
• Variables et Jetons de Design Figma