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

# Audit quotidiano del design system

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 quotidiano del design system" description="Programma Devin per analizzare le PR unite e segnalare colori hardcoded e token mancanti." prompt="Esamina tutte le PR frontend unite nelle ultime 24 ore. Controlla ciascuna per violazioni del design system — colori hardcoded, spaziature non standard, design token mancanti o componenti che non usano la nostra libreria di componenti condivisa. Per ogni violazione, crea un ticket in Linear con l'etichetta 'design-fix'." category="Automazioni" features="Pianificazioni, Integrazioni" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>Non vuoi configurare tutto manualmente? Incolla un collegamento a questa pagina in una sessione di Devin e chiedi a lui di configurare tutto per te.</Tip>

  <Steps>
    <Step title="Insegna a Devin il tuo design system">
      Lo scanner è efficace solo quanto le regole rispetto a cui esegue i controlli. Invece di scrivere manualmente le voci Knowledge, indirizza Devin ai file sorgente del tuo design system e lascia che generi la Knowledge.

      Apri una nuova [session di Devin](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) e incolla un prompt come questo:

      <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 legge i file sorgente, estrae le regole e crea voci Knowledge come queste:

      * **Color tokens** — *"Tutti i colori devono usare i token da `src/tokens/colors.ts`. Non usare mai valori hex grezzi come `#3B82F6`. Usa invece `colors.primary.500`."*
      * **Spacing grid** — *"Tutte le spaziature devono seguire la nostra griglia da 4px. Usa i token di spaziatura da `src/tokens/spacing.ts` (per esempio, `spacing.2` = 8px, `spacing.4` = 16px). Non inserire mai valori in pixel hardcoded come `margin: 10px`."*
      * **Component library** — *"Usa sempre i componenti condivisi da `src/components/ui/` — inclusi `<Button>`, `<Avatar>`, `<Modal>` e `<Card>`. Non creare alternative ad hoc."*

      Rivedi le voci generate in **Settings > Knowledge** e perfeziona il testo o i trigger prima di procedere.
    </Step>

    <Step title="Collega Linear per la creazione dei ticket">
      La scansione giornaliera crea ticket su Linear per ogni violazione che trova, quindi collega Linear prima di configurare la pianificazione.

      1. Vai su **Settings > Connections > Linear** e fai clic su **Connect**
      2. Autorizza Devin e seleziona i team a cui deve avere accesso
      3. In Linear, crea un progetto chiamato **"Design Debt"**
      4. Crea un'etichetta chiamata **"design-fix"** — la userai per attivare le correzioni automatiche nell'ultimo passaggio

      Per la guida completa alla configurazione, vedi [Linear integration](/it/integrations/linear).
    </Step>

    <Step title="Programma la scansione giornaliera">
      Vai su **Settings > Schedules** e fai clic su **Create schedule**. Configuralo come segue:

      * **Name**: Design system scanner
      * **Schedule type**: Recurring
      * **Frequency**: Daily at 9:00 AM (fuso orario del tuo team)
      * **Agent**: Devin
      * **Email notifications**: Always (così vedi i risultati ogni mattina)

      Incolla questo come prompt:

      <PromptBlock type="schedule">
        ```txt Scansione quotidiana del design system theme={null}
        Esamina tutti i PR di frontend uniti (merged) nelle ultime 24 ore
        nella repo acme/webapp. Per ogni PR, controlla il diff alla ricerca di:

        1. Valori di colore hardcoded (hex, rgb, hsl) invece dei token
           da src/tokens/colors.ts
        2. Spaziatura non standard che non segue la nostra griglia da 4px
        3. Nuovi componenti che duplicano quelli esistenti in
           src/components/ui/
        4. Breakpoint responsive mancanti per qualsiasi nuovo codice di layout

        Per ogni violazione, crea un ticket Linear nel progetto "Design Debt"
        con:
        - L'etichetta "design-fix"
        - Percorso del file e numero di riga
        - Che cos'è la violazione e come risolverla
        - Il nome della persona che ha effettuato la modifica che viola la regola
          (dall'autore della PR o da git blame)

        Ignora i file in src/vendor/ e src/legacy/ — sono
        eccezioni intenzionali.
        ```
      </PromptBlock>

      Puoi anche creare questa pianificazione direttamente dalla casella di input: digita il tuo prompt, fai clic sul **menu con tre puntini** (⋯) e seleziona **Schedule Devin**. Consulta [Scheduled Sessions](/it/product-guides/scheduled-sessions) per maggiori dettagli.

      Ogni mattina, dopo l'esecuzione della scansione, troverai ticket come questi nel tuo progetto Design Debt:

      | Ticket | File                             | Violation               | Suggested fix                                                 |
      | ------ | -------------------------------- | ----------------------- | ------------------------------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | Hardcoded `#3B82F6`     | Sostituisci con `colors.primary.500`                          |
      | DD-102 | `src/components/UserCard.tsx:18` | Custom avatar component | Usa `<Avatar>` da `src/components/ui/`                        |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`          | Usa `spacing.3` (12px, valore più vicino alla griglia da 4px) |
      | DD-104 | `src/views/Profile.tsx:33`       | No mobile breakpoint    | Aggiungi il breakpoint `md:` per il grid layout               |
    </Step>

    <Step title="Chiudi il cerchio con le PR di correzione automatica">
      Una volta che ti fidi dell’output dello scanner, modifica il prompt per fare in modo che Devin corregga le violazioni nella stessa esecuzione — senza bisogno di un trigger separato. Aggiungi una fase di correzione alla fine del prompt di scansione:

      <PromptBlock type="schedule">
        ```txt Scansione quotidiana del design system con correzione automatica theme={null}
        Esamina tutti i PR frontend uniti nelle ultime 24 ore nel
        repository acme/webapp. Per ogni PR, controlla il diff alla ricerca di:

        1. Valori di colore hardcoded (hex, rgb, hsl) invece di token
           da src/tokens/colors.ts
        2. Spaziatura non standard che non rispetta la nostra griglia da 4 px
        3. Nuovi componenti che duplicano quelli esistenti in
           src/components/ui/
        4. Breakpoint responsive mancanti per qualsiasi nuovo codice di layout

        Per ogni violazione:
        - Crea un ticket Linear nel progetto "Design Debt" con l’etichetta
          "design-fix", il path del file, il numero di riga, la descrizione
          e il nome della persona che ha creato la modifica che viola le regole
        - Correggi la violazione seguendo le regole del design system in Knowledge
        - Raggruppa tutte le correzioni in un singolo PR per ogni PR originale,
          collegato ai ticket Linear

        Ignora i file in src/vendor/ e src/legacy/ — sono eccezioni intenzionali.
        ```
      </PromptBlock>

      Ora il ciclo completo viene eseguito in automatico: **scan** → **ticket + fix PR** → **review**. Ogni mattina trovi sia i report delle violazioni sia i PR che le correggono.

      Per generare un riepilogo settimanale di tutte le violazioni trovate, esegui questo come passaggio successivo:

      <PromptBlock>
        ```txt Report settimanale del design debt theme={null}
        Riassumi tutte le violazioni del design system trovate questa settimana.
        Raggruppale per tipo di violazione e mostra quali file e componenti
        sono i peggiori. Pubblica il report su #design-system in Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>