Skip to main content

Tägliches Designsystem-Audit

Plane Devin so ein, dass gemergte PRs gescannt und hartcodierte Farben sowie fehlende Tokens markiert werden.
AuthorCognition
CategoryAutomatisierungen
FeaturesZeitpläne, Integrationen
1

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 Advanced Devin auf die Quelldateien deines Designsystems und lass es die Knowledge generieren.Öffne Advanced Devin und füge einen Prompt wie diesen ein: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.
2

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 > Integrations > 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 für die vollständige Einrichtungsanleitung.
3

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: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 für weitere Details.Jeden Morgen, nachdem der Scan ausgeführt wurde, findest du Tickets wie diese in deinem Design-Debt-Projekt:
TicketDateiVerstoßVorgeschlagene Lösung
DD-101src/pages/Settings.tsx:42Hardcoded #3B82F6Ersetze durch colors.primary.500
DD-102src/components/UserCard.tsx:18Benutzerdefinierte Avatar-KomponenteVerwende <Avatar> aus src/components/ui/
DD-103src/pages/Dashboard.tsx:95margin: 10pxVerwende spacing.3 (12px, nächster 4px-Grid-Wert)
DD-104src/views/Profile.tsx:33Kein Mobile-BreakpointFüge einen md:-Breakpoint für das Grid-Layout hinzu
4

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