Pencil MCP: ഡിസൈൻ ബ്ലൂപ്രിന്റുകൾ തൽക്ഷണം കോഡായി മാറുന്നു, ഫ്രണ്ട്എൻഡ് ഡെവലപ്‌മെൻ്റ് കാര്യക്ഷമത 8 മടങ്ങ് വർദ്ധിപ്പിക്കുന്നു

ഹലോ, ഞാൻ വിദേശ ഉൽപ്പന്നങ്ങൾ നിർമ്മിക്കുന്ന ലിയാങ്‌സിയാവോ ആണ്. പുതുവർഷം അടുത്തിരിക്കുകയാണ്, ഈയിടെ ലഭിച്ച പുതിയ നേട്ടങ്ങൾ ഈ ലേഖനത്തിലൂടെ നിങ്ങളുമായി പങ്കിടാം.\n\nവെബ്‌പേജുകളോ ആപ്പുകളോ നിർമ്മിക്കുമ്പോൾ നിങ്ങൾക്ക് എപ്പോഴെങ്കിലും ഇത് തോന്നിയിട്ടുണ്ടോ:\n\nഒരു മനോഹരമായ പേജ് നിർമ്മിക്കാൻ ആഗ്രഹിക്കുന്നു, പക്ഷേ സ്വന്തമായി ഡിസൈൻ ചെയ്യാൻ കഴിയില്ല.\nഡിസൈനർമാരെ കണ്ടെത്താൻ വലിയ ചിലവാണ്, സൗജന്യ ടെംപ്ലേറ്റുകൾ അനുയോജ്യമല്ല.\nഒരുവിധം ഡിസൈൻ പൂർത്തിയാക്കിയാൽ, അത് കോഡിലേക്ക് മാറ്റുന്നത് കൂടുതൽ പ്രശ്നങ്ങളുണ്ടാക്കുന്നു.\n\nസത്യം പറഞ്ഞാൽ, ഞാൻ മുമ്പ് ഫ്രണ്ട്എൻഡ് പ്രോജക്ടുകൾ ചെയ്യുമ്പോൾ, ഡിസൈൻ അനുസരിച്ച് ശൈലികൾ ക്രമീകരിക്കുന്നത് ഒരുപാട് സമയമെടുക്കുമായിരുന്നു. 2px-ൻ്റെ വ്യത്യാസം, നിറം ശരിയല്ല, വളഞ്ഞ കോണുകൾ ചേർക്കാൻ മറന്നു... ഇത് വീണ്ടും വീണ്ടും ചെയ്യേണ്ടിവരുന്നത് വളരെ അധികം ബുദ്ധിമുട്ടുണ്ടാക്കിയിരുന്നു.\n\nസന്തോഷകരമായ വാർത്തയെന്തെന്നാൽ: ഇപ്പോൾ Pencil MCP ഉള്ളതുകൊണ്ട്, ഈ പ്രശ്നങ്ങളെല്ലാം പരിഹരിക്കാനാകും.\n\nഞാൻ ഈയിടെ ഇത് ഉപയോഗിച്ച് കുറച്ച് പേജുകൾ നിർമ്മിച്ചു, ഇത് വളരെ മികച്ചതാണെന്ന് മനസ്സിലായി - ഡിസൈനിൽ നിന്ന് കോഡിലേക്കുള്ള മാറ്റം കാര്യക്ഷമത പലമടങ്ങ് വർദ്ധിപ്പിക്കുന്നു. AI ഉപയോഗിച്ച് നിർമ്മിക്കുന്ന ഡിസൈനുകൾ മികച്ച നിലവാരം പുലർത്തുന്നു, കോഡിൻ്റെ കൃത്യതയും വളരെ കൂടുതലാണ് എന്നതാണ് ഇതിലെ പ്രധാന കാര്യം.\n\nPencil എന്താണ്, എന്തുകൊണ്ട് ഇത് ഉപയോഗിക്കണം, എങ്ങനെ വേഗത്തിൽ ഉപയോഗിക്കാൻ തുടങ്ങാം എന്നതിനെക്കുറിച്ചാണ് ഈ ലേഖനം.\n\n## 01. Pencil എന്നാൽ എന്ത്? ലളിതമായ ഭാഷയിൽ വിശദീകരിക്കുക\n\nലളിതമായി പറഞ്ഞാൽ, Pencil എന്നത് ഡിസൈനെയും കോഡിനെയും ബന്ധിപ്പിക്കുന്ന ഒരു ടൂളാണ്.\n\nമുമ്പത്തെ രീതി ഇപ്രകാരമായിരുന്നു:\n\nFigma-യിൽ ഡിസൈൻ ഉണ്ടാക്കുക\nഡിസൈനർമാർ അളവുകളും നിറങ്ങളും അകലവും രേഖപ്പെടുത്തുന്നു\nഡെവലപ്പർമാർ ഡിസൈൻ നോക്കി ഓരോ വരിയായി കോഡ് എഴുതുന്നു\nഎഴുതിയ ശേഷം ഡിസൈനുമായി താരതമ്യം ചെയ്യുമ്പോൾ 70%-80% മാത്രമേ കൃത്യതയുണ്ടാവുകയുള്ളു.\nവീണ്ടും ക്രമീകരിക്കുക, ആശയവിനിമയം നടത്തുക...\n\nPencil-ൻ്റെ പരിഹാരം ഇതാ:\n\nനിങ്ങൾ ആവശ്യകതകൾ സ്വാഭാവിക ഭാഷയിൽ വിവരിക്കുക (

