Flash DSM - যে ডিজাইন জিনোম দিয়ে আপনার এজেন্টরা তৈরি করে

আপনার ফাউন্ডেশন সাজান। প্রতিটি কম্পোনেন্ট আর মডিউল তা মেনে চলে। ডিজাইন জিনোম জানে কোনটা কোথায় থাকে, আর কিছু বদলালে কী কী বদলায়।

Figma বাদ দিন। ডিজাইন সিস্টেম দিয়ে শুরু করুন।

Figma - আর ক্যানভাস-প্রথম প্রতিটি টুল - বানানো হয়েছিল ডিজাইন সিস্টেমের ছবি আঁকার জন্য, সিস্টেম বানানোর জন্য নয়। আগে আঁকেন, তারপর নিচে একটা সিস্টেম রিভার্স-ইঞ্জিনিয়ার করেন, আর এমন কোড শিপ করেন যা কখনোই পুরোপুরি মেলে না। Flash এটাই উল্টে দেয়: আগে সিস্টেম বানান, তারপর সরাসরি এমন কোডে যান যা সত্যিই নির্ভুল। আর সিস্টেমটা মেশিন-রিডেবল বলে আপনার AI টুল যা-ই বানাক, এটা তার গার্ডরেলও হয়ে যায়।

রং, টাইপোগ্রাফি, স্পেসিং, কম্পোনেন্ট - সব যুক্ত।

Flash-কে একটা ব্রিফ, একটা URL বা একটা Figma ফাইল দিন, আর এটা আপনার জন্য ছাঁচটা কেটে দেবে: দুটো থিমেই রঙের পূর্ণ স্কেল, একটা টাইপফেস জোড়া, স্পেসিং, রেডিয়াস, মোশন, আর সেই টোকেন ব্যবহার করে এমন কম্পোনেন্ট। এটা শুরুর জায়গা, প্রোডাক্ট নয়। প্রোডাক্ট হলো এডিটরে আপনি এটা দিয়ে যা বানান।

বর্ণনা দিন

প্রম্পট লিখুন, লাইভ URL পেস্ট করুন, বা Figma ফাইল সংযুক্ত করুন। যেভাবেই হোক, Flash ডিজাইন DNA বের করে নেয়।

নিজের মতো করে নিন

Flash পুরো টোকেন স্কেল দাঁড় করিয়ে দেয় - লাইট আর ডার্কে রং, টাইপফেস জোড়া, স্পেসিং, রেডিয়াস, শ্যাডো, মোশন - আর আপনি সেখানেই এডিট করেন। ফন্ট বদলান, স্কেল নতুন করে টিউন করুন, যে সিদ্ধান্ত পছন্দ নয় সেটা বাদ দিন।

শিপ করুন

CSS ভেরিয়েবল, Tailwind কনফিগ বা Tokens Studio JSON এক্সপোর্ট করুন। সরাসরি GitHub-এ পুশ করুন।

• ব্র্যান্ড DNA বের করা হচ্ছে
• রঙের স্কেল তৈরি হচ্ছে
• টাইপোগ্রাফি মেলানো হচ্ছে
• স্পেসিং ও রেডিয়াস গড়া হচ্ছে
• মোশন ও ইফেক্ট টিউন করা হচ্ছে
• কম্পোনেন্ট ম্যাপ করা হচ্ছে

+ 8–14টি ডোমেইন-নির্দিষ্ট কম্পোনেন্ট, টোকেনে ম্যাপ করা

একটাই ছাঁচ। কাপড় যেটা খুশি।

দর্জির ছাঁচে থাকে মাপ আর সেলাই। কাপড়ের রং তাতে কখনো থাকে না। এই ভাগটার জন্যই একটা সিস্টেম দিয়ে গোটা কোম্পানিকে সাজানো যায়।

যে ছাঁচ সবাই ভাগ করে নেয়

গড়ন হলো সেই অংশ, যা বদলানো উচিত নয়: একটা কার্ড কী দিয়ে তৈরি, একটা বাটন তার লেবেলের চারপাশে কতটা জায়গা রাখে, কোন কোন স্টেট আছে। Flash এটা এক জায়গায় রাখে, তাই প্রতিটি প্রোডাক্ট একই ছাঁচ থেকে কাটা হয়।

যে কাপড় প্রতিটি প্রোডাক্ট বেছে নেয়

রং, টাইপোগ্রাফি, রেডিয়াস, মোশন। থিম বসে গড়নের ওপরে, আর গড়নে হাত না দিয়েই বদলে যায়। তাই এক টিমের চেহারা অন্য টিমের সঙ্গে একটুও না মিললেও দুই টিম প্রতিটি কম্পোনেন্ট শেয়ার করতে পারে।

