તમે final_FINAL_v3 ટેગ કરેલી Figma ફાઇલ ખોલી છે અને તેના બદલે તમને ત્રીસ નામ વગરના ફ્રેમ્સ, એક લોક કરેલી બેકગ્રાઉન્ડ લેયર અને એક ગ્રુપની અંદર નેસ્ટેડ બટન મળે છે જેમાં એક રેન્ડમ ડેકોરેટિવ સર્કલ પણ છે. આ બાબત કોઈ સ્વીકારવા માંગતું નથી તેના કરતાં વધુ સામાન્ય છે. જ્યારે તમે આ અરાજકતાને Codex જેવા AI કોડિંગ ટૂલમાં નાખો છો, ત્યારે આઉટપુટ ઇનપુટનું જ પ્રતિબિંબ પાડે છે. મોટા લેંગ્વેજ મોડલ્સ હોવા છતાં પણ, "Garbage in, garbage out" હજુ પણ લાગુ પડે છે.

અસ્તવ્યસ્ત હેન્ડઓફનું બંધારણ

ડિઝાઇનર્સ ઝડપથી કામ કરે છે. તેઓ ફ્રેમ્સ ડુપ્લીકેટ કરે છે, જૂના એક્સપ્લોરેશન દેખાતા રહે છે અને સ્ટ્રક્ચર્ડ ઓટો-લેઆઉટને બદલે માત્ર અંદાજિત એલાઈનમેન્ટ પર આધાર રાખે છે. પરિણામે, ફંક્શનલ બટન્સની બાજુમાં "Frame 3827" જેવા લેયરના નામ જોવા મળે છે. તમારા પ્રાઇમરી કોલ-ટુ-એક્શન સાથે જ ડેકોરેટિવ ગ્રેડિયન્ટ બ્લોબ્સ પણ એક જ ગ્રુપમાં હોય છે. ડિવાઇસ મોકઅપ્સ વાસ્તવિક ઇન્ટરફેસને એવા ક્રોમમાં લપેટી દે છે જે કન્ટેન્ટ જેવું લાગે છે. છુપાયેલા લેયર્સ ફાઇલમાં દેખાતા રહે છે, જે કોઈપણ ઓટોમેટેડ પાર્સરને મૂંઝવણમાં મૂકવા માટે તૈયાર હોય છે.

Codex નો ઉપયોગ કરનાર ડેવલપર માટે, સમસ્યા બંને પક્ષોની આળસ નથી. AI પાસે માનવીય પેટર્ન ઓળખવાની ક્ષમતા નથી. તે લેયર ટ્રીને શબ્દશઃ વાંચે છે. જ્યારે ડિઝાઇનર એક ફ્લેટન કરેલા ગ્રુપમાં બટન, હેડલાઇન અને બેકગ્રાઉન્ડ બ્લર મૂકે છે, ત્યારે Codex તેને સમાન સ્ટ્રક્ચરલ વજન ધરાવતા સભ્યો (siblings) તરીકે ગણે છે. પરિણામે, તમે કલર્સની સમીક્ષા કરો તે પહેલાં જ ફ્રન્ટએન્ડ સ્ટ્રક્ચરલ રીતે તૂટેલું લાગે છે.

તમને સફળતાની નજીક લઈ જાય તેવો વર્કફ્લો

જો તમે માત્ર કન્વર્ટર તરીકે નહીં પણ એડિટર તરીકે કામ કરો, તો તમે અસ્તવ્યસ્ત સ્ત્રોતમાંથી પણ ક્લીન કોડ મેળવી શકો છો. ધ્યેય Codex ને પૂરતો સંદર્ભ (context) આપવાનો છે જેથી તે યોગ્ય અનુમાન લગાવી શકે, અને પછી તે અનુમાનોને મર્યાદિત કરવાના છે જેથી તેઓ સમજદારીપૂર્વકના ફ્રન્ટએન્ડ આર્કિટેક્ચરની અંદર રહે.

