మీరు final_FINAL_v3 అని ట్యాగ్ చేయబడిన ఒక Figma ఫైల్‌ను తెరిచినప్పుడు, అందులో ముప్పై పేరు లేని ఫ్రేమ్‌లు, ఒక లాక్ చేయబడిన బ్యాక్‌గ్రౌండ్ లేయర్ మరియు ఒక రాండమ్ డెకరేటివ్ సర్కిల్‌తో కూడిన గ్రూప్‌లో ఉన్న బటన్ కనిపిస్తే ఎలా ఉంటుంది? ఇది ఎవరూ ఒప్పుకోవడానికి ఇష్టపడనంత సాధారణమైన విషయం. మీరు ఆ గందరగోళాన్ని Codex వంటి AI కోడింగ్ టూల్‌కు ఇన్‌పుట్‌గా ఇచ్చినప్పుడు, అవుట్‌పుట్ కూడా అలాగే ఉంటుంది. లార్జ్ లాంగ్వేజ్ మోడల్స్ ఉన్నప్పటికీ, "Garbage in, garbage out" (చెత్త ఇస్తే చెత్తే వస్తుంది) అనే సూత్రం ఇక్కడ కూడా వర్తిస్తుంది.

గందరగోళమైన హ్యాండోఫ్ యొక్క విశ్లేషణ

డిజైనర్లు వేగంగా పనిచేస్తారు. వారు ఫ్రేమ్‌లను డూప్లికేట్ చేస్తారు, పాత ఎక్స్‌ప్లోరేషన్లను అలాగే ఉంచుతారు మరియు స్ట్రక్చర్డ్ ఆటో-లేఅవుట్‌కు బదులుగా కేవలం కంటితో చూసి అలైన్ చేస్తారు. దీనివల్ల ఫంక్షనల్ బటన్‌ల పక్కన "Frame 3827" వంటి లేయర్ పేర్లు కనిపిస్తాయి. మీ ప్రైమరీ కాల్-టు-యాక్షన్ (call-to-action) ఉన్న గ్రూప్‌లోనే డెకరేటివ్ గ్రేడియంట్ బ్లోబ్స్ కూడా ఉంటాయి. డివైజ్ మోకప్‌లు అసలు ఇంటర్‌ఫేస్‌ను కంటెంట్‌లా కనిపించే క్రోమ్ (chrome) తో చుట్టి ఉంచుతాయి. దాగి ఉన్న లేయర్‌లు ఫైల్‌లో కనిపిస్తూనే ఉండి, ఏదైనా ఆటోమేటెడ్ పార్సర్‌ను అయోమయానికి గురిచేసేలా ఉంటాయి.

Codex ఉపయోగించే డెవలపర్‌కు, ఈ సమస్య ఇరుపక్షాల బద్ధకం వల్ల కలిగేది కాదు. AIకి మానవ నమూనా గుర్తింపు (pattern recognition) సామర్థ్యం ఉండదు. అది లేయర్ ట్రీని అక్షరాలా చదువుతుంది. ఒక డిజైనర్ ఒక బటన్, హెడ్‌లైన్ మరియు బ్యాక్‌గ్రౌండ్ బ్లర్‌ను ఒకే ఫ్లాటెన్డ్ గ్రూప్‌లో ఉంచినప్పుడు, Codex వాటిని సమానమైన స్ట్రక్చరల్ వెయిట్‌తో ఉన్న సిబ్లింగ్స్‌గా పరిగణిస్తుంది. దీని ఫలితంగా, మీరు రంగులను పరిశీలించకముందే ఫ్రంటెండ్ స్ట్రక్చరల్ పరంగా విచ్ఛిన్నమైనట్లు కనిపిస్తుంది.

మీకు దగ్గరగా ఫలితాన్ని అందించే వర్క్‌ఫ్లో

మీరు కేవలం ఒక కన్వర్టర్‌లా కాకుండా, ఒక ఎడిటర్‌లా వ్యవహరిస్తే, గందరగోళమైన మూలం నుండి కూడా క్లీన్ కోడ్‌ను అందించవచ్చు. Codexకి తగినంత సందర్భాన్ని (context) ఇచ్చి, సరైన అంచనాలు వేయడానికి సహాయపడటం మరియు ఆ అంచనాలు అర్థవంతమైన ఫ్రంటెండ్ ఆర్కిటెక్చర్‌లోనే ఉండేలా నియంత్రించడం మీ లక్ష్యం కావాలి.

AI చూడకముందే అన్నింటినీ సంగ్రహించండి (Extract). మీకు యాక్సెస్ ఉంటే Dev Mode ఆన్ చేయండి. Inspect ప్యానెల్ నుండి రా ఫ్రంట్ CSS ప్రాపర్టీలను కాపీ చేయండి. కలర్ వేరియబుల్స్ మరియు టెక్స్ట్ స్టైల్స్‌ను ఎక్స్‌పోర్ట్ చేయండి. ఈ స్ట్రక్చర్డ్ డేటాను మీ ప్రాంప్ట్‌తో పాటు Codexకి అందించండి. స్క్రీన్‌షాట్‌లు స్పేషియల్ ట్రూత్‌ను (spatial truth) చూపుతాయి; మెటాడేటా మీకు ఖచ్చితమైన hex కోడ్‌లు, ఫాంట్ స్టాక్స్ మరియు లైన్ హైట్‌లను అందిస్తుంది. ఈ రెండిటిలో ఒకటి లేకపోతే, మోడల్ సగం సమాచారంపై అంచనాలు వేయాల్సి వస్తుంది.

