Pencil MCP: வடிவமைப்புக் கருத்துகள் நொடியில் குறியீடாக மாறுகின்றன, முன்-இறுதி மேம்பாட்டுத் திறன் 8 மடங்கு அதிகரிக்கிறது

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

வலைப்பக்கங்கள் அல்லது செயலிகளை உருவாக்கும்போது, ​​உங்களுக்கு இந்த உணர்வு இருந்திருக்கிறதா:

அழகான பக்கத்தை உருவாக்க விரும்புகிறேன், ஆனால் எனது சொந்த வடிவமைப்பு சரியில்லை வடிவமைப்பாளர்களை நியமிப்பது மிகவும் விலை உயர்ந்தது, இலவச டெம்ப்ளேட்கள் பொருத்தமானவை அல்ல கடினமாக உழைத்து ஒரு வடிவமைப்பு வரைவை முடித்த பிறகு, அதை குறியீடாக மாற்றுவதில் இன்னும் நிறைய சிக்கல்கள் உள்ளன

உண்மையைச் சொல்ல வேண்டுமென்றால், நான் முன்பு முன்-இறுதி திட்டங்களைச் செய்தபோது, ​​வடிவமைப்பு வரைவைப் பார்த்து பாணியை சரிசெய்வதிலேயே பாதி நாள் செலவிடுவேன். இடைவெளி 2px வித்தியாசமாக இருக்கும், நிறம் சரியாக இருக்காது, வட்டமான மூலைகளைச் சேர்க்க மறந்துவிடுவேன்... திரும்பத் திரும்ப, எரிச்சலாக இருக்கும்.

நல்ல செய்தி என்னவென்றால்: இப்போது Pencil என்ற MCP உள்ளது, இந்த சிக்கல்கள் அனைத்தையும் அடிப்படையில் தீர்க்க முடியும்.

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

இந்த கட்டுரை எதைப் பற்றி பேசும்: Pencil என்றால் என்ன, ஏன் பயன்படுத்தத் தகுந்தது, மேலும் அதை எப்படி விரைவாகத் தொடங்குவது.

01. Pencil என்றால் என்ன? எளிய வார்த்தைகளில் தெளிவாக விளக்குங்கள்

எளிமையாகச் சொன்னால், Pencil என்பது வடிவமைப்பு மற்றும் குறியீட்டை இணைக்கக்கூடிய ஒரு கருவியாகும்.

முந்தைய செயல்முறை இப்படி இருந்தது:

Figma இல் வடிவமைப்பு வரைவை உருவாக்கவும் வடிவமைப்பாளர் பரிமாணங்கள், வண்ணங்கள் மற்றும் இடைவெளிகளைக் குறிப்பிடுகிறார் டெவலப்பர் வடிவமைப்பு வரைவைப் பார்த்து ஒவ்வொரு வரியாக குறியீட்டை எழுதுகிறார் எழுதிய பிறகு வடிவமைப்பு வரைவுடன் ஒப்பிட்டுப் பார்த்தால், மீட்டெடுப்பு விகிதம் 70%-80% மட்டுமே மீண்டும் மீண்டும் சரிசெய்தல், தொடர்பு கொள்ளுதல்...

Pencil இன் தீர்வு என்னவென்றால்:

நீங்கள் இயற்கையான மொழியில் தேவைகளை விவரிக்க வேண்டும் (எடுத்துக்காட்டாக, "எனக்கு ஆப்பிள் பாணியில் ஒரு மியூசிக் பிளேயரை வடிவமைக்கவும்"), AI நேரடியாக கேன்வாஸில் வடிவமைப்பு வரைவை உருவாக்க முடியும், பின்னர் ஒரு பொத்தானைக் கிளிக் செய்வதன் மூலம் தொடர்புடைய குறியீட்டை உருவாக்க முடியும் (Next.js, Flutter, Vue போன்றவை அனைத்தும் ஆதரிக்கப்படுகின்றன).

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

"ஊதா நிறம் அதிகமாக உள்ளது, கொஞ்சம் பச்சை நிறத்திற்கு மாற்றவும்" "இடைவெளியை இன்னும் கொஞ்சம் பெரிதாக்கவும்" "இந்த வலைத்தளத்தின் பாணியை கொஞ்சம் பார்க்கவும்"

AI நிகழ்நேரத்தில் வடிவமைப்பு மற்றும் குறியீட்டை சரிசெய்ய உதவும், நீங்கள் எதையும் நீங்களே செய்ய வேண்டியதில்லை.

