Anthropic, Claude Code-এ Terminal UI Mockup-এর জন্য /design কমান্ড যুক্ত করেছে

Anthropic তাদের Claude Code-কে একটি নতুন /design কমান্ডের মাধ্যমে আরও উন্নত করেছে, যা ডেভেলপারদের টার্মিনাল না ছেড়েই UI mockup তৈরি, পরিবর্তন এবং দেখার সুবিধা দেয়।

সরাসরি টার্মিনালে UI Prototyping

Figma এবং একটি শেল (shell)-এর মধ্যে বারবার যাতায়াত না করে, আপনি এখন /design a few options for a login screen-এর মতো কিছু টাইপ করতে পারেন। Claude বেশ কিছু ইন্টারঅ্যাক্টিভ “artboards”-এর মাধ্যমে উত্তর দেবে যা হাই-ফিডেলিটি (high-fidelity) mockup প্রদর্শন করে। আপনি লেআউটগুলো তুলনা করতে পারেন, আপনার পছন্দেরটি বেছে নিতে পারেন এবং ফলো-আপ প্রশ্ন করার মাধ্যমে এর লুক আরও উন্নত করতে পারেন—সবকিছুই প্রোডাকশন কোডের একটি লাইন লেখার আগেই।

আপনার Codebase থেকে Context-Aware Mockup

ডেভেলপার Nate Parrott উল্লেখ করেছেন যে, Claude আসলে বর্তমান রিপোজিটরি (repository) পড়ে। এটি কালার প্যালেট (colour palettes), কম্পোনেন্ট লাইব্রেরি (component libraries) এবং লেআউট কনভেনশনগুলো সংগ্রহ করে এবং তারপর প্রজেক্টের বিদ্যমান স্টাইলের সাথে মিল রেখে প্রতিটি ডিজাইন তৈরি করে। ফলাফলগুলো “Artifacts” হিসেবে প্রদর্শিত হয়, যা Claude-এর ভেতরে একটি ডেডিকেটেড ভিউ যেখানে আলাদা কোনো গ্রাফিক্স এডিটর না খুলেই ছবিগুলো দেখা যায়। এই পর্যায়ে mockup-গুলো শুধুমাত্র Claude-এর ওয়ার্কস্পেসে থাকে; কোডে রূপান্তর করার আগে আপনাকে অবশ্যই এগুলো ফাইল সিস্টেমে সেভ করতে হবে।

AI-Assisted Development-এর জন্য এটি কেন গুরুত্বপূর্ণ

এই কমান্ডটি সফটওয়্যার ডেভেলপমেন্ট লাইফ সাইকেলের দুটি ধাপ—ডিজাইন এবং কোডিং—কে একটি ধাপে নিয়ে আসে। যে দলগুলো দ্রুত কাজ করতে পছন্দ করে, তারা একটি মাত্র প্রম্পটের মাধ্যমে একাধিক লেআউট অপশন তৈরি করতে পারে, যা প্রাথমিক পর্যায়ের ডিসকভারি (discovery) প্রক্রিয়াকে ত্বরান্বিত করে। যেহেতু Claude লাইভ কোডবেস ব্যবহার করে, তাই mockup-গুলো ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ এবং কম্পোনেন্ট সিস্টেমের সাথে সামঞ্জস্যপূর্ণ থাকে, যা সাধারণ ইমেজ জেনারেশনের পর প্রয়োজনীয় ম্যানুয়াল ক্লিনিংয়ের কাজ কমিয়ে দেয়।

Anthropic এটিকে একটি “AI software engineer”-এর দিকে এক ধাপ হিসেবে দেখছে, যা লজিক এবং নান্দনিকতা (aesthetics) উভয়ই সামলাতে পারে। টার্মিনাল যদি একটি মাল্টি-মোডাল ওয়ার্কস্পেস হিসেবে কাজ করতে পারে, তবে কোড লেখা এবং ইউজার এক্সপেরিয়েন্স (user experience) তৈরির মধ্যকার পার্থক্য নাটকীয়ভাবে কমে আসবে।

বর্তমান সীমাবদ্ধতাগুলো

ফিচারটি এখনও প্রিভিউ (preview) পর্যায়ে রয়েছে। জেনারেট করা mockup-গুলো স্বয়ংক্রিয়ভাবে সোর্স ফাইল হয়ে যায় না; আপনাকে নিজেই সেগুলো এক্সপোর্ট এবং ইন্টিগ্রেট করতে হবে। এই অতিরিক্ত ধাপটি সময়ের সাশ্রয় কমিয়ে দিতে পারে, বিশেষ করে ডজন ডজন কম্পোনেন্ট সম্বলিত বড় প্রজেক্টের ক্ষেত্রে।

কীভাবে এটি ব্যবহার করবেন

লেটেস্ট প্রিভিউ বিল্ড পেতে এবং /design কমান্ডটি চালু করতে claude update রান করুন।

মূল বিষয়সমূহ

  • ইন্টিগ্রেটেড প্রোটোটাইপিং: /design সরাসরি টার্মিনাল প্রম্পট থেকে একাধিক UI artboard তৈরি করে।
  • কনটেক্সচুয়াল সামঞ্জস্যতা: বিদ্যমান ডিজাইন সিস্টেমের সাথে mockup-গুলোকে সামঞ্জস্যপূর্ণ রাখতে Claude বর্তমান কোডবেস স্ক্যান করে।
  • সুশৃঙ্খল ওয়ার্কফ্লো: Claude Design-এর প্রম্পটিং ক্ষমতা এবং Claude Code-এর এক্সিকিউশনকে একত্রিত করার মাধ্যমে, ডেভেলপাররা টুল পরিবর্তন না করেই কনসেপ্ট থেকে ভিজ্যুয়াল প্রোটোটাইপে যেতে পারেন।

