પેન્સિલ MCP: ડિઝાઇન ડ્રાફ્ટ તરત જ કોડમાં બદલાય છે, ફ્રન્ટ-એન્ડ ડેવલપમેન્ટની કાર્યક્ષમતા 8 ગણી વધી જાય છે

નમસ્તે બધાને, હું લિયાંગ શિયાઓ છું જે વિદેશી ઉત્પાદનો બનાવે છે. જલ્દી જ નવું વર્ષ છે, અને હું વર્ષ પહેલાં તમારા બધા સાથે તાજેતરના લાભો વિશે એક લેખ શેર કરીશ.

વેબ પૃષ્ઠો અને એપ્લિકેશન્સ બનાવતી વખતે, શું તમને ક્યારેય આ લાગણી થઈ છે:

હું એક સુંદર પૃષ્ઠ બનાવવા માંગુ છું, પરંતુ મારી ડિઝાઇન સારી નથી ડિઝાઇનર શોધવાનું ખૂબ ખર્ચાળ છે, અને મફત નમૂનાઓ યોગ્ય નથી મુશ્કેલીથી ડિઝાઇન ડ્રાફ્ટ મેળવ્યા પછી, તેને કોડમાં રૂપાંતરિત કરવામાં ઘણી સમસ્યાઓ છે સાચું કહું તો, જ્યારે હું પહેલાં ફ્રન્ટ-એન્ડ પ્રોજેક્ટ્સ કરતો હતો, ત્યારે હું ડિઝાઇન ડ્રાફ્ટને જોઈને શૈલીઓને સમાયોજિત કરવામાં અડધો દિવસ પસાર કરતો હતો. અંતર 2px જેટલું અલગ છે, રંગ યોગ્ય નથી, ગોળાકાર ખૂણા ઉમેરવાનું ભૂલી ગયા... વારંવાર, તે ખૂબ જ હેરાન કરે છે.

સારા સમાચાર એ છે કે: હવે પેન્સિલ નામનું MCP છે, આ સમસ્યાઓ મૂળભૂત રીતે ઉકેલી શકાય છે.

મેં તાજેતરમાં તેનો ઉપયોગ કરીને થોડા પૃષ્ઠો બનાવ્યા છે, અને મને લાગે છે કે તે ખરેખર સારું છે - ડિઝાઇન ડ્રાફ્ટથી કોડ સુધી, કાર્યક્ષમતા સીધી રીતે અનેક ગણી વધી જાય છે. અને સૌથી મહત્વની વાત એ છે કે, AI દ્વારા જનરેટ કરવામાં આવેલ ડિઝાઇન ડ્રાફ્ટની ગુણવત્તા પણ સારી છે, અને કોડ રિસ્ટોરેશન પણ ખૂબ ઊંચું છે.

આ લેખમાં આપણે વાત કરીશું: પેન્સિલ શું છે, તે શા માટે વાપરવા યોગ્ય છે અને ઝડપથી કેવી રીતે શરૂઆત કરવી.

01. પેન્સિલ શું છે? સરળ ભાષામાં સમજાવો

સરળ શબ્દોમાં કહીએ તો, પેન્સિલ એક એવું સાધન છે જે ડિઝાઇન અને કોડને એકસાથે જોડી શકે છે.

પહેલાંની પ્રક્રિયા આ પ્રમાણે હતી:

Figma માં ડિઝાઇન ડ્રાફ્ટ બનાવો ડિઝાઇનર કદ, રંગ અને અંતરને ચિહ્નિત કરે છે ડેવલપર ડિઝાઇન ડ્રાફ્ટને જોઈને એક પછી એક કોડની લાઇન લખે છે લખાઈ ગયા પછી ડિઝાઇન ડ્રાફ્ટ સાથે સરખામણી કરો, અને જાણો કે રિસ્ટોરેશન માત્ર 70%-80% છે વારંવાર ગોઠવણો કરો, વાતચીત કરો...

પેન્સિલનો ઉકેલ આ છે:

તમારે ફક્ત કુદરતી ભાષામાં જરૂરિયાતોનું વર્ણન કરવાની જરૂર છે (જેમ કે "મને Apple શૈલીનું મ્યુઝિક પ્લેયર ડિઝાઇન કરવામાં મદદ કરો"), અને AI સીધું જ કેનવાસ પર ડિઝાઇન ડ્રાફ્ટ જનરેટ કરી શકે છે, અને પછી એક ક્લિકથી અનુરૂપ કોડ જનરેટ કરી શકે છે (Next.js, Flutter, Vue વગેરે સપોર્ટેડ છે).

