You’ve opened a Figma file tagged only to find thirty unnamed frames, a locked background layer, and a button nested ins

Umeifungua faili ya Figma iliyowekwa lebo ya final_FINAL_v3 kisha ukakuta fremu thumni ambazo hazina majina, tabaka la mandhari (background layer) lililofungwa, na kitufe kilichowekwa ndani ya kikundi ambacho pia kina duara la mapambo la ovyo. Hili ni jambo la kawaida zaidi kuliko mtu yeyote anavyotaka kukiri. Unapoweka vurugu hiyo kwenye zana ya uandishi wa kodi ya AI kama Codex, matokeo yanaakisi ingizo. Kanuni ya "takataka ingizwe, takataka itoke" bado inafanya kazi, hata kwa mifano mikubwa ya lugha (large language models).

Muundo wa Makabidhiano Yaliyovurugika

Wabunifu hufanya kazi kwa kasi. Wanazidisha fremu (duplicate frames), wanaacha michoro ya awali ikiwa inaonekana, na wanategemea upimaji wa macho badala ya mpangilio uliopangwa wa auto-layout. Unajikuta na majina ya tabaka kama "Frame 3827" yakiwa pembeni ya vitufe vya kazi. Mapambo ya rangi (gradient blobs) yanashiriki kikundi kilekile na kitendo chako kikuu cha wito (primary call-to-action). Mifano ya vifaa (device mockups) inafunika kiolesle halisi kwa vifuniko vya muonekano (chrome) vinavyoonekana kama maudhui. Tabaka zilizofichwa zinaendelea kuonekana kwenye faili, zikisubiri kuchanganya programu yoyote ya uchambuzi wa kiotomatiki (automated parser).

Kwa mwanatengenezaji anayetumia Codex, tatizo si uvivu kwa upande wowote. AI haina uwezo wa binadamu wa kutambua mifumo. Inasoma mti wa tabaka (layer tree) kwa maana yake ya moja kwa moja. Mwanatumizi anapoweka kitufe, kichwa cha habari, na ukungu wa mandhari (background blur) ndani ya kikundi kimoja kilichonyooka, Codex huichukulia kama vitu vinavyolingana vyenye uzito sawa wa kimuundo. Matokeo yake ni muundo wa mbele (frontend) unaoonekana umevunjika kimuundo kabla hata hujapitia rangi.

Mtindo wa Kazi Unaokufikisha Karibu

Bado unaweza kutoa kodi safi kutoka kwenye chanzo kilichovurugika ikiwa utafanya kazi kama mhariri badala ya mbadilishi wa kawaida. Lengo ni kumpa Codex muktadha wa kutosha ili ifanye makisio sahihi, kisha uweke mipaka kwenye makisio hayo ili yabaki ndani ya usanifu sahihi wa frontend.

Toa kila kitu kabla ya AI kuiona. Washa Dev Mode ikiwa una ufikiaji. Nakili sifa za CSS (CSS properties) kutoka kwenye jopo la ukaguzi (inspect panel). Toa vigezo vya rangi (color variables) na mitindo ya maandishi (text styles). Weka data hii iliyopangwa kwenye Codex pamoja na maelekezo (prompt) yako. Picha za skrini (screenshots) huonyesha ukweli wa nafasi; metadata hukupa nambari kamili za hex, aina za fonti (font stacks), na urefu wa mistari. Moja bila nyingine huacha modeli ikikisia nusu ya fomula.

Kuwa mkali kuhusu mifumo ya mpangilio katika maelekezo yako. Usiombe Codex "iandike ukurasa huu" tu. Mwambie hasa nini cha kutumia: "Jenga menyu ya uendeshaji (navigation) kwa kutumia CSS Flexbox na gridi ya dashibodi kwa kutumia CSS Grid. Usitumie nafasi ya kudumu (absolute positioning) isipokuwa unapoweka alama ya arifa (notification badge) kulingana na ikoni." Zana za AI mara nyingi hutumia nafasi ya kudumu kwa sababu huchambua viwango vya x-y moja kwa moja kutoka kwenye faili ya usanifu. Maelekezo ya wazi yanapinga tabia hiyo.

