पेन्सिल MCP: डिझाइन काही क्षणात कोडमध्ये रूपांतरित, फ्रंटएंड डेव्हलपमेंटची कार्यक्षमता 8 पटीने वाढली

नमस्कार, मी समुद्रातील उत्पादने बनवणारा लियांग शियाओ आहे. लवकरच नवीन वर्ष आहे, त्यानिमित्ताने एक लेख प्रकाशित करून माझ्या नवीन गोष्टींबद्दल सांगेन.

वेबपेज किंवा ॲप बनवताना तुम्हाला कधी असे वाटले आहे का:

• एक सुंदर पेज बनवायचे आहे, पण डिझाइन जमत नाही.
• डिझायनर खूप महाग मिळतात, आणि मोफत टेम्पलेट्स योग्य नसतात.
• कसेतरी डिझाइन फायनल झाली, तर कोडमध्ये रूपांतर करताना अनेक समस्या येतात.

खरं सांगायचं तर, मी जेव्हा फ्रंटएंड प्रोजेक्ट्स करायचो, तेव्हा डिझाइननुसार स्टाईल ॲडजस्ट करण्यातच माझा अर्धा वेळ जायचा. 2px चा फरक, रंगात गडबड, कोपरे गोल करायचे विसरणे... हे सारखं सारखं करून खूप वैताग यायचा.

Good news is: आता Pencil नावाचे MCP आले आहे, ज्यामुळे या समस्या बऱ्याच प्रमाणात सुटतील.

मी नुकतेच याचा वापर करून काही पेजेस बनवले, आणि ते खरंच खूप फायद्याचे ठरले - डिझाइनपासून कोड तयार होईपर्यंत कार्यक्षमता अनेक पटीने वाढली. आणि महत्त्वाचे म्हणजे, AI ने तयार केलेले डिझाइनदेखील चांगले आहे, आणि कोडमध्ये रूपांतरणही अचूक होते.

या लेखात आपण Pencil म्हणजे काय, ते का वापरावे आणि ते कसे लवकर सुरू करावे याबद्दल चर्चा करूया.

01. Pencil म्हणजे काय? सोप्या भाषेत सांगा

सोप्या भाषेत सांगायचे झाल्यास, Pencil हे एक असे Tool आहे जे डिझाइन आणि कोडला जोडते.

आधीची पद्धत अशी होती:

• Figma मध्ये डिझाइन तयार करणे.
• डिझायनर आकार, रंग आणि अंतर (spacing) निश्चित करतो.
• डेव्हलपर डिझाइन पाहून एक एक ओळ कोड लिहितो.
• कोड लिहून झाल्यावर डिझाइनशी तुलना केल्यावर, फक्त 70%-80% जुळते.
• मग पुन्हा ॲडजस्टमेंट, चर्चा... हे चक्र चालूच राहायचे.

Pencil चा उपाय काय आहे:

तुम्ही फक्त तुमच्या गरजेनुसार नैसर्गिक भाषेत सांगा (उदाहरणार्थ, "मला ॲपलच्या (Apple) शैलीतील म्युझिक प्लेअर डिझाइन करून दे"), आणि AI लगेच कॅनव्हासवर डिझाइन तयार करेल, आणि एका क्लिकवर त्याचा कोड तयार करेल (Next.js, Flutter, Vue इत्यादींसाठी सपोर्ट उपलब्ध आहे).

आणि आश्चर्याची गोष्ट म्हणजे, तुम्ही डिझाइन करता करता बदल करू शकता. उदाहरणार्थ:

• "जांभळा रंग खूप जास्त आहे, त्याऐवजी हिरवा रंग वापरा"
• "अंतर (spacing) आणखी वाढवा"
• "या वेबसाईटच्या (website) शैलीचा संदर्भ घ्या"

AI रिअल-टाइममध्ये (Real-time) डिझाइन आणि कोड ॲडजस्ट करेल, तुम्हाला स्वतः काहीही करण्याची गरज नाही.

02. मला Pencil का उपयुक्त वाटते?

1) कार्यक्षमता खूप जास्त आहे

एका पेजचे डिझाइन तयार करण्यासाठी पारंपरिक पद्धतीने 4-6 तास लागतात. Pencil वापरून, तेच काम 20-40 मिनिटांत होऊ शकते.

आणि कोड रूपांतरण 98%+ अचूक होते, त्यामुळे स्टाईलमध्ये फार बदल करण्याची गरज पडत नाही.

मी स्वतः एक साधं Landing Page डिझाइन करून कोडमध्ये रूपांतरित केले, आणि ते फक्त अर्ध्या तासात पूर्ण झाले.

2) डिझाइनची गुणवत्ता चांगली असते

आधी AI वापरून डिझाइन तयार करताना, अनेक समस्या यायच्या:

• रंगांचा ताळमेळ नसायचा.
• अंतर (spacing) व्यवस्थित नसायचे.
• फॉन्ट साईज (font size) एकसारखे नसायचे.

Pencil मध्ये एक डिझाइन सिस्टम (design system) आणि सौंदर्य मानके (aesthetic standards) आहेत, त्यामुळे तयार होणाऱ्या डिझाइनची गुणवत्ता चांगली असते. जरी ते Perfect नसलं, तरी ते फार वाईट नसतं.

3) अनेक तंत्रज्ञानांना सपोर्ट (Support)

तुम्ही Next.js, Flutter, Vue किंवा SwiftUI मध्ये काम करत असाल, Pencil आपोआप त्याच्याशी संबंधित कोड तयार करू शकते.

