Skip to main content

Audit quotidiano del design system

Programma Devin per analizzare le PR unite e segnalare colori hardcoded e token mancanti.
AuthorCognition
CategoryAutomazioni
FeaturesPianificazioni, Integrazioni
1

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 Advanced Devin ai file sorgente del tuo design system e lascia che generi la Knowledge.Apri Advanced Devin e incolla un prompt come questo: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.
2

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 > Integrations > 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.
3

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: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 per maggiori dettagli.Ogni mattina, dopo l’esecuzione della scansione, troverai ticket come questi nel tuo progetto Design Debt:
TicketFileViolationSuggested fix
DD-101src/pages/Settings.tsx:42Hardcoded #3B82F6Sostituisci con colors.primary.500
DD-102src/components/UserCard.tsx:18Custom avatar componentUsa <Avatar> da src/components/ui/
DD-103src/pages/Dashboard.tsx:95margin: 10pxUsa spacing.3 (12px, valore più vicino alla griglia da 4px)
DD-104src/views/Profile.tsx:33No mobile breakpointAggiungi il breakpoint md: per il grid layout
4

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