Agentic Canvas: AI ஏஜெண்ட்களுடன் வடிவமைக்கலாம்2 min read

AI ஏஜெண்ட்கள் நிமிடங்களில் ஒரு வலைத்தளத்தை உருவாக்க முடியும். பின்னர் நீங்கள் ஒரு பொத்தானை நகர்த்த வேண்டும், இரண்டு தளவமைப்புகளை ஒப்பிடலாம், சில ஸ்கிரீன் ஷாட்களை சேகரிக்க வேண்டும் அல்லது இடைவெளியை நீங்களே சரிசெய்ய வேண்டும். திடீரென்று நீங்கள் மற்றொரு ப்ராம்ப்டில் காட்சி மாற்றத்தை விளக்குவதற்கு திரும்பி வந்துவிட்டீர்கள். சில நேரங்களில் புதிய ப்ராம்ப்ட் எழுதுவதை விட நேரடியாக இழுத்து மாற்றுவது எளிது.

அதனால்தான் AgentGrid.io-வின் Agentic Canvas கருவியை நாங்கள் உருவாக்கினோம். இது ஒரு இலவச AI வடிவமைப்பு கேன்வாஸ் ஆகும், அங்கு நீங்களும் MCP-ஐ ஆதரிக்கும் ஏஜெண்டும் ஒரே உண்மையான HTML மற்றும் CSS பக்கத்தில் வேலை செய்கிறீர்கள். HTML கொண்டு வாருங்கள், ஒரு வடிவமைப்பு அல்லது படத்துடன் தொடங்குங்கள் அல்லது உங்கள் ஏஜெண்டிடம் ஒரு பக்கத்தை உருவாக்கச் சொல்லுங்கள். பின்னர் அது செய்ததைத் தேர்ந்தெடுக்கவும், நகர்த்தவும், அளவிடவும் மற்றும் திருத்தவும். கணக்கு உருவாக்காமலேயே Agentic Canvas-ஐத் திறக்கலாம்.

அதைப் பயன்படுத்த ஒரு எளிய வழி இங்கே: ஒரு HTML பக்கம் அல்லது படத்தைக் கொண்டு வாருங்கள், அதை காட்சிக்கு ஏற்பாடு செய்து திருத்தவும், ஒரு அனிமேஷன் அல்லது தொடர்புகளை செம்மைப்படுத்த Claude அல்லது ChatGPT கேளுங்கள், பின்னர் HTML ஏற்றுமதி செய்யவும். புதிதாக மற்றொரு ப்ராம்ப்டில் தொடங்குவதற்கு பதிலாக எந்த நேரத்திலும் நீங்கள் கையால் அடியெடுத்து வைக்கலாம்.

Agentic Canvas என்றால் என்ன?

இது ஒரு AI ஏஜெண்டுடன் உண்மையான வலைப்பக்கங்களை வடிவமைப்பதற்கான காட்சி பணியிடமாகும். கேன்வாஸில் பழக்கமான பிரேம்கள், அடுக்குகள், ஒரு ஆய்வாளர் மற்றும் தளவமைப்பு கட்டுப்பாடுகள் உள்ளன, ஆனால் அதன் பிரேம்கள் நிலையான படங்களை விட குறியீடு அடிப்படையிலானவை. MCP மூலம் இணைக்கும் ஒரு ஏஜெண்ட் தற்போதைய பக்கத்தைப் படித்து மாற்றங்களைச் செய்யலாம். நீங்கள் முடிவைப் பார்க்கிறீர்கள், அதை கையால் சரிசெய்து, ஏஜெண்ட் புதுப்பிக்கப்பட்ட வடிவமைப்பிலிருந்து தொடரட்டும்.

சரிசெய்தல் தேவைப்படுவதைப் பார்க்கும் நபர் மற்றும் குறியீட்டை எழுதக்கூடிய ஏஜெண்ட் ஒரே விஷயத்தில் வேலை செய்யும் இடமாக இதை நினைத்துப் பாருங்கள்.

AI ஏஜெண்ட்களுக்கு ஏன் ஒரு கேன்வாஸ் தேவைப்பட்டது