തുടർന്ന് വലതുവശത്തുള്ള AI സംഭാഷണ ബോക്സിൽ നിങ്ങൾക്ക് എന്ത് ഡിസൈനാണ് വേണ്ടതെന്ന് പറയുക.

ഉദാഹരണത്തിന്:

"ഒരു ആപ്പിൾ ശൈലിയിലുള്ള മ്യൂസിക് പ്ലെയർ രൂപകൽപ്പന ചെയ്യാൻ സഹായിക്കുക"

"നീല നിറത്തിലുള്ള ലളിതമായ ലാൻഡിംഗ് പേജ് ഉണ്ടാക്കുക"

"ഈ വെബ്സൈറ്റിന്റെ ശൈലി റഫർ ചെയ്ത് അതുപോലൊന്ന് ഉണ്ടാക്കുക"

AI ക്യാൻവാസിൽ ഡിസൈൻ ഡ്രാഫ്റ്റ് ഉണ്ടാക്കും. തൃപ്തികരമല്ലെങ്കിൽ, അത് ക്രമീകരിക്കുന്നത് തുടരാൻ ആവശ്യപ്പെടാം:

"ഫോണ്ട് വളരെ ചെറുതാണ്, വലുതാക്കുക"

"ഇടം കുറച്ചുകൂടി കൂട്ടുക"

"കൂടുതൽ മൃദുവായ നിറം മാറ്റുക"

തൃപ്തിയാകുന്നതുവരെ ക്രമീകരിക്കുന്നത് തുടരുക.

നാലാമത്തെ ഘട്ടം: കോഡ് ഉണ്ടാക്കുക

ഡിസൈൻ പൂർത്തിയാക്കിയ ശേഷം, 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 സ്റ്റാറ്റിക് പേജുകളും സാധാരണ പ്രവർത്തനങ്ങളും ചെയ്യാൻ അനുയോജ്യമാണ്, എന്നാൽ സങ്കീർണ്ണമായ ആനിമേഷനുകൾ, ഗെസ്റ്റures തുടങ്ങിയവ സ്വയം കോഡ് ചെയ്ത് ഉണ്ടാക്കേണ്ടിവരും.