02. Pencil ஏன் பயன்படுத்தத் தகுந்தது என்று நான் நினைக்கிறேன்?

1) திறன் உண்மையில் அதிகம்

பாரம்பரிய முறையில் ஒரு பக்கத்தின் வடிவமைப்பு வரைவை உருவாக்க 4-6 மணி நேரம் ஆகலாம். Pencil ஐப் பயன்படுத்தினால், 20-40 நிமிடங்களில் முடித்துவிடலாம்.

மேலும் குறியீடு மீட்டெடுப்பு விகிதம் 98%+ வரை இருக்கும், மேலும் பாணியை சரிசெய்ய வேண்டிய அவசியமில்லை.

நான் அதை நானே முயற்சித்தேன், ஒரு எளிய Landing Page ஐ வடிவமைப்பு முதல் குறியீடு வரை முழுமையாக முடிக்க அரை மணி நேரம் மட்டுமே ஆனது.

2) வடிவமைப்பு தரம் நிலையானது

முன்பு AI ஐப் பயன்படுத்தி வடிவமைப்பு வரைவை உருவாக்கும்போது, ​​இந்த சிக்கலை அடிக்கடி சந்திப்பேன்:

வண்ணங்கள் பொருந்தவில்லை இடைவெளிகள் குழப்பமாக உள்ளன எழுத்துரு அளவு சீரற்றது

Pencil க்குப் பின்னால் ஒரு வடிவமைப்பு அமைப்பு மற்றும் அழகியல் தரநிலை உள்ளது, இது உருவாக்கும் வடிவமைப்பு வரைவின் தரம் ஒப்பீட்டளவில் நிலையானது. அது சரியானதாக இல்லாவிட்டாலும், குறைந்தபட்சம் மிகவும் மோசமாக இருக்காது.

3) பல தொழில்நுட்ப அடுக்குகளை ஆதரிக்கிறது

நீங்கள் Next.js, Flutter, Vue அல்லது SwiftUI ஐப் பயன்படுத்தினாலும், Pencil தானாகவே தொடர்புடைய குறியீட்டை உருவாக்க முடியும்.

இது என்னைப் போன்ற பல முனை மேம்பாடு செய்பவர்களுக்கு மிகவும் வசதியானது - ஒரு வடிவமைப்பு வரைவு, பல தளங்களுக்கான குறியீடுகள் அனைத்தும் உள்ளன.

03. Pencil ஐ நிறுவி பயன்படுத்துவது எப்படி?

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

முதல் படி: Pencil MCP ஐ நிறுவவும்

உங்கள் IDE இல் (VS Code, Cursor போன்றவை) "pencil" ஐ நேரடியாகத் தேடுங்கள்

நிறுவ கிளிக் செய்யவும், மற்ற இடங்களில் பதிவிறக்கம் செய்ய வேண்டாம் (திருட்டு பதிப்பைப் பதிவிறக்குவதைத் தவிர்க்கவும்)

கவனம்: IDE இல் நேரடியாகத் தேடுவது பாதுகாப்பான வழி.

இரண்டாவது படி: AI ஐ உள்ளமைக்கச் சொல்லுங்கள்

நிறுவிய பின் அதை எப்படி உள்ளமைப்பது?

உண்மையைச் சொல்ல வேண்டுமென்றால், எனக்கு ஆரம்பத்தில் எதுவும் புரியவில்லை. பின்னர், AI ஐ உள்ளமைக்கச் சொல்வது எளிதான வழி என்று கண்டுபிடித்தேன்.

உங்கள் AI நிரலாக்க உதவியாளரைத் (Claude Code அல்லது Codex) திறந்து, அவர்களிடம் சொல்லுங்கள்:

நான் இந்த IDE இல் "pencil" என்ற MCP ஐ நிறுவியுள்ளேன், எனது Claude Code, Codex, VS Code இந்த MCP ஐப் பயன்படுத்தும் வகையில் உள்ளமைக்க உதவுங்கள்

பின்னர் அது உள்ளமைக்கும் வரை காத்திருங்கள்.

மூன்றாவது படி: Pencil ஐப் பயன்படுத்தி வடிவமைக்கத் தொடங்குங்கள்

உள்ளமைத்த பிறகு, IDE இன் இடது பக்கத்தில் ஒரு பென்சில் ஐகானைக் காண்பீர்கள், அதைத் திறக்க கிளிக் செய்தால் Pencil இன் கேன்வாஸ் திறக்கும்.