1. மற்றொரு உடனடி வளையம் இல்லாமல் காட்சி ஒத்துழைப்பு

நீங்கள் ஒரு இறங்கும் பக்கம், தயாரிப்பு திரை அல்லது சந்தைப்படுத்தல் சொத்தை Claude அல்லது ChatGPT உடன் உருவாக்கும்போது, முதல் வரைவு தொடக்கம் மட்டுமே. நீங்கள் முதன்மைப் பகுதியின் மூன்று பதிப்புகள், ஒரு இறுக்கமான கட்டம் அல்லது வேறுபட்ட அழைப்பை விரும்பலாம். அரட்டையில் ஒவ்வொரு காட்சி முடிவையும் விவரிப்பது மெதுவாக இருக்கும், குறிப்பாக எதை மாற்ற வேண்டும் என்பதை நீங்கள் ஏற்கனவே அறிந்திருக்கும்போது.

கேன்வாஸில், நீங்கள் அந்த மாற்றத்தை நேரடியாகச் செய்யலாம். ஏஜெண்ட் இப்போது இருப்பதைப் போலவே பக்கத்தைப் படிக்க முடியும், ஏற்கனவே மாறிவிட்ட பதிப்பின் வாய்மொழி விளக்கம் அல்ல. இது கடினமான வேலையைச் செய்கிறது, நீங்கள் கையால் இறுதி முடிவுகளை எடுக்கிறீர்கள், நீங்கள் விட்டுச் சென்ற இடத்திலிருந்து அது எடுக்கிறது.

2. காட்சி சூழலை சேகரிக்க ஒரு இடம்

சில யோசனைகள் ஒரு மனநிலை பலகையாகத் தொடங்குகின்றன, ஒரு விவரக்குறிப்பு அல்ல. ஸ்கிரீன் ஷாட்கள், குறிப்பு பக்கங்கள், படங்கள் மற்றும் உரையை சேகரித்து, அவற்றை இடரீதியாக ஏற்பாடு செய்து, நீங்கள் என்ன செய்ய முயற்சிக்கிறீர்கள் என்பதை விளக்க உதவும் பொருளைச் சேர்க்கவும். ஒரு AI ஏஜெண்ட் நீண்ட அரட்டை வரலாற்றிலிருந்து யூகிப்பதை விட உங்களுக்கு முன்னால் உள்ள வடிவமைப்பிலிருந்து வேலை செய்ய முடியும்.

பிராண்ட் வேலைக்கு இது முக்கியமானது. ஒரு தளவமைப்பு குறிப்பு, ஒரு உரைப் பகுதி மற்றும் ஒரு ஸ்கிரீன்ஷாட் ஆகியவை நீங்கள் விரும்பும் மனநிலையைப் பற்றிய மற்றொரு பத்தியை விட வேகமாக ஒரு நோக்கத்தைத் தெரிவிக்க முடியும்.

3. கேன்வாஸ் ஏன் உண்மையான HTML மற்றும் CSS ஐப் பயன்படுத்துகிறது

HTML மற்றும் CSS இல் ஒரு வடிவமைப்பு கருவியை ஏன் உருவாக்க வேண்டும்? ஏனென்றால் குறியீட்டு ஏஜெண்ட்கள் ஏற்கனவே குறியீட்டை சரளமாகப் படித்து எழுதுகிறார்கள். என்னைப் பொறுத்தவரை, ஒரு தனி வடிவமைப்பு வடிவத்தின் மூலம் வேலை செய்யும்படி ஒரு ஏஜெண்டைக் கேட்பது ஒரு சொந்த ஆங்கில பேச்சாளரை ஆங்கிலத்தில் சிந்திக்கவும், ஆனால் சீன மொழியைப் படிக்கவும் எழுதவும் கேட்பது போன்றது. கூடுதல் மொழிபெயர்ப்பு விவரங்களை இழக்கலாம், மேலும் அதற்கு நேரம் மற்றும் டோக்கன்கள் செலவாகும். நான் அதற்கு முன்பு வாதிட்டேன் வடிவமைப்பே குறியீடு. இங்கே, அந்த யோசனை நேரடியானது.

