Enhed 9 / 11

Designsystem: Kunstig intelligens i komponent, token og dokumentation

Gevinster:

  • Evne til at udarbejde og lave konsistente designtokens, komponentnavngivning og brugsregler med kunstig intelligens
  • Evne til hurtigt at producere komponentdokumentation, gør/ikke-eksempler og brugstekster med kunstig intelligens
  • Evne til at kontrollere forslag til kunstig intelligens for konflikt med det eksisterende designsystem og bevare singularitet

Et designsystem er det almindelige sprog, der får en produktfamilie til at se ud og opføre sig konsekvent: genanvendelige komponenter (knap, kort, formularfelt), designtokens (navngivne definitioner af værdier såsom farve, mellemrum, typografi) og dokumentation, der forklarer, hvordan man bruger dem. Et godt designsystem giver ti designere mulighed for at designe det samme produkt, som hvis det var produceret af en enkelt kilde. Installation og vedligeholdelse af dette system er trættende, gentagne og tekstintensive arbejde; Det er præcis her, kunstig intelligens skinner. Men essensen af ​​systemet er singularitet og konsistens; AI's anbefalinger kan ikke accepteres uden at være kontrolleret for konflikt med det nuværende system.

Tokens og navngivning: grundlaget for konsistens

Et designtoken er en navngivet, genbrugelig værdi af en designbeslutning: farve-primær, space-center, tekst-titel-hovedstad. Takket være tokens kan du ændre en farve ét sted og opdatere den på tværs af hele produktet. Men tokens magt afhænger af konsistensen af ​​navngivningen; Hvis blue-1, main-blue, primaryBlue bruges blandet, vil systemet gå ned.

AI er god til to ting her: at gennemgå dit eksisterende tokensæt mod et konsistent navneskema og foreslå skema-kompatible navne til nye tokens. En anmodning som "Oversæt denne tokenliste til semantisk (betydningsbaseret) navngivning" vil hjælpe dig med at generere navne, der formidler mening, såsom farve-handling-primær i stedet for blå-500. Men den endelige navngivningsbeslutning er holdets kontrakt; Modellen giver kun en oversigt.

Tip: Når du navngiver tokens til AI, skal du give 5-6 eksempler på dit nuværende skema og sige "hold i det samme mønster". Den prøveløse anmodning producerer navne, der er fremmede for dit system.

Komponentdokumentation: det mest produktive område af AI

En komponents dokumentation omfatter: hvad den gør, hvornår den skal bruges, hvornår den ikke skal bruges, dens varianter, tilstande (standard, hover, passiv, fejl), tilgængelighedsnoter og "gør/ikke"-eksempler. At skrive disse tekster i hånden tager timer, hvorfor mange teams forsømmer dokumentation.

AI udfylder dette hul: Når du beskriver en komponent, producerer den udkast til dokumentation, brugsregler og gør/ikke-eksempler i et ensartet format. Dokumentation går således fra "der er ikke" til "der er udkast, det bliver ordnet", hvilket er en stor gevinst. Modellen kender dog ikke den faktiske opførsel af komponenten; Det er din opgave at matche de regler, det producerer, med systemets virkelighed.

dokumentfragment

Bidrag af kunstig intelligens

menneskelig verifikation

Hvad gør det?

Klar disposition definition

Ægte fitness til formålet

Hvornår skal bruges

Generelle scenarier

Produktspecifikke regler

Gør/Gør ikke eksempler

Hurtigt træk par

Faktiske misbrug

Tilgængelighedsnotat

Standard påmindelser

Bekræftet af reel test

Variant/sagsliste

mulig liste

Dem, der rent faktisk eksisterer i systemet

Modsigelseskontrol: bevarelse af singularitet

Ærkefjenden af ​​designsystemet er duplikering: to knapper, der udfører det samme arbejde, to forskellige rumskalaer, to modstridende regler. Når AI foreslår en ny komponent eller regel, kan dette forslag være i konflikt med det eksisterende system – det holder ikke hele dit modelsystem i tankerne. Så jeg vurderer hvert forslag ved at spørge "konflikter dette med noget, der allerede eksisterer?" Filtrer med spørgsmålet. Du kan også bruge kunstig intelligens i konfliktscanning: Du kan give det nuværende systemresumé og den nye anbefaling og få konflikterne listet. Men den endelige "ental korrekte" beslutning er op til holdet.

tre minisager

Sag 1 — Dokumentationsgæld udlignet. Kun 6 af et teams 24 komponenter havde dokumentation. Der blev udarbejdet udkast til dokumenter for de resterende 18 komponenter med kunstig intelligens; Holdet fiksede hver enkelt på 10-15 minutter. Jobbet, der blev udskudt i uger, blev afsluttet på to dage.