பின்னர் வலது பக்கத்தில் உள்ள AI உரையாடல் பெட்டியில், நீங்கள் என்ன வடிவமைப்பு விரும்புகிறீர்கள் என்று சொல்லுங்கள்.

உதாரணமாக:

"எனக்கு ஆப்பிள் பாணியில் ஒரு மியூசிக் பிளேயரை வடிவமைத்து கொடுங்கள்"

"நீல நிறத்தில் ஒரு எளிய லேண்டிங் பக்கத்தை உருவாக்குங்கள்"

"இந்த இணையதளத்தின் பாணியை வைத்து, எனக்கு ஒரு இணையதளத்தை உருவாக்குங்கள்"

AI கேன்வாஸில் வடிவமைப்பு வரைவை உருவாக்கும். நீங்கள் திருப்தி அடையவில்லை என்றால், அதை தொடர்ந்து சரிசெய்ய சொல்லலாம்:

"எழுத்துரு மிகவும் சிறியதாக உள்ளது, அதை பெரிதாக்குங்கள்"

"இடைவெளியை இன்னும் கொஞ்சம் பெரிதாக்குங்கள்"

"மென்மையான நிறத்திற்கு மாற்றவும்"

நீங்கள் திருப்தி அடையும் வரை சரிசெய்யவும்.

படி 4: குறியீட்டை உருவாக்குதல்

வடிவமைப்பு வரைவு முடிந்ததும், AI உங்களுக்கு குறியீட்டை உருவாக்க சொல்லலாம்.

நீங்கள் நேரடியாக சொல்லலாம்:

"எனக்கு Next.js குறியீட்டை உருவாக்குங்கள்"

"Flutter குறியீட்டை உருவாக்குங்கள்"

"Vue 3 குறியீட்டை உருவாக்குங்கள்"

AI உங்கள் வடிவமைப்பு வரைவின் அடிப்படையில், தொடர்புடைய குறியீட்டை தானாக உருவாக்கும்.

உண்மையான விளைவு:

04. சில உண்மையான பயன்பாட்டு அனுபவங்கள்

சில முறை பயன்படுத்திய பிறகு, சில அனுபவங்களை பகிர்ந்து கொள்கிறேன்:

1) தேவைகளை விவரமாக விவரிக்கவும்

நான் முதலில் "எனக்கு ஒரு இணையதளத்தை உருவாக்குங்கள்" என்று சொன்னேன், ஆனால் AI உருவாக்கியது நான் விரும்பியதை போல் இல்லை.

பின்னர், நீங்கள் எவ்வளவு விவரமாக விவரிக்கிறீர்களோ, அவ்வளவு சிறப்பாக இருக்கும் என்பதை கண்டுபிடித்தேன்.

உதாரணமாக:

மோசமான விளக்கம்: "எனக்கு ஒரு உள்நுழைவு பக்கத்தை உருவாக்குங்கள்"

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

2) குறிப்பு படங்களை பதிவேற்றலாம்

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

இதனால் உருவாக்கப்படும் வடிவமைப்பு வரைவு உங்கள் எதிர்பார்ப்புகளுக்கு நெருக்கமாக இருக்கும்.

3) ஒரே நேரத்தில் முடிப்பதை விட மீண்டும் செய்வது முக்கியம்

ஒரே நேரத்தில் சரியான வடிவமைப்பை உருவாக்க நினைக்காதீர்கள், அது சாத்தியமில்லை.

சரியான வழி என்னவென்றால்: முதலில் ஒரு தோராயமான வடிவமைப்பை உருவாக்குங்கள், பின்னர் கொஞ்சம் கொஞ்சமாக சரிசெய்யவும்.

ஒவ்வொரு முறையும் ஒன்று அல்லது இரண்டு விஷயங்களை மட்டும் சரிசெய்யவும், உதாரணமாக "இடைவெளியை இன்னும் கொஞ்சம் பெரிதாக்குங்கள்", "நிறத்தை இன்னும் மென்மையாக்குங்கள்", இது மிகவும் திறமையானது.

4) குறியீட்டின் தரம் நன்றாக உள்ளது

நான் சில முறை முயற்சி செய்தேன், உருவாக்கப்பட்ட குறியீட்டின் தரம் மிகவும் அதிகமாக இருந்தது:

குறியீடு அமைப்பு தெளிவாக உள்ளது

பாணி மீட்டெடுப்பு அதிகமாக உள்ளது (98% +)

