SkillUI: একটি কমান্ড যা যেকোনো ওয়েবসাইটকে একটি ডিজাইন সিস্টেমে পরিণত করে

সম্পাদনা করেছেন: Irena II

এমন এক বিশ্বে যেখানে একটি ডিজাইন সিস্টেম তৈরি করতে সাধারণত সপ্তাহের পর সপ্তাহ কঠোর পরিশ্রম লাগে, সেখানে এমন একটি টুল এসেছে যা এক কমান্ডে তা করার প্রতিশ্রুতি দেয়। SkillUI হল TypeScript-এ লেখা একটি CLI ইউটিলিটি, যা একটি ওয়েবসাইট, একটি রিপোজিটরি বা একটি স্থানীয় ফোল্ডার স্ক্যান করতে সক্ষম এবং AI এজেন্টদের জন্য একটি সম্পূর্ণ ডিজাইন সিস্টেমে রঙ, ফন্ট, প্যাডিং, অ্যানিমেশন এবং উপাদানগুলিকে প্যাক করতে পারে।

মূলত, টুলটি কোনও কৃত্রিম বুদ্ধিমত্তা ছাড়াই, শুধুমাত্র স্ট্যাটিক বিশ্লেষণের মাধ্যমে ইন্টারফেসের ভিজ্যুয়াল ভাষার রিভার্স ইঞ্জিনিয়ারিং করে। এটি CSS, DOM কাঠামো থেকে টোকেনগুলি বের করে এবং এমনকি সাতটি স্ক্রিনশটের মাধ্যমে hover এবং scroll-এর অবস্থাগুলিও ক্যাপচার করে। স্ট্যান্ডার্ড মোডে SkillUI HTML, CSS, JavaScript, TypeScript এবং Tailwind কনফিগারেশন বিশ্লেষণ করে, কাঠামোগত ফাইল (DESIGN.md, CLAUDE.md, SKILL.md) এবং JSON টোকেন তৈরি করে। আল্ট্রা-মোডে, যদি Playwright ইনস্টল করা থাকে, টুলটি একটি বাস্তব ব্রাউজার চালায় এবং পৃষ্ঠার সম্পূর্ণ স্ক্রিনশট, ইন্টারঅ্যাকশন স্ট্যাটাস, অ্যানিমেশন keyframes ক্যাপচার করে, GSAP, Lottie এবং Three.js-এর মতো লাইব্রেরি সনাক্তকরণ সহ। ফলাফল হল নির্দেশাবলীর একটি সম্পূর্ণ সেট যা Claude বা অনুরূপ এজেন্ট অবিলম্বে একটি অনুরূপ UI পুনর্নির্মাণের জন্য ব্যবহার করতে পারে।

এটি কেবল ডেভেলপারদের সুবিধার জন্য নয়। SkillUI মূল নকশা এবং এর পুনরুত্পাদনের মধ্যে ভারসাম্য পুনর্বন্টন করে। পূর্বে, স্টাইল কপি করার জন্য কোডের ম্যানুয়াল বিশ্লেষণ বা দীর্ঘ রিভার্স-ইঞ্জিনিয়ারিংয়ের প্রয়োজন হত; এখন প্রক্রিয়াটি প্রায় তাৎক্ষণিক এবং Node.js 18 বা তার বেশি সংস্করণ আছে এমন যে কারোর জন্য অ্যাক্সেসযোগ্য। টুলটি সম্পূর্ণ স্থানীয়ভাবে কাজ করে – কোনও ক্লাউড পরিষেবা, API কী বা ডেটা পাঠানোর প্রয়োজন নেই।

AI এজেন্টদের সাথে কাজ করার ক্ষেত্রে পার্থক্য বিশেষভাবে লক্ষণীয়। ডিজাইনকে মৌখিকভাবে বর্ণনা করার পরিবর্তে, একজন ডিজাইনার বা ডেভেলপার Claude-কে SKILL.md এবং CLAUDE.md ফাইলগুলি সরবরাহ করতে পারে, এবং মডেলটি কাঠামোগত বিন্যাসে সুনির্দিষ্ট টোকেন, অ্যানিমেশন, স্ক্রিনশট এবং ভিজ্যুয়াল রেফারেন্স পাবে। এটি প্রোটোটাইপিংকে ত্বরান্বিত করে, কিন্তু একই সাথে প্রশ্ন তোলে: যদি ভিজ্যুয়াল ভাষা স্বয়ংক্রিয়ভাবে “পড়া” যায় তবে মূল নকশার দৃষ্টি কতটা মূল্যবান থাকবে?

টুলটি শুধুমাত্র HTML, CSS এবং DOM-এ যা উপলব্ধ তা বিশ্লেষণ করে – ডিজাইনারের লুকানো উদ্দেশ্য বা JavaScript-এর আড়ালে থাকা ইন্টারফেসগুলি এটি ধরতে পারবে না। তবে এটি স্ট্যাটিক ফাইল, Tailwind ভেরিয়েবল, keyframes সঠিকভাবে বের করে এবং এমনকি জনপ্রিয় অ্যানিমেশন লাইব্রেরিগুলিও সনাক্ত করে। এই পদ্ধতি ক্লাউডের মাধ্যমে ডেটা লিকেজ বাদ দেয়, কিন্তু অন্যের নকশার সমাধানগুলি অনুলিপি করার নৈতিক প্রশ্নগুলি দূর করে না।

দীর্ঘমেয়াদে, SkillUI ইন্টারফেসের মানককরণকে ত্বরান্বিত করতে পারে: জনপ্রিয় প্যাটার্নগুলি দ্রুত পুনরুত্পাদিত হবে, এবং অনন্য প্যাটার্নগুলি তাদের সুবিধা হারাবে। একই সময়ে, এটি ছোট দল এবং ফ্রিল্যান্সারদের জন্য বিশাল বাজেট ছাড়াই পেশাদার স্তরের ভিজ্যুয়াল নির্ভুলতার অ্যাক্সেস দেয়। প্রকল্পটি সক্রিয়ভাবে বিকশিত হচ্ছে – এপ্রিল 2026 নাগাদ, টুলটি 23টি রিলিজ সম্পন্ন করেছে এবং MIT লাইসেন্সের অধীনে বিতরণ করা সংস্করণ 1.3.2-এ পৌঁছেছে।

টুলটির মূল প্রভাব কপি করার গতিতে নয়, বরং এটি মনোযোগকে কীভাবে পুনর্বন্টন করে: ভিজ্যুয়াল ভাষা তৈরি থেকে এর অর্থপূর্ণ প্রয়োগ এবং ব্যবহারকারীদের নির্দিষ্ট কাজের জন্য অভিযোজনে। এটি ডিজাইন সিস্টেমকে বিরল অভিজাত আর্টিফ্যাক্টসের পর্যায় থেকে একটি হাতিয়ারে রূপান্তরিত করে যা প্রতিটি ডেভেলপমেন্ট টিমের জন্য উপলব্ধ।

15 দৃশ্য

উৎসসমূহ

  • SkillUI GitHub or tool announcement

  • skillui - npm

  • SkillUI: Automating design system extraction into Claude Code skills

  • X - VivekIntel

  • SkillUI: Best Design System CLI for Frontend Engineers in 2026

  • X - Dan Kornas

আপনি কি কোনো ত্রুটি বা অসঠিকতা খুঁজে পেয়েছেন?আমরা আপনার মন্তব্য যত তাড়াতাড়ি সম্ভব বিবেচনা করব।