oh-my-design AI কোডিং এজেন্টে ডিজাইন সিস্টেম রেফারেন্স ও দক্ষতা যোগ করে। একটি কমান্ডে ৪৪০+ কোম্পানি ডিজাইন রেফারেন্স, ২৮ স্কিল এবং ২০ বিশেষায়িত ভূমিকা যোগ হয়।
ওপেন সোর্স। নতুন সম্ভাবনা।
মানসম্মত ওপেন-সোর্স প্রজেক্ট আবিষ্কার করুন, বেনামে প্রজেক্ট জমা দিন এবং নিজের প্রজেক্ট দাবি করে সম্পাদনা করুন।
কৌতূহল নিয়ে ওপেন সোর্স আবিষ্কার করুন।
THE FIRST COLLECTIONChromatic হলো ডিজাইন-টোকেন ফাইল থেকে ক্রস-প্ল্যাটফর্ম ডিজাইন সিস্টেম পরিচালনা করার একটি বিল্ড টুল। এটি এক্সপ্রেসিভ টোকেন এক্সপ্রেশন, থিম, YAML/JSON ইনপুট সমর্থন করে এবং Sass, CSS, iOS, Android এবং HTML স্টাইল-গাইড আউটপুট তৈরি করে।
ভ্যানিলা CSS দিয়ে তৈরি একটি হালকা, মডুলার এবং কাস্টমাইজযোগ্য ডিজাইন সিস্টেম, যা CSS ভেরিয়েবল, মোবাইল-ফার্স্ট রেসপনসিভ নীতি এবং অ্যাক্সেসিবিলিটি প্র্যাকটিস ব্যবহার করে। এতে উদাহরণ, ডিজাইন টোকেন এবং CDN-রেডি CSS ফাইল অন্তর্ভুক্ত।
DesignMD হল একটি CLI টুল যা কোনো URL থেকে জীবিত ডিজাইন সিস্টেম — রঙ, টাইপোগ্রাফি, স্পেসিং, ব্রেকপয়েন্ট, এবং ইন্টারঅ্যাকশন স্টেট — বের করে এবং AI কোডিং এজেন্টদের জন্য অপ্টিমাইজড একটি পোর্টেবল DESIGN.md ফাইল আউটপুট করে।
design-md-hub নামক ওপেন-সোর্স রিপোজিটরিতে ১২০টি ব্র্যান্ডের ডিজাইন সিস্টেম প্লেইন-টেক্সট DESIGN.md ফাইলে সংরক্ষিত, যা AI কোডিং এজেন্টদের জন্য তৈরি। প্রতিটি স্পেসিফিকেশন ব্র্যান্ডের লাইভ সাইট থেকে রিভার্স ইঞ্জিনিয়ার করা।
Codex হলো Wikimedia-এর ডিজাইন সিস্টেম, যা Vue 3 এবং CSS কম্পোনেন্ট, ডিজাইন টোকেন, আইকন এবং একটি VitePress ডকুমেন্টেশন সাইট প্রদান করে। এটি আন্তর্জাতিকীকরণ সমর্থন করে এবং WCAG 2.1 AA অ্যাক্সেসিবিলিটি মান মেনে চলে।
designlang হলো একটি Playwright-ভিত্তিক CLI যা ওয়েবসাইটের DOM থেকে DTCG টোকেন, Tailwind কনফিগ, Figma ভেরিয়েবল, shadcn থিম, কম্পোনেন্ট অ্যানাটমি, মুভমেন্ট টোকেন, ব্র্যান্ড ভয়েস, WCAG কন্ট্রাস্ট এবং মাল্টি-প্ল্যাটফর্ম এমিটারসহ একটি সম্পূর্ণ ডিজাইন সিস্টেম এক্সট্রাক্ট করে।
ডেভেলপারদের জন্য ডিজাইন সিস্টেম সংক্রান্ত বুকমার্ক, রিসোর্স, নিবন্ধ এবং টুলের একটি সংগৃহীত ইংরেজি তালিকা, যেখানে ডিজাইন টুল, ডিজাইন টোকেন, প্যাটার্ন লাইব্রেরি, কম্পোনেন্ট টেস্টিং, বই এবং আলোচনার বিষয় অন্তর্ভুক্ত রয়েছে।
Tinte একটি ডিজাইন সিস্টেম কম্পাইলার যা একটি Agent Plugin তৈরি করে। এটি একটি রেফারেন্স থেকে আইডেন্টিটি এক্সট্রাক্ট করে SKILL.md এবং tokens.css তৈরি করে এবং টোকেন বহির্ভূত রঙের জন্য লিন্টিং করে।
বাস্তব ওয়েবসাইট এবং ব্র্যান্ডগুলি থেকে সংগ্রহ করা DESIGN.md ফাইলগুলির একটি কিউরেটেড সংগ্রহ। আপনার প্রজেক্টে একটি DESIGN.md ফাইল রাখুন এবং AI কোডিং এজেন্টদের সেই ব্র্যান্ডের ভিজ্যুয়াল আইডেন্টিটি, রঙ, টাইপোগ্রাফি এবং লেআউট প্যাটার্নের সাথে সামঞ্জস্যপূর্ণ UI তৈরি করতে দিন।
Better Design হলো একটি ওপেন-সোর্স MCP সার্ভার এবং shadcn/ui রেজিস্ট্রি যা AI কোডিং এজেন্টদের ডিজাইন সিস্টেম, সেমান্টিক CSS টোকেন, কম্পোনেন্ট ওভাররাইড এবং WCAG-ভিত্তিক রিভিউ রুলস প্রদান করে। এটি ৩১টি থিম সাপোর্ট করে এবং Claude Code, Cursor ও VS Code-এর মতো ক্লায়েন্টের সাথে যুক্ত হতে পারে।
brandmd হলো একটি CLI যা কোনো ওয়েবসাইটের ডিজাইন সিস্টেম থেকে একটি spec-valid DESIGN.md ফাইল তৈরি করে যা @google/design.md লিন্টার দ্বারা স্বীকৃত। এটি Claude Code এবং Cursor-এর মতো কোডিং এজেন্টদের UI লেখার আগে ব্র্যান্ড কনটেক্সট প্রদান করে।
GlassKit হলো একটি ডিপেন্ডেন্সি-মুক্ত CSS কম্পোনেন্ট লাইব্রেরি যা iOS 26 Liquid Glass দ্বারা অনুপ্রাণিত গ্লাসমরফিজম লুক প্রদান করে। এতে থিম, ডিজাইন টোকেন এবং Shadow DOM-এর জন্য Constructable Stylesheet রয়েছে।
work-with-design-systems রিপোজিটরিতে একটি ক্লোড স্কিল রয়েছে যা ক্লোড কোড, কার্সর এবং কোডেক্সের সাথে ফিগমা ডিজাইন সিস্টেম পরিচালনা করে। এতে ইন্সপেক্ট (শুধুমাত্র পড়ার) মোড ও বিল্ড মোড আছে, যা টোকেন সামঞ্জস্য, WCAG অ্যাক্সেসিবিলিটি, কম্পোনেন্ট বিবরণ ইত্যাদি অডিট ও তিন-স্তরের tokens.css, AI রুল ফাইল ও CI-রেডি অডিট স্ক্রিপ্ট এক্সপোর্ট করে।
Marigold হলো Marigold Design System-এর একটি React ইমপ্লিমেন্টেশন, যা react-aria এবং Tailwind CSS-এর ওপর ভিত্তি করে তৈরি। এই মনোরিপো-তে কম্পোনেন্ট এবং থিম প্যাকেজ, Storybook ওয়ার্কস্পেস, Next.js ডকুমেন্টেশন সাইট, Vitest টেস্ট এবং Changesets-এর মাধ্যমে CI-চালিত রিলিজ অন্তর্ভুক্ত রয়েছে।
Design Oracle Playwright-এর মাধ্যমে একটি ওয়েবসাইট বিশ্লেষণ করে তার ডিজাইন সিস্টেম—রঙ, টাইপোগ্রাফি, স্পেসিং, কম্পোনেন্ট এবং UX প্যাটার্ন এক্সট্রাক্ট করে এবং Tailwind v4 config, React JSX, JSON ডিজাইন টোকেন বা DESIGN.md রিপোর্ট হিসেবে এক্সপোর্ট করে।
Panda হলো ডিজাইন সিস্টেমের জন্য একটি ইউনিভার্সাল, টাইপ-সেফ CSS-in-JS ফ্রেমওয়ার্ক। এটি বিল্ড টাইমে স্টাইল এক্সট্রাক্ট করে, ক্যাসকেড লেয়ার এবং ভেরিয়েবলসহ আধুনিক CSS আউটপুট দেয় এবং বেশিরভাগ JS ফ্রেমওয়ার্ক সমর্থন করে।
Dembrandt হলো একটি Node.js CLI টুল যা Playwright ব্যবহার করে ওয়েবসাইট রেন্ডার করে, DOM স্টাইল পড়ে এবং রঙ, টাইপোগ্রাফি, স্পেসিং, বর্ডার, শ্যাডো, মোশন ও কম্পোনেন্ট থেকে W3C ডিজাইন টোকেন তৈরি করে। এতে CI ড্রিফট গেট ও MCP সমর্থন আছে।