পেন্সিল MCP: ডিজাইন থেকে সরাসরি কোড, ফ্রন্টএন্ড ডেভেলপমেন্টের গতি ৮ গুণ বৃদ্ধি পায়

হ্যালো বন্ধুরা, আমি লিয়াং শিয়াও, একটি আন্তর্জাতিক পণ্য তৈরি করি। নববর্ষের আগে, আমি আপনাদের সাথে আমার সাম্প্রতিক কিছু অভিজ্ঞতা শেয়ার করার জন্য একটি নিবন্ধ প্রকাশ করছি।

ওয়েবসাইট বা অ্যাপ তৈরি করার সময়, আপনি কি কখনও এমন অনুভব করেছেন:

আমি একটি সুন্দর পেজ তৈরি করতে চাই, কিন্তু আমার ডিজাইন দক্ষতা ভালো নয় একজন ডিজাইনার নিয়োগ করা খুব ব্যয়বহুল, এবং বিনামূল্যে টেমপ্লেট উপযুক্ত নয় অনেক কষ্টের পর একটি ডিজাইন তৈরি করার পরে, এটিকে কোডে রূপান্তর করা একটি বড় সমস্যা সত্যি বলতে, আমি যখন ফ্রন্টএন্ড প্রোজেক্ট করতাম, তখন ডিজাইন দেখে স্টাইল ঠিক করতেই আমার অনেকটা সময় লেগে যেত। ২ পিক্সেলের ব্যবধান, ভুল রঙ, গোলাকার কোণা যোগ করতে ভুলে যাওয়া... বারবার, এটা খুবই বিরক্তিকর ছিল।

সুখবর হলো: এখন পেন্সিল MCP এর মাধ্যমে এই সমস্যাগুলো সমাধান করা সম্ভব।

আমি সম্প্রতি এটি ব্যবহার করে কয়েকটি পেজ তৈরি করেছি এবং দেখেছি যে এটি সত্যিই খুব কাজের – ডিজাইন থেকে কোড তৈরি করার গতি কয়েকগুণ বেড়ে গেছে। এবং সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো, AI দ্বারা তৈরি করা ডিজাইনগুলোর মান বেশ ভালো এবং কোড প্রায় হুবহু একই রকম হয়।

এই নিবন্ধে, আমরা আলোচনা করব: পেন্সিল কী, এটি কেন ব্যবহার করা উচিত এবং কীভাবে দ্রুত শুরু করা যায়।

01. পেন্সিল কী? সহজ ভাষায় ব্যাখ্যা করুন

সহজভাবে বলতে গেলে, পেন্সিল হলো এমন একটি সরঞ্জাম যা ডিজাইন এবং কোডকে একত্রিত করতে পারে।

আগের নিয়ম ছিল:

Figma-তে ডিজাইন তৈরি করা ডিজাইনাররা আকার, রঙ এবং ব্যবধান উল্লেখ করতেন ডেভেলপাররা ডিজাইন দেখে লাইন বাই লাইন কোড লিখতেন কোড লেখার পরে, ডিজাইনের সাথে তুলনা করে দেখা যেত যে এটি ৭০%-৮০% এর মতো হয়েছে বারবার পরিবর্তন এবং আলোচনা করা হতো...

পেন্সিলের সমাধান হলো:

আপনাকে শুধু স্বাভাবিক ভাষায় আপনার চাহিদা বর্ণনা করতে হবে (যেমন "আমাকে একটি আপেল-স্টাইলের মিউজিক প্লেয়ার ডিজাইন করতে সাহায্য করুন"), এবং AI সরাসরি ক্যানভাসে ডিজাইন তৈরি করবে এবং তারপর এক ক্লিকে সংশ্লিষ্ট কোড তৈরি করবে (Next.js, Flutter, Vue ইত্যাদি সমর্থিত)।

এবং মজার বিষয় হলো, আপনি ডিজাইন করার সময় পরিবর্তন করতে পারেন। যেমন:

"বেশি বেগুনি হয়ে গেছে, কিছু সবুজ যোগ করুন" "ফাঁকা একটু বাড়িয়ে দিন" "এই ওয়েবসাইটের স্টাইল অনুসরণ করুন" AI রিয়েল-টাইমে ডিজাইন এবং কোড পরিবর্তন করতে সাহায্য করবে, আপনাকে নিজে কিছু করতে হবে না।

02. কেন আমি মনে করি পেন্সিল ব্যবহার করা উচিত?

1) গতি সত্যিই বেশি

ঐতিহ্যবাহী উপায়ে একটি পেজের ডিজাইন তৈরি করতে ৪-৬ ঘণ্টা লাগতে পারে। পেন্সিল ব্যবহার করে, ২০-৪০ মিনিটের মধ্যে এটি করা সম্ভব।

এবং কোড প্রায় ৯৮%+ হুবহু হয়, তাই স্টাইল পরিবর্তন করার প্রয়োজন হয় না।