Tilfælde 2 - Token-navngivning blev konsekvent. I et system blev farverne blandet som blue1, mainBlue, brand-blue. AI oversatte eksisterende 40 tokens til semantisk skema; Holdet reviderede det og skiftede til en enkelt standard. Farvefejl blev mærkbart reduceret i efterfølgende designs.

Sag 3 — Modstridende komponent blev afvist. AI foreslog en ny komponent kaldet "sekundær handlingsknap". Da holdet scannede for modsigelser, fandt de ud af, at det gjorde det samme arbejde som den eksisterende "spøgelsesknap" og afviste forslaget. Lektion: ikke alle forslag tilføjer en ny komponent til systemet; Nogle gange er det rigtigt at bruge det, der er til rådighed.

Kopiérbare prompter

Din rolle: design systemadministrator.Dokumentér denne komponent: <<komponent og dens adfærd>>.Format: Hvad gør den | Hvornår skal du bruge | Hvornår skal du IKKE bruge |Varianter | Situationer | Tilgængelighedsnotater | 2 Gør / 2 Giv ikke et eksempel. Find på adfærd, du ikke kender; Skriv "holdet skal udfyldes".

Oversæt denne liste over tokens til et semantisk (betydningsbaseret) navngivningsskema. Mine nuværende skemaeksempler: <<5-6 eksempler>>. Fortsæt i samme mønster. For hver token, giv gammelt navn -> nyt navn -> begrundelsestabel. Liste: <<tokens>>

Scan for modsigelser: Resumé af mit nuværende designsystem: <<resumé>>. Ny foreslået komponent/regel: <<forslag>>. Er dette forslag i konflikt med det eksisterende system (komponent, der udfører det samme job, modstridende regel, dublet token)? Angiv konflikterne og dit forslag.

Generer "gør/ikke" eksempelpar for denne komponent: realistisk korrekt brug og realistiske forkerte brugsscenarier. For hvert par, forklar i én sætning, hvorfor det er sandt/falsk. Komponent: <<navn og formål>>

Svag prompt / Stærk prompt

Svag: "Skriv dokumentation til denne knap."

Resultat: En generel, formateret tekst uden forbindelse til systemet.

Stærk: "Dokumenter denne knap i følgende format (hvad den gør / hvornår den ikke skal bruges / varianter / cases / tilgængelighed / gør-ikke); find op adfærd, du ikke kender, skriv 'team skal udfylde'."

Resultat: Konsekvent formateret, korrekt fordelt, redigerbart manuskript.

Forskel: stærkt promptformat + fabrikationsforbud + do/don't-prompter.

Almindelige fejl

  • Anmoder om token-navngivning uden eksempel. Modellen genererer navne, der er fremmede for dit system; konsistensen er brudt.
  • Tilføjelse af komponenter uden at scanne for modsigelser. Duplikering er systemets ærkefjende.
  • Forudsat at den adfærd, som modellen har opfundet, er korrekt. AI kender ikke den faktiske opførsel af komponenten.
  • Accepter tilgængelighedsvurderingen uden at teste. Standardpåmindelse er ikke en erstatning for faktisk test.
  • At skrive dokumentationen én gang og ikke opdatere den. Dokumentet bør opdateres, efterhånden som systemet ændres.

Sammenfattende

Designsystemet er infrastrukturen for konsistens og skalerbarhed; men dens vedligeholdelse bliver ofte forsømt, fordi den er tekstintensiv og gentagende. AI adresserer denne gæld ved hurtigt at producere komponentdokumentation, do/don't-eksempler, brugsscripts og token-navngivningsudkast. Men essensen af ​​systemet er singularitet og konsistens: hvert tokennavn skal verificeres mod prøveskemaet, hvert komponentforslag skal scannes modstridende, enhver beskrivelse af adfærd skal verificeres mod virkeligheden. Brug modellen som en effektiv tegner; Teamet træffer den individuelle rigtige beslutning.

Ansøgningsopgave

  1. Vælg en komponent med manglende dokumentation, og lav et udkast til dokument med den første prompt.
  2. Udfyld felterne mærket "Team skal udfyldes" med faktisk adfærd.
  3. Med den anden prompt skal du konvertere dine 8-10 tokens til det semantiske skema og oprette en gammel/ny navnetabel.
  4. For en ny komponentidé skal du scanne for modsigelser med den tredje prompt.
  5. Med den fjerde prompt skal du generere do/don't-eksempler for en komponent og tilføje dem til systemet.

tjekliste

  • [ ] Jeg koblede token-navngivningen til eksempelskemaet.
  • [ ] Jeg scannede de nye komponenter for konflikter.
  • [ ] Jeg verificerede den modellavede adfærd med virkeligheden.
  • [ ] Jeg planlagde at bekræfte tilgængelighedsnotaterne med faktiske tests.
  • [ ] Jeg opbevarede dokumentationen i et ensartet format.
  • [ ] Jeg bevarede singulariteten og forhindrede overlapning.