Agentic Canvas மூலம், ஒரு சட்டகம் ஒரு உண்மையான பக்கம், தானியங்கி தளவமைப்பு CSS flexbox-க்கு ஒத்திருக்கிறது மற்றும் கட்டங்கள் CSS கட்டங்கள். நீங்கள் ஒரு பொத்தானை பார்வைக்கு திருத்தலாம், உங்கள் ஏஜெண்டிடம் அனிமேஷன் அல்லது தொடர்புகளைச் சேர்க்கச் சொல்லலாம், மேலும் நீங்கள் தயாராக இருக்கும்போது குறியீட்டை ஏற்றுமதி செய்யலாம். நேரடி பக்கங்கள் கேன்வாஸில் ஸ்கிரிப்ட்கள், வட்டமிடும் நிலைகள் மற்றும் பதிலளிக்கக்கூடிய நடத்தையை இயக்கலாம். இது நீங்கள் பின்னர் மீண்டும் உருவாக்க வேண்டிய படம் அல்ல.

வழக்கமான வடிவமைப்பு கேன்வாஸிலிருந்து இது எவ்வாறு வேறுபடுகிறது?

ஒரு வழக்கமான வடிவமைப்பு கேன்வாஸ் ஒரு காட்சி யோசனையை உருவாக்க பயனுள்ளதாக இருக்கும், ஆனால் இதன் விளைவாக பெரும்பாலும் ஒரு வேலை செய்யும் வலைப்பக்கமாக மாறுவதற்கு முன்பு ஒரு தனி செயல்படுத்தல் படி தேவைப்படுகிறது. Agentic Canvas ஒரு HTML வடிவமைப்பு கருவியாகும்: ஒரு சட்டகம் ஒரு உண்மையான பக்கம், எனவே ஒரு ஏஜெண்ட் நீங்கள் பார்வைக்கு திருத்தும் அதே HTML மற்றும் CSS படித்து மாற்றலாம். இது ஒரு முதிர்ந்த வடிவமைப்பு தொகுப்பின் ஒவ்வொரு அம்சத்திற்கும் பொருந்துகிறது என்று அர்த்தமல்ல. நீங்கள் AI உருவாக்கிய வலைத்தளத்தை சுத்திகரித்தாலும் அல்லது புதியதை உருவாக்குகிறீர்களா என்பது, காட்சி முடிவுகளையும் வேலை செய்யும் குறியீட்டையும் ஒன்றாக வைத்திருப்பதே புள்ளி.

Agentic Canvas-இல் Claude அல்லது ChatGPT உடன் வலைத்தளத்தை வடிவமைப்பது எப்படி

1. உங்களிடம் உள்ளதைத் தொடங்குங்கள். கேன்வாஸைத் திறந்து HTML ஒட்டவும், Figma இலிருந்து நகலெடுத்து ஒட்டவும், படங்கள் அல்லது வடிவமைப்புகளைக் கொண்டு வாருங்கள் அல்லது ஏஜெண்ட் உருவாக்கிய பக்கத்துடன் தொடங்கவும். இறக்குமதி வழிகாட்டி ஆதரிக்கப்படும் தொடக்க புள்ளிகளை பட்டியலிடுகிறது.
2. உங்கள் முகவரை இணைக்கவும். தேர்வு செய் AI ஏஜெண்ட்கள், பின்னர் ஏஜெண்டைச் சேர்க்கவும் கேன்வாஸில். பின்தொடரவும் இணைப்பு வழிகாட்டி Claude, ChatGPT அல்லது மற்றொரு MCP திறன் கொண்ட வாடிக்கையாளர். ஏஜெண்ட் வேலை செய்யும் போது கேன்வாஸ் தாவலைத் திறந்து வைத்திருங்கள்.
3. ஒன்றாக முதல் பாஸ் செய்யுங்கள். ஒரு தளவமைப்பு அல்லது தொடர்பு கேளுங்கள், பின்னர் கேன்வாஸில் நேரடி முடிவை ஆய்வு செய்யவும்.
4. பார்வைக்கு கட்டுப்பாட்டை எடுத்துக் கொள்ளுங்கள். கூறுகளை நகர்த்தவும், வண்ணங்களை மாற்றவும், சட்டகத்தின் அளவை மாற்றவும், தளவமைப்பை கையால் டியூன் செய்யவும். சமீபத்திய பதிப்பில் இருந்து தொடருமாறு முகவரிடம் கேளுங்கள்.
5. தயாராக இருக்கும்போது ஏற்றுமதி செய்யுங்கள் அல்லது பகிரவும். வெளியிடாமல் HTML அல்லது மற்றொரு ஆதரிக்கப்படும் வடிவமைப்பை ஏற்றுமதி செய்யவும். நீங்கள் ஹோஸ்ட் செய்யப்பட்ட இணைப்பை விரும்பினால், AgentGrid.io மூலம் பகிரவும் அல்லது வெளியிடவும். அந்த கிளவுட் படி விருப்பமானது மற்றும் ஒரு கணக்கு தேவைப்படுகிறது.