আমি নিজে চেষ্টা করে দেখেছি, একটি সাধারণ ল্যান্ডিং পেজ ডিজাইন থেকে কোড তৈরি করতে প্রায় আধা ঘণ্টা লেগেছে।

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 ডায়ালগ বক্সে, আপনি কী ডিজাইন চান তা বলুন।

যেমনঃ

"আমাকে একটি আপেল-স্টাইলের মিউজিক প্লেয়ার ডিজাইন করে দিন"

"একটি সাধারণ ল্যান্ডিং পেজ তৈরি করুন, যার প্রধান রং হবে নীল"

"এই ওয়েবসাইটের স্টাইল অনুসরণ করে, আমাকে একটি অনুরূপ ওয়েবসাইট তৈরি করে দিন"

AI ক্যানভাসে ডিজাইন তৈরি করবে। যদি পছন্দ না হয়, তাহলে এটিকে আরও পরিবর্তন করতে বলুনঃ

"ফন্ট খুব ছোট, একটু বড় করুন"

"স্পেসিং আরও একটু বাড়ান"

"আরও হালকা রং ব্যবহার করুন"

যতক্ষণ না আপনি সন্তুষ্ট হন, ততক্ষণ পর্যন্ত পরিবর্তন করতে থাকুন।

চতুর্থ ধাপ: কোড তৈরি করা

ডিজাইন হয়ে গেলে, AI কে কোড তৈরি করতে বলুন।

আপনি সরাসরি বলতে পারেনঃ

"আমার জন্য Next.js কোড তৈরি করুন"

"Flutter কোড তৈরি করুন"

"Vue 3 কোড তৈরি করুন"

AI আপনার ডিজাইন অনুযায়ী, স্বয়ংক্রিয়ভাবে কোড তৈরি করবে।

বাস্তব চিত্রঃ

04. কিছু বাস্তব ব্যবহারের অভিজ্ঞতা

কয়েকবার ব্যবহারের পর, কিছু অনুভূতি শেয়ার করছিঃ

1) চাহিদার বর্ণনা নির্দিষ্ট হতে হবে

প্রথমদিকে আমি বলতাম "আমাকে একটি ওয়েবসাইট তৈরি করে দিন", কিন্তু AI যা তৈরি করত, তা আমার চাহিদার ধারেকাছেও থাকত না।

পরে বুঝলাম, বর্ণনা যত নির্দিষ্ট হবে, ফলাফল তত ভালো হবে।

যেমনঃ

খারাপ বর্ণনাঃ "আমাকে একটি লগইন পেজ তৈরি করে দিন"

ভালো বর্ণনাঃ "আমাকে একটি সাধারণ লগইন পেজ তৈরি করে দিন, যার উপরে একটি লোগো থাকবে, মাঝে ইমেল এবং পাসওয়ার্ড লেখার জায়গা থাকবে, এবং নিচে লগইন বাটন থাকবে। স্টাইলটি যেন অ্যাপেল ওয়েবসাইটের মতো হয়"

2) রেফারেন্স ছবি আপলোড করা যেতে পারে

যদি আপনি কোনো ওয়েবসাইটের ডিজাইন পছন্দ করেন, তাহলে স্ক্রিনশট নিয়ে AI কে আপলোড করে রেফারেন্স হিসেবে ব্যবহার করতে পারেন।

এতে AI আপনার প্রত্যাশার কাছাকাছি ডিজাইন তৈরি করতে পারবে।

3) একবারের চেয়ে বারবার পরিবর্তন করা বেশি গুরুত্বপূর্ণ

একবারে নিখুঁত ডিজাইন তৈরি করার আশা করবেন না, এটা বাস্তবসম্মত নয়।

সঠিক উপায় হলঃ প্রথমে একটি মোটামুটি ডিজাইন তৈরি করুন, তারপর ধীরে ধীরে পরিবর্তন করুন।

প্রতিবার একটি বা দুটি জিনিস পরিবর্তন করুন, যেমন "স্পেসিং আরও একটু বাড়ান" "রং আরও হালকা করুন", এতে সবচেয়ে বেশি সুবিধা পাওয়া যায়।

4) কোডের মান বেশ ভালো

আমি কয়েকবার চেষ্টা করে দেখেছি, AI যে কোড তৈরি করে, তার মান বেশ ভালোঃ

• কোড স্ট্রাকচার পরিষ্কার
• স্টাইলের সঠিকতা বেশি (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 স্বয়ংক্রিয়ভাবে তৈরি করবে

শেষ পর্যন্ত, আপনি যদি স্বতন্ত্র ডেভেলপমেন্ট এবং AI প্রোগ্রামিং করেন, তাহলে মন্তব্য করতে পারেন:

আপনি সাধারণত কিভাবে ডিজাইন করেন?

আপনি কি Pencil ব্যবহার করেছেন? কেমন ফল পেয়েছেন?

আমি প্রতিটি মন্তব্য মনোযোগ সহকারে দেখব। পরের পোস্টে দেখা হবে।