Workoholics-en, diseinu-, garapen- eta komunikazio-taldeak dagoeneko ari dira AA agenteekin lanean, profil bakoitzerako kateatutako fluxuen bidez: trebetasun-paketeak, profil bakoitzeko bat, marka baten diseinu-sistema Figmatik bere webgunera, kanpainetara eta aurkezpenetara eramaten dutenak. Aldaketa bakoitza GitLab-etik igarotzen da, berrikus daitekeen merge request baten bidez, eta, horrela, inork ez ditu balioak eskuz kopiatzen. Gaur egun gure proiektuetan aplikatzen dugu, abiatzetik QA bisualeraino, diseinuak, kodeak eta markak beti gauza bera konta dezaten.
Duela aste batzuk, Amaiak hemen kontatzen zuen nola erabiltzen dugun DESIGN.md AA agenteek gure diseinu-sistemak uler ditzaten. Eta zintzilik zegoen erronka batekin amaitzen zuen: fitxategi hori ez da berez eguneratzen. Figman token bat aldatzen bada, norbaitek gogoratu behar du hura eramatea. Post honetan kontatzen dugu nola ebatzi dugun, lan-fluxu bati esker. Edo, hobeto esanda, batzuei esker. Taldeko profil bakoitzerako bat, elkarren artean kateatuta, diseinu-erabaki bakoitza Figmatik koderaino eramaten dutenak, inork baliorik eskuz kopiatu behar izan gabe.
Prompt solteetatik lan-fluxura
Enpresa bat AArekin lanean hasten denean, ohikoena da pertsona bakoitzak bere prompt-ak izatea. Funtzionatzen dute, baina ez dira eskalatzen, eta pertsona bakoitzak emaitza desberdinak lortzen ditu zeregin berarentzat.
Profilatutako lan-fluxu batekin, pertsona bakoitzari AAri gure lan egiteko modua azaltzen jakitea eskatu beharrean, ezagutza hori agenteak ikasita dakartzan trebetasunetan (skill-etan) biltzen dugu. Skill bakoitzak gauza bakarra egiten du: badaki noiz erabili behar den, zer behar duen hasteko eta zer ematen duen amaitzean.
Garrantzitsuena da pieza horiek guztiek bat egiten dutela. Diseinu-skill batek sortzen duena da, zehatz-mehatz, hurrengo garapen-skill-ak espero duena. Eta zerbait falta bada, ez du inprobisatzen: gelditu egiten da, zer falta den esaten du eta badaki nori eskatu.
Metodologia: iturburu bakarra
Horrela, Figma egiaren iturburu bihurtzen da, eta, nolabait, biltegia da kontratua. Diseinua Figman erabakitzen eta islatzen da; GitLab-era iristen dena, proiektu bakoitzeko .claude/design karpetan, diseinu horren bertsio adostua da, pertsonek zein agenteek irakur dezaketena.
Hortik hiru printzipio ateratzen dira:
- Ez dugu ezer bi aldiz eskuz ukitu behar. Token-ak, osagaiak eta txantiloiak Figmatik irakurtzen dira eta biltegian idazten dira.
- Automatizazioak taldearen lana errespetatzen du. Fitxategi bakoitzak bereizi egiten ditu Figmatik datorrena eta pertsonek gehitzen dituzten oharrak eta salbuespenak. Sinkronizatzean, sortutakoa bakarrik eguneratzen da; taldeko norbaitek idatzitakoa dagoen lekuan geratzen da.
- Jatorrizko diseinuak ez dira aldatzen. Skill-ek irakurri egiten dituzte, eta beren orrietan bakarrik idazten dute (Components, Layout, Screens).
Eta ordena mantentzen da, diseinu-sistema batean pieza batzuk beste batzuen menpe daudelako:
- Token-ak: kolorea, tipografia, tarteak, erradioak eta motion-a, aldagai gisa normalizatuta.
- Oinarrizko layout-a: grid-a, edukiontziak, marjinak eta erritmo bertikala breakpoint bakoitzeko.
- Osagaiak: atomoak, molekulak eta organismoak, behetik gora eraikiak, aurreko mailako instantziekin.
- Orri-txantiloiak: eskualdeak eta organismoak txantiloi bakoitzeko.
- Motion-a: animazioak eta elkarrekintzak datu gisa deskribatuta, beren token-ekin.
- Pantailak: pantaila bakoitza definizio berregingarri bihurtuta, eduki erreal eta probakoarekin.
Urrats bakoitza biltegira igotzen da, eta, horrela, diseinu-aldaketa oro kodea berrikusten den bezala berrikusten da: historia batekin, onartzen duen pertsona batekin eta atzera egiteko aukerarekin.
Plugin bat profil bakoitzarentzat
Talde batean hau funtziona dadin, gakoa da pertsona bakoitzak behar duena erabiltzea, bere hizkuntzan. Diseinatzen duenak ez du adarrei buruz jakin behar. Garatzen duenak ez du Figma ireki behar balio baten bila.
Diseinua: ordenatu, dokumentatu eta igo
Diseinuaren pluginak Figma fitxategi bat sistema bihurtzen du. Token-ak erauzi eta aldagai gisa normalizatzen ditu, atomoak, molekulak eta organismoak identifikatu eta osagai gisa eraikitzen ditu bere aldaerekin, grid-a eta orri-txantiloiak definitzen ditu, eta motion-a hizkuntza naturalean deskribatzen du, definizio egituratu batera itzultzeko. Erreferentziekin ere funtzionatzen du: webgune bat, bideo bat edo GIF bat «horrela mugi dadila» esateko.
Igoera bakoitzarekin hizkuntza argian idatzitako txosten bat dator: osagai berriak, izenez aldatutakoak, aldatutako balioak, gehitutako aldaerak eta beste zein piezari eragiten dien. Txosten hori berrespenean, merge request-ean eta azken laburpenean agertzen da.
Garapena: definitutakoa inplementatu, eta hori bakarrik
Garapenaren pluginak ordena bera jarraitzen du: token-ak, ui-kit-a, layout-a, pantailak eta motion-a. Skill bakoitzak biltegiko espezifikazioa irakurtzen du eta proiektuaren teknologian inplementatzen du, dela Astro, React, Angular edo beste bat. Ez du diseinatzen. Erabakitakoa inplementatzen du.
Agenteak beti aplikatzen dituen arau batzuk:
- Balio bisualak token gisa bakarrik idazten dira, inoiz ez zenbaki solte gisa.
- Osagaiak konposizio bidez muntatzen dira, haien seme-alaben gainean estilo-adabakirik gabe.
- Osagai bakoitza barne-katalogo batean agertzen da, datu fiktizioekin eta muturreko eszenatokiekin: testu luzeak, hutsuneak, elementu asko.
- Pantailak probako edukiarekin muntatzen dira lehenik, gero CMSarekin integratzeko prest.
Eta zirkulua interfazea berrikusteko skill batekin ixten dugu. Inplementatutako pantaila Figmako frame-arekin eta espezifikazioarekin alderatzen du, eta aurkikuntzen txosten bat ematen du, ebidentziarekin eta larritasunarekin. Bereizi egiten du akatsa kodearena den ala diseinua eta espezifikazioa elkarren kontra dauden; azken kasu horretan, diseinura itzultzen da. Baieztapenarekin bakarrik zuzentzen du.
Komunikazioa eta komertziala: marka kalera ateratzen da
Diseinu-sistema ez da webean amaitzen. Komunikazio-pluginak biltegiko token, osagai eta txantiloi beretatik abiatzen da kanpaina bakoitzeko piezak sortzeko: mailing bat, kanpaina-landing bat edo enpresa-aurkezpen berri bat. Pieza bakoitza marka eguneratuta duela jaiotzen da, estiloak berregin gabe eta azken logoaren bila ibili gabe.
Profil komertzialak oinarri bera aprobetxatzen du kontu bakoitzaren neurriko proposamenak eta aurkezpenak prestatzeko. Mezua egokitu dezake, baina ez nortasunetik irten. Marka Figman aldatzen bada, argitaratzen den guztian ere aldatzen da.
Erabilera-kasuak: nola bizi dugun egunerokoan
Horrela egiten dugu lan dagoeneko agentzian. Gure eguneroko egoera erreal batzuk:
Web-proiektu bat hutsetik abiaraztea. Enkargu bakar batek proiektu osoa muntatzen du: biltegi bat Astro-ko webarekin, Strapi-ko CMSarekin eta liburutegi partekatuekin. Ondoren, token-ak diseinutik iristen dira eta sistema forma hartzen hasten da, proiektu bakoitzerako neurriko konfiguraziorik gabe.
Diseinu-aldaketa bat proiektuaren erdian. Diseinuak kolore-talde bat eta bi osagai ukitzen ditu. Ezer igo aurretik, zer aldatu den ikusi nahi du, txostena berrikusten du eta unitate horiek bakarrik igotzen ditu. Garapenak merge request argi bat jasotzen du, theme-a sinkronizatzen du, eta ui-kit-ak badaki zehatz-mehatz zer eguneratu. Inork ez du galdetzen «hau horrela zen, ala amestu egin dut?».
Bidean galtzen ez diren animazioak. Card bat scroll egitean sar dadin nahi dugu, edo sekzio bat finko gera dadin edukiak aurrera egiten duen bitartean. Diseinuak hitzez edo erreferentzia batekin deskribatzen du; skill-ak iraupen-, kurba- eta distantzia-token-ak dituen definizio bihurtzen du. Garapenak GSAP eta ScrollTrigger-ekin inplementatzen du proiektuak erabiltzen baditu, mugimendua murriztea nahiago duena beti errespetatuz.
Eduki errealistadun pantailak. Pantaila bakoitza Figmatik definizio gisa erauzten da: zein txantiloi erabiltzen duen, zein osagai doan eskualde bakoitzean eta zer eduki espero duen. Hortik, probako eduki-multzoak sortzen dira (hutsik, testu luzeak, elementu asko, erroreak) eta Figman edo kodean eraikitzen dira, denak ikusteko. Muga-kasuak abiarazi aurretik agertzen dira, ez ondoren.
QA bisuala irizpidearekin. Pantaila bat ontzat eman aurretik, interfazearen berrikuspenak diseinuarekin alderatzen du hainbat zabaleratan eta egoeratan (hover, fokua, menu irekia). Emaitza larritasunaren arabera ordenatutako txosten bat da, taldeko edonork irakur dezakeena.
Bidean ikasitakoa
Dena ez zen lehen saiakeran atera. Eta kontatzen dugu istorioaren parte delako.
Azkarrago ez da beti gauza gehiago. Gure lehen igoerek Figma osoa berriro irakurtzen zuten eta sistema osoa berridazten zuten aldaketa bakoitzean. Funtzionatzen zuen, baina astuna zen. Orain token-talde, osagai edo txantiloi bakoitzak aztarna bat du: aldatu ez bada, ez da irakurtzen ezta igotzen ere. Pertsona bakoitzaren ordenagailutik git lokalarekin igotzen ere saiatu ginen, eta baztertu egin genuen. Dena GitLab-ekiko konexiotik doa, ordenagailu batetik bestera desdoitzen diren klon eta konfiguraziorik gabe.
Erabaki teknikoek espezifikazioan bizi behar dute. Adibide bat: scroll-liburutegi jakin batzuekin, elementu finko bat ezin da CSSarekin ebatzi. Horregatik, portaera hori ez dago jada osagaian, haren motion-definizioan baizik. Horrela, garapenak badaki nola inplementatu proiektu bakoitzaren teknologiaren arabera.
AA gelditzea bertute bat da. Hasi aurretik, skill bakoitzak egiaztatzen du behar duena baduela. Bestela, gelditu egiten da, zer falta den eta nori eskatu azaltzen du. Magia gutxiago, konfiantza gehiago.
Taldean aldatu dena
Fluxu hauek sortzeak aukera ematen digu gure artean ikuspegi berri batetik harremanak izateko, profil bakoitzaren beharrak eta presak ulertuz.
- Joan-etorri gutxiago eta berrikuspen argiagoak, diseinu-aldaketa bakoitza jaso, bertsionatu eta onartu egiten delako, kodea bezala.
- Koherentzia taldeko pertsonen artean. Agenteak arau berak aplikatzen ditu, nork egiten duen lan dela ere, eta onboarding-a arinagoa da proiektuaren testuingurua biltegian dagoelako.
- Denbora gehiago garrantzitsua denerako: sortzeko, erabakitzeko, zalantzan jartzeko eta xehetasuna fintzeko.
Nola dakigu funtzionatzen duen? Hiru seinaleri erreparatzen diegu: zenbat denbora behar den diseinu-aldaketa bat onartzeko, zenbat errore aurkitzen ditugun pantaila bakoitza berrikustean, eta zenbatetan agertzen den marka-sisteman ez dagoen kolore, tipografia edo neurri bat. Aldaketak lehenago onartzen badira eta errore eta markatiko desbideratze gutxiago agertzen badira, bide onetik goaz.
Eta diseinutik haratago doan ikasgai bat: eredu berak balio du profil desberdinetarako. Marketinak, edukiek edo salmentek ere izan ditzakete beren skill-ak, marka eta taldearen irizpidea txertatuta, edozein pertsonak koherentziaz ekoitz dezan, profil teknikorik ez badu ere.
Irizpidea, gure baliorik handiena
Amaiak esaten zuen diseinua ez zela inoiz Figman amaitu. Gaur gehitzen dugu ez duela bidean galdu beharrik ere. Talde baten ezagutza lan-fluxu bihurtzen denean, pertsona baten memoriaren menpe egoteari uzten dio eta guztientzat lan egiten hasten da.
Hori bai, skill-ek ez dute erabakitzen zein kolorek transmititzen duen hobekien marka baten balioa, ezta elkarrekintza baten asmoa eta esperientzia ere. Hori guk egiten jarraitzen dugu. AAk gauzatu eta ordenatu egiten du. Eta, Amaiak esaten zuen bezala, irizpidea, galderak eta erabaki partekatuak gure kontua dira oraindik.
Eta hau ez da etxean geratzen. Beste konpainia batzuei laguntzen diegu bidearen bi zatietan: estrategia eta marka-sistema definitzen, eta hura talde bakoitzera eramaten duten lan-fluxuak diseinatu eta ezartzen, marketinetik garapeneraino. Erakunde handietan, talde eta hornitzaile askorekin, nabaritzen da gehien: marka berdin iristen da kanal bakoitzera, eta software-taldeek sistema beretik abia daitezke aplikazio berriak sortzeko.
Zure markak koherente iritsi behar badu talde, kanal eta aplikazio askotara, edo dagoeneko horretan ari bazarete eta esperientziak trukatu nahi badituzue, idatz iezaguzu. Pozik hitz egingo dugu honi guztiari buruz, kafe bat aurrean dugula.