Anthropic-এর নতুন /design কমান্ড ডেভেলপারদের সরাসরি টার্মিনাল থেকে UI mockup তৈরি এবং পরিবর্তন করার সুযোগ দেয়, যা ডিজাইন টুল এবং কোড এডিটরের মধ্যে বারবার যাতায়াত কমিয়ে দেয়—এটি এমন একটি বাধা যা অনেক দ্রুতগতিসম্পন্ন টিম এখনও মোকাবিলা করছে।

CLI প্রম্পট থেকে ভিজ্যুয়াল ড্রাফট তৈরি করা

আপনি /design a few options for a login screen-এর মতো একটি কমান্ড টাইপ করলে Claude ইন্টারঅ্যাক্টিভ artboard-এর একটি সেট প্রদান করে। প্রতিটি artboard একটি হাই-ফিডেলিটি mockup দেখায় যা আপনি ফলো-আপ প্রশ্ন করার মাধ্যমে পরীক্ষা, তুলনা এবং উন্নত করতে পারেন।

Claude বর্তমান প্রজেক্টের ফাইলগুলো পড়ে, কালার প্যালেট, কম্পোনেন্ট লাইব্রেরি এবং লেআউট কনভেনশনগুলো বের করে নেয় এবং তারপর ডিজাইনের সাথে সামঞ্জস্য রেখে তা তৈরি করে। আউটপুটটি “Artifacts” হিসেবে প্রদর্শিত হয়, যা একটি ভিউ যেখানে আলাদা কোনো গ্রাফিক এডিটর না খুলেই ছবিগুলো দেখা যায়। এই পর্যায়ে mockup-গুলো শুধুমাত্র Claude-এর ওয়ার্কস্পেসে থাকে; কোডে রূপান্তর করার আগে আপনাকে অবশ্যই এগুলো ফাইল সিস্টেমে সেভ করতে হবে।

কেন ডেভেলপাররা টার্মিনালে ডিজাইন করার টুল নিয়ে আগ্রহী

বেশিরভাগ ডেভেলপার তাদের দিনের একটি বড় অংশ কোড টার্মিনাল এবং একটি UI ডিজাইন অ্যাপের মধ্যে যাতায়াত করে ব্যয় করেন। কোড লেখার উইন্ডোতেই ভিজ্যুয়াল প্রোটোটাইপিং নিয়ে আসা সফটওয়্যার ডেভেলপমেন্ট লাইফ সাইকেলের দুটি ধাপকে একটি ধাপে নিয়ে আসে।

দ্রুতগতিসম্পন্ন টিমগুলোর জন্য, একটি মাত্র প্রম্পটের মাধ্যমে বেশ কয়েকটি লেআউট অপশন তৈরি করা প্রাথমিক পর্যায়ের ডিসকভারি পর্যায়কে ত্বরান্বিত করতে পারে। বিদ্যমান কোডবেস পড়ার মাধ্যমে Claude mockup-গুলোকে ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ এবং প্রজেক্টের কম্পোনেন্ট সিস্টেমের সাথে সামঞ্জস্যপূর্ণ রাখে, যা সাধারণ ইমেজ জেনারেশনের পর সাধারণত যে ম্যানুয়াল ক্লিনিংয়ের প্রয়োজন হয় তা কমিয়ে দেয়।

Anthropic এই সংযোজনটিকে একটি “AI software engineer”-এর দিকে এক ধাপ হিসেবে দেখছে যা লজিক এবং নান্দনিকতা উভয়ই সামলাতে পারে। টার্মিনাল যদি এখন একটি মাল্টি-মোডাল ওয়ার্কস্পেস হিসেবে কাজ করতে পারে, তবে কোড লেখা এবং ইউজার এক্সপেরিয়েন্স তৈরির মধ্যকার পার্থক্য আরও কমে আসবে।

সীমাবদ্ধতা এবং প্রথাগত ডিজাইন টুলের প্রয়োজনীয়তা

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

ফিচারটি উন্নত হওয়ার সাথে সাথে যা লক্ষ্য রাখতে হবে

Anthropic-এর আপডেট অনুযায়ী, একটি সাধারণ claude update কমান্ডের মাধ্যমে এটি সক্রিয় করা যেতে পারে।

সারসংক্ষেপ: Claude Code-এর টার্মিনালের ভেতরে একটি ডিজাইন প্রম্পট যুক্ত করা ডেভেলপারদের কনসেপ্ট থেকে ভিজ্যুয়াল প্রোটোটাইপ পর্যন্ত একটি শর্টকাট প্রদান করে, তবে কাজের ধারাটি এখনও ম্যানুয়াল হ্যান্ড-অফের ওপর নির্ভরশীল এবং এতে ডেডিকেটেড UI টুলের মতো গভীরতা নেই। এর বিবর্তন নির্ধারণ করবে যে এই কমান্ডটি কেবল একটি বিশেষ সুবিধাজনক টুল হিসেবে থাকবে নাকি এটি একটি AI-চালিত ডেভেলপমেন্ট স্ট্যাকের অবিচ্ছেদ্য অংশ হয়ে উঠবে।