AI તે જુએ તે પહેલાં બધું જ એક્સટ્રેક્ટ કરો. જો તમારી પાસે એક્સેસ હોય તો Dev Mode ચાલુ કરો. ઇન્સ્પેક્ટ પેનલમાંથી રો (raw) CSS પ્રોપર્ટીઝ કોપી કરો. કલર વેરિયેબલ્સ અને ટેક્સ્ટ સ્ટાઇલ્સ એક્સપોર્ટ કરો. આ સ્ટ્રક્ચર્ડ ડેટાને તમારા પ્રોમ્પ્ટની સાથે Codex માં આપો. સ્ક્રીનશોટ્સ સ્પેસિયલ સત્ય બતાવે છે; મેટાડેટા તમને ચોક્કસ હેક્સ કોડ્સ, ફોન્ટ સ્ટેક્સ અને લાઇન હાઇટ્સ આપે છે. એક વગર બીજું હોવાથી મોડેલ અડધા સમીકરણમાં અનુમાન લગાવવા મજબૂર બને છે.

તમારા પ્રોમ્પ્ટ્સમાં લેઆઉટ સિસ્ટમ્સ બાબતે કડક રહો. Codex ને ક્યારેય ફક્ત "આ પેજ કોડ કરો" એમ ન કહો. તેને ચોક્કસ જણાવો કે શું વાપરવું: "Build the navigation with CSS Flexbox and the dashboard grid with CSS Grid. Do not use absolute positioning unless you are placing the notification badge relative to the icon." AI ટૂલ્સ ઘણીવાર એબ્સોલ્યુટ પોઝિશનિંગનો ઉપયોગ કરે છે કારણ કે તેઓ ડિઝાઇન ફાઇલમાંથી સીધા જ ફિક્સ્ડ x-y કોઓર્ડિનેટ્સ વાંચે છે. સ્પષ્ટ સૂચનાઓ આ વલણને રોકી શકે છે.

સ્ક્રીનશોટ્સનો ઉપયોગ ગાર્ડરેલ્સ તરીકે કરો. ફ્રેમ્સને 2x રિઝોલ્યુશન પર એક્સપોર્ટ કરો. તેને તમારા ટેક્સ્ટ કોન્ટેક્સ્ટની સાથે અપલોડ કરો. જ્યારે Codex તેનું પ્રથમ પાસ જનરેટ કરે, ત્યારે પરિણામને બ્રાઉઝરમાં સ્ક્રીનશોટની બાજુમાં ખોલો. સ્પેસિંગ ડ્રિફ્ટ, ખૂટતા બોર્ડર્સ અને ફોન્ટ વજનના તફાવત તપાસો. AI સામાન્ય રીતે વ્યાપક રચનાને યોગ્ય રીતે પકડી લેશે પરંતુ ચોક્કસ પેડિંગમાં ભૂલ કરી શકે છે.

સુધારા માટે આયોજન કરો. રેન્ડર થયેલ આઉટપુટની તમારી વિઝ્યુઅલ રેફરન્સ સાથે સરખામણી કરો અને ભૂલો જાતે સુધારો. AI ટેક્સ્ટ લેબલને ઇમેજ ટેગમાં બદલી શકે છે અથવા <article> કે <section> ને બદલે કાર્ડને સામાન્ય div માં લપેટી શકે છે. આ રિવ્યુ પાસ વૈકલ્પિક નથી. આ એ તબક્કો છે જ્યાં તમે જનરેટ થયેલા કોડને પ્રોડક્શન કોડમાં ફેરવો છો.

જ્યાં AI ભૂલ કરે છે

સાવધ વર્કફ્લો હોવા છતાં, અમુક અસ્તવ્યસ્ત પેટર્ન સતત Codex ને મૂંઝવણમાં મૂકે છે.

ડેકોરેટિવ નોઈઝ એ સૌથી મોટું જોખમ છે. Figma ફાઇલોમાં ઘણીવાર બેકગ્રાઉન્ડ ગ્લો, સ્ટેટસ બાર ટેમ્પ્લેટ્સ અને ઇલસ્ટ્રેટિવ આઇકોન્સ હોય છે જે ફંક્શનલ ઇન્ટરફેસનો ભાગ નથી હોતા. સ્પષ્ટ લેબલ્સ વગર, AI તેને કાયમી DOM એલિમેન્ટ્સ તરીકે કોડ કરે છે. પરિણામે, તમે બ્લર્ડ સર્કલ્સ માટે સમર્પિત div ટેગ્સ મેળવો છો જેનો ઉપયોગ CSS background અથવા box-shadow તરીકે થવો જોઈતો હતો.

