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

# Tägliches Audit des Designsystems

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="Tägliches Designsystem-Audit" description="Plane Devin so ein, dass gemergte PRs gescannt und hartcodierte Farben sowie fehlende Tokens markiert werden." prompt="Überprüfe alle Frontend-PRs, die in den letzten 24 Stunden gemergt wurden. Untersuche jeden einzelnen auf Verstöße gegen das Designsystem – hartcodierte Farben, nicht standardkonforme Abstände, fehlende Design-Tokens oder Komponenten, die nicht unsere gemeinsame Komponentenbibliothek verwenden. Lege für jeden Verstoß ein Linear-Ticket mit dem Label 'design-fix' an." category="Automatisierungen" features="Zeitpläne, Integrationen" type="schedule" />

<div className="uc-detail-wrapper">
  <Tip>Möchten Sie das nicht manuell einrichten? Fügen Sie einen Link zu dieser Seite in eine Devin-Sitzung ein und bitten Sie Devin, alles für Sie einzurichten.</Tip>

  <Steps>
    <Step title="Lassen Sie Devin Ihr Designsystem kennenlernen">
      Der Scanner ist nur so gut wie die Regeln, die er überprüft. Anstatt Knowledge-Einträge selbst zu schreiben, richte Devin auf die Quelldateien deines Designsystems und lass es die Knowledge generieren.

      Öffne eine neue [Devin-Sitzung](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) und füge einen Prompt wie diesen ein:

      <PromptBlock agent="advanced" intent="create">
        ```txt Lerne unser Designsystem und erstelle Knowledge theme={null}
        Lies die Quelldateien unseres Designsystems:
        - src/tokens/colors.ts (Farbpalette und Token-Namen)
        - src/tokens/spacing.ts (Abstandsskala und Grid-Regeln)
        - src/components/ui/ (gemeinsam genutzte Komponentenbibliothek)

        Lies außerdem alle README- oder Dokumentationsdateien in diesen Verzeichnissen.

        Erstelle basierend auf dem Gelernten Knowledge-Einträge für jede dieser
        Kategorien:

        1. Farb-Tokens — welche Tokens es gibt, Namenskonventionen und dass
           rohe hex/rgb/hsl-Werte niemals erlaubt sind
        2. Spacing-Grid — das 4px-Grid-System, verfügbare Spacing-Tokens
           und dass hartkodierte Pixelwerte verboten sind
        3. Komponentenbibliothek — welche gemeinsamen Komponenten existieren, wann
           jede zu verwenden ist und dass individuelle Einzel-Lösungen nicht erlaubt sind

        Setze den Trigger jedes Eintrags so, dass er ausgelöst wird, wenn in diesem Repo
        mit Frontend-Code gearbeitet wird. Pinni sie im acme/webapp-Repository an.
        ```
      </PromptBlock>

      Devin liest die Quelldateien, extrahiert die Regeln und erstellt Knowledge-Einträge wie diese:

      * **Farb-Tokens** — *"Alle Farben müssen Tokens aus `src/tokens/colors.ts` verwenden. Verwende niemals rohe Hex-Werte wie `#3B82F6`. Verwende stattdessen `colors.primary.500`."*
      * **Spacing-Grid** — *"Alle Abstände müssen unserem 4px-Grid folgen. Verwende Spacing-Tokens aus `src/tokens/spacing.ts` (z. B. `spacing.2` = 8px, `spacing.4` = 16px). Verwende niemals hartkodierte Pixelwerte wie `margin: 10px`."*
      * **Komponentenbibliothek** — *"Verwende immer gemeinsame Komponenten aus `src/components/ui/` — einschließlich `<Button>`, `<Avatar>`, `<Modal>` und `<Card>`. Erstelle keine individuellen Einzel-Lösungen."*

      Überprüfe die generierten Einträge unter **Settings > Knowledge** und passe Formulierungen oder Trigger bei Bedarf an, bevor du fortfährst.
    </Step>

    <Step title="Linear für das Erstellen von Tickets verbinden">
      Der tägliche Scan erstellt für jeden gefundenen Verstoß ein Linear-Ticket. Verbinden Sie daher Linear, bevor Sie den Zeitplan einrichten.

      1. Gehen Sie zu **Settings > Connections > Linear** und klicken Sie auf **Connect**
      2. Autorisieren Sie Devin und wählen Sie die Teams aus, auf die es Zugriff haben soll
      3. Erstellen Sie in Linear ein Projekt mit dem Namen **"Design Debt"**
      4. Erstellen Sie ein Label mit dem Namen **"design-fix"** – dieses verwenden Sie im letzten Schritt, um automatische Korrekturen auszulösen

      Siehe [Linear integration](/de/integrations/linear) für die vollständige Einrichtungsanleitung.
    </Step>

    <Step title="Täglichen Scan planen">
      Navigiere zu **Settings > Schedules** und klicke auf **Create schedule**. Konfiguriere sie wie folgt:

      * **Name**: Design-System-Scanner
      * **Schedule type**: Wiederkehrend
      * **Frequency**: Täglich um 9:00 Uhr (Zeitzone deines Teams)
      * **Agent**: Devin
      * **Email notifications**: Immer (damit du die Ergebnisse jeden Morgen siehst)

      Füge dies als Prompt ein:

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

      Du kannst dies auch direkt aus dem Eingabefeld erstellen: Tippe deinen Prompt, klicke auf das **Dreipunkt-Menü** (⋯) und wähle **Schedule Devin**. Siehe [Scheduled Sessions](/de/product-guides/scheduled-sessions) für weitere Details.

      Jeden Morgen, nachdem der Scan ausgeführt wurde, findest du Tickets wie diese in deinem Design-Debt-Projekt:

      | Ticket | Datei                            | Verstoß                              | Vorgeschlagene Lösung                                 |
      | ------ | -------------------------------- | ------------------------------------ | ----------------------------------------------------- |
      | DD-101 | `src/pages/Settings.tsx:42`      | Hardcoded `#3B82F6`                  | Ersetze durch `colors.primary.500`                    |
      | DD-102 | `src/components/UserCard.tsx:18` | Benutzerdefinierte Avatar-Komponente | Verwende `<Avatar>` aus `src/components/ui/`          |
      | DD-103 | `src/pages/Dashboard.tsx:95`     | `margin: 10px`                       | Verwende `spacing.3` (12px, nächster 4px-Grid-Wert)   |
      | DD-104 | `src/views/Profile.tsx:33`       | Kein Mobile-Breakpoint               | Füge einen `md:`-Breakpoint für das Grid-Layout hinzu |
    </Step>

    <Step title="Schließe den Kreis mit automatischen Fix-PRs">
      Sobald Sie der Ausgabe des Scanners vertrauen, passen Sie den Prompt so an, dass Devin Verstöße im selben Durchlauf behebt – ein separater Trigger ist nicht nötig. Fügen Sie am Ende Ihres Scan-Prompts einen Fix-Schritt hinzu:

      <PromptBlock type="schedule">
        ```txt Täglicher Design-System-Scan mit Auto-Fix theme={null}
        Überprüfe alle Frontend-PRs, die in den letzten 24 Stunden im
        acme/webapp-Repo gemergt wurden. Prüfe bei jeder PR das Diff auf:

        1. Hardcodierte Farbwerte (hex, rgb, hsl) statt Tokens
           aus src/tokens/colors.ts
        2. Nicht standardmäßige Abstände, die nicht unserem 4px-Grid folgen
        3. Neue Komponenten, die bestehende in
           src/components/ui/
           duplizieren
        4. Fehlende responsive Breakpoints für neuen Layout-Code

        Für jeden Verstoß:
        - Erstelle ein Linear-Ticket im Projekt "Design Debt" mit dem
          Label "design-fix", Dateipfad, Zeilennummer, Beschreibung
          und dem Namen der Person, die den Verstoß verursacht hat
        - Behebe den Verstoß gemäß den Design-System-Regeln in Knowledge
        - Fasse alle Korrekturen in einer einzelnen PR pro ursprünglicher PR
          zusammen und verknüpfe sie mit den Linear-Tickets

        Überspringe Dateien in src/vendor/ und src/legacy/ — das sind
        beabsichtigte Ausnahmen.
        ```
      </PromptBlock>

      Jetzt läuft der gesamte Kreislauf automatisch: **Scan** → **Ticket + Fix-PR** → **Review**. Jeden Morgen erhalten Sie sowohl die Berichte über Verstöße als auch die PRs, die diese beheben.

      Um eine wöchentliche Zusammenfassung aller gefundenen Verstöße zu erstellen, führen Sie Folgendes als Follow-up aus:

      <PromptBlock>
        ```txt Wöchentlicher Design-Debt-Report theme={null}
        Fasse alle Design-System-Verstöße zusammen, die diese Woche gefunden wurden. Gruppiere sie nach
        Verstoßtyp und zeige, welche Dateien und Komponenten die größten
        Problemfälle sind. Poste den Bericht in #design-system in Slack.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>