সিস্টেম কোথায় আটকে যায়

এমন একটা কম্পোনেন্ট শিপ করুন যেটা একই সঙ্গে একটা নির্দিষ্ট নীলও, আর পরের টিম বলবে ওটা আমাদের নীল নয়, তারপর নিজেরটা লিখবে। দুই মাস পরে আপনি দুটো সিস্টেম মেইনটেইন করছেন। কাপড়টা আলাদা রাখলেই এটা ঠেকানো যায়।

ডিজাইন সিস্টেম কি কাজটাকে একঘেয়ে করে দেয়?

যেসব সিদ্ধান্ত বারবার নেওয়ার দরকার নেই, এটা সেগুলো মিটিয়ে দেয়। আর ঠিক সেটাই জায়গা করে দেয় সেই অংশগুলোর জন্য, যা কেবল আপনিই বানাতেন।

প্রতিটি ডিজাইন সিস্টেম স্বতন্ত্র

Flash আপনাকে কোনো টেমপ্লেট ধরিয়ে দেয় না। ফাউন্ডেশন, কম্পোনেন্ট ও মডিউল - সবই আপনার ব্র্যান্ডের মাপে গড়া, উল্টোটা নয়।

আপনার নিজস্ব স্টাইল

রং, টাইপোগ্রাফি ও স্পেসিং আপনিই ঠিক করেন - কোনো প্রিসেট প্যালেট থেকে বাছাই নয়।

আর্ট, ইফেক্ট ও মোশন

ইলাস্ট্রেশন, ইফেক্ট, অ্যানিমেশন ও ট্রানজিশন সিস্টেমেরই অংশ - একটা স্ক্রিনে জুড়ে দেওয়া বাড়তি কিছু নয়।

কম্পোনেন্ট ও মডিউল, আপনার মতো করে

আপনার প্রোডাক্টের ভিশনের সঙ্গে মানানসই নতুন কম্পোনেন্ট আর মডিউল বানান। Flash আপনাকে কোনো নির্দিষ্ট লাইব্রেরিতে আটকে রাখে না।

এখনও কোনো গ্রাহকের লোগো নেই।

Flash নতুন, আর উদ্ধৃতি জোগাড় করা সহজ। টাকা দেওয়ার আগে নিজেই যাচাই করতে পারেন, এমন তিনটি জিনিস এখানে।

উদাহরণগুলো খুলে দেখুন

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

ফাইল নিয়ে চলে যেতে পারেন

এক্সপোর্ট মানে tokens.css, একটা Tailwind কনফিগ আর Tokens Studio JSON: সাধারণ ফাইল, চাইলে হাতেও লিখতে পারতেন। আমরা থাকি বা না থাকি, ওগুলো চলবে।

তারিখগুলো পড়ুন

প্রতিটি ফিক্স আর ফিচারের সঙ্গে শিপ করার দিনটা লেখা থাকে। কাজ ধীর হয়ে গেলে কেউ বলার আগেই এখানে দেখতে পাবেন।

প্রশ্ন আছে?

Flash কী?

Flash একটি ডিজাইন সিস্টেম বিল্ডার। একটি প্রম্পট, লাইভ URL বা Figma ফাইল থেকে এটি পুরো টোকেন আর্কিটেকচার দাঁড় করিয়ে দেয় - লাইট ও ডার্কে রঙের স্কেল, টাইপোগ্রাফি জোড়া, স্পেসিং, রেডিয়াস, শ্যাডো, মোশন - সঙ্গে সেই টোকেনে ম্যাপ করা ডোমেইন-নির্দিষ্ট কম্পোনেন্ট। আপনি এডিট করেন, তারপর CSS, Tailwind, Tokens Studio JSON এক্সপোর্ট করেন বা GitHub-এ পুশ করেন।

AI বিল্ডারদের কেন ডিজাইন সিস্টেম দরকার?

Lovable, v0 বা Bolt-এর মতো টুল দ্রুত স্ক্রিন বানায়, কিন্তু কিছু একটা ধরে না রাখলে প্রতিটি নতুন প্রম্পট নিজের মতো রং আর স্পেসিং বানিয়ে নেয়। ডিজাইন সিস্টেমই সেই নিয়মের স্তর: এই টুলগুলোকে মেশিন-রিডেবল টোকেন দিন, আউটপুট ব্র্যান্ডের বাইরে যাবে না, অ্যাক্সেসিবল কনট্রাস্ট বজায় রাখবে, আর আগে শিপ করা কোডের সঙ্গে মিলে যাবে। Flash সেই স্তরটা বানায় আর টুলগুলো যেসব ফরম্যাট সত্যিই পড়ে, সেভাবেই পরিবেশন করে - kit.md, টোকেন ফাইল আর MCP।