Tumia picha za skrini kama mwongozo. Toa fremu katika azimio la 2x. Zipandishe pamoja na muktadha wako wa maandishi. Codex inapozalisha jaribio lake la kwanza, fungua matokeo hayo kwenye kivinjari (browser) kando ya picha ya skrini. Angalia mianuko ya nafasi (spacing drift), mipaka iliyokosekana, na kutolingana kwa uzito wa fonti. AI kwa kawaida itakamata muundo mkuu kwa usahihi huku ikikosea nafasi maalum (padding).

Panga kwa ajili ya marekebisho. Linganisha matokeo yaliyozalishwa na rejea yako ya picha na urekebishe makosa kwa mkono. AI inaweza kubadilisha lebo ya maandishi kuwa alama ya picha (image tag) au kufunika kadi kwenye div ya kawaida badala ya <article> au <section>. Hatua hii ya mapitio si ya hiari. Ni hatua ambapo unageuza kodi iliyozalishwa kuwa kodi ya uzalishaji (production code).

Mahali Ambapo AI Inapotea

Hata kwa mtindo wa kazi wa uangalifu, mifumo fulani ya vurugu huizidi Codex mara kwa mara.

Kelele za mapambo ndizo tatizo kubwa zaidi. Faili za Figma mara nyingi hujumuisha mwanga wa mandhari (background glows), mifano ya bar ya hali (status bar templates), na ikoni za picha ambazo si sehemu ya kiolesle cha kazi. Bila lebo za wazi, AI huandika kodi hizo kama vipengele vya kudumu vya DOM. Unajikuta na lebo za div maalum kwa ajili ya miduara iliyofifia ambayo ingekuwa background ya CSS au box-shadow.

Mpangilio ulioponyooka (flattened hierarchy) unaharibu utambuzi wa vipengele. Katika faili safi, kadi ni fremu ya auto-layout inayojumuisha picha, kichwa cha habari, na kitendo. Katika faili iliyovurugika, vipengele hivyo vitatu vinaweza kuwa katika kiwango cha msingi, vikiwa vimepangwa kwa macho lakini vimekatiliwa kimuundo. Codex inakosa mipaka ya kadi kabisa na kutoa mfuatano wa vipengele ulionyooka bila mzazi (parent) wa pamoja.

Kutenganisha Ishara na Kelele

Rasimu hii inazua maswali mahususi ambayo kila mwanatengenezaji anakumbana nayo anapounganisha usanifu na kodi inayozalishwa na AI.

Je, unaamini zaidi metadata ya Figma au picha za skrini (screenshots)?

Amini zote mbili, lakini kwa kazi tofauti. Tumia metadata ya Figma kwa thamani sahihi: rangi, ukubwa wa fonti, spacing tokens, na exported assets. Screenshots hushinda katika muundo na visual hierarchy. Ikiwa metadata inasema layer ipo kwenye x: 120, y: 300, lakini screenshot inaonyesha imekaa katikati ya kadi, amini screenshot kwa layout na metadata kwa styling. Acha screenshot iwe ukweli wako wa msingi. Acha inspect panel ijaze thamani sahihi.

Unatenganishaje UI na fremu za kifaa?

Kabla ya ku-export kitu chochote, ficha kila layer ambayo si UI. Chagua phone mockup au desktop chrome na uzime visibility. Ikiwa faili limevurugika sana kiasi cha kushindwa kutambua ni template na ni content, tafuta vipengele vinavyojirudia kwenye skrini nyingi. Status bar, home indicator, na navigation shell kwa kawaida hukaa katika nafasi zinazofanana. Vitufe (buttons) halisi, fomu, na content hukaa katikati ambako kuna mabadiliko. Ficha kila kitu kinachoonekana kuwa fixed kwenye kila skrini. Kinachobaki ndicho interface yako halisi.

Unatafutaje mipaka ya component kwenye faili mbaya?

Tafuta visual clustering, kisha thibitisha kwa spacing. Ikiwa vipengele vinne vimekaa pamoja kwa nafasi ya 16px inayolingana na vinashiriki background fill inayofanana, pengine vinapaswa kuwa kwenye container moja hata kama designer hakuvijumuisha (grouped). Angalia Figma layer list kwa consecutive stacking.