AI సెకన్లలోనే ఒక ఫంక్షనల్ React appను సిద్ధం చేయగలదు, మరియు GeekyAnts వంటి సాధనాలు ఆ కొత్తగా జనరేట్ చేయబడిన కోడ్ను డిజైన్ సిస్టమ్ యొక్క నిర్మాణాన్ని కోల్పోకుండా తిరిగి Figmaలోకి తీసుకురావడానికి వీలు కల్పిస్తాయని వాదిస్తున్నాయి. AI ద్వారా వ్రాసిన కోడ్ కనిపించిన ప్రతిసారీ డిజైన్ టీమ్లు మొదటి నుండి ప్రారంభించాల్సి రావడం వల్ల, రీడిజైన్ సమయం మరియు ఖర్చు పెరుగుతాయి, అందుకే ఈ వాదన ముఖ్యం.
సంవత్సరాలుగా, హ్యాండ్-ఆఫ్ ప్రక్రియ కాగితంపై సరళంగా కనిపించేది: డిజైనర్లు Figmaలో స్క్రీన్లను రూపొందించేవారు, డెవలపర్లు ఆ స్క్రీన్లను కోడ్గా మార్చేవారు, మరియు ప్రతి పక్షం తమ స్వంత లేఅవుట్ కాపీని కలిగి ఉండేది. AI-ఆధారిత కోడ్ జనరేటర్లు ఆ క్రమాన్ని చెడగొట్టాయి. ఒక AI ఇంజిన్ సిద్ధంగా ఉన్న React ప్రాజెక్ట్ను అందిస్తుంది, కానీ ఫలితంగా వచ్చిన కాంపోనెంట్లను అసలు డిజైన్ ఫైల్లోకి దిగుమతి చేసుకోవడానికి సరళమైన మార్గం లేదు. దీని ఫలితంగా "code-first, design-later" అనే బాధాకరమైన లూప్ ఏర్పడుతుంది, ఇది ఉమ్మడి డిజైన్ లాంగ్వేజ్ను దెబ్బతీస్తుంది మరియు మెయింటెనెన్స్ ఖర్చును పెంచుతుంది.
DOM ఎందుకు సరిపోదు
చాలా రివర్స్-ఇంజనీరింగ్ సాధనాలు బ్రౌజర్ యొక్క HTML ఎలిమెంట్స్ యొక్క ప్రాతినిధ్యమైన Document Object Model (DOM)తో ప్రారంభమవుతాయి. DOM ప్రతి విజువల్ భాగాన్ని ఒక సాధారణ <div లేదా <span>గా పరిగణిస్తుంది. అది ఒక బటన్ను మరియు కార్డ్ను వేరు చేయలేదు, లేదా ఒక సెట్ ఎలిమెంట్స్ డిజైన్ సిస్టమ్లోని మాస్టర్ కాంపోనెంట్కు చెందినవా కాదా అని కూడా తెలియదు. ఒక పేజీలో పది బటన్లు ఉన్నప్పుడు, DOM కేవలం పది అనోనిమస్ లేయర్లను మాత్రమే రిపో
ఉపరితల స్థాయి DOM కి బదులుగా React యొక్క అంతర్గత Fiber tree ని చదవడం వల్ల, బాధాకరమైన “code-first, design-later” లూప్ రెండు వైపులా సాగే మార్గంగా మారుతుంది. AI-generated యాప్లను, component structure కోల్పోకుండా ఇప్పుడు తిరిగి Figma లోకి తీసుకురావచ్చు. Design drift మరియు పెరుగుతున్న maintenance costs తో పోరాడుతున్న టీమ్స్ కోసం, ఆ మార్పు ఒక గందరగోళమైన redesign sprint కి మరియు క్రమబద్ధమైన, component-first workflow కి మధ్య ఉన్న తేడాను సూచించవచ్చు.