ફ્લેટન થયેલ હાયરાર્કી કમ્પોનન્ટ ડિટેક્શનને તોડે છે. એક ક્લીન ફાઇલમાં, કાર્ડ એ ઇમેજ, ટાઇટલ અને એક્શન ધરાવતો ઓટો-લેઆઉટ ફ્રેમ છે. એક અસ્તવ્યસ્ત ફાઇલમાં, આ ત્રણેય એલિમેન્ટ્સ રૂટ લેવલ પર હોઈ શકે છે, જે વિઝ્યુઅલી એલાઈન હોય છે પરંતુ સ્ટ્રક્ચરલ રીતે અલગ (orphaned) હોય છે. Codex કાર્ડની સીમાને સંપૂર્ણપણે ચૂકી જાય છે અને કોઈ શેર કરેલા પેરેન્ટ વગર એલિમેન્ટ્સનો સપાટ સિક્વન્સ આઉટપુટ કરે છે.

સિગ્નલને નોઈઝથી અલગ પાડવું

આ ડ્રાફ્ટ એ ચોક્કસ પ્રશ્નો ઉભા કરે છે જે ડિઝાઇન અને AI-જનરેટેડ કોડ વચ્ચે સેતુ બાંધતી વખતે દરેક ડેવલપરનો સામનો કરે છે.

શું તમે Figma મેટાડેટા પર વધુ વિશ્વાસ કરો છો કે સ્ક્રીનશોટ્સ પર?

બંને પર વિશ્વાસ કરો, પરંતુ અલગ-અલગ કાર્યો માટે. ચોક્કસ કિંમતો માટે Figma metadata નો ઉપયોગ કરો: colors, font sizes, spacing tokens, અને exported assets. સ્ટ્રક્ચર અને visual hierarchy માટે સ્ક્રીનશોટ્સ શ્રેષ્ઠ છે. જો metadata કહે છે કે લેયર x: 120, y: 300 પર છે, પરંતુ સ્ક્રીનશોટ તેને કાર્ડની અંદર સેન્ટરમાં બતાવે છે, તો layout માટે સ્ક્રીનશોટ પર અને styling માટે metadata પર વિશ્વાસ કરો. સ્ક્રીનશોટને તમારા ground truth તરીકે ઉપયોગમાં લો. Inspect panel ને ચોક્કસ કિંમતો ભરવા દો.

તમે UI ને device frames થી કેવી રીતે અલગ કરો છો?

કંઈપણ એક્સપોર્ટ કરતા પહેલા, દરેક non-UI layer ને છુપાવો. Phone mockup અથવા desktop chrome પસંદ કરો અને visibility બંધ કરો. જો ફાઇલ એટલી અસ્તવ્યસ્ત હોય કે ટેમ્પલેટ અને કન્ટેન્ટ વચ્ચેનો તફાવત ન સમજાય, તો મલ્ટીપલ સ્ક્રીન્સ પર પુનરાવર્તિત થતા એલિમેન્ટ્સ શોધો. Status bar, home indicator, અને navigation shell સામાન્ય રીતે સમાન સ્થાનો પર હોય છે. વાસ્તવિક buttons, forms, અને content બદલાતા મધ્ય ભાગમાં હોય છે. દરેક સ્ક્રીન પર જે fixed દેખાય છે તે બધું જ છુપાવી દો. જે બાકી રહેશે તે તમારું અસલી interface હશે.

ખરાબ ફાઇલમાં તમે component boundaries કેવી રીતે શોધો છો?

Visual clustering શોધો, પછી spacing સાથે તેની ચકાસણી કરો. જો ચાર એલિમેન્ટ્સ સતત 16px ના ગેપ સાથે સાથે હોય અને સમાન background fill ધરાવતા હોય, તો તે કદાચ એક જ container માં હોવા જોઈએ, ભલે ડિઝાઇનરે તેમને ગ્રુપ ન કર્યા હોય. Consecutive stacking માટે Figma layer list તપાસો.