Skip to main content

Audit quotidien du design system

Programmez Devin pour analyser les pull requests (PR) fusionnées et signaler les couleurs codées en dur et les jetons manquants.
AuthorCognition
CategoryAutomatisations
FeaturesProgrammations, Intégrations
1

Permettez à Devin d'apprendre votre design system

Le scanner n’est aussi bon que les règles qu’il applique. Au lieu de rédiger vous-même des entrées Knowledge, dirigez Advanced Devin vers les fichiers sources de votre design system et laissez-le générer le Knowledge.Ouvrez Advanced Devin et collez un prompt comme celui-ci :Devin lit les fichiers sources, en extrait les règles et crée des entrées Knowledge comme celles-ci :
  • Color tokens — “Toutes les couleurs doivent utiliser les tokens définis dans src/tokens/colors.ts. N’utilisez jamais de valeurs hexadécimales brutes comme #3B82F6. Utilisez plutôt colors.primary.500.”
  • Spacing grid — “Tous les espacements doivent suivre notre grille de 4 px. Utilisez les tokens d’espacement de src/tokens/spacing.ts (par exemple, spacing.2 = 8px, spacing.4 = 16px). Ne codez jamais en dur des valeurs en pixels comme margin: 10px.”
  • Component library — “Utilisez toujours les composants partagés de src/components/ui/ — y compris <Button>, <Avatar>, <Modal> et <Card>. Ne créez pas d’alternatives ad hoc.”
Passez en revue les entrées générées dans Settings > Knowledge et ajustez la formulation ou les déclencheurs avant de continuer.
2

Connecter Linear pour créer des tickets

L’analyse quotidienne crée des tickets Linear pour chaque violation qu’elle détecte ; connectez Linear avant de configurer la planification.
  1. Allez dans Settings > Integrations > Linear et cliquez sur Connect
  2. Autorisez Devin et sélectionnez les équipes auxquelles il doit avoir accès
  3. Dans Linear, créez un projet appelé “Design Debt”
  4. Créez un label appelé “design-fix” — vous l’utiliserez pour déclencher les corrections automatiques à la dernière étape
Consultez Linear integration pour le guide de configuration complet.
3

Programmer l’analyse quotidienne

Accédez à Settings > Schedules et cliquez sur Create schedule. Configurez-le comme suit :
  • Name: Design system scanner
  • Schedule type: Recurring
  • Frequency: Daily at 9:00 AM (fuseau horaire de votre équipe)
  • Agent: Devin
  • Email notifications: Always (pour voir les résultats chaque matin)
Collez ceci comme prompt :Vous pouvez également créer cette planification directement depuis le champ de saisie : saisissez votre prompt, cliquez sur le menu à trois points (⋯) et sélectionnez Schedule Devin. Consultez Scheduled Sessions pour plus de détails.Chaque matin après l’exécution de l’analyse, vous trouverez des tickets comme ceux-ci dans votre projet Design Debt :
TicketFileViolationSuggested fix
DD-101src/pages/Settings.tsx:42Valeur de couleur codée en dur #3B82F6Remplacez par colors.primary.500
DD-102src/components/UserCard.tsx:18Composant d’avatar personnaliséUtilisez <Avatar> à partir de src/components/ui/
DD-103src/pages/Dashboard.tsx:95margin: 10pxUtilisez spacing.3 (12px, valeur la plus proche de la grille 4px)
DD-104src/views/Profile.tsx:33Aucun breakpoint mobileAjoutez un breakpoint md: pour la grille de mise en page
4

Bouclez la boucle avec des PR de correction automatique

Une fois que vous avez confiance dans les résultats du scanner, modifiez le prompt pour que Devin corrige les violations dans la même exécution — aucun déclencheur séparé n’est nécessaire. Ajoutez une étape de correction à la fin de votre prompt de scan :À présent, la boucle complète s’exécute sans intervention : scan → ticket + PR de correction → revue. Chaque matin, vous trouvez à la fois les rapports de violation et les PR qui les corrigent.Pour générer un récapitulatif hebdomadaire de toutes les violations trouvées, exécutez ce prompt de suivi :