અને આશ્ચર્યજનક વાત એ છે કે, તમે ડિઝાઇન કરતી વખતે ગોઠવણો કરી શકો છો. ઉદાહરણ તરીકે:

"જાંબલી રંગ ખૂબ વધારે છે, થોડો લીલો રંગ ઉમેરો" "અંતર થોડું મોટું કરો" "આ વેબસાઇટની શૈલીનો સંદર્ભ લો" AI તમને ડિઝાઇન અને કોડને રીઅલ ટાઇમમાં સમાયોજિત કરવામાં મદદ કરશે, તમારે જાતે કંઈ કરવાની જરૂર નથી.

02. મને શા માટે લાગે છે કે પેન્સિલ વાપરવા યોગ્ય છે?

1) કાર્યક્ષમતા ખરેખર ઊંચી છે

પરંપરાગત રીતે એક પૃષ્ઠનો ડિઝાઇન ડ્રાફ્ટ બનાવવા માટે 4-6 કલાક લાગી શકે છે. પેન્સિલ સાથે, તે 20-40 મિનિટમાં થઈ જાય છે.

અને કોડ રિસ્ટોરેશન 98%+ સુધી પહોંચી શકે છે, તમારે મૂળભૂત રીતે શૈલીઓને સમાયોજિત કરવાની જરૂર નથી.

મેં જાતે જ પ્રયાસ કર્યો, અને એક સરળ લેન્ડિંગ પેજ બનાવવા માટે, ડિઝાઇનથી લઈને કોડ સુધી બધું જ કરવામાં લગભગ અડધો કલાક લાગ્યો.

2) ડિઝાઇન ગુણવત્તા સ્થિર છે

પહેલાં જ્યારે AI દ્વારા ડિઝાઇન ડ્રાફ્ટ જનરેટ કરવામાં આવતો હતો, ત્યારે ઘણીવાર આ સમસ્યાઓ આવતી હતી:

રંગ સંયોજન અસંગત છે અંતર અવ્યવસ્થિત છે ફોન્ટનું કદ અસમાન છે

પેન્સિલ પાસે ડિઝાઇન સિસ્ટમ અને સૌંદર્યલક્ષી ધોરણોનો સમૂહ છે, તેથી જનરેટ કરવામાં આવેલ ડિઝાઇન ડ્રાફ્ટની ગુણવત્તા પ્રમાણમાં સ્થિર છે. તે સંપૂર્ણ ન હોઈ શકે, પરંતુ તે ખૂબ ખરાબ નહીં હોય.

3) બહુવિધ ટેકનોલોજી સ્ટેક્સને સપોર્ટ કરે છે

તમે Next.js, Flutter, Vue અથવા SwiftUI માં કામ કરતા હોવ, પેન્સિલ આપોઆપ અનુરૂપ કોડ જનરેટ કરી શકે છે.

મારા જેવા બહુવિધ પ્લેટફોર્મ પર કામ કરતા લોકો માટે, આ ખરેખર ખૂબ જ અનુકૂળ છે - એક ડિઝાઇન ડ્રાફ્ટ અને બધા પ્લેટફોર્મ માટે કોડ ઉપલબ્ધ છે.

03. પેન્સિલ કેવી રીતે ઇન્સ્ટોલ અને ઉપયોગ કરવી?

નીચે હું મારી પોતાની ઇન્સ્ટોલેશન અને ઉપયોગની પ્રક્રિયા શેર કરી રહ્યો છું, જે હાલમાં સૌથી સરળ રીત હોવી જોઈએ.

પ્રથમ પગલું: પેન્સિલ MCP ઇન્સ્ટોલ કરો

તમારા IDE (VS Code, Cursor વગેરે) માં સીધું જ "pencil" શોધો

ઇન્સ્ટોલ કરવા માટે ક્લિક કરો, અન્ય કોઈ જગ્યાએથી ડાઉનલોડ કરશો નહીં (નકલી આવૃત્તિ ડાઉનલોડ કરવાનું ટાળો)

નોંધ: IDE માં સીધું શોધવું એ સૌથી સુરક્ષિત રીત છે.

બીજું પગલું: AI ને તમને ગોઠવણી કરવામાં મદદ કરવા દો

