> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Audit quotidien du système de design

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Audit quotidien du design system" description="Programmez Devin pour analyser les pull requests (PR) fusionnées et signaler les couleurs codées en dur et les jetons manquants." prompt="Passez en revue toutes les PR front-end fusionnées au cours des dernières vingt-quatre heures. Vérifiez chacune d'elles pour repérer les violations du design system : couleurs codées en dur, espacements non standard, jetons de design manquants ou composants qui n'utilisent pas notre bibliothèque de composants partagée. Pour chaque violation, créez un ticket Linear avec le label « design-fix »." category="Automatisations" features="Programmations, Intégrations" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>Vous ne souhaitez pas effectuer cette configuration manuellement ? Collez un lien vers cette page dans une session Devin et demandez-lui de tout configurer pour vous.</Tip>

  <Steps>
    <Step title="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 Devin vers les fichiers sources de votre design system et laissez-le générer le Knowledge.

      Ouvrez une nouvelle [session Devin](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) et collez un prompt comme celui-ci :

      <PromptBlock agent="advanced" intent="create">
        ```txt Learn our design system and create Knowledge theme={null}
        Read our design system source files:
        - src/tokens/colors.ts (color palette and token names)
        - src/tokens/spacing.ts (spacing scale and grid rules)
        - src/components/ui/ (shared component library)

        Also read any README or documentation files in those directories.

        From what you learn, create Knowledge entries for each of these
        categories:

        1. Color tokens — which tokens exist, naming conventions, and that
           raw hex/rgb/hsl values are never allowed
        2. Spacing grid — the 4px grid system, available spacing tokens,
           and that hardcoded pixel values are forbidden
        3. Component library — which shared components exist, when to use
           each one, and that one-off alternatives are not allowed

        Set each entry’s trigger to fire when working with frontend code
        in this repo. Pin them to the acme/webapp repository.
        ```
      </PromptBlock>

      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.
    </Step>

    <Step title="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 > Connections > 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](/fr/integrations/linear) pour le guide de configuration complet.
    </Step>

    <Step title="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 :

      <PromptBlock type="schedule">
        ```txt Daily design system scan theme={null}
        Review all frontend PRs merged in the last 24 hours in the
        acme/webapp repo. For each PR, check the diff for:

        1. Hardcoded color values (hex, rgb, hsl) instead of tokens
           from src/tokens/colors.ts
        2. Non-standard spacing that doesn't follow our 4px grid
        3. New components that duplicate existing ones in
           src/components/ui/
        4. Missing responsive breakpoints for any new layout code

        For each violation, create a Linear ticket in the "Design Debt"
        project with:
        - The "design-fix" label
        - File path and line number
        - What the violation is and how to fix it
        - The name of the person who authored the violating change
          (from the PR author or git blame)

        Skip files in src/vendor/ and src/legacy/ — those are
        intentional exceptions.
        ```
      </PromptBlock>

      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](/fr/product-guides/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 :

      | Ticket | File                             | Violation                                | Suggested fix                                                       |
      | ------ | -------------------------------- | ---------------------------------------- | ------------------------------------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | Valeur de couleur codée en dur `#3B82F6` | Remplacez par `colors.primary.500`                                  |
      | DD-102 | `src/components/UserCard.tsx:18` | Composant d’avatar personnalisé          | Utilisez `<Avatar>` à partir de `src/components/ui/`                |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`                           | Utilisez `spacing.3` (12px, valeur la plus proche de la grille 4px) |
      | DD-104 | `src/views/Profile.tsx:33`       | Aucun breakpoint mobile                  | Ajoutez un breakpoint `md:` pour la grille de mise en page          |
    </Step>

    <Step title="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 :

      <PromptBlock type="schedule">
        ```txt Analyse quotidienne du design system avec correction automatique theme={null}
        Passe en revue tous les PR frontend fusionnés au cours des
        24 dernières heures dans le dépôt acme/webapp. Pour chaque PR,
        vérifie le diff pour :

        1. Les valeurs de couleur en dur (hex, rgb, hsl) au lieu des tokens
           de src/tokens/colors.ts
        2. Un espacement non standard qui ne suit pas notre grille de 4 px
        3. Les nouveaux composants qui dupliquent des composants existants
           dans src/components/ui/
        4. L’absence de breakpoints responsive pour tout nouveau code de layout

        Pour chaque violation :
        - Crée un ticket Linear dans le projet « Design Debt » avec le
          label « design-fix », le chemin du fichier, le numéro de ligne,
          la description et le nom de la personne qui a rédigé la modification
          non conforme
        - Corrige la violation en suivant les règles du design system dans Knowledge
        - Regroupe toutes les corrections dans un seul PR par PR d’origine,
          lié aux tickets Linear

        Ignore les fichiers dans src/vendor/ et src/legacy/ — ce sont
        des exceptions intentionnelles.
        ```
      </PromptBlock>

      À 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 :

      <PromptBlock>
        ```txt Rapport hebdomadaire de dette de design theme={null}
        Résume toutes les violations du design system trouvées cette
        semaine. Regroupe-les par type de violation et indique quels
        fichiers et composants sont les plus problématiques. Publie le
        rapport dans #design-system sur Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>