> ## 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.

# Auditoria Diária do 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="Auditoria Diária do Design System" description="Agende o Devin para analisar PRs mescladas e sinalizar cores fixas no código e tokens ausentes." prompt="Revise todas as PRs de frontend mescladas nas últimas 24 horas. Verifique cada uma em busca de violações ao design system — cores fixas no código, espaçamento fora do padrão, tokens de design ausentes ou componentes que não usam nossa biblioteca compartilhada de componentes. Para cada violação, crie um ticket no Linear com o rótulo 'design-fix'." category="Automações" features="Agendamentos, Integrações" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça que ele configure tudo para você.</Tip>

  <Steps>
    <Step title="Ensine o seu design system ao Devin">
      O verificador só é tão bom quanto as regras que ele aplica. Em vez de escrever entradas de Knowledge por conta própria, aponte o Devin para os arquivos-fonte do seu design system e deixe que ele gere o Knowledge.

      Abra uma nova [sessão do Devin](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) e cole um prompt como este:

      <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 lê os arquivos-fonte, extrai as regras e cria entradas de Knowledge como estas:

      * **Color tokens** — *"Todas as cores devem usar tokens de `src/tokens/colors.ts`. Nunca use valores hex brutos como `#3B82F6`. Use `colors.primary.500` em vez disso."*
      * **Spacing grid** — *"Todos os espaçamentos devem seguir nosso grid de 4px. Use tokens de espaçamento de `src/tokens/spacing.ts` (por exemplo, `spacing.2` = 8px, `spacing.4` = 16px). Nunca use valores em pixels codificados diretamente (hardcoded), como `margin: 10px`."*
      * **Component library** — *"Sempre use componentes compartilhados de `src/components/ui/` — incluindo `<Button>`, `<Avatar>`, `<Modal>` e `<Card>`. Não crie alternativas pontuais/ad hoc."*

      Revise as entradas geradas em **Settings > Knowledge** e ajuste o texto ou os gatilhos necessários antes de seguir em frente.
    </Step>

    <Step title="Conecte o Linear para criar tickets">
      A verificação diária cria tickets no Linear para cada violação que encontrar, então conecte o Linear antes de configurar o agendamento.

      1. Vá para **Settings > Connections > Linear** e clique em **Connect**
      2. Autorize o Devin e selecione as equipes às quais ele deverá ter acesso
      3. No Linear, crie um projeto chamado **"Design Debt"**
      4. Crie um rótulo chamado **"design-fix"** — você usará este rótulo para acionar correções automáticas na última etapa

      Veja [Integração com Linear](/pt-BR/integrations/linear) para o guia completo de configuração.
    </Step>

    <Step title="Agendar verificação diária">
      Navegue até **Settings > Schedules** e clique em **Create schedule**. Configure da seguinte forma:

      * **Name**: Design system scanner
      * **Schedule type**: Recurring
      * **Frequency**: Daily at 9:00 AM (fuso horário da sua equipe)
      * **Agent**: Devin
      * **Email notifications**: Always (para que você veja os resultados todas as manhãs)

      Cole isto como o prompt:

      <PromptBlock type="schedule">
        ```txt Varredura diária do design system theme={null}
        Analise todos os PRs de frontend mesclados nas últimas 24 horas no
        repositório acme/webapp. Para cada PR, verifique o diff em busca de:

        1. Valores de cor fixos (hex, rgb, hsl) em vez de tokens
           de src/tokens/colors.ts
        2. Espaçamentos fora do padrão que não seguem nossa grade de 4px
        3. Novos componentes que dupliquem componentes existentes em
           src/components/ui/
        4. Falta de breakpoints responsivos em qualquer novo código de layout

        Para cada violação, crie um ticket no Linear no projeto "Design Debt" com:
        - O rótulo "design-fix"
        - Caminho do arquivo e número da linha
        - Qual é a violação e como corrigi-la
        - O nome da pessoa que fez a alteração que viola a regra
          (a partir do autor do PR ou de git blame)

        Ignore arquivos em src/vendor/ e src/legacy/ — esses são
        casos excepcionais intencionais.
        ```
      </PromptBlock>

      Você também pode criar isso diretamente a partir do campo de entrada: digite seu prompt, clique no **menu de três pontos** (⋯) e selecione **Schedule Devin**. Consulte [Scheduled Sessions](/pt-BR/product-guides/scheduled-sessions) para mais detalhes.

      Todas as manhãs, depois que a varredura for concluída, você encontrará tickets como estes no seu projeto Design Debt:

      | Ticket | Arquivo                          | Violação                         | Correção sugerida                                           |
      | ------ | -------------------------------- | -------------------------------- | ----------------------------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | Cor fixa `#3B82F6`               | Substituir por `colors.primary.500`                         |
      | DD-102 | `src/components/UserCard.tsx:18` | Componente de avatar customizado | Usar `<Avatar>` de `src/components/ui/`                     |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`                   | Usar `spacing.3` (12px, valor mais próximo da grade de 4px) |
      | DD-104 | `src/views/Profile.tsx:33`       | Sem breakpoint para mobile       | Adicionar breakpoint `md:` para o layout em grid            |
    </Step>

    <Step title="Encerre o ciclo com PRs de correção automática">
      Depois que você confiar na saída do scanner, modifique o prompt para que o Devin corrija as violações na mesma execução — sem precisar de um gatilho separado. Adicione uma etapa de correção ao final do seu prompt de varredura:

      <PromptBlock type="schedule">
        ```txt Varredura diária do design system com correção automática theme={null}
        Analise todos os PRs de frontend mesclados nas últimas 24 horas no
        repositório acme/webapp. Para cada PR, verifique o diff em busca de:

        1. Valores de cor fixos (hex, rgb, hsl) em vez de tokens
           de src/tokens/colors.ts
        2. Espaçamento não padronizado que não siga nossa grade de 4px
        3. Novos componentes que dupliquem componentes existentes em
           src/components/ui/
        4. Breakpoints responsivos ausentes para qualquer novo código de layout

        Para cada violação:
        - Crie um ticket no Linear no projeto "Design Debt" com o rótulo
          "design-fix", caminho do arquivo, número da linha, descrição e
          o nome da pessoa que fez a alteração em violação à regra
        - Corrija a violação seguindo as regras do design system em Knowledge
        - Agrupe todas as correções em um único PR por PR original, vinculado
          aos tickets do Linear

        Ignore arquivos em src/vendor/ e src/legacy/ — essas são
        exceções intencionais.
        ```
      </PromptBlock>

      Agora o ciclo completo roda automaticamente: **scan** → **ticket + PR de correção** → **review**. Todas as manhãs, você encontra tanto os relatórios de violações quanto os PRs que as corrigem.

      Para gerar um resumo semanal de todas as violações encontradas, execute isto como etapa de acompanhamento:

      <PromptBlock>
        ```txt Relatório semanal de design debt theme={null}
        Resuma todas as violações do design system encontradas nesta semana. Agrupe por
        tipo de violação e mostre quais arquivos e componentes são os principais
        responsáveis. Publique o relatório em #design-system no Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>