Flash কাদের জন্য?

ডিজাইন ইঞ্জিনিয়ারদের জন্য - একা হোন বা টিমে - যাঁরা UI-এর মানের দায়িত্বে থাকেন, কিন্তু ডিজাইন সিস্টেম পাহারা দেওয়ার সময় পান না। দ্রুতগতির ডেভ টিমের জন্যও, যাঁদের এমন সিস্টেম দরকার যা তাঁদের শিপ করার গতির সঙ্গে তাল মেলায়।

Flash কি বিনামূল্যে ব্যবহার করা যায়?

শুরুতে হ্যাঁ। প্রতিটি অ্যাকাউন্ট একটি Genome বানাতে পারে - মানে একটি ডিজাইন সিস্টেম আর যা কিছু সেটা থেকে পড়ে - বিনামূল্যে, কার্ড ছাড়াই। Pro, Team ও Studio যোগ করে মডিউল পুল, আপডেট সিঙ্ক, শেয়ার্ড Genome আর ক্লায়েন্ট হ্যান্ডঅফ - কোনটা কোন প্ল্যানে আছে, মূল্যের পেজে দেখুন।

আমার আগের ডিজাইন কি ইম্পোর্ট করা যাবে?

Figma ফাইল সংযুক্ত করুন, যেকোনো লাইভ ওয়েবসাইটের URL পেস্ট করুন, বা GitHub ও Storybook থেকে টানুন। Flash আগের ডিজাইন DNA বের করে সেটাকে কাঠামোবদ্ধ, এডিট করার মতো টোকেনে রূপ দেয়।

Flash কি Figma আর আমার কোডের সঙ্গে সিঙ্কে থাকে?

আজ যা সত্যিই আছে: Figma, URL বা কোডবেস থেকে ইম্পোর্ট; CSS, Tailwind আর Tokens Studio JSON এক্সপোর্ট; GitHub-এ পুশ; Flash প্লাগইন দিয়ে Figma-তে ভেরিয়েবল পাঠানো। আরও গভীর দুই দিকের সিঙ্ক - কোড আর Figma থেকে বদল নিজে থেকেই ফিরে আসা - ধাপে ধাপে চালু হচ্ছে। কাজ শেষ হয়ে গেছে বলে ভান করার চেয়ে কম প্রতিশ্রুতি দেওয়াই আমাদের পছন্দ।

কী কী এক্সপোর্ট করা যায়?

প্রোডাকশন-রেডি ফরম্যাট: CSS কাস্টম প্রপার্টিসহ tokens.css, একটি tailwind.config.js এক্সটেনশন, Figma-র সঙ্গে আসা-যাওয়া করা Tokens Studio JSON, আর কম্পোনেন্ট স্পেক। সরাসরি GitHub-এ পুশও করা যায়।

এটা কি সত্যিকারের ব্যবহারযোগ্য কোড তৈরি করে?

এক্সপোর্টগুলো সেই একই CSS ভেরিয়েবল আর Tailwind টোকেন, যা আপনি হাতে লিখতেন - সরাসরি কোডবেসে বসানোর মতো। কোনো প্রোপ্রাইটারি রানটাইম নেই, লক-ইন নেই।

AI UI জেনারেটর থেকে Flash কীভাবে আলাদা?

স্ক্রিন জেনারেটর দেয় মকআপ। Flash দেয় তার নিচের সিস্টেমটা: সামঞ্জস্যপূর্ণ স্কেল, সিমান্টিক টোকেন, লাইট ও ডার্ক দুই মোড, আর এমন কম্পোনেন্ট যা হার্ড-কোডেড মানের বদলে টোকেন ব্যবহার করে - যাতে এরপর আপনি যা-ই বানান, সব সামঞ্জস্যপূর্ণ থাকে।

Flash যা তৈরি করে তার মালিকানা কি আমার?

সম্পূর্ণভাবে। প্রতিটি টোকেন, কম্পোনেন্ট স্পেক ও এক্সপোর্ট আপনার - ক্লায়েন্টের কাজ, বাণিজ্যিক পণ্য বা নিজের ডিজাইন টুলে ব্যবহার করুন।