మీ ప్రాంప్ట్‌లలో లేఅవుట్ సిస్టమ్స్ విషయంలో కచ్చితంగా ఉండండి. Codexని కేవలం "ఈ పేజీని కోడ్ చేయి" అని ఎప్పుడూ అడగకండి. దానికి ఖచ్చితంగా ఏమి ఉపయోగించాలో చెప్పండి: "CSS Flexboxతో నావిగేషన్‌ను మరియు CSS Gridతో డ్యాష్‌బోర్డ్ గ్రిడ్‌ను నిర్మించు. ఐకాన్‌కు రిలేటివ్‌గా నోటిఫికేషన్ బ్యాడ్జ్‌ను ఉంచేటప్పుడు తప్ప, అబ్సల్యూట్ పొజిషనింగ్‌ను ఉపయోగించవద్దు." AI టూల్స్ తరచుగా అబ్సల్యూట్ పొజిషనింగ్‌ను ఉపయోగిస్తాయి, ఎందుకంటే అవి డిజైన్ ఫైల్ నుండి నేరుగా ఫిక్స్‌డ్ x-y కోఆర్డినేట్‌లను విశ్లేషిస్తాయి. స్పష్టమైన సూచనలు ఆ ధోరణిని మారుస్తాయి.

స్క్రీన్‌షాట్‌లను గార్డ్‌రైల్స్‌గా ఉపయోగించండి. ఫ్రేమ్‌లను 2x రిజల్యూషన్‌లో ఎక్స్‌పోర్ట్ చేయండి. వాటిని మీ టెక్స్ట్ కాంటెక్స్ట్‌తో పాటు అప్‌లోడ్ చేయండి. Codex మొదటి ప్రయత్నంలో కోడ్‌ను జనరేట్ చేసినప్పుడు, ఫలితాన్ని బ్రౌజర్‌లో స్క్రీన్‌షాట్ పక్కన ఓపెన్ చేయండి. స్పేసింగ్ తేడాలు, మిస్సింగ్ బోర్డర్‌లు మరియు ఫాంట్ వెయిట్ అసమతుల్యతలను గమనించండి. AI సాధారణంగా మొత్తం కాంపోజిషన్‌ను సరిగ్గా పట్టుకుంటుంది కానీ నిర్దిష్ట పాడింగ్‌ను (padding) తప్పుగా చేయవచ్చు.

సవరణ కోసం ప్రణాళిక సిద్ధం చేసుకోండి. రెండర్ అయిన అవుట్‌పుట్‌ను మీ విజువల్ రిఫరెన్స్‌తో పోల్చి చూడండి మరియు తప్పులను మాన్యువల్‌గా సరిదిద్దండి. AI ఒక టెక్స్ట్ లేబుల్‌ను ఇమేజ్ ట్యాగ్‌గా మార్చవచ్చు లేదా ఒక కార్డ్‌ని <article> లేదా <section> కు బదులుగా సాధారణ div లో చుట్టవచ్చు. ఈ రివ్యూ ప్రక్రియ తప్పనిసరి. జనరేట్ చేయబడిన కోడ్‌ను ప్రొడక్షన్ కోడ్‌గా మార్చే దశ ఇదే.

AI ఎక్కడ తప్పులు చేస్తుంది

జాగ్రత్తగా వర్క్‌ఫ్లో ఉన్నప్పటికీ, కొన్ని గందరగోళమైన ప్యాటర్న్‌లు Codexని నిరంతరం తప్పుదారి పట్టిస్తాయి.

డెకరేటివ్ నాయిస్ (Decorative noise) అనేది అతిపెద్ద సమస్య. Figma ఫైల్‌లలో తరచుగా బ్యాక్‌గ్రౌండ్ గ్లోస్, స్టేటస్ బార్ టెంప్లేట్లు మరియు ఫంక్షనల్ ఇంటర్‌ఫేస్‌లో భాగం కాని ఇలస్ట్రేటివ్ ఐకాన్‌లు ఉంటాయి. స్పష్టమైన లేబుల్‌లు లేకపోతే, AI వాటిని శాశ్వత DOM ఎలిమెంట్స్‌గా కోడ్ చేస్తుంది. దీనివల్ల CSS background లేదా box-shadow గా ఉండాల్సిన బ్లర్డ్ సర్కిల్స్ కోసం ప్రత్యేక div ట్యాగ్‌లు ఏర్పడతాయి.