எது உள்ளூரில் உள்ளது, எது கணக்கு தேவை?

பதிவு செய்யாமல், உங்கள் உலாவியில் இலவசமாக வடிவமைக்கத் தொடங்கலாம். உங்கள் கோப்புகள் இதில் வாழ்கின்றன அந்த சாதனத்தில் உள்ள உலாவி, தானியங்கி குறுக்கு-சாதன காப்புப்பிரதியில் இல்லை. உலாவிக்கு வெளியே நீங்கள் வைத்திருக்க விரும்பும் வேலையின் நகலை ஏற்றுமதி செய்யவும். வெளிப்புற முகவரை இணைப்பது கேன்வாஸைப் படிக்க அனுமதிக்கிறது மற்றும் நெட்வொர்க் இணைப்பைப் பயன்படுத்துகிறது, எனவே உள்ளூர் என்பது ஆஃப்லைன் என்று அர்த்தமல்ல. AgentGrid.io மூலம் பகிர்வது அல்லது வெளியிடுவது விருப்பமானது மற்றும் கணக்கு தேவைப்படுகிறது.

அடுத்த வடிவமைப்பு கருவி காட்சி கட்டுப்பாடு மற்றும் உருவாக்கக்கூடிய ஒரு ஏஜெண்ட் இடையே தேர்வு செய்ய நம்மை கட்டாயப்படுத்தக்கூடாது என்று நான் நம்புகிறேன். ஏஜெண்ட் வேலையின் சொந்த மொழியைப் பேச வேண்டும், மேலும் நாம் இன்னும் திரையில் விஷயத்தைப் பிடித்து அதை மாற்ற முடியும்.

Agentic Canvas திறந்து உங்கள் ஏஜெண்டுடன் வடிவமைக்க முயற்சிக்கவும். பணிப்பாய்வுகளை விரைவாகப் பார்க்க, வெளியீட்டு டெமோவைப் பார்த்து அம்சங்களை ஆராயுங்கள்.

Agentic Canvas பற்றிய கேள்விகள்

Agentic Canvas இலவசமா, எனக்கு கணக்கு தேவையா?

ஆம், வடிவமைப்பு கேன்வாஸ் இலவசம். உங்கள் உலாவியில் அதைத் திறந்து, கணக்கு இல்லாமல் வடிவமைக்கத் தொடங்குங்கள். நீங்கள் AgentGrid.io மூலம் பகிர அல்லது வெளியிட தேர்வுசெய்தால் மட்டுமே AgentGrid.io கணக்கு தேவை.

எந்த AI ஏஜெண்ட்கள் Agentic Canvas உடன் வேலை செய்கிறார்கள்?

Claude, ChatGPT, Claude Code, Codex, Cursor மற்றும் பிற MCP திறன் கொண்ட ஏஜெண்ட்கள் திறந்த கேன்வாஸைப் படித்து மாற்றலாம். தேர்வு செய்யவும் AI ஏஜெண்ட்கள் பின்னர் ஏஜெண்டைச் சேர்க்கவும் இணைப்பு படிகளைப் பின்பற்ற. உங்கள் ஏஜெண்ட் வேலை செய்யும் போது கேன்வாஸ் தாவலைத் திறந்து வைத்திருங்கள்.