എന്നാൽ മിക്ക സാഹചര്യങ്ങളിലും Pencil മതിയാകും.

3) AI മോഡൽ തിരഞ്ഞെടുക്കുന്നത് പ്രധാനമാണ്

ഞാൻ കുറച്ച് മോഡലുകൾ പരീക്ഷിച്ചു, അതിൽ Claude Opus 4.5 ആണ് മികച്ച ദൃശ്യ അനുഭവം നൽകുന്നത്.

നിങ്ങൾ മറ്റ് മോഡലുകളാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, ഉണ്ടാക്കുന്ന ഡിസൈനിന്റെ ഗുണനിലവാരം കുറഞ്ഞേക്കാം.

06. കാര്യക്ഷമത താരതമ്യ ഡാറ്റ

ഞാൻ സ്വയം പരീക്ഷിച്ച ചില ഡാറ്റ ഇതാ:

എന്നെ സംബന്ധിച്ചിടത്തോളം, ഏറ്റവും വലിയ മൂല്യം "എങ്ങനെ നടപ്പിലാക്കാം" എന്നതിൽ നിന്ന് ശ്രദ്ധ മാറ്റി "എന്ത് ഫംഗ്ഷൻ ചെയ്യണം" എന്നതിലേക്ക് കൊണ്ടുവരാൻ സാധിച്ചു എന്നതാണ്.

07. സംഗ്രഹം

Pencil അടിസ്ഥാനപരമായി ഡിസൈനും ഡെവലപ്‌മെന്റും തമ്മിൽ ബന്ധിപ്പിക്കുന്നു, ഇത് നിങ്ങളുടെ സംസാരഭാഷ ഉപയോഗിച്ച് മുഴുവൻ പ്രക്രിയയും നിയന്ത്രിക്കാൻ അനുവദിക്കുന്നു.

നിങ്ങൾ ഫ്രണ്ട്എൻഡ് ഡെവലപ്‌മെന്റ് ചെയ്യുകയാണെങ്കിൽ അല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം ഉൽപ്പന്നം ഉണ്ടാക്കുകയാണെങ്കിൽ, Pencil ഉപയോഗിക്കാൻ ഞാൻ ശക്തമായി ശുപാർശ ചെയ്യുന്നു:കോഡിന്റെ ഗുണനിലവാരം സ്ഥിരതയുള്ളതാണ്: 98%+ കൃത്യതയോടെ പുനഃസ്ഥാപിക്കുന്നു, അടിസ്ഥാനപരമായി ശൈലി ക്രമീകരിക്കേണ്ടതില്ല

ഒന്നിലധികം സാങ്കേതിക സ്റ്റാക്കുകളെ പിന്തുണയ്ക്കുന്നു: Next.js, Flutter, Vue തുടങ്ങിയവ ഉപയോഗിക്കാൻ കഴിയും

இயற்கை மொழி இயக்கி: ആവശ്യകതകൾ മനുഷ്യ ഭാഷയിൽ വിവരിക്കുക, AI സ്വയമേവ உருவாக்கும்

അവസാനമായി, നിങ്ങൾ സ്വതന്ത്ര ഡെവലപ്‌മെന്റ്, AI പ്രോഗ്രാമിംഗ് എന്നിവയിൽ ഏർപ്പെട്ടിരിക്കുകയാണെങ്കിൽ, ചർച്ച ചെയ്യാൻ മടിക്കേണ്ടതില്ല:

നിങ്ങൾ സാധാരണയായി എങ്ങനെയാണ് ഡിസൈൻ ചെയ്യുന്നത്?

നിങ്ങൾ Pencil ഉപയോഗിച്ചിട്ടുണ്ടോ? ഫലം എങ്ങനെ ഉണ്ടായിരുന്നു?

ഞാൻ ഓരോ കമന്റും ശ്രദ്ധാപൂർവ്വം വായിക്കും. അടുത്ത ലേഖനത്തിൽ കാണാം.