நீங்கள் final_FINAL_v3 என்று குறிக்கப்பட்ட ஒரு Figma கோப்பைத் திறக்கிறீர்கள், ஆனால் அங்கு பெயரிடப்படாத முப்பது பிரேம்கள் (frames), லாக் செய்யப்பட்ட ஒரு பின்னணி அடுக்கு (locked background layer) மற்றும் ஒரு அலங்கார வட்டத்துடன் இணைக்கப்பட்ட ஒரு குழுவிற்குள் (group) ஒரு பட்டன் இருப்பதை மட்டுமே காண்கிறீர்கள். இதை யாரும் ஒப்புக்கொள்ள விரும்பாத அளவுக்கு இது மிகவும் பொதுவானது. அந்த குழப்பமான தரவை Codex போன்ற ஒரு AI கோடிங் கருவிக்கு வழங்கும்போது, அதன் வெளியீடும் உள்ளீட்டைப் போலவே இருக்கும். பெரிய மொழி மாதிரிகளிடம் (large language models) கூட, "Garbage in, garbage out" (தவறான உள்ளீடு, தவறான வெளியீடு) என்ற விதி இப்போதும் பொருந்தும்.
ஒரு குழப்பமான ஹேண்ட்ஆஃப் (Handoff) என்பதன் கட்டமைப்பு
வடிவமைப்பாளர்கள் வேகமாக வேலை செய்கிறார்கள். அவர்கள் பிரேம்களை நகலெடுக்கிறார்கள் (duplicate), பழைய ஆய்வுகளை அப்படியே விட்டுவிடுகிறார்கள், மேலும் கட்டமைக்கப்பட்ட auto-layout-க்கு பதிலாக வெறும் பார்வையின் அடிப்படையிலான சீரமைப்பை (eyeball alignment) நம்பியிருக்கிறார்கள். செயல்பாட்டு பட்டன்களுக்கு (functional buttons) அருகில் "Frame 3827" போன்ற அடுக்கு பெயர்களை (layer names) நீங்கள் காண்பீர்கள். அலங்காரமான கிரேடியன்ட் பிளாப்கள் (gradient blobs), உங்கள் முதன்மையான call-to-action பட்டனுடன் ஒரே குழுவில் இருக்கும். சாதனத்தின் மாதிரிகள் (Device mockups), உண்மையான இடைமுகத்தை (interface) உள்ளடக்கமாகத் தோன்றும் ஒரு 'chrome'-க்குள் மறைத்து வைத்திருக்கும். மறைக்கப்பட்ட அடுக்குகள் (Hidden layers) கோப்பில் அப்படியே இருக்கும், அவை ஏதேனும் ஒரு தானியங்கி பார்ஸரை (automated parser) குழப்பக் காத்திருக்கின்றன.
Codex பயன்படுத்தும் ஒரு டெவலப்பரைப் பொறுத்தவரை, பிரச்சனை இரு தரப்பிலும் உள்ள சோம்பேறித்தனம் அல்ல. AI-க்கு மனிதர்களைப் போன்ற வடிவங்களைக் கண்டறியும் திறன் (pattern recognition) இல்லை. அது அடுக்கு மரத்தை (layer tree) அப்படியே நேரடித் தரவாகப் படிக்கிறது. ஒரு வடிவமைப்பாளர் ஒரு பட்டன், ஒரு தலைப்பு மற்றும் ஒரு பின்னணி மங்கலை (background blur) ஒரே தட்டையான குழுவிற்குள் (flattened group) வைக்கும்போது, Codex அவற்றை சமமான கட்டமைப்பு எடையுள்ள (structural weight) உடன் பிறந்தவர்களாகக் கருதுகிறது. இதன் விளைவாக, நீங்கள் நிறங்களைச் சரிபார்க்கும் முன்பே, கட்டமைப்பு ரீதியாகப் பிழையான ஒரு பிரண்ட்எண்ட் (frontend) உருவாகிறது.
உங்களை இலக்கை நெருங்கச் செய்யும் ஒரு பணிப்பாய்வு (Workflow)
நீங்கள் ஒரு சாதாரண மாற்றியாக (converter) இல்லாமல், ஒரு எடிட்டராகச் செயல்பட்டால், குழப்பமான மூலத்திலிருந்து கூட சுத்தமான குறியீட்டை (clean code) உருவாக்க முடியும். Codex-க்குத் தேவையான சூழலை (context) வழங்கி, அது சரியான யூகங்களைச் செய்யச் செய்வதே குறிக்கோள்; பின்னர் அந்த யூகங்கள் முறையான பிரண்ட்எண்ட் கட்டமைப்பிற்குள் (frontend architecture) இருக்குமாறு கட்டுப்படுத்த வேண்டும்.
AI பார்ப்பதற்கு முன்பே அனைத்தையும் பிரித்தெடுங்கள். உங்களிடம் அனுமதி இருந்தால் Dev Mode-ஐ ஆன் செய்யவும். Inspect panel-லிருந்து மூல CSS பண்புகளை (raw CSS properties) நகலெடுக்கவும். வண்ண மாறிகள் (color variables) மற்றும் உரை பாணிகளை (text styles) ஏற்றுமதி செய்யவும். இந்த கட்டமைக்கப்பட்ட தரவை உங்கள் ப்ராம்ப்ட்டுடன் (prompt) சேர்த்து Codex-க்கு வழங்கவும். ஸ்கிரீன்ஷாட்டுகள் இடஞ்சார்ந்த உண்மைகளைக் (spatial truth) காட்டுகின்றன; மெட்டாடேட்டா (metadata) உங்களுக்குத் துல்லியமான hex குறியீடுகள், எழுத்துரு அடுக்குகள் (font stacks) மற்றும் வரி இடைவெளிகளை (line heights) வழங்குகிறது. இவை இரண்டில் ஒன்று இல்லையென்றால், மாடல் பாதித் தகவல்களைக் கண்டறியத் தடுமாறும்.
உங்கள் ப்ராம்ப்ட்களில் லேஅவுட் அமைப்புகள் குறித்துத் தெளிவாக இருங்கள். Codex-இடம் "இந்த பக்கத்தை கோடிங் செய்" என்று மட்டும் கேட்காதீர்கள். எதைப் பயன்படுத்த வேண்டும் என்று துல்லியமாகச் சொல்லுங்கள்: "CSS Flexbox மூலம் நேவிகேஷனையும் (navigation), CSS Grid மூலம் டேஷ்போர்டு 그리ட்ஸையும் (dashboard grid) உருவாக்குங்கள். ஐகானுடன் தொடர்புடைய நோட்டிஃபிகேஷன் பேட்ஜை (notification badge) வைக்கும்போது தவிர, மற்ற இடங்களில் absolute positioning-ஐப் பயன்படுத்த வேண்டாம்." AI கருவிகள் பெரும்பாலும் டிசைன் கோப்பிலிருந்து நிலையான x-y ஆயத்தொலைவுகளை (coordinates) நேரடியாகப் படிப்பதால், அவை தானாகவே absolute positioning-ஐப் பயன்படுத்தத் தொடங்கும். தெளிவான அறிவுறுத்தல்கள் அந்தப் பழக்கத்தைத் தவிர்க்க உதவும்.
ஸ்கிரீன்ஷாட்டுகளைப் பாதுகாப்பு வேலிகளாகப் பயன்படுத்துங்கள். பிரேம்களை 2x ரெசல்யூஷனில் ஏற்றுமதி செய்யவும். அவற்றை உங்கள் உரைச் சூழலுடன் சேர்த்துப் பதிவேற்றவும். Codex தனது முதல் முயற்சியைச் செய்தவுடன், அதன் முடிவை ஒரு பிரவுசரில் ஸ்கிரீன்ஷாட்டுக்கு அருகில் திறந்து பார்க்கவும். இடைவெளி மாறுபாடுகள் (spacing drift), விடுபட்ட எல்லைகள் (missing borders) மற்றும் எழுத்துரு எடை முரண்பாடுகளை (font weight mismatches) கவனியுங்கள். AI பொதுவாகப் பொதுவான அமைப்பைச் சரியாகப் பிடிக்கும், ஆனால் குறிப்பிட்ட பேடிங் (padding) அளவுகளில் தவறு செய்யக்கூடும்.
திருத்துவதற்கானத் திட்டமிடலைச் செய்யுங்கள். திரையில் தோன்றும் வெளியீட்டை உங்கள் காட்சித் தரவோடு (visual reference) ஒப்பிட்டுப் பார்த்து, பிழைகளை நீங்களே சரிசெய்யுங்கள். AI ஒரு உரை லேபிளை (text label) ஒரு இமேஜ் டேக்-ஆக (image tag) மாற்றலாம் அல்லது ஒரு கார்டை (card) <article> அல்லது <section> என்பதற்குப் பதிலாக ஒரு பொதுவான div-க்குள் வைக்கலாம். இந்த மறுஆய்வு (review) கட்டாயமானது. உருவாக்கப்பட்ட குறியீட்டைத் தயாரிப்பு நிலை குறியீடாக (production code) மாற்றும் கட்டமே இதுவாகும்.
AI எங்கே தடுமாறுகிறது?
கவனமான பணிப்பாய்வு இருந்தாலும், சில குழப்பமான முறைகள் Codex-ஐத் தொடர்ந்து தடுமாறச் செய்கின்றன.
அலங்காரக் குழப்பங்கள் (Decorative noise) தான் மிகப்பெரிய சிக்கல். Figma கோப்புகளில் பெரும்பாலும் பின்னணி ஒளிவட்டங்கள் (background glows), ஸ்டேட்டஸ் பார் டெம்ப்ளேட்கள் மற்றும் செயல்பாட்டு இடைமுகத்தின் ஒரு பகுதியல்லாத விளக்கப்பட ஐகான்கள் இருக்கும். தெளிவான லேபிள்கள் இல்லையென்றால், AI அவற்றை நிரந்தர DOM கூறுகளாகக் கோடிங் செய்யும். CSS background அல்லது box-shadow-ஆக இருக்க வேண்டிய மங்கலான வட்டங்களுக்குத் தனித்தனி div டேக்குகள் உருவாகும்.
தட்டையான படிநிலை (Flattened hierarchy) கூறுகளைக் கண்டறிவதைத் தடுக்கிறது. ஒரு சுத்தமான கோப்பில், ஒரு கார்டு என்பது ஒரு படம், ஒரு தலைப்பு மற்றும் ஒரு செயலைக் கொண்ட ஓர் auto-layout பிரேம் ஆகும். ஒரு குழப்பமான கோப்பில், அந்த மூன்று கூறுகளும் ரூட் லெவலில் (root level) இருக்கலாம்; அவை பார்ப்பதற்குச் சீராகத் தெரிந்தாலும், கட்டமைப்பு ரீதியாகத் தனித்து விடப்பட்டிருக்கும். Codex அந்த கார்டின் எல்லையைத் தவறவிட்டு, எந்தப் பொதுவான பெற்றோர் (parent) உறுப்பும் இல்லாத ஒரு தட்டையான தொடராகக் கூறுகளின் வெளியீட்டைத் தரும்.
சிக்னலையும் இரைச்சலையும் பிரித்தல்
வடிவமைப்பு மற்றும் AI-ஆல் உருவாக்கப்பட்ட குறியீட்டிற்கு இடையே பாலமாகச் செயல்படும்போது ஒவ்வொரு டெவலப்பரும் எதிர்கொள்ளும் குறிப்பிட்ட கேள்விகளை இந்த வரைவு எழுப்புகிறது.
நீங்கள் Figma மெட்டாடேட்டாவை (metadata) அதிகம் நம்புகிறீர்களா அல்லது ஸ்கிரீன்ஷாட்டுகளை அதிகம் நம்புகிறீர்களா?
இரண்டையுமே நம்புங்கள், ஆனால் வெவ்வேறு பணிகளுக்குப் பயன்படுத்துங்கள். வண்ணங்கள், எழுத்துரு அளவுகள் (font sizes), இடைவெளி டோக்கன்கள் (spacing tokens) மற்றும் ஏற்றுமதி செய்யப்பட்ட சொத்துக்கள் (exported assets) போன்ற துல்லியமான மதிப்புகளுக்கு Figma metadata-வைப் பயன்படுத்துங்கள். அமைப்பு (structure) மற்றும் காட்சி படிநிலை (visual hierarchy) ஆகியவற்றில் ஸ்கிரீன்ஷாட்டுகள் (screenshots) சிறந்தவை. ஒரு லேயர் x: 120, y: 300 என்ற இடத்தில் இருப்பதாக metadata கூறினால், ஆனால் ஸ்கிரீன்ஷாட்டில் அது ஒரு கார்டிற்குள் (card) மையப்படுத்தப்பட்டதாகத் தெரிந்தால், லேஅவுட்டிற்கு (layout) ஸ்கிரீன்ஷாட்டையும், ஸ்டைலிங்கிற்கு (styling) metadata-வையும் நம்புங்கள். ஸ்கிரீன்ஷாட்டை உங்கள் அடிப்படை ஆதாரமாக (ground truth) வைத்துக்கொள்ளுங்கள். துல்லியமான மதிப்புகளைப் பெற 'inspect panel'-ஐப் பயன்படுத்துங்கள்.
UI-யை சாதனத்தின் பிரேம்களில் (device frames) இருந்து எவ்வாறு பிரிப்பது?
எதையும் ஏற்றுமதி செய்வதற்கு முன், UI அல்லாத அனைத்து லேயர்களையும் மறைக்கவும். போன் மக்அப் (phone mockup) அல்லது டெஸ்க்டாப் குரோமைத் (desktop chrome) தேர்ந்தெடுத்து, அதன் தெரிவுத்தன்மையை (visibility) ஆஃப் செய்யவும். எது டெம்ப்ளேட் (template) மற்றும் எது உள்ளடக்கம் (content) என்று கண்டறிய முடியாத அளவுக்கு கோப்பு குழப்பமாக இருந்தால், பல திரைகளில் மீண்டும் மீண்டும் வரும் கூறுகளைத் (elements) தேடுங்கள். ஸ்டேட்டஸ் பார் (status bar), ஹோம் இண்டிகேட்டர் (home indicator) மற்றும் நேவிகேஷன் ஷெல் (navigation shell) ஆகியவை வழக்கமாக ஒரே மாதிரியான இடங்களில் இருக்கும். உண்மையான பட்டன்கள், படிவங்கள் (forms) மற்றும் உள்ளடக்கம் ஆகியவை மாறுபடும் நடுப்பகுதியில் இருக்கும். ஒவ்வொரு திரையிலும் நிலையாகத் தோன்றும் அனைத்தையும் மறைக்கவும். மீதமிருப்பது உங்கள் உண்மையான இடைமுகம் (interface) ஆகும்.
குழப்பமான கோப்பில் காம்போனென்ட் எல்லைகளை (component boundaries) எவ்வாறு கண்டறிவது?
காட்சி ரீதியான தொகுப்புகளைத் (visual clustering) தேடி, பின்னர் இடைவெளியைக் கொண்டு சரிபார்க்கவும். நான்கு கூறுகள் சீரான 16px இடைவெளியுடன் ஒன்றாக அமர்ந்து, பொதுவான பின்னணி நிறத்தைப் (background fill) பகிர்ந்து கொண்டால், வடிவமைப்பாளர் அவற்றை ஒரு குழுவாக (group) இணைக்கவில்லை என்றாலும், அவை பெரும்பாலும் ஒரே கன்டெய்னரில் (container) இருக்கும். தொடர்ச்சியான அடுக்குகளைக் (consecutive stacking) கண்டறிய Figma லேயர் பட்டியலைச் சரிபார்க்கவும்.