ఫ్లాటెన్డ్ హైరార్కీ (Flattened hierarchy) కాంపోనెంట్ డిటెక్షన్‌ను దెబ్బతీస్తుంది. ఒక క్లీన్ ఫైల్‌లో, ఒక కార్డ్ అనేది ఇమేజ్, టైటిల్ మరియు యాక్షన్ కలిగిన ఒక ఆటో-లేఅవుట్ ఫ్రేమ్. ఒక గందరగోళమైన ఫైల్‌లో, ఆ మూడు ఎలిమెంట్స్ రూట్ లెవల్‌లో ఉండవచ్చు, అవి విజువల్‌గా అలైన్ చేయబడి ఉన్నప్పటికీ స్ట్రక్చరల్ పరంగా ఒంటరిగా ఉంటాయి. Codex కార్డ్ బౌండరీని పూర్తిగా గుర్తించలేక, ఎటువంటి షేర్డ్ పేరెంట్ లేకుండా ఎలిమెంట్స్ యొక్క ఫ్లాట్ సీక్వెన్స్‌ను అవుట్‌పుట్‌గా ఇస్తుంది.

సిగ్నల్‌ను నాయిస్ నుండి వేరు చేయడం

డిజైన్ మరియు AI-జనరేటెడ్ కోడ్‌ను అనుసంధానించేటప్పుడు ప్రతి డెవలపర్ ఎదుర్కొనే కొన్ని నిర్దిష్ట ప్రశ్నలను ఈ డ్రాఫ్ట్ లేవనెత్తుతుంది.

మీరు Figma మెటాడేటాను ఎక్కువగా నమ్ముతారా లేదా స్క్రీన్‌షాట్‌లను ఎక్కువగా నమ్ముతారా?

రెండింటినీ నమ్మండి, కానీ వేర్వేరు పనుల కోసం. ఖచ్చితమైన విలువలు: రంగులు, ఫాంట్ సైజులు, స్పేసింగ్ టోకెన్లు మరియు ఎగుమతి చేసిన అసెట్స్ కోసం Figma మెటాడేటాను ఉపయోగించండి. నిర్మాణం మరియు విజువల్ హైరార్కీ విషయంలో స్క్రీన్‌షాట్‌లే ఉత్తమం. ఒకవేళ మెటాడేటా ప్రకారం ఒక లేయర్ x: 120, y: 300 వద్ద ఉంటే, కానీ స్క్రీన్‌షాట్‌లో అది ఒక కార్డ్ మధ్యలో ఉన్నట్లు కనిపిస్తే, లేఅవుట్ కోసం స్క్రీన్‌షాట్‌ను, స్టైలింగ్ కోసం మెటాడేటాను నమ్మండి. స్క్రీన్‌షాట్‌ను మీ ప్రాథమిక ఆధారంగా (ground truth) తీసుకోండి. ఖచ్చితమైన విలువలను తెలుసుకోవడానికి ఇన్‌స్పెక్ట్ ప్యానెల్‌ను ఉపయోగించండి.

UIని డివైజ్ ఫ్రేమ్‌ల నుండి ఎలా వేరు చేయాలి?

మీరు దేనినైనా ఎగుమతి (export) చేసే ముందు, UI కాని ప్రతి లేయర్‌ను దాచిపెట్టండి. ఫోన్ మోకప్ లేదా డెస్క్‌టాప్ క్రోమ్‌ను ఎంచుకుని, విజిబిలిటీని (visibility) ఆఫ్ చేయండి. ఫైల్ చాలా గందరగోళంగా ఉండి, ఏది టెంప్లేట్, ఏది కంటెంట్ అని తెలియకపోతే, బహుళ స్క్రీన్‌లపై పునరావృతమయ్యే ఎలిమెంట్స్ కోసం వెతకండి. స్టేటస్ బార్, హోమ్ ఇండికేటర్ మరియు నావిగేషన్ షెల్ సాధారణంగా ఒకే స్థానాల్లో ఉంటాయి. అసలైన బటన్లు, ఫారమ్‌లు మరియు కంటెంట్ మారుతూ ఉండే మధ్య భాగంలో ఉంటాయి. ప్రతి స్క్రీన్‌పై స్థిరంగా కనిపించే ప్రతిదాన్ని దాచిపెట్టండి. మిగిలినదే మీ అసలైన ఇంటర్‌ఫేస్.

గందరగోళంగా ఉన్న ఫైల్‌లో కాంపోనెంట్ బౌండరీలను ఎలా కనుగొనాలి?

విజువల్ క్లస్టరింగ్ (visual clustering) కోసం చూడండి, ఆపై స్పేసింగ్‌తో సరిచూసుకోండి. ఒకవేళ నాలుగు ఎలిమెంట్స్ స్థిరమైన 16px గ్యాప్‌లతో కలిసి ఉండి, ఒకే రకమైన బ్యాక్‌గ్రౌండ్ ఫిల్ (background fill) కలిగి ఉంటే, డిజైనర్ వాటిని గ్రూప్ చేయకపోయినా, అవి బహుశా ఒకే కంటైనర్‌కు చెందినవి అయి ఉండవచ్చు. వరుసగా స్టాకింగ్ (consecutive stacking) కోసం Figma లేయర్ లిస్ట్‌ను తనిఖీ చేయండి.