माझ्यासारख्या मल्टी-प्लॅटफॉर्म (multi-platform) डेव्हलपरसाठी हे खूपच सोपे आहे - एका डिझाइनवरून अनेक प्लॅटफॉर्मसाठी कोड तयार होतो.

03. Pencil कसे इंस्टॉल (Install) आणि वापरायचे?

मी स्वतः Pencil कसे इंस्टॉल (Install) केले आणि वापरले, त्याची माहिती खाली दिली आहे. ही सध्याची सर्वात सोपी पद्धत आहे.

पहिली पायरी: Pencil MCP इंस्टॉल करा

तुमच्या IDE मध्ये (VS Code, Cursor इत्यादी) "pencil" शोधा.

आणि इंस्टॉल (Install) करा. इतर कुठूनही डाउनलोड (Download) करू नका (पायरेटेड आवृत्ती टाळण्यासाठी).

टीप: IDE मध्ये शोधणे हा सर्वात सुरक्षित मार्ग आहे.

दुसरी पायरी: AI कडून कॉन्फिगरेशन (Configuration) करून घ्या

इंस्टॉल (Install) केल्यानंतर कॉन्फिगर (Configure) कसे करायचे?

खरं सांगायचं तर, मलाही सुरुवातीला कळलं नाही. नंतर मला समजले की सर्वात सोपा मार्ग म्हणजे AI कडून मदत घेणे.

तुमचा AI प्रोग्रामिंग असिस्टंट (Claude Code किंवा Codex) उघडा, आणि त्याला सांगा:

मी माझ्या IDE मध्ये "pencil" हे MCP इंस्टॉल (Install) केले आहे, कृपया मला ते कॉन्फिगर (Configure) करायला मदत करा, जेणेकरून मी Claude Code, Codex आणि VS Code मध्ये हे MCP वापरू शकेन.

आणि मग त्याला कॉन्फिगर (Configure) करू द्या.

तिसरी पायरी: Pencil वापरून डिझाइन बनवणे सुरू करा

कॉन्फिगरेशन (Configuration) पूर्ण झाल्यावर, तुम्हाला IDE च्या डाव्या बाजूला एक पेन्सिलचे चिन्ह दिसेल. त्यावर क्लिक केल्यावर Pencil चा कॅनव्हास उघडेल.

आणि मग उजव्या बाजूच्या AI डायलॉग बॉक्समध्ये, तुम्हाला काय डिझाइन हवे आहे ते सांगा.

उदाहरणार्थ:

"माझ्यासाठी ऍपल-शैलीतील म्युझिक प्लेयर डिझाइन करा"

"निळ्या रंगाच्या मुख्य शेडसह एक साधा Landing Page तयार करा"

"या वेबसाइटच्या शैलीचा संदर्भ घेऊन, माझ्यासाठी तशाच प्रकारची वेबसाइट तयार करा"

AI कॅनव्हासवर डिझाइन तयार करेल. जर तुम्ही समाधानी नसाल, तर तुम्ही त्यात बदल करण्यासाठी सांगू शकता:

"फॉन्ट खूप लहान आहे, तो मोठा करा"

"अंतर आणखी वाढवा"

"अधिक सौम्य रंग वापरा"

तुम्ही समाधानी होईपर्यंत बदल करत राहा.

चौथा टप्पा: कोड तयार करणे

डिझाइन पूर्ण झाल्यावर, तुम्ही AI ला तुमच्यासाठी कोड तयार करण्यास सांगू शकता.

तुम्ही थेट असे म्हणू शकता:

"माझ्यासाठी Next.js कोड तयार करा"

"Flutter कोड तयार करा"

"Vue 3 कोड तयार करा"

AI तुमच्या डिझाइननुसार आपोआप कोड तयार करेल.

प्रत्यक्ष परिणाम:

04. काही प्रत्यक्ष वापर अनुभव

काही वेळा वापरल्यानंतर, मला आलेले काही अनुभव मी शेअर करतो:

1) मागणीचे वर्णन विशिष्ट असावे

सुरुवातीला मी "माझ्यासाठी एक वेबसाइट तयार करा" असे म्हटले, तेव्हा AI ने तयार केलेली गोष्ट मला हवी असलेली नव्हती.

नंतर मला समजले की, वर्णन जितके विशिष्ट असेल, तितका चांगला परिणाम मिळतो.

उदाहरणार्थ:

चुकीचे वर्णन: "माझ्यासाठी लॉगिन पेज तयार करा"

योग्य वर्णन: "माझ्यासाठी एक साधा लॉगिन पेज तयार करा, ज्याच्या शीर्षस्थानी Logo असेल, मध्यभागी ईमेल आणि पासवर्ड इनपुट बॉक्स असेल आणि तळाशी लॉगिन बटण असेल, ऍपलच्या अधिकृत वेबसाइटच्या शैलीनुसार"

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 वापरण्याची शिफारस करतो:कोडची गुणवत्ता स्थिर: ९८%+ अचूकता, स्टाईल ॲडजस्ट करण्याची गरज नाही

अनेक तंत्रज्ञान स्टॅकना सपोर्ट: Next.js, Flutter, Vue इत्यादी वापरता येतात

नैसर्गिक भाषेवर आधारित: माणसांना समजेल अशा भाषेत गरज सांगा, AI आपोआप कोड तयार करेल

शेवटी, जर तुम्ही स्वतंत्र डेव्हलपमेंट (independent development) आणि AI प्रोग्रामिंग करत असाल, तर कमेंटमध्ये नक्की सांगा:

तुम्ही डिझाइन कसे करता?

तुम्ही Pencil वापरले आहे का? त्याचा अनुभव कसा आहे?

मी प्रत्येक कमेंट काळजीपूर्वक वाचणार आहे. पुढच्या लेखात भेटू.