AI inaweza kuunda app ya React inayofanya kazi ndani ya sekunde chache, na zana kama GeekyAnts zinaahidi kurudisha kodi hiyo iliyozalishwa hivi karibuni kwenye Figma bila kupoteza muundo wa mfumo wa usanifu. Dai hili ni muhimu kwa sababu timu za usanifu zimeamriwa kuanza upya kila wakati kodi iliyoandikwa na AI inapotokea, jambo linaloongeza muda na gharama za kurekebisha usanifu.

Kwa miaka mingi, makabidhiano yalionekana kuwa rahisi kwenye karatasi: wabunifu walitengeneza skrini kwenye Figma, watengenezaji walirejesha skrini hizo katika kodi, na kila upande ulihifadhi nakala yake ya mpangilio. Zana za kuzalisha kodi zinazoendeshwa na AI zilivunja mdundo huo. Injini ya AI inatoa mradi wa React uliotayari kuendeshwa, lakini hakuna njia ya moja kwa moja ya kuingiza component zinazotokana na kodi hiyo kwenye faili ya awali ya usanifu. Matokeo yake ni mzunguko mchungu wa "kwanza kodi, baadaye usanifu" ambao unaharibu lugha ya pamoja ya usanifu na kuongeza gharama za matengenezo.

Kwa nini DOM haitoshelezi

Zana nyingi za uhandisi wa kurejesha (reverse-engineering) huanza na Document Object Model (DOM), ambayo ni uwakilishi wa vivinjari wa vipengele vya HTML. DOM inachukulia kila kipengele cha kuonekana kama <div au <span ya kawaida. Haiwezi kutofautisha kitufe na kadi, wala haijui ikiwa seti ya vipengele inamilikiwa na component kuu katika mfumo wa usanifu. Wakati ukurasa una vitufe kumi, DOM inaripoti tu tabaka kumi zisizo na jina. Uhusiano na maktaba ya awali ya component unapotea, na kuacha wabunifu na mchanganyiko wa maumbo yasiyopangwa ambayo mara nyingi yanahitaji kazi zaidi kusafisha kuliko kujenga upya skrini kuanzia mwanzo.

React Fiber inatoa ramani bora zaidi

Ratiba ya ndani ya React, inayoitwa Fiber, inadumisha mti wa component, ikiwa imekamilika na majina, uhusiano wa mzazi-mtoto, na makundi ya sifa (property bags). Kwa kusoma muundo wa Fiber badala ya HTML iliyochorwa, zana ya uhandisi wa kurejesha inaweza kutambua kuwa <div fulani kwa kweli ni component ya PrimaryButton, kwamba ipo ndani ya component ya Header, na kwamba inabeba seti ya props zinazofafanua hali yake. Ufahamu huu unahifadhi nia ambayo mtengenezaji wa awali—au AI iliyozalisha kodi hiyo—aliipa UI.

GeekyAnts hutumia uchinuzi wa React Fiber kuleta kodi hai kwenye faili za Figma zinazoweza kuhaririwa.

Jinsi mchakato mpya unavyotatua matatizo halisi

Upanuzi wa aina (Variant expansion)

Njia za kawaida za kunasa huchukua picha ya hali inayoonekana tu ya component—kwa mfano, kitufe katika hali yake ya kawaida ya kutokuwa na hover. Kwa kuchunguza ufafanuzi wa component kwenye mti wa Fiber, zana hiyo huorodhesha kila aina (variant) iliyotangazwa kwenye kodi chanzo: hover, focused, disabled, loading, n.k. Kisha inatengeneza Figma Component Set inayounganisha hali hizo zote pamoja, ikirejelea nia ya mfumo wa usanifu bila kunakili kwa mkono.

Uoanishaji wa mpangilio (Layout mapping)

Mpangilio wa wavuti unategemea sana CSS Flexbox, wakati mbadala wa Figma ni Auto Layout. Tabaka la tafsiri linalounganisha sifa za Flexbox (direction, justification, alignment, gaps) moja kwa moja kwenye vigezo vya Auto Layout inamaanisha kuwa nafasi, tabia ya kurekebisha ukubwa, na upatanishi vinabaki vilevile katika mchakato mzima. Wabunifu hawahitaji tena kujenga upya makontena tata ya flex kwa mkono.

Uanzishaji wa hali (State triggering)

Vipengele vingi vya UI—modals, dropdowns, accordions—vimefichwa kwenye DOM hadi JavaScript ibadilishe hali. Kwa sababu mti wa Fiber unarekodi mantiki hiyo, zana ya uhandisi wa kurejesha inaweza kuanzisha hali hizo kwa njia ya programu, kuonyesha vipengele vilivyofichwa, na kuvinasia kama vitu vya usanifu. Matokeo yake ni faili kamili ya usanifu inayojumuisha kila kipengele kinachoweza kuingiliana, si tu kile kilichoonekana mwanzoni wakati wa kupakia.

Zana zinazoibuka

  • GeekyAnts – huchimbua React Fiber ili kuzalisha faili za Figma hai zinazoweza kuhaririwa ambazo zinaheshimu mipaka ya component.
  • Anima – inajikita katika njia ya mbele, kugeuza usanifu wa Figma kuwa kodi ya React au Vue.
  • Locofy.ai – hutumia AI kugeuza mpangilio wa Figma kuwa kodi inayobadilika (responsive), ikisisitiza kasi.
  • Builder.io – huleta component za HTML kwenye Figma.
  • Codia AI – hugeuza picha (screenshots) kuwa faili za Figma zenye muundo.

Hatari kwa timu na bajeti

Wakati usanifu na uendelezaji vinapotengana, kurekebisha kutofautiana kunakuwa gharama kubwa haraka.

Hoja pinzani na mipaka

(sehemu hii imeachwa wazi kwa makusudi)

Nini cha kufuatilia baadaye

(sehemu hii imeachwa wazi kwa makusudi)

Muhtasari

Kusoma mti wa ndani wa Fiber wa React badala ya DOM ya juu kunageuza mzunguko mchungu wa “kwanza kodi, baadaye usanifu” kuwa njia ya pande mbili. Programu zinazozalishwa na AI sasa zinaweza kuletwa tena kwenye Figma bila kupoteza muundo wa vipengele. Kwa timu zinazopambana na mabadiliko ya usanifu (design drift) na gharama zinazoongezeka za matengenezo, mabadiliko hayo yanaweza kumaanisha tofauti kati ya mchakato wa haraka wa kurekebisha usanifu uliovurugika na mtiririko wa kazi uliodhibitiwa na unaozingatia vipengele kwanza.