ઇન્સ્ટોલ કર્યા પછી તેને કેવી રીતે ગોઠવવું?

સાચું કહું તો, મને શરૂઆતમાં બહુ સમજ નહોતી. પછી મને સમજાયું કે સૌથી સરળ રીત એ છે કે: AI ને તમને ગોઠવણી કરવામાં મદદ કરવા દો.

તમારા AI પ્રોગ્રામિંગ સહાયક (Claude Code અથવા Codex) ખોલો, અને તેને કહો:

મેં આ IDE માં "pencil" નામનું MCP ઇન્સ્ટોલ કર્યું છે, કૃપા કરીને મને તેને ગોઠવવામાં મદદ કરો, જેથી મારા Claude Code, Codex અને VS Code આ MCP નો ઉપયોગ કરી શકે

પછી તેને ગોઠવણી કરવામાં મદદ કરવા દો.

ત્રીજું પગલું: પેન્સિલનો ઉપયોગ કરીને ડિઝાઇન કરવાનું શરૂ કરો

ગોઠવણી કર્યા પછી, તમે IDE ની ડાબી બાજુએ પેન્સિલનું ચિહ્ન જોશો, તેને ખોલવા માટે ક્લિક કરો અને તે પેન્સિલનો કેનવાસ છે.

પછી જમણી બાજુના AI ડાયલોગ બોક્સમાં, તમે શું ડિઝાઇન કરવા માંગો છો તે જણાવો.

ઉદાહરણ તરીકે:

"મને Apple શૈલીનું મ્યુઝિક પ્લેયર ડિઝાઇન કરવામાં મદદ કરો"

"એક સરળ Landing Page બનાવો, મુખ્ય રંગ વાદળી રાખો"

"આ વેબસાઇટની શૈલીનો સંદર્ભ લો અને મને તેના જેવું જ બનાવો"

AI કેનવાસ પર ડિઝાઇન ડ્રાફ્ટ જનરેટ કરશે. જો તમે સંતુષ્ટ ન હો, તો તમે તેને એડજસ્ટ કરવાનું ચાલુ રાખી શકો છો:

"ફોન્ટ ખૂબ નાના છે, તેને થોડા મોટા કરો"

"અંતર થોડું વધારે કરો"

"વધુ હળવો રંગ બદલો"

જ્યાં સુધી તમે સંતુષ્ટ ન થાવ ત્યાં સુધી એડજસ્ટ કરતા રહો.

ચોથું પગલું: કોડ જનરેટ કરો

ડિઝાઇન ડ્રાફ્ટ તૈયાર થયા પછી, તમે AI ને તમારા માટે કોડ જનરેટ કરવા માટે કહી શકો છો.

તમે સીધું કહી શકો છો:

"માટે Next.js કોડ જનરેટ કરો"

"Flutter કોડ જનરેટ કરો"

"Vue 3 કોડ જનરેટ કરો"

AI તમારા ડિઝાઇન ડ્રાફ્ટ અનુસાર આપોઆપ відповідний કોડ જનરેટ કરશે.

વાસ્તવિક અસર:

04. કેટલાક વાસ્તવિક ઉપયોગના અનુભવો

થોડી વાર ઉપયોગ કર્યા પછી, અહીં કેટલાક અનુભવો શેર કરું છું:

1) જરૂરિયાતોનું વર્ણન વિગતવાર હોવું જોઈએ

શરૂઆતમાં હું કહેતો હતો "મને એક વેબસાઇટ બનાવો", પરિણામે AI એ જે બનાવ્યું તે હું જે ઇચ્છતો હતો તેનાથી તદ્દન અલગ હતું.

પછી મને સમજાયું કે વર્ણન જેટલું વિગતવાર હશે, પરિણામ એટલું જ સારું આવશે.

ઉદાહરણ તરીકે:

ખરાબ વર્ણન: "મને એક લોગિન પેજ બનાવો"

સારું વર્ણન: "મને એક સરળ લોગિન પેજ બનાવો, ટોચ પર લોગો હોય, વચ્ચે ઇમેઇલ અને પાસવર્ડ ઇનપુટ બોક્સ હોય, અને નીચે લોગિન બટન હોય, શૈલી Apple ની સત્તાવાર વેબસાઇટ જેવી રાખો"

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 નો ઉપયોગ કર્યો છે? પરિણામો કેવા છે?

હું દરેક ટિપ્પણીને ધ્યાનથી જોઈશ. આવતા લેખમાં મળીએ.