பதில் வடிவமைப்பு நன்றாக உள்ளது

அடிப்படையாக எடுத்துக்கொண்டு கொஞ்சம் மாற்றினால் பயன்படுத்தலாம்.

05. கவனிக்க வேண்டிய சில விஷயங்கள்

Pencil பயன்படுத்த எளிதாக இருந்தாலும், கவனிக்க வேண்டிய சில விஷயங்கள் உள்ளன:

1) அழகியல் உங்கள் கையில் தான் உள்ளது

AI உங்களுக்கு வடிவமைப்பு வரைவை உருவாக்க உதவும், ஆனால் அது நன்றாக இருக்கிறதா இல்லையா என்பதை நீங்களே தீர்மானிக்க வேண்டும்.

எனவே, நல்ல வடிவமைப்புகளைப் பார்த்து, உங்கள் அழகியலை மேம்படுத்துங்கள், இதனால் Pencil ஐப் பயன்படுத்தும் போது சிறந்த வழிகாட்டுதலை வழங்க முடியும்.

வடிவமைப்பு குறிப்புகளைக் கண்டுபிடிக்க சில இடங்கள்:

Dribbble

Mobbin (மொபைல் UI ஐ சேகரிக்கிறது)

சிறந்த இணையதளங்களின் ஸ்கிரீன்ஷாட்கள்

2) சிக்கலான தொடர்புகளை நீங்களே எழுத வேண்டும்

Pencil நிலையான பக்கங்கள் மற்றும் வழக்கமான தொடர்புகளை உருவாக்க ஏற்றது, ஆனால் சிக்கலான அனிமேஷன்கள், சைகைகள் போன்றவற்றை நீங்களே குறியீடு எழுத வேண்டும்.

இருப்பினும், பெரும்பாலான காட்சிகளுக்கு, Pencil போதுமானது.

3) சரியான AI மாதிரியைத் தேர்ந்தெடுப்பது முக்கியம்

நான் சில மாதிரிகளை முயற்சித்தேன், Claude Opus 4.5 இன் காட்சி செயல்திறன் சிறப்பாக இருந்தது.

நீங்கள் மற்ற மாதிரிகளைப் பயன்படுத்தினால், உருவாக்கப்பட்ட வடிவமைப்பு வரைவின் தரம் குறைவாக இருக்கலாம்.

06. செயல்திறன் ஒப்பீட்டு தரவு

கடைசியாக, நான் சோதித்த தரவு தொகுப்பை பகிர்ந்து கொள்கிறேன்:

எனக்கு, மிகப்பெரிய மதிப்பு என்னவென்றால்: "எப்படி செயல்படுத்துவது" என்பதிலிருந்து "என்ன செயல்பாடு செய்வது" என்பதற்கு கவனத்தை மாற்றுவது.

07. சுருக்கம்

Pencil அடிப்படையில் வடிவமைப்பு மற்றும் மேம்பாட்டை இணைக்கிறது, இது முழு செயல்முறையையும் இயற்கையான மொழியில் இயக்க அனுமதிக்கிறது.

நீங்கள் ஒரு முன்-இறுதி மேம்பாட்டாளராக இருந்தால், உங்கள் சொந்த தயாரிப்புகளை உருவாக்குகிறீர்கள் என்றால், Pencil ஐ முயற்சிக்க பரிந்துரைக்கிறேன்:செயல்பாட்டுத் தரம் நிலையானது: 98%+ துல்லியம், அடிப்படை ஸ்டைலிங் சரிசெய்தல் தேவையில்லை

பல தொழில்நுட்ப அடுக்குகளை ஆதரிக்கிறது: Next.js, Flutter, Vue போன்றவற்றை பயன்படுத்தலாம்

இயற்கை மொழி இயக்கி: மனித மொழியில் தேவைகளை விவரிக்கவும், AI தானாகவே உருவாக்கும்

இறுதியாக, நீங்கள் தனிப்பட்ட மேம்பாடு, AI நிரலாக்கம் செய்து கொண்டிருந்தால், கருத்துகளில் பேச வரவேற்கிறோம்:

வடிவமைப்பை நீங்கள் எப்படி செய்கிறீர்கள்?

Pencil-ஐ பயன்படுத்தியுள்ளீர்களா? அதன் விளைவு எப்படி இருந்தது?

ஒவ்வொரு கருத்தையும் நான் கவனமாகப் பார்ப்பேன். அடுத்த கட்டுரையில் சந்திப்போம்.