AI உருவாக்கிய இணையதளத்தை பார்வைக்கு திருத்த முடியுமா?

ஆம். HTML பக்கம் அல்லது தள கோப்புறையைக் கொண்டு வாருங்கள், பின்னர் கேன்வாஸில் உள்ள கூறுகளை நகர்த்தவும், அளவிடவும் மற்றும் சுத்திகரிக்கவும். பிரேம்கள் உண்மையான HTML மற்றும் CSS, எனவே ஒரு ஏஜெண்ட் ஒரு நிலையான மொக்கப்பை மீண்டும் உருவாக்குவதற்குப் பதிலாக உங்கள் காட்சி திருத்தங்களிலிருந்து தொடரலாம்.

தற்போதுள்ள HTML பக்கம் அல்லது வலைத்தளத்தை நான் இறக்குமதி செய்ய முடியுமா?

ஆம். HTML கேன்வாஸில் ஒட்டவும் அல்லது ஒரு தள கோப்புறை அல்லது அதன் ZIP Home பகுதியில் விடவும். நீங்கள் ஒரு Figma தேர்வு அல்லது படத்துடன் தொடங்கலாம்.

எனது கேன்வாஸ் கோப்புகள் எங்கே சேமிக்கப்படுகின்றன? அவை காப்புப் பிரதி எடுக்கப்பட்டுள்ளதா?

தானியங்கி கிளவுட் காப்புப்பிரதி இல்லாமல், நீங்கள் பயன்படுத்திய உலாவி மற்றும் சாதனத்தில் அவை உள்நாட்டில் சேமிக்கப்படுகின்றன. மற்றொரு உலாவி அல்லது சாதனம் அவற்றைப் பார்க்காது. முக்கியமான வேலையின் நகலை ஏற்றுமதி செய்யவும் அல்லது கிளவுட் காப்புப்பிரதி மற்றும் பதிப்பு வரலாறு விரும்பினால் AgentGrid.io பகிர்வைத் தேர்வுசெய்யவும்.

நான் தாவலை மூடிய பிறகு எனது AI ஏஜெண்ட் கேன்வாஸில் வேலை செய்ய முடியுமா?

இல்லை. இணைக்கப்பட்ட ஏஜெண்ட் வடிவமைப்பைப் படிக்கும் போது அல்லது மாற்றும் போது கேன்வாஸ் தாவல் திறந்திருக்க வேண்டும். அதே உலாவியில் உங்கள் உள்நாட்டில் சேமிக்கப்பட்ட கோப்புகளுக்கு பின்னர் திரும்பலாம்.

ஒரு ஏஜெண்டை இணைப்பது எனது AgentGrid.io பணியிடத்திற்கான அணுகலை வழங்குகிறதா?

இல்லை. ஒரு ஏஜெண்டை கேன்வாஸுடன் இணைப்பது திறந்த கேன்வாஸ் கோப்புகளில் வேலை செய்ய அனுமதிக்கிறது. அந்த ஏஜெண்டை AgentGrid.io கலைப்பொருட்களுடன் இணைப்பது ஒரு தனி படியாகும்.

வெளியிடாமல் ஏற்றுமதி செய்யலாமா?

ஆம். பகிரவோ அல்லது வெளியிடவோ இல்லாமல் HTML, PNG, SVG அல்லது PDF ஏற்றுமதி செய்யுங்கள். வேறு எங்காவது கட்டுவதற்கு நீங்கள் HTML ஒரு குறியீட்டு முகவரிடம் ஒப்படைக்கலாம்.

பகிர்வு என்பது வெளியிடுவதற்கு சமமானதா?

இல்லை. AgentGrid.io மூலம் பகிர்வது நீங்கள் தேர்ந்தெடுக்கும் நபர்கள் மற்றும் ஏஜெண்ட்களுக்கான அணுகலை வழங்குகிறது; வெளியிடுவது வடிவமைப்பை பொது வலை முகவரியில் வைக்கிறது. இரண்டும் விருப்பமானவை மற்றும் AgentGrid.io கணக்கு தேவை.